JavaScript Forum

**Levi_** · 12-26-2007, 08:50 AM

I was looking at http://www.harrymaugans.com/2007/03/...-animated-div/
and was attempting to get it to work for me in a test. Right now all it does is on my initial click it displays the box then after the time it should take to fully slide open it disappears. Then if I click it again it shows the 1px of the box it should when it is about to start the slide and that is it. You can check it out with the slider.htm below.

http://levijackson.net/js/slider.htm
http://levijackson.net/js/slider.css
http://levijackson.net/js/slider.js

I have been looking over the javascript for a while now and I can't see what it is and the firefox error console shows nothing is wrong. I didn't alter anything in the code aside from in my htm page where my css id is called box instead of mydiv like in the tutorial.

Thanks, for any help
Levi

**JeremyMiller** · 12-27-2007, 07:35 PM

Your problem has to do with the height of the div not being properly determined from your stylesheet. I changed the inline HTML to

HTML Code:

<div id="box" style="width:200px;height:100px;margin:auto;background-color:#ffffff;display:none;">Hey</div>

and that worked.

It'd be interesting to hear from the others in here why the style applied from the stylesheet isn't picked up by JavaScript. I played with this for a bit and just couldn't force it to detect the height.

**Levi_** · 12-27-2007, 08:40 PM

Yeah I was actually about to post and say I found this out too. I had some problems before with my pages not picking up certain external stylesheets when I also used external Javascript.

**meloncholy** · 10:49 PM

The problem is that the style property only works for inline styles. Unfortunately, there isn't (AFAIK) a universal equivalent for getting CSS properties from a stylesheet.

The following worked for me (replace the line endHeight[objname] = parseInt(obj[objname].style.height); with this):

HTML Code:

var slider = obj[objname] = document.getElementById(objname);

// IE
if (slider.currentStyle)
{
    endHeight[objname] = parseInt(slider.currentStyle["height"]);
}
// Fx, Opera
else if (window.getComputedStyle)
{
    endHeight[objname] = parseInt(document.defaultView.getComputedStyle(slider, null).getPropertyValue("height"));
}

Source: PPK

I'm currently rather enamoured with jQuery though (please excuse the unwanted eulogy

) - it makes things like this almost too easy. This example replaces the entire toggle JS file with 1 line of code. There's also a better separation of the behaviour and markup as the click is added at runtime, and those without JavaScript get to read the slider text too. Which can't be bad.

(NB I removed display: none from the stylesheet.)

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    jQuery(document).ready(function()
    {
        jQuery("#box").hide();
        
        jQuery("#slider").click(function()
        {
            jQuery("#box").slideToggle("slow");
        });
    });
    </script>
                
<link rel="stylesheet" type="text/css" href="slider.css" />
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div align="center">
    <a href="#" id="slider">Slider</a>
</div>

    <div id="box">Hey</div>

</body>
</html>

Hope that's useful.

**chrishirst** · 12-31-2007, 05:43 AM

Quote:

The problem is that the style property only works for inline styles. Unfortunately, there isn't (AFAIK) a universal equivalent for getting CSS properties from a stylesheet.

Huh??

Dammit!! obviously none of my DHTML stuff should be working then, odd that it does?

**meloncholy** · 12-31-2007, 11:15 AM

Quote:

Originally Posted by chrishirst

Huh??

Dammit!! obviously none of my DHTML stuff should be working then, odd that it does?

Well, that's what happened for me when I was playing around yesterday, and - more pertinently - what it says on QuirksMode and in other places.

Do you have an example? I'd certainly be interested in having a look.

**JeremyMiller** · 01:53 PM

Quote:

Originally Posted by chrishirst

Huh??

Dammit!! obviously none of my DHTML stuff should be working then, odd that it does?

I thought it odd too. But, take a look at the dude's stuff. It's not complicated, but as much screwing around as I did with it, inline was the only way I could get the JS to capture the style settings. I'd LOVE to know the solution to this one.

EDIT: Oh, I should add that I usually do my DHTML by switching class names instead of editing styles directly (unless for positioning). I think I read somewhere that that is the preferred method.

**chrishirst** · 01-01-2008, 07:51 AM

Quote:

I should add that I usually do my DHTML by switching class names instead of editing styles directly

Yep, it's much quicker for the client browser to switch class names than apply several property changes sequentially.

The Article

I'm not sure why he makes it sound so complicated or unusual.

Quote:

If you only modify the global stylesheet for an element type for which inline styles are defined, only those elements without inline styles are changed. This may be viewed as a feature or a weakness,

Errm? Yes, and this is a surprise to anybody?

the cascade hierarchy is External Styles -> Internal Styles -> In-line Styles with the properties declared later taking precedence.
Nothing startling there then.
Changing the properties dynamically of the preceding levels applied to the element group won't override later ones applied DIRECTLY to a specific element. And as in-line is the latest declaration on a specific element ...

If you have an element without an identifier how would you expect it to respond to an targetted style change if you can't target it directly.

Quote:

<h1 style="font-family: Palatino;
font-size: 14pt;">example</h1>
<script type="text/javascript">
var myH1Array = document.getElementsByTagName("H1");
var myElem = myH1Array.item(0);
var myStyle = myElem.style;
var fFamily = myStyle.fontFamily;
var fSize = myStyle.fontSize;
alert("H1 Inline:\nfamily: "
+ fFamily + "\nsize: " + fSize);
</script>

If you use the former method to read the style properties for H1, but have declared them inline as in the latter example, you get the wrong values—those defined in the embedded stylesheet, not those defined in the inline style attribute. Obviously, the problem can be resolved for named elements by reading the style properties for the element in question:

Yep, obviously you would, (not rocket science) because it would be reading the style applied to the tag group NOT the individual element

but if you want to get or set the property values in an in-line declared style, is there something amiss with using the DOM methods of ;

getAttribute("style") & setAttribute("style") once you have isolated the required element from the document array?

get returns a string (or null if the attribute doesn't exist) that is the declared styles so you can split() the string, change the value, then toString() the array and set it back.

**meloncholy** · 01-01-2008, 07:45 PM

Your point about the article is well made - it is rather opaque, and probably twice as long as it should be. I should probably have found a better one to which to link.

Quote:

Originally Posted by chrishirst

but if you want to get or set the property values in an in-line declared style, is there something amiss with using the DOM methods of ;

getAttribute("style") & setAttribute("style") once you have isolated the required element from the document array?

get returns a string (or null if the attribute doesn't exist) that is the declared styles so you can split() the string, change the value, then toString() the array and set it back.

Sounds reasonable, though perhaps using the element's style property would be easier?

As far as I can see (and returning somewhat to the original question), most of the time style only working inline is not a problem because: the property is declared inline in the HTML; the property is set inline first via JS before being read; or classes are switched instead. But sometimes (as with this slidey example) it is a problem and then other, non-standard methods are needed. Though I'm happy to be corrected on this.

Quote:

Originally Posted by chrishirst

If you have an element without an identifier how would you expect it to respond to an targetted style change if you can't target it directly.

Now there's a question that will appeal to HTML geeks and anyone who's ever edited a MySpace page.

I believe it was around that time I first fell in love with Firebug...

Code:

* html .text .text table table img, * html .text .text table table object, * html .text .text table table embed
{
	width: 90px;
}

body td br + table + br + table + br + table + br + table + br + table
{
	padding-top: 10pt;
}

**JeremyMiller** · 05-26-2008, 04:56 AM

I know it's taken me quite awhile to get back to this, but I just checked getAttribute("style") for FF and IE 7 and couldn't get it to work. Trolling around the web for awhile, I just got stuck, so I wrote this script:

HTML Code:

<html>
  <head>
    <style>
      body {
        margin:0px;
        font-family:monospace;
        white-space:pre;
      }
      #myDiv {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        overflow:auto;
        background-color:#000000;
        color:#ffffff;
        font-size:16px;
      }
    </style>
    <script>
      function showMe() {
        if (!document.styleSheets) return;

        var stylesheet_count = document.styleSheets.length;

        for (ss_num=0;ss_num < stylesheet_count;ss_num++) {
          document.getElementById('myDiv').innerHTML += "<h1> Stylesheet #"+ss_num+"</h1>";
          var stylesheet, stylesheet_suffix= '';
          if (document.styleSheets[ss_num].cssRules) {
            stylesheet = document.styleSheets[ss_num].cssRules;
            stylesheet_suffix = '].cssRules';
          } else if (document.styleSheets[ss_num].rules) {
            stylesheet = document.styleSheets[ss_num].rules;
            stylesheet_suffix = '].rules';
          }
          for (s in stylesheet) {
            if (typeof stylesheet[s] == "object") {
              document.getElementById('myDiv').innerHTML += "document.styleSheets["+ss_num+stylesheet_suffix+"["+s+"] :=><br />";
              for (t in stylesheet[s].style) {
                document.getElementById('myDiv').innerHTML += "document.styleSheets["+ss_num+stylesheet_suffix+"["+s+"].style."+t+" := "+stylesheet[s].style[t]+"<br />";
              }
            } else {
              document.getElementById('myDiv').innerHTML += "document.styleSheets["+ss_num+stylesheet_suffix+"."+s+" := "+stylesheet[s]+"<br />";
            }
          }
        }
      }
    </script>
  </head>
  <body onLoad="showMe();">
    <div id="myDiv"></div>
  </body>
</html>

It traverses the stylesheets for each browser using the corresponding array. Are you suggesting, Chris, another way? Or parsing that array of data? Specifically

document.styleSheets[x].cssRules[y].style.cssText (Firefox)
and
document.styleSheets[x].rules[y].style.cssText (IE 7)

?

This just seems so much more complicated to me than a simple document.getElementById(my_id).style.styleName = valueString;

Anyway, I just didn't want to drop this issue as I'm always looking to better my skills.