halåj!
på min sida har jag ett lager som jag kan visa och gömma med hjälp av en knapp.
men om jag t.ex klickar så att lagret är synligt och sedan klickar på en vanlig länk så att sidan laddas om så göms ju lagret igen, hur gör jag för att lagret fortfarande är synligt om jag valt att lagret ska vara synligt?
Ett sätt är att använda cookies. Här följer ett exmpel på hur det kan gå till. Fyra lager, och fyra länkar, en till varje lager, som gömmer eller visar, och inställningarna är lagrade även när sidan laddas om. Dock så kommer inställningarna lagras även nästa gång besökaren kommer till sidan. Var det så du ville ha det?
<html>
<script>
function getCookie(whichCookie){
if (document.cookie){
var params = document.cookie.split(';');
var result = new Array ();
for (k in params) {
queryparts=params[k].split('=');
eval('result.' + queryparts[0] + ' = "' + queryparts[1] + '"');
}
return result[whichCookie];
}
return "undefined";
}
function setCookie(whichCookie, Value){
var sparaTid = 30;
var Tid = new Date();
Tid.setTime(Tid.getTime() + (sparaTid*24*60*60*1000));
document.cookie = whichCookie + "=" + escape(Value) + "; expires=" + Tid.toGMTString();
}
</script>
<script>
// Här skriver du ID för lagren
lager=["lager1", "lager2", "lager3", "lager4"]
function laddaSida(){
for(i in lager){
document.getElementById(lager[i]).style.visibility = (getCookie(lager[i])+""=="undefined")?"visible":getCookie(lager[i]);
}
}
window.onload = laddaSida;
function gomvisa(lagernamn){
setCookie(lagernamn, document.getElementById(lagernamn).style.visibility = (document.getElementById(lagernamn).style.visibility=="visible")?"hidden":"visible" )
}
</script>
<body>
<a href="javascript:;" onclick="gomvisa('lager1');">lager1</a>
<a href="javascript:;" onclick="gomvisa('lager2');">lager2</a>
<a href="javascript:;" onclick="gomvisa('lager3');">lager3</a>
<a href="javascript:;" onclick="gomvisa('lager4');">lager4</a>
<div id="lager1" >
lager1
</div>
<div id="lager2" >
lager2
</div>
<div id="lager3">
lager3
</div>
<div id="lager4">
lager4
</div>
</body>
</html>
problem: scriptet är länkat på flera sidor och ibland när jag byter sida så visas inte lagret även fast det ska och tvärsom.
finns det fel i koden nedan? jag har byggt om det lite själv :)
function getlayerCookie(whichCookie){
if (document.cookie){
var params = document.cookie.split(';');
var result = new Array ();
for (k in params) {
queryparts=params[k].split('=');
eval('result.' + queryparts[0] + ' = "' + queryparts[1] + '"');
}
return result[whichCookie];
}
return "undefined";
}
function setlayerCookie(whichCookie, Value){
var sparaTid = 30;
var Tid = new Date();
Tid.setTime(Tid.getTime() + (sparaTid*24*60*60*1000));
document.cookie = whichCookie + "=" + escape(Value) + "; expires=" + Tid.toGMTString();
}
function loadlayermenu(){
document.getElementById('lager1').style.display = (getlayerCookie('lager1')+""=="undefined")?"":getlayerCookie('lager1');
}
window.onload = loadlayermenu;
function showhidelayermenu(lagernamn){
setlayerCookie(lagernamn, document.getElementById(lagernamn).style.display = (document.getElementById(lagernamn).style.display=="")?"none":"")
}
<img src="/pictures/buttons/menu_hide.gif" id="menuimage" onClick="showhidelayermenu('lager1');">
Det gällde alltså bara ett lager? Då var det ju onödigt med den där Array:en med lagernamn, som du ju också tog bort.
Nåväl, en annan möjlig lösning är att använda, jag vet inte vad det heter, submit data? Det som kommer efter en URL när man skickar en form tex sida.php?xx=yy. Följand kod bör fungera enligt dina förväntningar.
Jag har lagt skriptet i en .js-fil. Detta är en bra metod, om du behöver ändra på något kan du göra det på en plats.
Showhide.js
function parseQuery(){
if (location.search) {
var params = location.search.substring(1, location.search.length).split('&');
var result = new Array ();
for (k in params) {
queryparts=params[k].split('=');
eval('result.' + queryparts[0] + ' = "' + queryparts[1] + '"');
}
return result;
}
return new Array();
}
function loadlayermenu(){
// Obs! Query är en Array inte funktion. Därav [] istället för () nedan
Query = parseQuery();
document.getElementById('lager1').style.display = (Query["lager1"]+""=="undefined")?"":Query["lager1"];
}
window.onload = loadlayermenu;
function showhidelayer(){
document.getElementById("lager1").style.display = (document.getElementById("lager1").style.display=="")?"none":""
}
function Goto(passThis){
window.open(passThis.href + "?lager1=" + document.getElementById("lager1").style.display , "_self");
return false;
}
sdbt.html (sdbt = lite slumpade tangenttryckningar)
<html>
<head>
<script src="showhide.js" language="javascript" type="text/javascript">
</script>
</head>
<body>
<a href="javascript:;" onclick='showhidelayer()'>Göm / visa</a>
<a href="sdbt.html" onclick='return Goto(this);'>Länk</a>
Koden i onclick <b>måste</b> ligga i länkens onclick, inte i bildens!
<div id="lager1">Lager1</div>
</body>
</html>
tanken var nog god från början men..., det finns alltid ett men!
om man har ett t.ex. ett formulär på sidan som postas vad händer då? nollställs lagret?
om man har en button med onclick i, samma sak, vad händer då?
jag har också redan på de flesta av mina sidor querystrings, t.ex. sidan.asp?id=123, hur blir det då,
kan man spara dessa + att man får med lagervärdet?
många frågor som vill ha svar! :)
innan mer tid läggs på kodning, vad borde vara det bästa sättet för detta lagerproblem?
Jag ser inte hur man skulle kunna utnyttja onunload och onload?
Om du använder querystrings på alla sidor så kan du byta ut ? mot & i Goto, som nedan. Om du bara använder querystrings för vissa länkar måste du kolla om det är en querystring först. Jag orkar inte skriva ihop koden för det nu.
