SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help: One script interfering with the other

    Hi everyone, I'm not a programmer -- unfortunately...

    However, with all these nice tutorials around on the internet I'm, trying to implement some Javascript, in this case a style sheet switch and a script that clears the default cvalues from text boxes.

    So, I have styleswitcher.js and textbox-clear.js.

    The textbox-clear somehow prevents the styleswitcher from functioning. I guess something to do with initialising (???)

    What can I do to get this working? Many thanks!

    textbox-clear.js
    Code:
    function init(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].type=='text'){
    inp[i].setAttribute('rel',inp[i].defaultValue)
    inp[i].onfocus=function(){
    if(this.value==this.getAttribute('rel')){this.value='';}
    else{return false;}}
    inp[i].onblur=function(){
    if(this.value==''){this.value=this.getAttribute('rel');}
    else{return false;}}
    inp[i].ondblclick=function(){this.value=this.getAttribute('rel')}
    }}}
    if(document.childNodes){window.onload=init}
    styleswitcher.js
    Code:
    function initSwitcher() {
    
        // Finds the links that are used to change styles (identified by title tag)
        
        var links = document.getElementsByTagName("a");
        
        for (var i=0; i < links.length; i++) { // loops through array
       
           if (links[i].getAttribute("title")) { // have a title attribute?
            
               links[i].onclick = function() { // setting onclick event of each node
                  
                    setActiveStyleSheet(this.getAttribute("title")); // in the node itself, so 'this' is used
                
                    return false; // cancels default onclick behavior
               } 
    	   }
        } 
    }
    
    // Enables the stylesheet that was selected last time (from cookie)
    // First it disables all the stylesheet, then re-enables the one that was passed
    function setActiveStyleSheet(title) {
     
        var i, a, main;
       
        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
         
           if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?;
               && a.getAttribute("title")) { // has a title attribute?
        
               // disable stylesheet
               a.disabled = true;
          
               // Matches the passed alternative style name?; if so re-enable it 
               if(a.getAttribute("title") == title) a.disabled = false;
           }
        }
    }
     
    // Gets the 'active' stylesheet that is defined in the HTML file  
    function getActiveStyleSheet() {
    
      var i, a;
      
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
      
         if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?
             && a.getAttribute("title") // has a title attribute
             && !a.disabled) { // and not disabled?
        
             return a.getAttribute("title");
         }
      }
      
      return null; // not found 
    }
    
    // Sets the default stylesheet (rel="stylesheet" NOT rel="alternate stylesheet"). 
    // note: the main.css is your "sticky" stylesheet that will never be changed (no title attribute)
    function getPreferredStyleSheet() {
    
      var i, a;
    
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
      
      	  // Returns default stylesheet with title attribute 
          if(a.getAttribute("rel").indexOf("style") != -1 // is it a stylesheet?
          	 && a.getAttribute("rel").indexOf("alt") == -1 // is it NOT alternative style?
             && a.getAttribute("title"))  // does it have the title attribte present
           
             return a.getAttribute("title");
      }
      
      return null; // if no "link" elements found, return null
      
    }
    
    // Created by Peter-Paul Koch (http://www.quirksmode.org/)
    function createCookie(name,value,days) {
      
      if (days) {
      
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
        
      } else {
      
        expires = "";  
      }
        document.cookie = name+"="+value+expires+"; path=/"; 
    }
    
    // Created by Peter-Paul Koch (http://www.quirksmode.org/)
    function readCookie(name) {
    
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
    
      for(var i=0;i < ca.length;i++) {
      
        var c = ca[i];
        
        while (c.charAt(0)==' ') {
        
            c = c.substring(1,c.length);
        
        }
        
        if (c.indexOf(nameEQ) == 0) {
        
            return c.substring(nameEQ.length,c.length);
        }
      
      }
      
      return null;
    }
    
    /****************** Functions for page load and unload ******************/
    
    // Setting up links, and default stylesheets when loaded
    window.onload = function() {
    
        initSwitcher(); // set the links
    
        var cookie = readCookie("style"); // name of cookie that would be saved
      
        // If cookie not set, get the preferred stylesheet defined in the HTML file
        var title = cookie ? cookie : getPreferredStyleSheet();  
        
        setActiveStyleSheet(title);
    }
    
    // Saving selected stylesheet (before closing browser or going to new web page)
    window.onunload = function() {
    
        var title = getActiveStyleSheet();
        
        createCookie("style", title, 365); // 365 day cookie
    }

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both scripts writes to the window.onload property so the latter wins. You need to create one function that calls initSwitcher and init and attach it to onload. Or use cross-browser function that can attach multiple event listeners on one event:

    Code:
    function e(element, event, handler) {
     if (element.addEventListener)
      element.addEventListener(event, handler, false);
     else if (element.attachEvent)
      element.attachEvent('on' + event, handler);
     else
      element['on' + event] = handler;
    }
    e(window, 'load', function () { ... first function ... });
    e(window, 'load', function () { ... second function ... });
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, Alex. I've got it to work with this, which I found on the web:
    Code:
    <script type="text/javascript">
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(dw_fontSizerDX.init);
    addLoadEvent(initSwitcher);
    addLoadEvent(function() {
      /* more code to run on page load */ 
    });
    </script>
    However, I'm still in big trouble!

    Somehow this style switcher script causes my navigation not to work any more: http://new.fightforsight.sigma.titaninternet.co.uk/home (see main navigation above the picture and small nav at the top. They have onclick="this.blur();" and I removed it because I thought this mught interfere, but it turned out not to be teh solution.

    Can anyone help? What is causing the menus to switch off the style sheet, and how can I fix it?? (As I said, I'm no programmer.....)


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
  •