...

View Full Version : Web Page Template Change using JS



StHelensBull
09-16-2011, 09:49 PM
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?

xelawho
09-16-2011, 10:53 PM
on second thoughts, no...

Old Pedant
09-16-2011, 11:33 PM
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.

xelawho
09-16-2011, 11:36 PM
or like this, provided you can put the entire page into a div...


<!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>

Old Pedant
09-16-2011, 11:58 PM
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.


<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>

Old Pedant
09-16-2011, 11:59 PM
See? Combine xelawho's and my code, for example, and lots of possibilities.

Old Pedant
09-17-2011, 12:01 AM
xelawho:

You don't need any of the

document.getElementById("...").style.display="none"

lines. The elements are display: none by your css code, by default.

xelawho
09-17-2011, 12:06 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum