[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

Display drop down menu according to the screen width

Display drop down menu according to the screen width in IE7
0
siva_siva
Asked:
siva_siva
  • 10
  • 8
  • 3
1 Solution
 
siva_sivaAuthor Commented:
<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
0
 
Michel PlungjanIT ExpertCommented:
MM_showMenu(window.mm_menu_1,(screen.width/2),(screen.height/2),null,'spacer1')

for example
0
 
siva_sivaAuthor Commented:
It's not functioning. It doesn't replace the screen width value
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Michel PlungjanIT ExpertCommented:
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
0
 
siva_sivaAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
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">...
0
 
siva_sivaAuthor Commented:
I want this code for index page. It is main problem. Otherwise we can solve it through query string
0
 
siva_sivaAuthor Commented:
I want dynamic drop down menu but display correctly in all screen resolution.
0
 
Michel PlungjanIT ExpertCommented:
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?

0
 
siva_sivaAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
put this in the head of the page
<script>
var w = screen.width;
var top = 340; // default
var left = 140; // default
if (w <= 800) {
  top = 240;
  left = 40;
}
else if (w <= 1024) {
  top = 290;
  left = 90;
}
else if (w <= 1200) {
  top = 300;
  left = 200;
}

//and so on
</script>

and then use

MM_showMenu(window.mm_menu_1,top,left,null,'spacer1')
0
 
siva_sivaAuthor Commented:
Ok.. But what is the ratio between each screen width.

340 is for 1024px.

what value will be given to 800, 1200, 1600 etc...
0
 
Michel PlungjanIT ExpertCommented:
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....
0
 
siva_sivaAuthor Commented:
Is there any common ratio?

How many screen width range like 800, 1024 etc..?
0
 
James RodgersWeb Applications DeveloperCommented:
>>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
0
 
siva_sivaAuthor Commented:
i cant understand please give an example with my code please
0
 
James RodgersWeb Applications DeveloperCommented:
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>
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
James RodgersWeb Applications DeveloperCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
Or

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

to stay on the client
0
 
siva_sivaAuthor Commented:
Thanks to all
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 10
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now