SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    style switcher vs. corner rounder; need a truce for duelling javascripts...

    hi all,

    i'm trying to use a javascript style switcher (http://www.alistapart.com/articles/alternate/) on a page that also uses javascript to round corners (http://www.curvycorners.net/).

    the div with the rounded corners is positioned differently on the two pages. everything works fine, corners, switching, etc., but for the fact that when the style is switched, it does not move the div to the new location. the code is there, though, and acessible to the browser, because if you refresh the page it moves into the correct spot.

    any ideas on how to fix this? please keep in mind, i know almost nothing about javascript as i'm learning it through use-case situations like these.

    thanks in advance...

    edit:

    the divs move into the new position, but the corner rounding and background image do not display properly until refreshed.

    sorry about the double post, the forum seems slow for me today and i think i sent it a seconed time.
    Last edited by mtouchette; Jul 24, 2006 at 07:32. Reason: correction/clarification and apology...

  2. #2
    Maniacally depressed robot poncho's Avatar
    Join Date
    Dec 2004
    Location
    Belfast, N.Ireland
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds as though the style sheet switcher has worked but the curvey corners need applied again to affect the new style.

    I was going to write up a quick hack to show you how to get around this sort of thing, but I've created an object containing all of the properties (variables) and methods (functions) you should need here instead.

    Using an object allows you to keep all of your functions grouped in a logical fashion. I find them to be a lot easier to work with after using them for a lot of related tasks.

    Anyway, here is the code. I haven't tested it, but I think it should work as expected.

    PHP Code:
     // Create an Object-literal "myPageStyle"
     
    var myPageStyle = {
         
    // Empty property for style sheet cookie
         
    styleCookienull,
         
         
    // Empty property for style sheet title
         
    styleTitlenull,
         
         
    // Object property with corner settings
         
    cornerSettings: {
             
    tl: {radius20},
             
    tr: {radius20},
             
    bl: {radius20},
             
    br: {radius20},
             
    antiAliastrue,
             
    autoPadtrue
         
    },
         
         
    // Empty property for myBox
         
    myBoxnull,
         
         
    // Function to load up settings and get going
         
    init: function() {
             
    // Read cookie and populate the styleCookie property
             
    this.styleCookie readCookie("style");
             
             
    // Read cookie and populate the styleTitle property
             
    this.styleTitle this.styleCookie this.styleCookie this.getPreferredStyleSheet();
             
             
    // Apply the active style sheet from the cookie
             
    this.setActiveStyleSheet(this.styleTitle);
             
             
    // Create a new curvyCorners Class and populate the myBox property
             
    this.myBox = new curvyCorners(this.cornerSettings"myBox");
             
             
    // Apply curvyCorners
             
    this.myBox.applyCornersToAll();
         },
         
         
    // Utility function to apply both style sheet and curvyCorners
         
    function applyCSSAndCorners(title) {
             
    this.setActiveStyleSheet(title);
             
    this.myBox.applyCornersToAll();
         },
         
         
    // StyleSheet Switcher functions (only reformatted slightly)
         
    setActiveStyleSheet: function(title) {
             var 
    iamain;
             for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
                 if(
    a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title")) {
                     
    a.disabled true;
                     if(
    a.getAttribute("title") == title) {
                         
    a.disabled false;
                     }
                 }
             }
         },
     
         
    getActiveStyleSheet: function() {
             var 
    ia;
             for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
                 if(
    a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title") && !a.disabled) {
                     return 
    a.getAttribute("title");
                 }
             }
             return 
    null;
         },
     
         
    getPreferredStyleSheet: function() {
             var 
    ia;
             for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
                 if(
    a.getAttribute("rel").indexOf("style") != -1
                 
    && a.getAttribute("rel").indexOf("alt") == -1
                 
    && a.getAttribute("title")) {
                     return 
    a.getAttribute("title");
                 }
             }
             return 
    null;
         }
     }
     
     
    /*
      * These functions do not need to be in the object
      * as they could be used for any cookie reading / writing
      */
     
    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=/";
     }
     
     function 
    readCookie(name) {
         var 
    nameEQ name "=";
         var 
    ca document.cookie.split(';');
         for(var 
    i=0;ca.length;i++) {
             var 
    ca[i];
             while (
    c.charAt(0)==' ') {
                 
    c.substring(1,c.length);
             }
             if (
    c.indexOf(nameEQ) == 0) {
                 return 
    c.substring(nameEQ.length,c.length);
             }
         }
         return 
    null;
     }
     
     
    window.onload myPageStyle.init;
     
    window.onunload = function(e) {
         var 
    title myPageStyle.getActiveStyleSheet();
         
    createCookie("style"title365);
     } 
    I've excluded the cookie functions from the object as they are not directly related to styles, they are just fine being standalone.

    I hope that solves you problem and gives you some insight into objects (which took me ages to get my head around to any degree).

    Cheers;
    Poncho
    Perfecting the art of breaking stuff.
    Check 'em: CakePHP | TextMate

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow! i'm impressed. thanks!

    but, i think i am missing something in the implementation. i tried it by changing the head and relevant parts of the body to this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/transitional.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>TRMM September, 2005 | Front Cover</title> 
    
    
    <link rel="stylesheet" type="text/css" href="../../../../styles/eNewsMain06-07.css"  title="06-07"media="screen" / >
    <link rel="alternate stylesheet" type="text/css" href="../../../../styles/eNewsMain05-06.css" title="05-06" />
    <script type="text/JavaScript" src="../../../../scripts/roundAndSwitch.js"></script>
    
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <!-- begin header and navigation -->
    
    
    	<div id="nameplate">	
    		<div id="deptName">
    <!--<div id="leftSpace"></div>-->
    		Technology Resources&nbsp;
    		</div> <!-- end deptName div -->
    		<div id="title">
    		Monthly Monitor
    <!--<div id="rightSpace"></div>-->
    		</div> <!-- end title div -->
    
    <p>Monthly news and notes from the <span>TR</span>enches</p>
    </div> <!-- end div nameplate -->
    	
    
    
    <div id="navigation">
    
    
    		<div id="navBar">
    		<span class="current">&nbsp;Cover&nbsp;</span> 
    		<span class="vBar">|</span> <a href="feature.htm">&nbsp;Feature&nbsp;</a> 
     		<span class="vBar">|</span> <a href="recog.htm">&nbsp;Recognition&nbsp;</a>
    		<span class="vBar">|</span> <a href="CIO.htm">&nbsp;From the Editors &nbsp;</a> 
    		<span class="vBar">|</span> <a href="TRenches.htm">&nbsp;In the
    		<b>TR</b>enches&nbsp;</a>
     		<span class="vBar">|</span> <a href="inBrief.htm">After Hours </a> 
    		<span class="vBar">|</span> <a href="calendar.htm">&nbsp;Calendar&nbsp;</a>		</div> 
    		<!-- end div navBar -->	
    </div > <!-- end div navigation -->
    <!-- end header and navigation -->
    
    
    <!-- begin body -->
    <div class="myBox">
    	<div id="coverWrapper">
    <div id="coverContent">
    <a href="#" onClick="setActiveStyleSheet ('06-07'); return false;">
    newStyle</a> 
    <p></p>
    <p><a href="#" onClick="setActiveStyleSheet ('05-06'); return false;">
    oldStyle</a>
    
    </p>
    i get two errors--

    1. the corners are not round (i changed my corner parameters to 20, 20, 1, 1)

    2. when i try to implement the switching i get an error on the page.

    do i need to keep the followign in the header? i had it in before, but took it out for the new script.

    Code:
    <script type="text/JavaScript">
    
      window.onload = function()
      {
          /*
          The new 'validTags' setting is optional and allows
          you to specify other HTML elements that curvyCorners
          can attempt to round.
    
          The value is comma separated list of html elements
          in lowercase.
    
          validTags: ["div", "form"]
    
          The above example would enable curvyCorners on FORM elements.
          */
          settings = {
              tl: { radius: 20 },
              tr: { radius: 20 },
              bl: { radius: 1 },
              br: { radius: 1 },
              antiAlias: true,
              autoPad: true,
              validTags: ["div"]
          }
    
          /*
          Usage:
    
          newCornersObj = new curvyCorners(settingsObj, classNameStr);
          newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
          */
          var myBoxObject = new curvyCorners(settings, "myBox");
          myBoxObject.applyCornersToAll();
      }
      
    </script>
    thanks for the superhuman assistance. :-)

  4. #4
    SitePoint Zealot i-devs's Avatar
    Join Date
    Mar 2005
    Location
    Madison, WI USA
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This must be a popular topic... at least I don't feel as bad when I know someone else is struggling. I believe I'm trying to use the same stylesheet switcher
    Code:
    // Stylesheet switcher ////////////////////////
    function setActiveStyleSheet(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
          a.disabled = true;
          if(a.getAttribute("title") == title) a.disabled = false;
        }
      }
    }
    
    function getActiveStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return null;
    }
    
    function getPreferredStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1
           && a.getAttribute("rel").indexOf("alt") == -1
           && a.getAttribute("title")
           ) return a.getAttribute("title");
      }
      return null;
    }
    
    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=/";
    }
    
    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;
    }
    
    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
    }
    
    window.onunload = function(e) {
      var title = getActiveStyleSheet();
      createCookie("style", title, 365);
    }
    
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    but I'm mixing it with a toggler from dreamlettes
    Code:
    //toggler - by dreamlettes.net
    function tgClasses(c) {
    var ael,a=new Array(),j=0;
    if(document.all)ael=document.all;
    else if(document.getElementsByTagName && !document.all)ael=document.getElementsByTagName("*");
    for(i=0;i<ael.length;i++) {
    if(ael[i].className==c) { a[j]=ael[i]; j++; }
    } return a;
    }
    function toggler() {
    var h=tgClasses('handler');
    var t=tgClasses('toggle');
    var sall=tgClasses('showall')
    var hall=tgClasses('hideall')
    for (var i = 0; i < sall.length; i++) sall[i].onclick = function() {showall()}; 
    for (var i = 0; i < hall.length; i++) hall[i].onclick = function() {hideall()}; 
    for (var i = 0; i < h.length; i++) { h[i].someProperty = i; h[i].onclick = function() {toggle(this)}; }
    for (var i = 0; i < t.length; i++) t[i].style.display = 'none';
    }
    function toggle(el) {
    var i= el.someProperty;
    var t=tgClasses('toggle')[i];
    if (t.style.display == 'none') {t.style.display = ''; el.className = 'handler_down';}
    else {t.style.display = 'none'; el.className = 'handler'}
    } 
    function showall() {
    var h=tgClasses('handler');
    for (var i = 0; i < h.length; i++)  h[i].className = 'handler_down';
    var t=tgClasses('toggle');
    for (var i = 0; i < t.length; i++)  t[i].style.display = '';
    }
    function hideall() {
    var h=tgClasses('handler_down');
    for (var i = 0; i < h.length; i++)  h[i].className = 'handler';
    var t=tgClasses('toggle');
    for (var i = 0; i < t.length; i++)  t[i].style.display = 'none';
    }
    
    window.onload=toggler;
    and must confess that I am still extremely deficient in getting around to learning javascript.

    I realize, or believe, the issue is that there a two onload events, so the final one cancels the first. The stylesheet is able to be switched, but it doesn't stick, and as soon as you move to the next page, it reverts back. All is being called from within an external js file.

    I actually tried to use a multi onload script, but was just having issues with the function(e) in the stylesheet switcher. Even tried giving that function a name... still nothing worked.

    Don't know how similar this issue is, but hoping there is some mutual solution that could help us both on our way! Any help is highly appreciated.
    Identity Developments - SEO Focused Web Design
    It's not about websites, it's about your identity.

    | Credit Card Apps |

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure why you were having the problem as the switcher worked (works) fine for me without the additional curvey corners part.

    in fact, it works fine with the curvey corners script, everything changes as it should...but for the corners.

  6. #6
    SitePoint Zealot i-devs's Avatar
    Join Date
    Mar 2005
    Location
    Madison, WI USA
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it had been working, and I have no idea when it quit... I just happened to notice it today. Switches fine, but the cookie doesn't seem to set or something.

    The only thing I could come up with was that I think I had added the toggler function after the switcher.

    I'm using the switcher simply for a +/- font size function across the site, and the toggler specifically on this page http://www.identitydevelopments.com/information.htm.

    If I disable the toggler, then the switcher works, which was also what lead to my conclusion.

    Either way, I feel your frustration trying to get things to play nicely!
    Identity Developments - SEO Focused Web Design
    It's not about websites, it's about your identity.

    | Credit Card Apps |


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
  •