Style toggle
This script was not written by me.
It's basically an all-encompassing toggle script. In the onclick="..." part we put in 4 parameters - the id, the javascript name of the attribute we want to change, the CSS name of the same attribute and the second state we want.A good man called JVLB posted it on a forum and I thought it deserved its own page. Thanks JVLB.
I want to use this site to explain things, but... well, the fact is that
I don't understand this.
I think I have some studying to do.
Javascript
/*
styTog() -- a function to toggle CSS style attributes
This function accepts four parameters from the calling event:
targ_id, which is the id of the target element;
sty_attrJ, which is the style attribute's name in JavaScript syntax;
sty_attrC, which is the style attribute's name in CSS syntax;
set_val, which is the second toggle state value;
The element id, "zedSpan" is reserved for this function's use.
*/
function styTog(targ_id,sty_attrJ,sty_attrC,set_val){
var targ=document.getElementById(targ_id);
var targ_stat="";
var targ_sty="";
var attr_chk=sty_attrC.toLowerCase()
var excp_flag=0;
if(attr_chk.indexOf("color")!=-1 || attr_chk.indexOf("font")!=-1){
excp_flag=1;
if(!document.getElementById("zedSpan")){
var insSpan=document.createElement("span");
insSpan.setAttribute("id","zedSpan");
document.body.appendChild(insSpan);
}
var zS=document.getElementById("zedSpan").style
zS[sty_attrJ]=set_val;
}
if(targ.currentStyle){ //code for IE
if(excp_flag==1)set_val=zS[sty_attrJ];
targ_stat=targ.currentStyle[sty_attrJ];
}else{ //code for W3C-spec-compatible
if(excp_flag==1){
var tst_span=document.getElementById("zedSpan");
var tst_sty=document.defaultView.getComputedStyle(tst_span,"");
set_val=tst_sty.getPropertyValue(sty_attrC);
excp_flag=0;
}
targ_sty=document.defaultView.getComputedStyle(targ,"");
targ_stat=targ_sty.getPropertyValue(sty_attrC);
}
targ_stat!=set_val ? targ.style[sty_attrJ]=set_val : targ.style[sty_attrJ]="";
}
HTML
<div id="styletoggle">
<h1>Style toggle</h1>
<!-- the four parameters being passed to the styTog() function are: the target element's id,
the JavaScript attribute name, the CSS attribute name, and the value for the second toggle state -->
<div id="styletogglebuttons">
<button onclick="styTog('divOne','visibility','visibility','hidden');">visibility</button>
<button onclick="styTog('span1Div2','display','display','none');">display</button>
<button onclick="styTog('divThree','marginTop','margin-top','40px');">margin top</button>
<button onclick="styTog('divThree','backgroundColor','background-color','#333');">background</button>
<button onclick="styTog('span1Div3','fontSize','font-size','2em');">font-size</button>
</div>
<div id="divOne">
<div id="divTwo">
<p>This script was not written by me.</p><span id="span1Div2">It's basically an all-encompassing toggle script. In the onclick="..." part we put in 4 parameters - the id, the javascript name of the attribute we want to change, the CSS name of the same attribute and the second state we want.</span><p>A good man called JVLB posted it on a forum and I thought it deserved its own page. Thanks JVLB.</p>
</div>
<div id="divThree">
<p>I want to use this site to explain things, but... well, the fact is that <br /><span id="span1Div3">I don't understand this.</span><br /> I think I have some studying to do.</p>
</div>
</div>
</div>
CSS
#styletogglebuttons {
width:500px;
margin:10px auto;
}
#styletogglebuttons button {
background:transparent;
width:18%;
}
#divOne{
border:1px solid #333;
margin:0 auto;
display:block;
width:500px;
padding:10px;
}
#divThree{
color:white;
width:340px;
background:#990066;
margin:auto;
border:4px groove #fff;
font-weight:bold;
padding:10px;
text-align:center;
}
Comments
#1 #2Oh dear, the clicky thing breaks the purple block at the top of here
*fixed* (^_^)/
This is very cool but the "display" button won't toggle back on in Safari. I don't know why. Everthing else works in Safari. All the buttons work good in IE6, Firefox1.5 and NS7.
I would love to help, but I never did to take the time to figure this out, so I still don't understand it. I'm glad it (mostly) works for you though.
how long is a thesis statement <a href="https://thesismethod.com/ ">thesis printing</a> american dream thesis
why nyu essay examples <a href="https://essaymesh.com/ ">essay hooks</a> compare and contrast essay introduction
hydrochlorothiazide 25 mg price <a href="https://lisinoprildrh.com/ ">hydrochlorothiazide and aspirin</a> diovan hydrochlorothiazide side effects
Oh dear, the clicky thing breaks the purple block at the top of here
Shouldn't be much hassle, but I just thought you might like to know.
Take Care
--James