Link to home
Start Free TrialLog in
Avatar of siva_siva
siva_sivaFlag for India

asked on

Display drop down menu according to the screen width

Display drop down menu according to the screen width in IE7
Avatar of siva_siva
siva_siva
Flag of India image

ASKER

<td><a href="#" onmouseover="window.status='Shop Online';  return true;" onmouseout="window.status='';  return true;"><img src="images/Untitled-4_09.gif" alt="" width="97" height="33" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/ShopOnline.gif',1);MM_showMenu(window.mm_menu_1,340,140,null,'spacer1');" onMouseOut="MM_swapImgRestore();MM_startTimeout();"></a></td>

In this i am using 340 and 240 as statically. I want the code dynamically for screen size or screen width
Avatar of Michel Plungjan
MM_showMenu(window.mm_menu_1,(screen.width/2),(screen.height/2),null,'spacer1')

for example
It's not functioning. It doesn't replace the screen width value
sorry. Not enough information.

The code I gave you gives the HALF of the screen width and height

Remove the /2 to get the screen width and height
Ya. I am also know that function. But we got the screen width value in javascript variable. But i want to check condition in coldfusion. How will i assign javascript variable to coldfusion variable.
You do not.

on the previous screen you can do something like

<a href="nextpage.cf" onClick="this.href='nexpage.cf?screenw='+screen.width+'&screenh='+screen.height">...
I want this code for index page. It is main problem. Otherwise we can solve it through query string
I want dynamic drop down menu but display correctly in all screen resolution.
I do not understand what you need.

If you are not referring to the code
MM_showMenu(window.mm_menu_1,340,140,null,'spacer1');"

then what code are you referring to?

Yes. I am referring that code.

In this 340 pixels is left from the screen and 140 pixels is top from the screen. I want to change the 340 pixels value dynamically with screen resolution.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Ok.. But what is the ratio between each screen width.

340 is for 1024px.

what value will be given to 800, 1200, 1600 etc...
You decide!
How can I decide?
I have no idea how your page looks.

I just gave some numbers for you to change to what you need them to be....
Is there any common ratio?

How many screen width range like 800, 1024 etc..?
>>Is there any common ratio?
yes and no
for standard screens the ratio is about  1:1.3 for wide screens the ratio is 1:1.6 (the golden mean/golden ratio [or close enough]), burt using this typoe of calculation to place the menu is not the best idea, what you need to do is determine the screen resolutionj and apply a complete style sheet, othewise as you move teh menu around you might place it over othe page items. it is not jus tmenu placement you will need to adjust if you go this route but also your entire page/site
i cant understand please give an example with my code please
something like this maybe

<script language="JavaScript" type="text/javascript">
var iScreenWidth=screen.width;
var iScreenHeight=screen.height;
if(iScreenWidth==800 && iScreenHeight==600){
      document.write('<link rel="STYLESHEET" type="text/css" href="/css/styles_800_600.css?version=#Now()#"/>');
}else if(iScreenWidth==1024 && iScreenHeight==768){
      document.write('<link rel="STYLESHEET" type="text/css" href="/css/styles_1024_768.css?version=#Now()#"/>');
}else{
      document.write('<link rel="STYLESHEET" type="text/css" href="/css/styles_default.css?version=#Now()#"/>');
}
</script>
Or simpler

<script>
var w = screen.width;
var css = 'default'; // default
if (w <= 800) {
  css = "small";
}
else if (w <= 1024) {
  css = "default"; // whatever
}
else if (w <= 1200) {
  css = "large";
}
document.write('<link rel="STYLESHEET" type="text/css" href="'+css+'.css" />');

</script>

No need to test both width and height. The width is more likely to fluctuate (widescreen) than the height
i know you would have a better version michel
but i would still add ?version=#Now()# to the end, this forces a download of the latest css
Or

document.write('<link rel="STYLESHEET" type="text/css" href="'+css+'.css?version'+Math.random()+'" />');

to stay on the client
Thanks to all