Archief - Show/Hide div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
H

Homer`

Legacy Member
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!


Bram
Z

Zero Grav

Legacy Member
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?
H

Homer`

Legacy Member
Zero Grav zei:
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?
Klik om te vergroten...

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'?)
H

Homer`

Legacy Member
Mam & benny: extreem hard bedankt! Mercikes, ik ga me er straks ofzo aanzetten en ik post hier het resultaat ^^

Groeten
H

Homer`

Legacy Member
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?
Z

Zero Grav

Legacy Member
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:

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);
     }
}

'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.
H

Homer`

Legacy Member
Hmm, maar ik heb alles een beetje aangepast.. Ik heb nu dit:

CSS
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 JS:
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");
 });
});

Belangrijkste deel HTML:
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="https://www.beyondgaming.be/forums" 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="https://www.beyondgaming.be/forums" 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="https://www.beyondgaming.be/forums" width="42" height="42" alt="nieuwsblad logo" title="Klik door naar het nieuwsblad" /></a></li>
      </ul>
      <div id="hidePanel"><a href="#"> &laquo; Verberg dit venster</a></div>
    </div>
</div>

<div id="showPanel"><span>&raquo;</span></div>

Ik hoop dat je er aanuit kan?
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..? :s
Z

Zero Grav

Legacy Member
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);
	}
}
H

Homer`

Legacy Member
OK, kzal het morgen eens testen. Bedankt.


Enig idee waarom fancybox en de slide elkaar tegenwerken?
Voor fancybox gebruik ik volgende scripts:
Code: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.transition.js"></script>

En voor slide dingen degene die hier gebruikt worden.
H

Homer`

Legacy Member
Hmm, je cookie script werk niet. Ik heb jouw code gewoon in een nieuwe .js document geplakt en even gecontroleerd of het overeenkomt met het hide effect bestand.

Vreemd..
H

Homer`

Legacy Member
Dat document in een nieuwe .js bestand en dat bij in de head? En dat wat je gistere had gepost in een andere .js bestand?

Dat heb ik nu gedaan en het werkt nog niet. Ik zie wel dat hij een cookie geschreven heeft (socialMedia) maar als je juist op de pagina komt krijg je heel efkes de buttons te zien, maar ze verdwijnen direct (met slide effect). Ge kunt ze dan wel terug open doen, maar als ge dan naar ne andere link gaat is het weer hetzelfde.

Is het gemakkelijker als ik een voorbeeld upload?
Z

Zero Grav

Legacy Member
Die beschrijving die gij geeft is effectief wat dat script doet zenne. Met die code moet ge normaal zelf wel tot een resultaat komen dat gij wilt, 't zijn maar kleine aanpassingen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan