Page 1 of 2 12 Last

Thread: Show/Hide div

  1. #1
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    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!


    Bram
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  2. #2
    Zero Grav's Avatar
    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  

  3. #3
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    -
    no votes  

  4. #4
    Audiosonic's Avatar
    Registered
    02/06/05
    Location
    Schaffen
    Posts
    798
    iTrader
    0
    Mentioned
    0 Post(s)
    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  

  5. #5
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    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  

  6. #6
    Dieterg's Avatar
    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  

  7. #7
    no votes  

  8. #8
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Mam & benny: extreem hard bedankt! Mercikes, ik ga me er straks ofzo aanzetten en ik post hier het resultaat ^^

    Groeten
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  9. #9
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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  

  10. #10
    demon326's Avatar
    Registered
    18/04/03
    Location
    Hasselt
    Posts
    14,855
    iTrader
    23 (100%)
    Mentioned
    0 Post(s)
    Reputation
    10/79
    Quote Originally Posted by Homer` View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    Plugins | jQuery Plugins

    Kom je al even mee toe denk ik
    no votes  

  11. #11
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Uhm, en voor een jQuery leek?
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  12. #12
    demon326's Avatar
    Registered
    18/04/03
    Location
    Hasselt
    Posts
    14,855
    iTrader
    23 (100%)
    Mentioned
    0 Post(s)
    Reputation
    10/79
    Quote Originally Posted by Homer` View Post
    This quote is hidden because you are ignoring this member. Show
    Uhm, en voor een jQuery leek?
    Ken er zelf ook niet voldoende van
    no votes  

  13. #13
    Zero Grav's Avatar
    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:

    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.
    Last edited by Zero Grav; 08-05-2010 at 18:26.
    no votes  

  14. #14
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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="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="#"> &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..?
    Last edited by Homer`; 08-05-2010 at 20:23.
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  15. #15
    Zero Grav's Avatar
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in