Different Banners Different Screen Resolution

[TCwho]

Hello Everyone. I want to thank everyone again for always helping me and being so friendly here :)

 

I have designed a banner to fit on 800x600. Normally I would have created a table with the banner inside and the background color to the same as the background causing the allusion of it being one (when I use to use Frontpage). But I would like to create two different banners, one for 800x600 and one for 1024x768 screen resolution. Does anyone know how this can be accomplished? Or can someone point me to a site that explains how to have a custom banner/image based on the visitors screen resolution.

 

I hope I have made myself clear. I hope to be able to show you guys the progess within the next coming weeks :thumbsup:

[♥Vger]

As long as the ratio of width to height is kept the same you can declare the banner size in percentages e.g. width ="30%" height="10%", without the image getting too messed up. You may have to turn off 'calculate image size' in osCommerce.

 

Alternatively there are scripts available that will detect screen resolution, and you should be able to adapt the if-then-else commands in these to show a certain banner for a certain resolution.

 

Vger

[TCwho]

The banner I was actually speaking of was the Site Logo Banner at the top of the page.

 

...hmm so you are saying just use a regular script (like javascript) that are easily available for detecting screen resolutions.... OK...I have seen those scripts around, so I will give it a try. Thanks....hopefully it will not be too tough :blush:

 

Thank You

[boxtel]

The banner I was actually speaking of was the Site Logo Banner at the top of the page.

 

...hmm so you are saying just use a regular script (like javascript) that are easily available for detecting screen resolutions....  OK...I have seen those scripts around, so I will give it a try.  Thanks....hopefully it will not be too tough :blush:

 

Thank You

<{POST_SNAPBACK}>

 

 

I use this in application top:

 

// Resolution redirect

if (!$spider_flag) {

if (isset($HTTP_GET_VARS['x'])) {

if ($HTTP_GET_VARS['x'] == '1') {

$res = '800';

} elseif ($HTTP_GET_VARS['x'] == '2') {

$res = '1024';

} else {

$res = '1024';

}

if (!tep_session_is_registered('res')) {

tep_session_register(res);

}

} else {

if (!tep_session_is_registered('res')) {

echo '<script>';

echo 'if (screen.width==800) { location.href="index.php?x=1" }';

echo 'if (screen.width==1024) { location.href="index.php?x=2" }';

echo '</SCRIPT>';

echo '<noscript>';

echo '</noscript>';

echo "\n";

}

}

}

 

 

then in the site I use thing like :

 

if ($_SESSION['res'] == '800') {

use stylesheet_800.css

use logo_800.jpg

etc...

} else { // also defaults if user has javascript disabled

use stylesheet_1024.css

use logo_1024.jpg

}

 

 

things like that.

 

by the way, this also gives me the indication that the user has javascript enabled.

if not, res will not be registered as a session variable.

[TCwho]

then in the site I use thing like :

if ($_SESSION['res'] == '800') {
use stylesheet_800.css
use logo_800.jpg
etc...
} else { // also defaults if user has javascript disabled
use stylesheet_1024.css
use logo_1024.jpg
}

 

:lol: :lol: This seems to be it. Of course I take out the "etc..." ...that doesnt seem to be part of the code :lol:

 

Now you indicated the first part of the code goes in application top, but this second half....where would I put that code.....(Im guessing the same place where the banner is..but I could be wrong)...

 

Also another question...I see I will have to create two different css stylesheets...will that cause problems overall....meaning... will I have to go find<->search throught the site making these changes where the css stylesheets are called up...

 

sorry for all the question...I am new to css stylesheets as well....although I am finding them to be SO BENEFICIAL.

 

thanks

[boxtel]

then in the site I use thing like :

if ($_SESSION['res'] == '800') {
use stylesheet_800.css
use logo_800.jpg
etc...
} else { // also defaults if user has javascript disabled
use stylesheet_1024.css
use logo_1024.jpg
}

 

:lol:  :lol:  This seems to be it.  Of course I take out the "etc..." ...that doesnt seem to be part of the code :lol:

 

Now you indicated the first part of the code goes in application top, but this second half....where would I put that code.....(Im guessing the same place where the banner is..but I could be wrong)...

 

Also another question...I see I will have to create two different css stylesheets...will that cause problems overall....meaning... will I have to go find<->search throught the site making these changes where the css stylesheets are called up...

 

sorry for all the question...I am new to css stylesheets as well....although I am finding them to be SO BENEFICIAL.

 

thanks

<{POST_SNAPBACK}>

 

basically you can check the registered screen resolution anywhere.

 

for different stylesheet loads:

 

in my language files I have this :

 

 

if ($_SESSION['res'] == '640') {

define('STYLESHEET', 'stylesheet_800.css');

} elseif ($_SESSION['res'] == '800') {

define('STYLESHEET', 'stylesheet_800.css');

} elseif ($_SESSION['res'] == '1024') {

define('STYLESHEET', 'stylesheet_1024.css');

} else {

define('STYLESHEET', 'stylesheet_1024.css');

}

 

 

in my main php documents I use this :

 

<link rel="stylesheet" type="text/css" href="<?php echo STYLESHEET; ?>">

 

 

so depending on the resolution I load different stylesheets. If the user has java disabled it defaults to the 1024 one.

 

in another file center_shop.php I use this to change the logo sizes

 

if ($_SESSION['res'] == '800') {

 

define('CENTER_SHOP_LOGO',"banner_blue_wb_50.jpg"); // Use what logo

} else {

define('CENTER_SHOP_LOGO',"clc_main_banner_sliced1.jpg"); // Use what logo

 

}

 

In the header I then simply use :

 

<?php echo tep_image(DIR_WS_IMAGES . CENTER_SHOP_LOGO, CENTER_SHOP_LOGO_TEXT); ?>

 

By the way, this is the latest resolution redirection script which does not cause a loop when the client turns on java during a session.

 

 

// Resolution redirect

if (!$spider_flag) {

if ((isset($HTTP_GET_VARS['x'])) and (!tep_session_is_registered('res'))) {

if ($HTTP_GET_VARS['x'] == '1') {

$res = '800';

} elseif ($HTTP_GET_VARS['x'] == '2') {

$res = '1024';

} else {

$res = '1024';

}

if (!tep_session_is_registered('res')) {

tep_session_register(res);

}

} else {

if ($HTTP_GET_VARS) {

if (!tep_session_is_registered('res')) {

echo '<script>';

echo 'if (screen.width==800) {location.href=self.location.href+"&x=1" }';

echo 'if (screen.width==1024) {location.href=self.location.href+"&x=2" }';

echo '</SCRIPT>';

echo '<noscript>';

echo '</noscript>';

echo "\n";

}

} else {

if (!tep_session_is_registered('res')) {

echo '<script>';

echo 'if (screen.width==800) { location.href=self.location.href+"?x=1" }';

echo 'if (screen.width==1024) { location.href=self.location.href+"?x=2" }';

echo '</SCRIPT>';

echo '<noscript>';

echo '</noscript>';

echo "\n";

}

}

}

}

[TCwho]

Thanks boxtel

 

I would to impliment this soon....for fun :lol: .... but client seems to be happy with the way it is now... basically it is just centered for all screen resolutions ...... and easier for me :lol:

[TCwho]

Hello everyone

 

Hmm seems there has been a change. I created a flash banner recently and was wondering could the above be implemented to show two different custom flash banners for different resolutions?

 

The way I had it setup recently was using 'fixed_width_with_css' contribution which was working fine, but I would like to know if it is possible to keep the site at 100% width and be able to call different banners for appropriate visitors screen resolution...

 

^_^

[boxtel]

Hello everyone

 

Hmm seems there has been a change.  I created a flash banner recently and was wondering could the above be implemented to show two different custom flash banners for different resolutions?

 

The way I had it setup recently was using 'fixed_width_with_css' contribution which was working fine, but I would like to know if it is possible to keep the site at 100% width and be able to call different banners for appropriate visitors screen resolution...

 

^_^

<{POST_SNAPBACK}>

 

 

I use this facility :

 

1) it tries to determine the clients resolution with javascript

2) if it can (js enabled) it registers that resolution in the session

3) based on the value of that variable I change settings

different logo (size-wise)

smaller/larger menu tabs

also, if the variable is not registered it tells me the client has

js disabled to I then do not show js scrollers but another box.

 

 

how:

 

in my application top :

 

 

before :

 

// include the language translations

require(DIR_WS_LANGUAGES . $language . '.php');

 

I have:

 

// Resolution redirect

if (!$spider_flag) {

if ((isset($HTTP_GET_VARS['x'])) and (!tep_session_is_registered('res'))) {

if ($HTTP_GET_VARS['x'] == '1') {

$res = '800';

} elseif ($HTTP_GET_VARS['x'] == '2') {

$res = '1024';

} else {

$res = '1024';

}

if (!tep_session_is_registered('res')) {

tep_session_register(res);

}

} else {

if ($HTTP_GET_VARS) { // page has parameters so use &

if (!tep_session_is_registered('res')) {

echo '<script>';

echo 'if (screen.width==800) {location.href=self.location.href+"&x=1" }';

echo 'if (screen.width==1024) {location.href=self.location.href+"&x=2" }';

echo '</SCRIPT>';

echo '<noscript>';

echo '</noscript>';

echo "\n";

}

} else { // page has no parameters so use ?

if (!tep_session_is_registered('res')) {

echo '<script>';

echo 'if (screen.width==800) { location.href=self.location.href+"?x=1" }';

echo 'if (screen.width==1024) { location.href=self.location.href+"?x=2" }';

echo '</SCRIPT>';

echo '<noscript>';

echo '</noscript>';

echo "\n";

}

}

}

}

 

 

then (in my case) in center_shop I have something like this :

 

if ($_SESSION['res'] == '800') {

define('CENTER_SHOP_LOGO',"banner_blue_wb_50.jpg"); // Use what logo

define('TABS_BG',"rainbow_tbl_bg_390x33.jpg"); // Use what tabs background

else {

define('CENTER_SHOP_LOGO',"clc_main_banner_sliced1.jpg"); // Use what logo

define('TABS_BG',"clc_main_banner_sliced2.jpg"); // Use what tabs background

}

 

in column_right I have this to check if js is enabled:

 

if (

(stristr(basename($PHP_SELF),'index')) and

($_SESSION['res']) // js enabled

) {

include(DIR_WS_BOXES . 'scroller2.php');

} elseif (

(!stristr(basename($PHP_SELF),'account')) and

(!stristr(basename($PHP_SELF),'checkout')) and

(!stristr(basename($PHP_SELF),'discount')) and

(!stristr(basename($PHP_SELF),'logoff')) and

(!stristr(basename($PHP_SELF),'login'))

) {

require(DIR_WS_BOXES . 'whats_new.php');

}

 

simpel

[TCwho]

if ($_SESSION['res'] == '800') {

define('CENTER_SHOP_LOGO',"banner_blue_wb_50.jpg"); // Use what logo

define('TABS_BG',"rainbow_tbl_bg_390x33.jpg"); // Use what tabs background

else {

define('CENTER_SHOP_LOGO',"clc_main_banner_sliced1.jpg"); // Use what logo

define('TABS_BG',"clc_main_banner_sliced2.jpg"); // Use what tabs background

}

 

Thanks for replying boxtel

 

Now in the above I can see ...thats the section I would need to modify to call the different flash animated banners...for example right now Current BannerI have this code for banner for 800 res:

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
 id="Movie5" width="760" height="135">
	 <param name="movie" value="/catalog/includes/Movie5.swf">
<param name="quality" value="High">
<embed src="/catalog/includes/Movie5.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="760" height="135">
</object>

 

Is it possible to 'define' the code above...so somewhere I have defined the above as 'flash800res' ..... then just do what I am used to in osC like....:

<?php echo tep_image(DIR_WS_IMAGES . $flash800res['800res_banner'], ?>

 

...something like that... I hope I make sense...... grrrr I think I am improving but...everything is still fuzzy :sweating:

[boxtel]

Thanks for replying boxtel

 

Now in the above I can see ...thats the section I would need to modify to call the different flash animated banners...for example right now Current BannerI have this code for banner for 800 res:

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
 id="Movie5" width="760" height="135">
	 <param name="movie" value="/catalog/includes/Movie5.swf">
<param name="quality" value="High">
<embed src="/catalog/includes/Movie5.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="760" height="135">
</object>

 

Is it possible to 'define' the code above...so somewhere I have defined the above as  'flash800res' ..... then just do what I am used to in osC like....:

<?php echo tep_image(DIR_WS_IMAGES . $flash800res['800res_banner'], ?>

 

...something like that... I hope I make sense......  grrrr I think I am improving but...everything is still fuzzy :sweating:

<{POST_SNAPBACK}>

 

 

well, as I see it, you want to include flash code not an image;

 

so use something like :

 

if (isset($_SESSION['res'])) { // session variable res is set

if ($res == '800') { // resolution = 800

include('includes/flash_800.swf');

} else { // resolution = 1024

include('includes/flash_1024.swf');

}

} else { // no resolution determined because js disabled so use default

include('includes/flash_1024.swf');

}

[TCwho]

:D

 

of course! duh

 

Thank you. This is very good to know knowledge

[ecoloco]

Hi! Boxtel

 

I tried to use your code for resolution redirect but something weird happens. The resolution part works very well but for some reason when I click on "My Account" without being logged in, app_top sends me this.

 

 

Warning: Cannot modify header information - headers already sent by (output started at c:\program files\apache group\apache\htdocs\decoflor\catalog\includes\application_top.php:300) in c:\program files\apache group\apache\htdocs\decoflor\catalog\includes\functions\general.php on line 29

 

line 300 is where this part of your code is

 

if (!tep_session_is_registered('res')) {
echo '<script>';   (line 300)
.
..
...

 

The site tries to go to account.php but since there no one logged in it tries to go to login.php but it get stuck on the proccess.

 

If I comment the echo part no error wil show, so , for some reaseon the script tag is messes things up.

 

I am running the store locally. I uploaded the file to the actual server and the error is not showing but it is still an issue because it should work for me to.

 

 

Well I hope you can give some hints on how to solve this.

 

Thank you so much.