Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Pacific NW
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Web Page Template Change using JS

    Beginner to intermediate JS coder.

    Question: Is there a possible way to create a js function that will change a web page template and have the duration change every 4 months? This means that all pages corresponding to the template being used will change with the template?

    I have 4 page designs and would like to implement the different designs every 4 months but would like to create a script that will automatically do this instead of having to manually go in and change every page to match the template desired.

    Thoughts?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    on second thoughts, no...
    Last edited by xelawho; 09-16-2011 at 11:08 PM. Reason: silly idea

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,076
    Thanks
    80
    Thanked 4,550 Times in 4,514 Posts
    Sure. But it would be better to do this server-side (PHP/ASP/JSP/etc.).

    But sure.

    Just change the CSS, and make sure that everything on your page is positioned/colored/etc. based on CSS.

    That's why it's better to do it server-side: You just have the server-side code change which CSS file is included (or let the server-side code create the CSS file or or or...).

    But there's no particular reason you couldn't manipulate it all in JS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    or like this, provided you can put the entire page into a div...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body onload="showMonths()">
    <style type="text/css">
    .season{
    display:none;
    }
    </style>
    <div class="season" id="spring">This is my spring page</div>
    <div class="season" id="summer">This is my summer page</div>
    <div class="season" id="fall">This is my fall page</div>
    
    <script type="text/javascript">
    
    date=new Date();
    month=date.getMonth();
    
    function showMonths(){
    if (month>=1&&month<=4) {
    document.getElementById("fall").style.display="none"
    document.getElementById("spring").style.display="inline"
    } else if (month>=5&&month<=8) {
    document.getElementById("spring").style.display="none"
    document.getElementById("summer").style.display="inline"
    } else if (month>=9&&month<=12) {
    document.getElementById("summer").style.display="none"
    document.getElementById("fall").style.display="inline"
    	}
    }
    	
    </script>
    </body>
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,076
    Thanks
    80
    Thanked 4,550 Times in 4,514 Posts
    Here. This is a crappy example, but it shows the principle of the thing.

    Bring the page up in your browser. Then hit refresh until it changes colors. Look at the other changes, in the layout.
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
        margin: 0px;
    }
    div#ONE {
        position: absolute;
        top: 0px; left: 0px;
        width: 100%; height: 100%;
        background-color: pink;
        color: red;
    }
    div#ONE div#nav {
        position: absolute;
        top: 0px; right: 0px;
        width: 150px; height: 400px;
        border-left: solid red 5px;
        padding-left: 20px;
    }
    div#ONE div#content {
        position: absolute;
        top: 0px; left: 0px;
    }
    
    div#TWO {
        position: absolute;
        top: 0px; left: 0px;
        width: 100%; height: 100%;
        background-color: lightblue;
        color: blue;
    }
    div#TWO div#nav {
        position: absolute;
        top: 0px; left: 0px;
        width: 150px; height: 400px;
        border-right: solid blue 5px;
        padding-right: 20px;
    }
    div#TWO div#content {
        position: absolute;
        top: 0px; left: 150px;
        padding-left: 50px;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    document.write('<div id="' + (Math.random() > 0.5 ? 'TWO' : 'ONE') + '">');
    </script>
    <div id="nav">
    <br/><br/><br/>This is my<br/><br/><br/>
    navigation<br/><br/><br/>
    section<br/><br/><br/>
    </div>
    <div id="content">
    <br/><br/><br/>CONTENT<br/><br/><br/>
    CONTENT<br/><br/><br/>
    CONTENT<br/><br/><br/>
    </div>
    </div><!-- end of ONE or TWO -->
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,076
    Thanks
    80
    Thanked 4,550 Times in 4,514 Posts
    See? Combine xelawho's and my code, for example, and lots of possibilities.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,076
    Thanks
    80
    Thanked 4,550 Times in 4,514 Posts
    xelawho:

    You don't need any of the
    Code:
    document.getElementById("...").style.display="none"
    lines. The elements are display: none by your css code, by default.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yes of course you're right - I was adapting the code from my first (very bad) idea, using setTimeout, and forgot that the date object gets "fixed" on page load, so you're never going to have two divs showing at once. I'll leave my silly code there for posterity's sakes.
    Last edited by xelawho; 09-17-2011 at 12:30 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •