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?
visa/göm lager + stanna vid knapptryck
10 svar · 681 visningar · startad av doggelito
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>
Tillägg: Detta forum särar på orden java och script. Dessa måste skrivas ihop till ett ord överallt i koden.
har inte testat än, men det verkar vara precis vad jag behöver. :)
funkar jättebra!
fråga: kan man ställa så att allt nollställs om man stänger webbläsaren och öppnar den igen?
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');">
finns det nått annat sätt än cookies? koden ovan gör lite som den vill! fungerar ibland, ibland inte. :(
det finns inget sätt att bygga en function som aktiveras på alla <a>-taggar samt alla onClick så att värdet följer med länkarna?
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>
Lycka till.
många tack nitro2k01 för att du tar dig tid. :)
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?
hmm, fick en idé!
kan man använda onUnload och hämta lagervärdet och sedan med onLoad få tillbaka det igen?
(snälla, säg att det går!!!)
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.
function Goto(passThis){
window.open(passThis.href + "&lager1=" + document.getElementById("lager1").style.display , "_self");
return false;
}
Om du använder formulär kan du ha ett element som heter som lagret:
<form name="form1" onsubmit="fixSubmit();">
<input type="hidden" name="">
<input type="submit" value="skicka">
</form>
Koden till det blir då:
<script>
function fixSubmit(){
document.forms["form1"].elements["lager1"].value = document.getElementById('lager1').style.display;
}
</script>
Om du har en knapp med onclick:
Kod:
function GotoHref(Href){
window.open(Href + "&lager1=" + document.getElementById("lager1").style.display , "_self");
return false;
}
HTML:
<button onclick="GotoHref('sida.asp?sub=1')">
Klicka!
</button>
Var det svar på alla frågor?