Using dynamic width

[gfrojdh]

Hi Marc.

Would like to upgrade to 1.2.4, but it seems that you pulled the nice javascript based width changer that you used in 1.0.2. Any method of getting this back in? I'm using the theme together with a php script for rotating banners in three different page widths at http://www.tacs.nu/forum and dynamic width doesn't work with the background images.

Thanks,

Goran

[Marc]

I'm pretty sure it will work with the new dynamic width. Could you send me the script or post it here?

[gfrojdh]

Sure, here's the script I'm using. Your're calling it instead of a picture, and it rotates the pictures inside a specified folder (in this case "wide", "wider", and "widest" as declared in overall_header.html:

/*
Style semi-dynamic width by Marc Alexander (c) 2008
Parts based on styleswitcher.js contained in prosilver

*/


var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}

if (x >= 1420)
{
document.write("<link type='text/css' href='{T_THEME_PATH}/widest.css' rel='stylesheet' />");
} else if (x >= 1220)
{
document.write("<link type='text/css' href='{T_THEME_PATH}/wider.css' rel='stylesheet' />");
} else if (x >= 1070)
{
document.write("<link type='text/css' href='{T_THEME_PATH}/wide.css' rel='stylesheet' />");
} else
{
document.write("<link type='text/css' href='{T_THEME_PATH}/standard.css' rel='stylesheet' />");
}
// ]]>

[Marc]

I was actually more wondering how the rotating banner script is integrated.

[gfrojdh]

The rotate.php is called in the files wide.css, wider.css and widest.css like this:

/*
Style semi-dynamic width by Marc Alexander (c) 2008
*/
.outside {
width : 1400px;
}

.inside {
background-image: url("images/bg_body_widest.gif");
background-repeat: repeat-y;
}

#wrap {
width: 1350px;
}

.headerbar {
background-image: url("images/widest/rotate.php");
width: auto;
}
The folders wide, wider, widest each have a copy of the rotate.php, and the images that you want to randomize.

Contents of theme/images/wide:

-rw-r--r-- 1 32374 32374 18125 2008-12-14 13:54 header_random_wide_1.jpg
-rw-r--r-- 1 32374 32374 20479 2008-12-14 13:54 header_random_wide_2.jpg
-rw-r--r-- 1 32374 32374 9779 2008-12-14 13:54 header_random_wide_3.jpg
-rw-r--r-- 1 32374 32374 20348 2008-12-14 13:54 header_random_wide_4.jpg
-rw-r--r-- 1 32374 32374 5818 2008-12-20 00:55 rotate.php

//Goran

[Marc]

I'll see if I get some time to adapt this for proFormell 1.2.4.

What size do your banners have?


P.S: Moved to Styles Support.

[gfrojdh]

Thank you for your support.

The banner sizes are:

866x150px
1150x150px
1350x150px