View Full Version : If browser or resolution then change property of layer...?

12-09-2006, 04:15 AM
Hello. I am currently building a site for a video game clan and have some questions about displaying layers differently with various browsers and at various resolutions. What I am really looking to do, is to come up with a script that sniffs the viewer's browser and resolution and somehow either changes the properties (coordinates) or displays the appropriate layer, hiding the other layers designed for other resolutions.

Example, this is a CSS script that I am using to put a banner at the top of my main content area. This layer overlaps and lines up with other images in my design. I have my resolution at 1280x1024, thus this layer displays centered on my screen, lined up with the rest of the design. However, of course when I change my resolution, I lose my alignment.

i.topbanner{background:url(topbanner.gif) no-repeat; height: 131px; width: 565px; position:absolute; top:-13px; left:359px;}
I also have a navigation container overlapping the layer previously mentioned. Once again, it's the same thing.

<div id="navcontainer" style="position:absolute; left:392px; top:25px; width:502px; height:4px; z-index:1" >
<ul id="navlist">
<li id="active"><a href="#">&lt;&lt; previous</a></li>
<strong><font color="#000000">|</font></strong>
<li id="none"><a href="#">bookmark page</a></li>
<strong><font color="#000000">|</font></strong>
<li id="active"><a href="#">forward &gt;&gt;</a></li>

I am using Dreamweaver MX to build this and am looking at the Check Browser and Change Properties behaviors, but none of them are what I want, or I am just too JS illiterate to make them work for me. How would I go about changing the coordinates of all my layers upon page load based on the viewer's resolution settings? Is there a script that I can just put all my desired movements into?

The other thing I am seeing, which I am more familiar with, is the Show/Hide Layer behavior. If I clone all my layers and just change the properties for each resolution, then hide them all, is there a way I can detect the resolution and then call and unhide the desired layer?

Example, cloning my navcontainer layer, changing the coordinates and then having it show with X resolution and hide the rest of the time.

I took at look at http://www.codingforums.com/showthread.php?t=102374 , but it is Greek to me.

Lastly, I am having some issues with my CSS lists displaying differently in IE6 than with Firefox. Once again, there some script that I can get that would replace the Firefox-working style with one that works for IE?

I am on okay designer, but coding is not my strong point. If there is somewhere I can get scripts, key words to help me find what I need to complile my own, that would be great. Appreciate any help anyone can give.