Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Show/Hide function i.c.m. cookies

acorna - 09/01/2008 15:19

Nieuw lid

Voor een website ben ik op zoek naar een script dat de show/hide functie combineert met cookies.

Korte toelichting
Op de website worden verschillende blokken getoond, die de bezoeker in- en uit kan klappen (bijv. met persoonlijke bookmarks, nieuws e.d.). Nu is het de bedoeling dat met een cookie onthouden wordt welke blokken de bezoeker ingeklapt heeft en welke zijn uitgeklapt.

Voor de Show/Hide functie maak ik gebruik van het script van Bladin (http://www.site...amp;id=200). Dit is het enige script dat ik aan de praat kreeg met meerdere blokken.

Voor de cookie had ik een goed script gevonden, maar helaas krijg ik het niet werkend met meerdere blokken. Nu heb ik al een aantal dingen geprobeerd, maar niets lukt.

Dit is het script dat ik graag zou willen gebruiken:

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript"> 
<!-- 
var state; 
window.onload=function() { 
obj=document.getElementById('inhoud'); 
state=(state==null)?'hide':state; 
obj.className=state; 

document.getElementById('link').onclick=function() { 
obj.className=(obj.className=='show')?'hide':'show'; 
state=obj.className; 
setcookie(); 
return false; 
} 
} 

function setcookie() { 
exp=new Date(); 
plusMonth=exp.getTime()+(31*24*60*60*1000); 
exp.setTime(plusMonth); 
document.cookie='State='+state+';expires='+exp.toGMTString(); 
} 

function readcookie() { 
if(document.cookie) { 
state=document.cookie.split('State=')[1]; 
} 
} 
readcookie(); 
//--> 
</script> 
            
<script type="text/javascript"> 
<!-- 
var state; 
window.onload=function() { 
obj=document.getElementById('inhoud'); 
state=(state==null)?'hide':state; 
obj.className=state; 
 
document.getElementById('link').onclick=function() { 
obj.className=(obj.className=='show')?'hide':'show'; 
state=obj.className; 
setcookie(); 
return false; 
} 
} 
 
function setcookie() { 
exp=new Date(); 
plusMonth=exp.getTime()+(31*24*60*60*1000); 
exp.setTime(plusMonth); 
document.cookie='State='+state+';expires='+exp.toGMTString(); 
} 
 
function readcookie() { 
if(document.cookie) { 
state=document.cookie.split('State=')[1]; 
} 
} 
readcookie(); 
//--> 
</script>
 

Kan iemand mij helpen met aanpassen van dit script? Bij voorbaat dank !!!

4 antwoorden

Gesponsorde links

Stijn - 09/01/2008 15:37
PHP expert		Werkt die code echt voor meerdere blokken? Ze moeten allemaal het ID 'inhoud' hebben. Daarnaast maak je geen gebruik van CSS omdat display in CSS handig is voor hide/show met javascript. Je moet dus verschillende ID's hebben. Je cookie moet ook naast de state van de block ook nog eens de ID hebben van de block. Stel dat je 3 ID's hebt: 'menu' , 'account' , 'sponsors' dan kan je cookie er als volgt uitzien: Blocks=menu,1,account,0,sponsors,0 1 is dan show en 0 is hide. (geef ook nog eens het stuk HTML waarin je die javascript code toepast)

acorna - 10/01/2008 12:13
Nieuw lid		Beste Stijn, Ik heb de HTML beschikbaar gemaakt via http://www.zoeken-en-vinden.nl/test/showhide.htm. Zoals je ziet kunnen meerdere blokken worden in- of uitgeklapt. Ze hebben dan ook allemaal hun eigen id qua image en div. Dit werkt prima, maar ik heb geen idee hoe ik dit in de cookie kan inbouwen. Suggesties?

Stijn - 10/01/2008 18:13

PHP expert

Ik zou een array maken met alle divs/images en hun state.

array schreef:

[0] => directnaar,image31,1
[1] => jouwmening,image3,1
[2] => actueelnieuws,image22,1
[3] => laatstewijzigingen,image20,1
[4] => jarig,image100,1

In je cookie, bv blocks, zal een string zijn van die array na elkaar. Je moet dus terug die array opbouwen. Dit kan je makkelijk doen met een functie. Een voorbeeldje.

javascript code - Bekijk de code zonder highlighting - Klap code in

                this.blocks = new Array();

function init() {
/* Thanks to fangorn */
var c = document.cookie;
var start = c.indexOf('blocks' , 0) + 7;
var eind = c.indexOf('blocks' , start);
if(eind == -1) eind = c.length;
var cookieData = c.substring(start,eind);

var parts = cookieData.split(',');
//restore the data in the array
var index = 0;
for( var i = 0 ; i < parts.length ; i++ ) {

    if( i > 0 && i%3 == 0 ) {
        this.blocks[++index] = parts[i];
    } else if( i == 0) {
       this.blocks[index] = parts[i];
    } else {
        this.blocks[index] += ',' + parts[i];
    }

}

}
            
this.blocks = new Array();
 
function init() {
/* Thanks to fangorn */
var c = document.cookie;
var start = c.indexOf('blocks' , 0) + 7;
var eind = c.indexOf('blocks' , start);
if(eind == -1) eind = c.length;
var cookieData = c.substring(start,eind);
 
var parts = cookieData.split(',');
//restore the data in the array
var index = 0;
for( var i = 0 ; i < parts.length ; i++ ) {
 
    if( i > 0 && i%3 == 0 ) {
        this.blocks[++index] = parts[i];
    } else if( i == 0) {
       this.blocks[index] = parts[i];
    } else {
        this.blocks[index] += ',' + parts[i];
    }
 
}
 
}
 

Je moet dus een array variable buiten je functies maken die de toestand van je blocks bijhoud. Ik heb je de init functie gegeven. Nu moet je dus iedere keer de cookie herschrijven wanneer iemand op een plus of min duwt. Dus je huidige functie wat aanpassen en een functie cookieSchrijf(); maken.

acorna - 10/01/2008 19:49
Nieuw lid		Bedankt voor je reactie! Ik begrijp de strekking van je verhaal, maar helaas is Javascript niet mijn sterkste kant.... Ik ben bang dat deze aanpassingen iets te ver gaan voor mij...

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten