Just nu i M3-nätverket
Gå till innehåll
Wepe

Toggle span

Rekommendera Poster

Hej

Har ett script som man kan enabla och disabla ett fält med och nu undrar jag om man kan få det att funka på en span-tagg som är dold så att när man klickar i en kryssryta så visas innehållet i span-taggen.

 

Så här ser toggle-scriptet ut:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var blState=true;
function ToggleState(strElement) {
oObj=document.getElementById(strElement);
oObj.disabled=!oObj.disabled;
}
//-->
</SCRIPT>

 

Så här ser spantaggen ut:

<span style="DISPLAY: none" id="internet">Innehåll</span>

 

Och så här ser kryssrutan ut:

<input name="strInternet" type="checkbox" id="strInternet" value="x" onclick="ToggleState('internet');" />

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hej, kände igen det där, det var jag som skrev det åt dig för ett tag sen va?

Jag har en till lite funktion åt dig nu, med den kan du toggla olika style-attribut med hjälp av ToggleStyle(element,stilNamn,stil1,stil2)

 

function ToggleStyle(strElement,style,param1,param2) {
oObj=document.getElementById(strElement);
currStyle=eval("oObj.style."+style);
newStyle=(currStyle==param1)?param2:param1;
eval("oObj.style."+style+"='"+newStyle+"'");
}

 

I ditt fall så ange parametrarna så här:

 

<input type="checkbox" onclick="ToggleStyleState('internet','display','none','');">

 

TILLÄGG: Du kan alltså toggla även andra stilar, ex:

ToggleStyleState('internet','backgroundColor','red','black') för att växla bakgrundsfärg.

 

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

[inlägget ändrat 2004-08-01 16:17:37 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du är en ÄNGEL... Tack än en gång för kalasscript... Funkade utmärkt! Poäng till dej min vän.

Ps. Om du behöver bli adopterad någon gång så ställer jag gärna upp

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hehe, som adoptivbarn blir jag nog lite för dyr i drift (kräver minst 12 år gammal single malt whisky i min nappflaska och runt 14.000 i veckopeng), men tack för erbjudandet =)

 

Förrestesten, du såg att jag skrev fel namn på funktionsanropet va? (ToggleStyleState istf ToggleStyle. Kunde inte ändra det nu när jag såg det eftersom inlägget var besvarat)

 

Skriva skräddarsydda script är förresten bara kul, så det är bara att fråga igen när nya roliga problem uppstår ;)

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hehe.

Jo jag såg det. Kan säkert klura ut andra roliga saker åt dej ;-)

Har en massa idéer men min js är inte va den borde.

Bra compabilitet föresten... funkar i allt (fast ns4 har jag inte så där vet jag inte hur det ser ut).

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nä, i gamla browsers som inte stödjer W3C-standarden fungerar inte scripten (NS4, IE4 exempelvis) men använder man dessa bör man nog fundera på att använda en kalkylator istället för en dator ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

För att krångla till allt så skulle jag vilja få den att funka på radio-knappar också, altså om radio-knappen är klickad så visa etc.

 

Hoppas du (AnjunaMoon) har den här tråden bevakad fortfarande ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Inte bevakad, men jag råkade komma in precis nu ändå. Här är en variant med radioknappar, som beroende på knapp som är vald, visar olika lager:

 

[log]

<html>
<head>
<SCRIPT LANGUAGE="JAVASCRIPT" >
<!--
function ToggleStyleState(strElement,style,param1,param2) {
oObj=document.getElementById(strElement);
currStyle=eval("oObj.style."+style);
newStyle=(currStyle==param1)?param2:param1;
eval("oObj.style."+style+"='"+newStyle+"'");
}
//-->
</SCRIPT>
</head>
<body>
<input name="a" checked type="radio" onclick="ToggleStyleState('internet1','display','none','');ToggleStyleState('internet2','display','none','');">
<input name="a" type="radio" onclick="ToggleStyleState('internet2','display','none','');ToggleStyleState('internet1','display','none','');">
<span style="border:1px solid black;" id="internet1">Innehåll 1</span>
<span style="border:1px solid black;display:none" id="internet2">Innehåll 2</span>
</body></html>

[/log]

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hehe, enkel lösning. Fast jag hittade en bugg i den. Om man klickar på samma radio två gången så växlar den tillbaka, alltså kan man väldigt lätt få fel text att visas.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok, ändra följande rader:

<input name="a" checked type="radio" onmousedown="if (!this.checked) {ToggleStyleState('internet1','display','none','');ToggleStyleState('internet2','display','none','');}">
<input name="a" type="radio" onmousedown="if (!this.checked) {ToggleStyleState('internet2','display','none','');ToggleStyleState('internet1','display','none','');}">

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Medan jag ändå har dej på *hmm* uppkoplingen. Kan man aplicera den hä på en dropdown? (ojojoj vad jag tjatar ;-) )

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
adoptera dej som min hustomte

Hellre trädgårdstomte isåfall, de blir ju kidnappade och får resa jorden runt gratis ;)

 

Här kommer en variant för dropdowns:

 

<html>
<head>
<SCRIPT LANGUAGE="JAVASCRIPT" >
<!--
var oActive;
function ShowLayer(strElement) {
if (oActive) oActive.style.display='none';
oObj=document.getElementById(strElement);
oObj.style.display='';
oActive=oObj;
}

//-->
</SCRIPT>
</head>
<body onload="ShowLayer('internet1');">
<select onchange="ShowLayer(this.options[this.selectedIndex].value);">
<option value="internet1">Visa lager 1
<option value="internet2">Visa lager 2
<option value="internet3">Visa lager 3
</select>
<span style="border:1px solid black;display:none;" id="internet1">Innehåll 1</span>
<span style="border:1px solid black;display:none" id="internet2">Innehåll 2</span>
<span style="border:1px solid black;display:none" id="internet3">Innehåll 3</span>
</body></html>

 

[inlägget ändrat 2004-12-18 23:45:16 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Anjuna Moon

Nu är jobbiga jag här igen ;)

 

Om man vill ha en synlig redan från början då?

Om man bara sätter "display: display" ligger den kvar första gången man byter option (väljer man sen den som var synlig och sen en annan igen så försvinner den men inte första gången).

 

[bild raderad 1/13/2005 1:08:46 PM av Wepe]

[Kul att man kan radera bild dom inte är uppladdad]

[inlägget ändrat 2005-01-13 13:09:37 av Wepe]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jo syns gör den, problemet är bara att den inte försvinner när man byter i dropdown-menyn och nån av de andra ska försvinna...

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok skickar det som mail till dej. Du ska ha stooor tack för att du hjälper till... Fattar inte att du har tid ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Den disablade boxen område ska försvinna när man väljer nåt annat och komma tillbaka när man väljer "Välj ort...".

 

Om du börjar med att välja tex. Umeå och sen väljer "Välj ort..." igen så funkar allt som det ska därifrån, för då försvinner den disablade dropdownmenyn när man väljer nåt annat. Men inte när man precis har laddat sidan för då förstår den inte att den ska plocka bort den disablade samtidigt som den plockar fram nån av dom andra.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Inte hundra på att jag är med (lång arbetsdag). Varför finns det två Områdes-boxar?

 

Är det så här det är tänkt:

 

- Sidan laddas, Kommun/Ort visas. Område är gömt

- Välj Umeå -> En (1) Områdesbox visas

- Välj "Välj ort" -> Områdesboxen göms igen

 

eller

 

- Sidan laddas, Kommun/Ort visas. Område är gömt

- Välj Umeå -> Två (2) Områdesboxar visas

- Välj "Välj ort" -> Områdesboxarna göms igen

 

 

 

[inlägget ändrat 2005-01-13 18:25:35 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

- Sidan laddas, Kommun/Ort visas. Område är disablad

- Välj Umeå, Område visas (omrade1)

- Välj Skellefteå, Områda visas (omrade2)

- Välj annan ort, Ort och område visas (ort/omrade3)

- Välj "Välj ort" -> Områdesboxarna disablad igen

 

 

[inlägget ändrat 2005-01-13 18:29:53 av Wepe]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok, jag tror jag är med nu. Det hela borde (ta i trä) lösas om du ändrar BODY-taggen till:

 

<body onload="oActive=document.getElementById('disabled');">

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Som vanligt löser du problemet galant :)

 

Oj oj oj, står i stor tacksamhetsskuld till dej o store mästare.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...