SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript toggle not working in IE

    Hi this is some pretty simple JS which shows / hides a transcript on the page. I dont use Jquery because we are not allowed the library in our CMS.
    It works as expected in all browsers but IE - anyone know why it would fail?


    Code:
    // define a new function called addLoadEvent which takes in one param which should be function
    function addLoadEvent(func) {
     // assign window.onload event to variable oldonload
    var oldonload = window.onload; 
    // if window.onload is not a function,  and thus has never been defined before elsewhere
    if (typeof window.onload != 'function') {
        // assign 'func' to window.onload event. set the function you passed in as the onload function
        window.onload = func;
      } else {           
        // if window.onlad is a function - dont overwrite it
        window.onload = function() { 
          // define a new onload function that does the following:
          //do whatever the old onload function did
          oldonload();
          //and then do whatever your new passed in function does
          func();      
        }
      }
    }
    var fn = function(){
      var style = document.createElement('style');
      style.setAttribute('type', 'text/css');
      var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
      style.appendChild(styles);
      var head = document.getElementsByTagName('head')[0].appendChild(style);
      var divs = document.getElementsByTagName('div');
      for (d in divs) {
        if(divs[d].className == 'ou-transcript') {
          divs[d].className = divs[d].className + ' transcript-hide';
        } else if(divs[d].className == 'ou-clip') {
          var p = document.createElement('p');
          var a = document.createElement('a');
          var t = document.createTextNode('Show transcript');
          a.setAttribute('href', '#');
          a.className = 'ou-toggle';
          a.onclick = function(){toggleTranscript(this.parentNode.parentNode); if(this.childNodes[0].nodeValue == 'Show transcript') {this.childNodes[0].nodeValue = 'Hide transcript'} else {this.childNodes[0].nodeValue = 'Show transcript'} return false};
          a.appendChild(t);
          p.appendChild(a);
          divs[d].appendChild(p);
        }
      }
    };
    function toggleTranscript(element) {
      var transcript = element.nextSibling;
      if(!transcript.className) {
        transcript = transcript.nextSibling;
      }
      var classes = transcript.className.split(' ');
      for(c in classes) {
        if(classes[c] == 'transcript-hide') {
          delete classes[c];
          classes.push('transcript-show');
          break;
        } else if(classes[c] == 'transcript-show') {
          delete classes[c];
          classes.push('transcript-hide');
          break;
        }
      }
      transcript.className = classes.join(' ');
    }
    // call function
    addLoadEvent(fn);


    Steven

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it works in IE9, but fails in IE8 and earlier, then the problem is here:
    Code:
    var fn = function(){
      var style = document.createElement('style');
      style.setAttribute('type', 'text/css');
      var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
      style.appendChild(styles);
      var head = document.getElementsByTagName('head')[0].appendChild(style);
    Those lines to create a style tag and style rules will not work in IE8 and earlier.
    Try the following modification:
    Code:
      var style = document.createElement('style');
      style.type = 'text/css';
      var styles = document.createTextNode('.transcript-hide {display: none;} .transcript-show {display: block;}');
      if (style.styleSheet) 
        style.styleSheet.cssText = styles.nodeValue;
      else
        style.appendChild(styles);
      var head = document.getElementsByTagName('head')[0].appendChild(style);


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
  •