Avatar billede alex15 Nybegynder
04. februar 2010 - 11:50 Der er 4 kommentarer og
1 løsning

Tilføj knap til scipt (getElementbyClass)

Hej Eksperter,

Har fundet følgende script herinde på eksperten:
http://www.eksperten.dk/spm/723660

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<link rel="stylesheet" type="text/css" href="cssgron.css" />

<title>...</title></head>

<script type="text/javascript">

/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.


if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

<body>

<!--Optional Expand/ Contact All links. Remove if desired-->
<div><a href="java script:sweeptoggle('contract')">Contract All</a> | <a href="java script:sweeptoggle('expand')">Expand All</a></div>

<h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>

<div id="sc1" class="switchcontent" style="display:block;">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent(this, 'sc2')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent(this, 'sc3')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is DHTML?</h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

</body></html>

---------------
-- kode slut --
---------------

Mit spørgsmål:

Kan jeg få en herinde til at lave en knap hvor nedenstående bliver slået sammen i en knap? - Altså sådan en (vis/skjul) knap.

<a href="java script:sweeptoggle('contract')">Contract All</a> | <a href="java script:sweeptoggle('expand')">Expand All</a>

Tak for hjælpen.

Alex
Avatar billede intenz Novice
04. februar 2010 - 14:18 #1
Det var da voldsomt script til sådan en smule show/hide funktion. Jeg vil tro dette vil virke (indholdet i script skal selvfølgelig op i resten af javascript koden):

<script>
var currentState = 'expand';
function showhideButton() {
var newState=(currentState=="expand")? "contract" : "expand";
sweeptoggle(newState);
}
</script>
<input type="button" onclick="showhideButton();" value="Contract/Expand">
Avatar billede alex15 Nybegynder
04. februar 2010 - 19:20 #2
Næsten rigtig - skulle jeg til at sige.

Knappen for kan få elementerne til at skjule sig, men ikke vise sig igen?

Har prøvet at rode lidt med det, dog uden hjælp.

Nogle forslag?
Avatar billede alex15 Nybegynder
04. februar 2010 - 20:53 #3
Den variablen som man sender afsted, vil jo konstant være den samme? - Så det må være der fejlen ligger tænker jeg.
Avatar billede intenz Novice
05. februar 2010 - 12:39 #4
Nå, ja. Jeg glemte at gemme den nye variabel. Ændre det til:

function showhideButton() {
var newState=(currentState=="expand")? "contract" : "expand";
currentState = newState;
sweeptoggle(newState);
}
Avatar billede alex15 Nybegynder
05. februar 2010 - 13:06 #5
Sådan, nu virker det stort set perfekt. Er det muligt at gøre så knappen ændre navn mellem følgende, afhængig af hvordan boksen vises?:

Vis
Fjern

Dette ville fuldfører scriptes funktion :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester