Page 1 of 1

Using dynamic width

Posted: Wed 10. Mar 2010, 09:39
by 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

Re: Using dynamic width

Posted: Wed 10. Mar 2010, 17:00
by Marc
I'm pretty sure it will work with the new dynamic width. Could you send me the script or post it here?

Re: Using dynamic width

Posted: Thu 11. Mar 2010, 08:46
by 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' />");
}
// ]]>

Re: Using dynamic width

Posted: Thu 11. Mar 2010, 20:04
by Marc
I was actually more wondering how the rotating banner script is integrated.

Re: Using dynamic width

Posted: Thu 11. Mar 2010, 22:16
by 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

Re: Using dynamic width

Posted: Sun 14. Mar 2010, 11:54
by 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.

Re: Using dynamic width

Posted: Mon 22. Mar 2010, 17:09
by gfrojdh
Thank you for your support.

The banner sizes are:

866x150px
1150x150px
1350x150px