Thread: Show/Hide div
-
07-05-2010, 17:39 #1
Show/Hide div
Hallo,
Ik zoek een scriptje zodat ik mijn socialnetworkbuttons kan hiden. ( de knoppen die je hier links ziet)
Ik zou dit graag doen door er een pijltje (afbeelding) bij te plaatsen (<-) om het te verbergen (liefst met een 'slide' effect) en dat dan verandert in (->) zodat het terug getoond kan worden.
Ik heb al veel show/hide scripts gezocht en gevonden, maar geen enkele die dit horizontaal doet én slide én waar de pijl verandert.
Kan iemand mee helpen?
Ik heb een beetje basiskennis van HTML/CSS (heb de genoemde site gemaakt) maar JS ken ik niet echt.
Groeten en bedankt!
BramYu-gi-oh kaarten te koop klik!!no votes
-
-
07-05-2010, 18:20 #2Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Ge zegt duidelijk dat ge naar een JS oplossing zoekt, toch gebruikt ge de xHTML/CSS prefix. Is het nu zo moeilijk om die regels eens te volgen of speelt ge gewoon met mijn voeten?
no votes
-
07-05-2010, 18:39 #3Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
no votes
-
07-05-2010, 18:59 #4
Gaat makkelijk met jQuery :
.hide() – jQuery API
.show() – jQuery API
Na een korte introductie zou je normaal wel deze dingen makkelijk moeten kunnen maken, jQuery is redelijk "makkelijk" om zoiets mee te maken.no votes
-
07-05-2010, 19:41 #5
WTF? Uhm, ik heb xHTML/JS gebruikt en daar ben ik 1000% zeker van..
Merci Audiosonic.
Edit: Mam: exact zoiets! Heb je misschien een tutorial ofzo? Zo niet probeer ik het wel op te maken uit de code
Oja, die 'toggle' zou wel een afbeelding moeten zijn en zou moeten wisselen als het al dan niet verborgen is (maar gaat dat niet met gewoon 'onclick'?)
Yu-gi-oh kaarten te koop klik!!no votes
-
08-05-2010, 10:50 #6Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
zoiets dan ongeveer!?. Kijk goed naar de code het is echt heel simpel om te maken!
-no votes
-
08-05-2010, 11:15 #7Approved 9liver
- Registered
- 18/04/03
- Location
- Hasselt
- Posts
- 14,855
- iTrader
- 23 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 10/79
no votes
-
08-05-2010, 12:58 #8
Mam & benny: extreem hard bedankt! Mercikes, ik ga me er straks ofzo aanzetten en ik post hier het resultaat ^^
GroetenYu-gi-oh kaarten te koop klik!!no votes
-
08-05-2010, 16:10 #9
Ik was net aan het denken dat als ik het op de volgende manier doe, het toch telkens bij een nieuwe pagina terug getoond wordt (niet?)
Enig idee hoe je dit kan tegengaan?Yu-gi-oh kaarten te koop klik!!no votes
-
08-05-2010, 16:54 #10Approved 9liver
- Registered
- 18/04/03
- Location
- Hasselt
- Posts
- 14,855
- iTrader
- 23 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 10/79
Plugins | jQuery Plugins
Kom je al even mee toe denk ik
no votes
-
08-05-2010, 17:14 #11
Uhm, en voor een jQuery leek?
Yu-gi-oh kaarten te koop klik!!no votes
-
08-05-2010, 17:16 #12Approved 9liver
- Registered
- 18/04/03
- Location
- Hasselt
- Posts
- 14,855
- iTrader
- 23 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 10/79
no votes
-
08-05-2010, 17:28 #13Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Ge moet die plugin zijn readme ook doorlezen. Daar staat alles in uitgelegd.
http://plugins.jquery.com/files/jquery.cookie.js.txt
Komt een beetje op dit neer. Uw pagina wordt ingeladen, de jquery library en de plugin worden geladen en hij komt aan uw bestand:
'k Heb het niet getest, dus er kan wel ergens een syntaxfoutje inzitten. Maar normaal zou dat moeten werken. Ge moet het enkel vertalen naar de code die ge al hebt om te togglen.Code:$(document).ready( init ); function init() { if($.cookie('hide_social') === true) { $("#socialMediabuttons").addClass("hidden"); } $("#socialMediabuttons .closebtn").bind("click", toggleBtns); } function toggleBtns(e) { //logica om te togglen $("#socialMediabuttons").toggleClass("hidden"); if("#socialMediabuttons").hasClass("hidden")) { $.cookie('hide_social', true); } else { $.cookie('hide_social', false); } }Last edited by Zero Grav; 08-05-2010 at 18:26.
no votes
-
08-05-2010, 19:30 #14
Hmm, maar ik heb alles een beetje aangepast.. Ik heb nu dit:
CSS
Belangrijkste JS:Code:/*social network buttons*/ #colleft { width: 140px; margin-top: 10px; float: left; overflow: hidden; height: 220px; left: 0; margin-top: -85px; position: fixed; top: 30%; background-color: #FFF; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #FFE500; border-right-color: #FFE500; border-bottom-color: #FFE500; } #buttonhead { margin-bottom: 5px; margin-top: 5px; margin-left: 7px; } #buttontop { font-family: Verdana; font-size: 10px; color: #5096C2; font-weight: bold; } #colleft ul { margin-left: 15px; margin-top: 20px; } #colleft ul li { margin-top: 7px; list-style-type: none; } #colleft #hidePanel { margin-top: 15px; height: 24px; padding-top: 4px; padding-right: 0px; padding-left: 27px; } #colleft #hidePanel a { font-family: Verdana; font-size: 9px; color: #5096C3; } #colleft #hidePanel a:hover { color: #FFE500; font-family: Verdana; font-size: 9px; } #showPanel { position: inherit; left: 0; float: left; display: none; width: 20px; height: 30px; cursor: pointer; margin-top: 20px; overflow: hidden; position: fixed; top: 30%; background-color: #FFF; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #FFE500; border-right-color: #FFE500; border-bottom-color: #FFE500; } #showPanel span{ display:block; font-size:18px; height:20px; width:20px; color: #5298C6; padding-left: 9px; padding-top: 3px; }
Belangrijkste deel HTML:Code:jQuery(document).ready(function(){ $("#hidePanel").click(function(){ $("#panel").animate({marginLeft:"-140px"}, 500 ); $("#colleft").animate({width:"0px", opacity:0}, 400 ); $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200); }); $("#showPanel").click(function(){ $("#colright").animate({marginLeft:"140px"}, 200); $("#panel").animate({marginLeft:"0px"}, 400 ); $("#colleft").animate({width:"140px", opacity:1}, 400 ); $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow"); }); });
Ik hoop dat je er aanuit kan?Code:<div id="colleft"> <div id="buttonhead"><span id="buttontop">Bezoek ons ook hier:</span></div> <div id="panel"> <ul> <li><a href="http://www.youtube.com/user/NotenbalkersSchaffen" target="_blank"><img src="http://www.9lives.be/forum/images/template/ytbutton.png" width="42" height="42" alt="youtube logo" title="Bezoek ons Youtube kanaal"/></a></li> <li><a href="http://www.facebook.com/group.php?gid=55593256266" target="_blank"><img src="http://www.9lives.be/forum/images/template/fbbutton.png" width="42" height="42" alt="facebook logo" title="Bekijk onze Facebook groep" /></a></li> <li><a href="http://verenigingen.nieuwsblad.be/vereniging/de-notenbalkers-0" target="_blank"><img src="http://www.9lives.be/forum/images/template/nieuwsbladbutton.png" width="42" height="42" alt="nieuwsblad logo" title="Klik door naar het nieuwsblad" /></a></li> </ul> <div id="hidePanel"><a href="#"> « Verberg dit venster</a></div> </div> </div> <div id="showPanel"><span>»</span></div>
Maar ik begrijp wel wat je ongeveer deed in jouw voorbeeld, maar nu verandert het niet meer van classes, dus weet ik niet echt wat te doen. (maar tot nu toe werkt het al ^^)
Hmmm, om een of andere rede werkt ofwel fancybox niet meer, ofwel het hiden niet meer..?
Last edited by Homer`; 08-05-2010 at 20:23.
Yu-gi-oh kaarten te koop klik!!no votes
-
08-05-2010, 21:43 #15Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Ik neem aan dat dit wel ongeveer doet wat ge wilt.
Code:jQuery(document).ready(function(){ toggleSocialMedia(); }); function toggleSocialMedia() { if($.cookie('socialMedia') === true) { $("#colright").animate({marginLeft:"140px"}, 200); $("#panel").animate({marginLeft:"0px"}, 400 ); $("#colleft").animate({width:"140px", opacity:1}, 400 ); $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow"); $.cookie('socialMedia', true); } else { $("#panel").animate({marginLeft:"-140px"}, 500 ); $("#colleft").animate({width:"0px", opacity:0}, 400 ); $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200); $.cookie('socialMedia', false); } }no votes


