Hulp nodig met een klein deel van mijn website.

Status
Niet open voor verdere reacties.
K

Kaffo

Gebruiker
Lid geworden
16 mrt 2013
Berichten
15
Beste Helpmij lezers!

Drie weken geleden ben ik begonnen met een website bouwen, www.zoveelkorting.nl Kortingcodes en aanbiedingen . Ik heb wat moois opgebouwd maar moet nog veel leren.
Er is een grote ding waar ik op vastloop en al dagen mee bezig ben en niet verder ben gekomen.

Ik wil namelijk een button hebben dat wanneer je daarop klikt gelijk een soort klein text met informatie erop komt.
Ik geef een paar voorbeelden
http://www.actiepagina.nl/kortingscodes?gclid=COHU0N7ygbYCFUfMtAodMRIALg Als u bijvoorbeeld op ''Klik hier voor kortingscode'' klikt dan komt gelijk het kortingscode.
Of
http://www.actiecode.nl/winkels/winkel/zalando als u op ''klik hier voor uw kortingscode'' klikt komt gelijk het kortingscode.

Hoe krijg ik dit voorelkaar? Ik waardeer heel erg uw hulp.

Groetjes !
 
Laatst bewerkt:
Hoi Kaffo,
Welkom op het forum! :)

Eh, ja, als je om 8 uur 's avonds hier een vraag stelt, zou ik niet heel erg verbaasd zijn als je diezelfde zaterdagavond nog geen antwoord hebt. Dit forum draait op vrijwilligers die maar net achter hun kastje moeten zitten (en er iets zinnigs over kunnen zeggen); en er zijn ook andere openstaande vragen. ;)

Maar goed, in beide voorbeeld-gevallen hebben ze het gedaan met javascript:
  • Eigenlijk staat op de pagina al de actiecode, maar die is met css onzichtbaar gemaakt.
  • Bij een klik op de button wordt met javascript de css aangepast: de actiecode wordt zichtbaar gemaakt, en de knop "klik hier" verdwijnt.
  • Tegelijkertijd wordt, ook met een javascript-functie, een venster geopend naar de winkel waar je die korting kunt krijgen.
Om verder te komen: de zoektermen zijn javascript show/hide.

Met vriendelijke groet,
CSShunter
 
Dankje voor je antwoord CSS
En inderdaad je hebt gelijk :P, Maar ik kom er eerlijk gezegd er nog steeds niet uit.

Iemand die me misschien kan helpen?
 
<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
div {
position: absolute;
left: 100px;
top: 200px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>

<div id="sub3">Message Box</div>

</body>


Ik heb iets gevonden, Maar waar plaats ik die div? Want als ik hem op CSS plaats dan gebeurt er niks en als ik hem bij <head> plaats zoals daar staat dan is me hele website opeens weg.
</html>
 
Hoi Kaffo,
Wat er moet gebeuren, is dat de code op dezelfde plek moet komen te staan als de knop. Tegelijkertijd met het zichtbaar maken van de code moet dan de knop van het toneel verdwijnen. Er is dus een "dubbele show/hide" nodig: als de één aan staat, staat de ander uit, en omgekeerd.
Daarmee kunnen de knop (de <input>-button) en de regel met de kortingscode pal onder elkaar staan in de html: één van de twee is altijd maar zichtbaar, en ze zitten dan op dezelfde plaats.

Maar eerst moet er nog wat anders gebeuren: er valid html van maken! :) D.w.z.:
  • Er moet een Doctype boven komen.
  • Er moet een <meta> met de "charset" in de <head> komen.
  • De aanduiding <script language="JavaScript"> is verouderd/fout en moet worden: <script type="text/javascript">.
  • Een <input>-element mag niet los in de <body> staan, het moet in een ander element zitten.
  • Achter de onclick="..." staat een ; die er niet hoort.

Verder wordt het (on)zichtbaar maken in je gebruikte code met de visibility-eigenschap geregeld. Dat heeft als nadeel dat het element wel onzichtbaar wordt, maar het oppervlak van het element blijft bestaan: daar kan niets anders komen.
Het kan beter met de display-eigenschap: zet je die op {display: none;} dan is het hele element weg, en neemt ook geen ruimte in beslag.

In de html kan het bv. worden:
HTML: 
<div id="winkel-1" class="kortingscode">
	<input type="button" value="Toon kortingscode!" onclick="showcode('winkel-1')">
	<p class="code">
		<span><a href="#" onclick="hidecode('winkel-1'); return false">X</a></span>
		Uw code is: <strong>Helpmij-1526</strong> Kopieer de code en <a href="#">Ga naar deze winkel</a>!
	</p>
</div>
Bij de <a href="#">Ga naar deze winkel</a> moet de link naar die winkel staan.
De X is hierbij een klein knopje om de code weer uit te zetten en de knop weer te tonen.
De <a href="#"> bij het X-knopje blijft zo: na het klikken op het kruisje moet nergens naar toe gegaan worden.

Het bijbehorende javascript kan zijn:
[JS]<script type="text/javascript">
//<![CDATA[
function showcode(id) {
document.getElementById(id).getElementsByTagName('input')[0].style.display='none';
document.getElementById(id).getElementsByTagName('p')[0].style.display='block';
}
function hidecode(id) {
document.getElementById(id).getElementsByTagName('input')[0].style.display='inline-block';
document.getElementById(id).getElementsByTagName('p')[0].style.display='none';
}
//]]>
</script>[/JS]
Het beste is om het javascript helemaal op het eind van de pagina-code te zetten, vlak voor de </body></html>.
Het werkt als volgt:
  • Eerst wordt met document.getElementById(id) het blok van de betreffende winkel opgeroepen (via de id die in de html is opgegeven).
  • Dan wordt het eerste (en enige) input-element binnen dat blok genomen: getElementsByTagName('input')[0]. In javascript is [0] het eerste element, [1] het tweede element van die soort, enz.
  • Die input wordt onzichtbaar gemaakt: style.display='none'.
  • Vervolgens wordt de <p>-regel van het code-blok genomen en zichtbaar gemaakt (die staat bij het openen van de pagina via de css op onzichtbaar).
  • Klik je op een kruisje, dan gebeurt het omgekeerde.
  • De rest is een kwestie van vormgeving met css-opmaak.
Als voorbeeld:
Met vriendelijke groet,
CSShunter

[edit]PS[/edit]
Met een wat ondoorzichtiger javascript kan je volstaan met onclick="showcode(this)" en onclick="hidecode(this)" voor elke winkel, in plaats van dat je tekens een andere id moet invullen.
 
Laatst bewerkt:
Csshunter je bent echt geweldig man!
Ik ga nu direct met jouw informatie aan de slag om te kijken of ik eruit kom.
Nogmaals geweldig.
 
Beste CSS, ik heb alles doorgenomen en ik snap nu hoe alles een beetje in elkaar zit.

Maar nu wil ik het volgende.
winkelmerk buttons3 copy.jpgwinkelmerk buttons4 copy.jpg

Wat jij had gedaan was perfect. Alleen zou ik inplaats van ''Toon korting'' button eigenlijk een soort tekst link zonder underline willen in het wit in het rode kant van het button die ik als eerste image bij heb gevoegd in dit post.
En dat het kortingscode dan zichtbaar word in het witte gedeelte van het tweede plaatje die ik heb bijgevoegd.

Sorry voor je moeite!
Dankje wel
 

Bijlagen

  • winkelmerk buttons4 copy.jpg
    winkelmerk buttons4 copy.jpg
    29,8 KB · Weergaven: 14
Laatst bewerkt:
Aha, in dat geval kan het veel eenvoudiger. Dan hoeft er geen terugweg "hide" te zijn.
Dan:
  • Plak je de twee images naast elkaar, dat scheelt download-tijd.
  • Je gebruikt ditzelfde image als background-image voor zowel de button als de code.
  • Met de css-eigenschap background-position wordt het linker of het rechterdeel van de achtergrond getoond.
  • Bij een klik wordt met javascript de button verdonkeremaand, de code getoond, en de background-position veranderd.
HTML: 
<div class="kortingscode">
	<a href="#" onclick="showcode(this); return false">Toon kortingscode</a>
	<code>Helpmij-1526</code>
</div>
[JS]<script type="text/javascript">
//<![CDATA[
function showcode(t) {
t.style.display='none';
t.parentNode.getElementsByTagName('code')[0].style.display='block';
}
//]]>
</script>
[/JS]
Met als css:
Code: 
.kortingscode a {
	width: 375px;
	padding: 15px 10px;
	display: block;
	background: url(images/kcode.png) no-repeat 0 50%;
	color: white;
	font-size: 1.1em;
	text-decoration: none;
	}
.kortingscode code {
	width: 210px;
	padding: 15px 0 15px 185px;
	background: url(images/kcode.png) no-repeat -395px 50%;
	color: black;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-size: 1.1em;
	display: none;
	}
=======
Vervolgens kan je dit met javascript nog verder automatiseren, want binnen de <div class="kortingscode"> is steeds alles hetzelfde behalve de code zelf.
Met een extra brokje javascript loop je dan (zodra de pagina is ingeladen) alle div's van de pagina langs. Zit er een div met de class="kortingscode" bij, dan wordt de button met de onclick toegevoegd, en de tag <code>...</code> om de code heen gezet:
[JS]var allDivs=document.getElementsByTagName('div');
for (var i=0; i<allDivs.length; i++){
if (allDivs.className=="kortingscode"){
allDivs.innerHTML='<a href="#" onclick="showcode(this); return false">Toon kortingscode<\/a><code>'+allDivs.innerHTML+'<\/code>';
}
}[/JS]
Dan hoef je alleen in de html te zetten:
HTML: 
<p>Dit is Winkel 1, met een prachtige korting van 75% op het artikel ...!</p>
<div class="kortingscode">Helpmij-1526</div>
...
enz.
Gemak dient de mens! :D

Met vriendelijke groet,
CSShunter
___________
PS: Images als deze knop kan je het beste als .png-bestand opslaan, dan blijven ze mooi scherp. Met opslaan als .jpg wordt het erg vlekkerig.
 
CSS je bent echt geweldig man, ik waardeer je werk heel erg.

Ik wil graag iets terug doen voor je werk, eventueel een betaling. Ik was er al dagen mee bezig en daar komt de hero opeens, gelijk wat ik wou hebben.
Ik stuur je een p.m!


Ik zie dat ik geen p.m kan versturen! Kan jij me jouw mail adres versturen?
Groetjes!
 
Laatst bewerkt:
Beste CSS,

Sorry dat ik je weer lastig val, als ik onderstaande code invoer in CSS en dus alleen bij background de url wijzig dan gebeurt er helemaal niks, de png bestand wordt niet zichtbaar. Maar het script zelf werkt gewoon wel.
Als ik die ''a'' en ''code'' weghaal bij de CSS namen dan wordt de png button wel zichtbaar maar dan klopt het denk ik niet meer.

Moet ik handmatig New CSS rules aanmaken en dan jouw codes zo invoeren? en hoe doe ik dat precies ?

.kortingscode a {
width: 375px;
padding: 15px 10px;
display: block;
background: url(../kortingscode.png) no-repeat 0 50%;
color: white;
font-size: 1.1em;
text-decoration: none;
}
.kortingscode code {
width: 210px;
padding: 15px 0 15px 185px;
background: url(../codeshow) no-repeat -395px 50%;
color: black;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
font-size: 1.1em;
display: none;
}
 
Laatst bewerkt:
Hoi Kaffo,
Inderdaad, zonder die "a" en de "code" in de css kan het niet werken.
Moet ik handmatig New CSS rules aanmaken en dan jouw codes zo invoeren? en hoe doe ik dat precies ?
Klik om te vergroten...
Dat weet ik niet: dat hangt van je webeditor af (Dreamweaver, een CMS of een andere editor waarmee de site gemaakt wordt?).

Waarschijnlijk ligt het aan "omgevingsfactoren" waardoor het image niet komt opdagen: andere css op de pagina die het verhindert.
Dat valt zo niet te zien, dus de oplossing ook niet.

Kan je een testpagina online zetten?

Met vriendelijke groet,
CSShunter
__________
PS: Een tegenprestatie hoeft echt niet. Maar als je iets kwijt wilt, zijn er goede doelen genoeg, bv. Oxfam Novib of Warchild of de vereniging Helpmij. :)
 
Ik ben mijn site met dreamweaver aan het maken.

Ik zeg heel eerlijk erbij dat het een zooitje is met mijn codes allemaal doorelkaar!

Maar we zijn er bijna, als ik een leeg html pagina maak dan werkt hij wel www.zoveelkorting.nl/Blank.html
Dus inderdaad het ligt aan mijn website!

http://www.zoveelkorting.nl/Drogisterij.html
Hier komen de knoppen te staan uiteindelijk.
Als je in mijn bron kijkt zie je paar CSS bovenin, zouden die er wat mee te maken hebben?

Groetjes!

_______________

Als ik het doneer naar vereniging Helpmij. maakt u er ook profijt van :) ?
 
Hallo CSS!

Hij werkt precies zoals ik het wil. http://www.zoveelkorting.nl/Drogisterij.htmlNu nog uitvinden dat als je op de button klikt direct het desbetreffende website komt, en als ik hem in de CSS stylesheet doe dan werkt het niet. is niet erg maar zo is hij niet afgeschermd :P


Maar je bent echt geweldig man. Ik wil je heel erg bedanken en een tegenprestatie van mijn kant is mijn genoegen! You made my day!
____
Ps. Als ik het doneer maakt u er ook profijt van :) ?


Edit: Ik heb hem in het midden :)
 
Laatst bewerkt:
Hoi Kaffo,
Ik heb hem in het midden. > mooi zo! :thumb:

=======
Nu nog uitvinden dat als je op de button klikt direct de desbetreffende website komt.
Klik om te vergroten...
Daar is wat aanvullend javascript voor nodig.

Probleem is, dat als je direct naar de winkel-website gaat, die site meteen open kan vliegen (op een nieuw tabblad). Dat hangt van de browser en de browser-instellingen van de bezoeker af.
Maar als je meteen doorvliegt, zie je helemaal niet het vakje met de kortingscode. :shocked:
  • Dan moet de bezoeker maar zo slim zijn om terug te gaan naar de oude pagina, waar dan inmiddels de kortingscode in volle glorie aanwezig is.
Dat zal lang niet iedereen in de gaten hebben, en het is in elk geval niet gebruikersvriendelijk.

De beste oplossing lijkt me om een lege regel onder het kortingsbalkje te zetten, die na de klik een link "Ga nu naar de winkel" laat zien.
Ook dat kan met javascript geautomatiseerd worden.
In de html:
HTML: 
...
<p class="kortingsbedrag">Drogisterij € 3,95 korting bij bestellingen boven de € 20,-.</p>
<div class="kortingscode"><a href="http://www.dogisterij-site.nl/">code-1526</a></div>
...
En als javascript:
[JS]<script type="text/javascript">
//<![CDATA[
var allDivs=document.getElementsByTagName('div');
for (var i=0; i<allDivs.length; i++){
if (allDivs.className=="kortingscode"){
var link=allDivs.getElementsByTagName('a')[0].href;
var code=allDivs.getElementsByTagName('a')[0].innerHTML;
var newHtml ='<a href="#" onclick="showcode(this,\''+link+'\'); return false">';
newHtml+='Klik hier voor je kortingscode<\/a><code>'+code+'<\/code><p>&nbsp;<\/p>';
allDivs.innerHTML=newHtml;
}
}

function showcode(t,l) {
t.style.display='none';
t.parentNode.getElementsByTagName('code')[0].style.display='block';
t.parentNode.getElementsByTagName('p')[0].innerHTML=
'<a href="'+l+'" target="_blank">Ga hier naar deze winkel om te bestellen!<\/a>';
}
//]]>
</script>[/JS]
Plus nog wat aanvullende css.

Idee?

Met vriendelijke groet,
CSShunter
 
Beste Css,

Mijn excuses voor mijn late reactie. Ik ben heel erg veel bezig geweest met school examens.
Ja het is inderdaad een goed idee dankje wel !

Ik waardeer het hulp dat je me gaf.

Groetjes,
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan