SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with javascript code--proper functioning in IE

    Hello,
    I am having some compatibility issues with some code I wrote--the code works fine in Firefox and Safari, but not at all in IE. Here is the code:

    <style type="text/css">


    .label
    {

    display:block;
    font: Bold 12px Verdana;
    color:#6d4450;
    margin:0;
    padding:10px;
    cursor: pointer;
    }

    .label:hover { font: Bold Verdana;
    color: #9fda7f;
    text-decoration: none; }

    p.label { color:#1597d4;
    display:block;
    font: 12px Verdana;
    margin:0;
    padding: 3px; }

    .elements
    {
    display:block;
    }

    a {

    font: Bold 12px Verdana;
    color:#6d4450;

    }

    </style>


    <script type="text/javascript">
    //<! [CDATA[
    window.onload = function() {

    var elems = null;
    var labels = null;

    if (document.querySelectorAll) {

    elems = document.querySelectorAll('div.elements');
    labels = document.querySelectorAll('div.label');
    } else if (document.getElementsByClassName) {
    window.alert("In here");
    elems = document.getElementsByClassName('elements');
    labels = document.getElementsByClassName('label');
    }

    if (elems) {
    for (var i = 0; i < elems.length; i++) {
    elems[i].style.display='none';
    }
    for (var i = 0; i < labels.length; i++) {
    labels[i].onclick=showBlock;
    }
    }
    }
    function showBlock(evnt) {

    var theEvent = evnt ? evnt : window.event;
    var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
    var itemId = "elements" + theSrc.id.substr(5,1);
    var item = document.getElementById(itemId);
    if (item.style.display=='none') {
    item.style.display='block';
    } else {

    item.style.display='none';
    }
    }
    // ]]></script>

    <div class="label" id="label1">
    Where Do I Begin with My Research?
    </div>
    <div class="elements" id="elements1">

    <h1 class="heading">Not Sure Where to Go?</h1>
    ---

    The purpose of the code is to create accordion-style menu items on a help page--you click a heading, and the text associated with that heading is revealed...

    I must admit, I am a studier of textbooks when it comes to programming--I like to know what is going on in the code...so, this code came from a textbook, and I adapted it to my setting. The code is written so it degrades gracefully--so, instead of interactivity in IE, the text is just displayed...this is good, because the content is still readable, even if the javascript does not become enabled...

    It would great, however, if I could get this to work in IE...the textbook indicated that it probably wouldn't (the author being unsure if IE would eventually support document.querySelectorAll or document.getElementsByClassName)...my one idea was that I could use getElementsByTagName...I tried it, but had some trouble getting it to work.

    I am fairly new at this...sorry if the question is rubbish...

    I appreciate your help, or any advice you could give!

    Michael

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Just about all of the JavaScript you have used is in the latest additions to FireFox/Safari and hasn't actually been added to the JavaScript standards yet. To get it to work you need to add your own functions to emulate those commands for the browsers that don't already understand them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the response--I had assumed that the principles of interaction with the style properties, while a bit new, was standard--for the simple reason that it came from a good source! (And, from my understanding that IE is terribly behind standards, hence Google's offer to help IE "modernize" shortly after releasing Chrome--which is sort of like having your friend who is better at basketball giving you a 10-point handicap--you probably need it, but admitting it is hard).

    I will see if I can't write some functions to replicate it in IE--if not, not a huge deal--it doesn't prevent the content from being read if it doesn't work (a beautiful thing)--and, I styled the layout in such a way that it doesn't look amiss if the javascript doesn't function--just not as easy to interact with...

  4. #4
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I did a bit of research on query selectors in IE8, and reviewed the book I got the above code in.

    Interestingly, the book indicates this code should work in IE8--there is even a screen shot of it working in IE8.

    Additionally, I found this page on the Microsoft Developer's Forum:

    http://msdn.microsoft.com/en-us/libr...288326(v=VS.85)

    It has this example:

    function doit()
    {
    var oAllPs = document.querySelectorAll("div.detail");
    var sFound = ( oAllPs == null ) ?
    "No matches found" : allPs.length;
    alert( "Results: " + sFound );
    }

    This matches the approach I am using with my code--even if it is nonstandard, it should work with IE8, right? If not, why would IE include this information on their developer's Web site--something else is wrong, I think...

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Your document needs to be in "IE8 standards mode" for queryselectorall to be available.

    This means using an appropriate doctype for your page, for example:

    Code html4strict:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
     
    </head>
    <body>
     
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •