SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 27 of 27
  1. #26
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Thanks

  2. #27
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Upon the further application of ratiocination to the situation I was left to the realization that there was a better way to handle the disparity of color models. The following function converts whatever color syntax the developer provides to the browser's native format. It does this by making an empty <span> which it then manipulates.

    I also found a problem with fonts between platforms, which this variant also addresses (still working on Opera for relative font sizes; there appears to be a bug in how Opera interprets and applies relative sizes like ems or percentages).

    Update: Opera's bug appears to be intractable. The browser simply fails to apply the base font properly if it is expressed in a relative size.

    Code:
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <title>Style Toggling Script 1/7/05</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <style type="text/css">
        body{font-size:1em;}
        #divOne{display:block;height:300px;width:500px;background:#dde;}
        #divTwo{height:100px;width:100%;text-align:center;padding-top:2em;}
        #divThree{height:80px;width:300px;background:#ccaaaa;margin:auto;
        		  border:4px groove #fff;text-align:center;padding-top:20px;}
        </style>
        <script type="text/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]="";
        }
        </script>
        </head>
        <body>
        <!--  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 -->
        <button onclick="styTog('divOne','visibility','visibility','hidden');">block see / no-see</button>
        <button onclick="styTog('span1Div2','display','display','none');">inline see / no-see</button>
        <button onclick="styTog('divThree','marginTop','margin-top','40px');">vertical shift</button>
        <button onclick="styTog('divThree','backgroundColor','background-color','#0be');">color shift</button>
        <button onclick="styTog('span1Div3','fontSize','font-size','2em');">font-size shift</button>
        <div id="divOne">
          <div id="divTwo">
        	Text, with a<span id="span1Div2">n inline span, as the</span> target.
          </div>
          <div id="divThree"><span id="span1Div3">Text</span>
          </div>
        </div>
        </body>
        </html>
    Last edited by JVLB; Jan 9, 2005 at 14:36.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •