Show/Hide div dmv cookies en js

[BramVroy]

Hallo,

Ik ben bezig aan v3 van een website (http://www.denotenbalkers.be/) en een verandering hierbij is dat ik de socialnetworkbuttons die je links ziet mogelijk wil laten hiden. Dit lukt me al. Maar ik zou ook willen dat de status behouden blijft bij een page reload/een andere pagina. (dus bv.: ik kom op de startpagina, ik verberg de div, ik ga naar een nieuwe pagina en daar is de div nog altijd verbogen) maar mijn cookie script doet zijn werk niet en ik heb geen idee hoe dat komt..

Dit is het belangrijkste in m'n head:

code:

<script type="text/javascript" src="js/jquerysocialnetwork.js"></script>
<script type="text/javascript" src="js/slidesocialnetwork.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/cookieplugin.js"></script>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

• jquerysocialnetwork.js is een New Wave Javascript

• slidesocialnetwork.js is dit:

code:

var $j = jQuery;
    
     $j(document).ready(function(){
        $j("#hidePanel").click(function(){
         $j("#panel").animate({marginLeft:"-140px"}, 500 );
         $j("#colleft").animate({width:"0px", opacity:0}, 400 );
         $j("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
     });
     $j("#showPanel").click(function(){
         $j("#colright").animate({marginLeft:"140px"}, 200);
         $j("#panel").animate({marginLeft:"0px"}, 400 );
         $j("#colleft").animate({width:"140px", opacity:1}, 400 );
         $j("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
     });
});

• cookie.js is:

code:

var $jc = jQuery;

$jc(document).ready(function(){
    togglesocialMedia();
});

function togglesocialMedia() {
    if($jc.cookie('socialMedia') === true) {
        $jc("#colright").animate({marginLeft:"140px"}, 200);
        $jc("#panel").animate({marginLeft:"0px"}, 400 );
        $jc("#colleft").animate({width:"140px", opacity:1}, 400 );
        $jc("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
        
        $jc.cookie('socialMedia', true);
    } else {
        $jc("#panel").animate({marginLeft:"-140px"}, 500 );
        $jc("#colleft").animate({width:"0px", opacity:0}, 400 );
        $jc("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
        
        $jc.cookie('socialMedia', false);
    }
}

• En cookie plugin is die van Klaus Hartl.

De HTML van de div:

code:

<div id="colleft">
    <div id="buttonhead"><span id="buttontop"><span>\\</span> Bezoek ons ook hier:</span></div>
    <div id="panel">
        <ul>
      <li><a href="http://www.youtube.com/user/NotenbalkersSchaffen" target="_blank"><img src="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="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="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 weet dat het veel is om door te kijken, maar ik zit echt vast.. Ik hoop op wat hulp.

Ook moet ik zeggen dat ik zeeeeer weinig over javascript/jQuery weet. Dus als je iets uitlegt, ik het waardeer als het in lekentaal is

Een demo van wat ik tot nu toe heb vind je hier: http://www.denotenbalkers.be/Nieuwe%20map/index.html

[Verwijderd]

Is de waarde die je terug krijgt uit de cookie wel een boolean en geen string?

[R4gnax]

Je bent jQuery plugins en $(document).ready aan het gebruiken nog vóór de jQuery library ingeladen wordt. Dat gaat niet werken. Durf te wedden dat als je een javascript debugger gebruikt, of zelfs maar de Firefox console open trekt je al error meldingen krijgt die bevestigen dat jQuery undefined is o.i.d.

Overigens, de standaard methode om jQuery plugin code te schrijven is om dat in een gescheiden namespace te schrijven. Dat zit zo in elkaar.

JavaScript:

(function($){
  
  $(document).ready(function(){ alert('Hello world!') });

})(jQuery);

Mocht je echt een andere shorthand dan $ willen, kun je die dus als parameter v/d anonieme functie gebruiken i.p.v. $.

[BramVroy]

Aangezien dat de cookie wel geschreven wordt, ga ik er van uit dat het niet uitmaakt dat de jQuery library pas later geladen wordt.

Wat je als tweede zegt begrijp ik niet, ik heb het toch gedaan volgens jQuery website (want ik draai ook nog fancybox scriptjes op m'n site)

Enjijook snap ik niet. Zoals gezegd, ik weet niks van js..

[apokalypse]

• cookie.js is:

code:

var $jc = jQuery;

$jc(document).ready(function(){
    togglesocialMedia();
});

function togglesocialMedia() {
    if($jc.cookie('socialMedia') === true) {
        $jc("#colright").animate({marginLeft:"140px"}, 200);
        $jc("#panel").animate({marginLeft:"0px"}, 400 );
        $jc("#colleft").animate({width:"140px", opacity:1}, 400 );
        $jc("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
        
        $jc.cookie('socialMedia', true);
    } else {
        $jc("#panel").animate({marginLeft:"-140px"}, 500 );
        $jc("#colleft").animate({width:"0px", opacity:0}, 400 );
        $jc("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
        
        $jc.cookie('socialMedia', false);
    }
}

ik snap het niet. Hij komt nooit op $jc.cookie('socialMedia', true); (regel 14)
Hoe moet if($jc.cookie('socialMedia') === true) (regel ooit waar zijn?

Of wordt deze op een plek gezet die ik nu mis?

En sowieso geeft $jc.cookie('socialMedia') een string terug, zoals al eerder gemeld.

Dit is toch erg makkelijk om met de debugger te zien. Waarom pak je die er niet bij?

[ Voor 8% gewijzigd door apokalypse op 19-05-2010 22:06 ]