SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using JavaScript to Activate/Deactivate CSS

    I have an element that's physically located at the end of my html, but I CSS to absolutely position it at the top of the page. However, if someone visits my site with JavaScript disabled, I don't want this element to be absolutely positioned; I want it to stay right where it is.

    So how can I add a script to the JavaScript below that will dictate that <div id="nav"> should be an active element, which I can then absolutely position with my style sheet?

    In fact, I think the JS does something similar with some other elements, but it's a little too complex for me to unravel.

    Thanks.

    PHP Code:
    /*switch_class.js3*/

    //set up arrays with more_link id's, collapse_link id's, and rest_of_article id's:
    var rest_of_articles=new Array("rest_of_navfeatures""rest_of_art1""rest_of_art2""rest_of_gov");
    var 
    more_links=new Array("more_navfeatures""more_art1""more_art2""more_gov");
    var 
    collapse_links=new Array("collapse_navfeatures""collapse_art1""collapse_art2""collapse_gov");

    window.onload=initialize;

    //executes after the html in the body already exists:
    function initialize(){

    for(var 
    i=0rest_of_articles.lengthi++)
    {
         
    document.getElementById(rest_of_articles[i]).className="no_display";
         
    document.getElementById(more_links[i]).className="display_link";

         
    document.getElementById(more_links[i]).onclick=more_article;
         
    document.getElementById(collapse_links[i]).onclick=collapse_article;
    }
    }

    function 
    more_article(){

    //find position in the more_links array of the link that was clicked:
    for(var position=0position more_links.lengthposition++){

         
    //this.id is the id of the link that was clicked:
         
    if(this.id == more_links[position]) break;
    }

    //display full article corresponding to the link that was clicked:
    if(position <  more_links.length// then found position in more_links array
    {
         
    document.getElementById(rest_of_articles[position]).className="display_text";
         
    document.getElementById(more_links[position]).className="no_display";
         
    document.getElementById(collapse_links[position]).className="display_link";
         return 
    false;
    }
    else
    {
        
    alert("error");
    }

    }


    function 
    collapse_article(){

    //find position in the collapse_links array of the link that was clicked:
    for(var position=0position collapse_links.lengthposition++){

        
    //this.id is the id of the link that was clicked:
        
    if(this.id == collapse_links[position]) break;  
    }

    //hide rest of article and display the 'more' link:
    if(position more_links.length// then found position in collapse_links array
    {
         
    document.getElementById(rest_of_articles[position]).className="no_display";
         
    document.getElementById(more_links[position]).className="display_link";
         return 
    false;
    }
    else 
    //didn't find position in array--something is wrong!
    {
         
    alert("error");
    }



  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi geosite,

    Here's one way. The following shows the basic idea:
    Code:
    <html>
    <head>
    <style type='text/css'>
    #nav {
      /* downgrade styles */
    }
    </style>
    <script type='text/javascript'>
    // over-ride styles
    document.write("<style type='text/css'>#nav{position:absolute;left:0;top:0;}</style>");
    </script>
    </head>
    <body>
    
    <p>Demo</p>
    
    <div id='nav'>nav</div>
    
    </body>
    </html>
    If javascript is disabled the 'document.write' will not get executed.

    This is better:
    Code:
    <html>
    <head>
    <link rel='stylesheet' type='text/css' href='default.css'>
    <script type='text/javascript'>
    document.write("<link rel='stylesheet' type='text/css' href='overrides.css'>");
    </script>
    </head>
    <body>
    
    <p>Demo</p>
    
    <div id='nav'>nav</div>
    
    </body>
    </html>


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
  •