MattyUK
06-30-2006, 07:35 PM
Forum memeber Beagle helped me produce this spinner that suits my purposes. I'm posting it here in case it helps others.
Notes:
Since the code is triggered ever onclick event it may be resource hungry on large pages.
I guess desired upgrades to suit it more for general purpose and reuse would be:
1> Replace document.write with a way of altering the CSS class rule property. Hard part on this after reading quirksmode would be in targeting the CSS rule in a cross browser, not to intensive way.
2> Find a better cross browser trigger attachment than the current firing on every click.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spinner Test</title>
<style type="text/css">
<!--
.spinnerContainer {}
.spinnerLink {cursor: pointer;}
.spinnerContent {display: block;}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
document.onclick=function(evt){
//Credit to Beagle and coding forums http://www.codingforums.com/showthread.php?t=90062
if(!evt){evt=window.event;} // *** IE fix ***
var spinner;// *** element that got clicked ***
// *** Credit to PPK from quirksmode.org for this block ***
if(evt.target){spinner=evt.target;}
else if(evt.srcElement){spinner=evt.srcElement;}
if(spinner.nodeType==3){spinner=spinner.parentNode;} // defeat Safari bug
if(spinner.className=='spinnerLink'){
var contentDiv=spinner.nextSibling;
if(contentDiv.nodeType==3){contentDiv=contentDiv.nextSibling;}
//Action
if(contentDiv.style.display!='block'){contentDiv.style.display='block';}else{contentDiv.style.displa y='none';}
}//from: if(spinner.className=='spinnerLink'){
}//from: document.onclick=function(evt){
document.write('<style type="text/css">.spinnerContent {display: none;}<\/style>');
</script>
</head><body><br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN!</span>
<div class="spinnerContent">Content</div>
</div>
<br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN! 1</span>
<div class="spinnerContent">Content 1</div>
</div>
</body></html>
Notes:
Since the code is triggered ever onclick event it may be resource hungry on large pages.
I guess desired upgrades to suit it more for general purpose and reuse would be:
1> Replace document.write with a way of altering the CSS class rule property. Hard part on this after reading quirksmode would be in targeting the CSS rule in a cross browser, not to intensive way.
2> Find a better cross browser trigger attachment than the current firing on every click.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spinner Test</title>
<style type="text/css">
<!--
.spinnerContainer {}
.spinnerLink {cursor: pointer;}
.spinnerContent {display: block;}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
document.onclick=function(evt){
//Credit to Beagle and coding forums http://www.codingforums.com/showthread.php?t=90062
if(!evt){evt=window.event;} // *** IE fix ***
var spinner;// *** element that got clicked ***
// *** Credit to PPK from quirksmode.org for this block ***
if(evt.target){spinner=evt.target;}
else if(evt.srcElement){spinner=evt.srcElement;}
if(spinner.nodeType==3){spinner=spinner.parentNode;} // defeat Safari bug
if(spinner.className=='spinnerLink'){
var contentDiv=spinner.nextSibling;
if(contentDiv.nodeType==3){contentDiv=contentDiv.nextSibling;}
//Action
if(contentDiv.style.display!='block'){contentDiv.style.display='block';}else{contentDiv.style.displa y='none';}
}//from: if(spinner.className=='spinnerLink'){
}//from: document.onclick=function(evt){
document.write('<style type="text/css">.spinnerContent {display: none;}<\/style>');
</script>
</head><body><br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN!</span>
<div class="spinnerContent">Content</div>
</div>
<br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN! 1</span>
<div class="spinnerContent">Content 1</div>
</div>
</body></html>