Jump to content

User executed pop-up, based on screen resolution


Err

Recommended Posts

Howdy. I'm looking for way I can add a user executed pop-up to adjust on whatever the screen resolution of the user is. So lets say, me, I have a screen resolution of 1280 x 800, I want a pop-up to change window sizes based on my screen resolution for that specific resolution only. Now I have the pop-up script, I just don't know how I can add the screen.width and screen.height on to the below pop-up script to do that. My best guess would be with the "if" and "else" statements... I just need help on that. I want to do this because on some resolutions, the pop-up window size I have now is a bigger size on a lower resolution, then that of a higher resolution. I just want to eliminate that problem.pop-up script:

<script type="text/javascript">function popitup(url){	newwindow=window.open(url,'name','height=500, width=650, scrollbars=yes, status=yes, location=no, resize=yes, toolbar=no, directories=no, menubar=no, status=no left=5, top=5');	if (window.focus) {newwindow.focus()}	return false;}</script>

It would work better if I had all the pop-up attributes (e.g. "scrollbars=yes, toolbar=no, etc") in each specific resolution containers. If someone could just get me started, I can add the rest of the resolution sizes myself. Thanks.

Link to comment
Share on other sites

What about something along the lines of:

<script type="text/javascript">// this var will hold all of the window properties.var window_props;// call this on window load or when a user clicks on the link...whichever you preferfunction setWindowProperties(){    var pop_width;    var pop_height;    var scrollbars;    var status;    var location;    var resize;    var toolbar;    var directories;    var menubar;    var status;    var left;    var top;    // get the screen resolution    ...    // based on the screen resolution, decide what you want the properties to be    ...    window_props  = "height="+pop_height+",width="+pop_width+",scrollbars="+scrollbars;    window_props += ",status="+status+",location="+location+",resize="+resize+",toolbar="+toolbar;    window_props += ",directories="+directories+",menubar="+menubar",status="+status;    window_props += ",left="+left+",top="+top;}function popitup(url){    newwindow = window.open(url, 'name', window_props);    if(window.focus) {newwindow.focus();}    return false;}</script>

Link to comment
Share on other sites

Try this. :)

<script type="text/javascript">function popitup(url){scrnH=screen.height;scrnW=screen.width;	newwindow=window.open(url,'name','height='+scrnH+', width='+scrnW+', scrollbars=yes, status=yes, location=no, resize=yes, toolbar=no, directories=no, menubar=no, status=no left=5, top=5');	if (window.focus) {newwindow.focus()}	return false;}</script>

I set the variables scrnH and scrnW just in case you'd like to edit how big the pop up really is (like screen.width-12 or whatever :))-Choco

Link to comment
Share on other sites

@Chocolate570:Well, that script actually makes the pop-up window the exact size of the users resolution. I wanted one that is a fixed height and width for specific resolutions upon them executing the pop-up, but only for more resolutions. The above code I have has a pop-up size (width and height) that is perfect for my resolution, but not so great for others. :)@jesh:That's not really what I wanted. But thanks.I can better illustrate what I want to do by this image:[removed]Hopefully that helps. :)

Edited by RahXephon
Link to comment
Share on other sites

scrnH=screen.height;scrnW=screen.width;if(scrnH>1200){scrnH=650;scrnW=500}else if((scrnH>1000)&&(scrnH<1200)){scrnH=500;scrnW=350}else {scrnH=350;scrnW=200}
Try something like that Rah :)
Link to comment
Share on other sites

Thanks scott. I see the scrnH>1200 "if" statements and that way will work also, however the problem that I'm having with that script is that only the else {scrnH=350;scrnW=200} part of the script is working, it's completely ignoring the other parts of the script regardless of the screen resolution I have on at the time. Perhaps I messed something up. Can you tell me what went wrong?Here's the code I have now:

function popitup(url){	newwindow=window.open(url,'name','height='+scrnH+', width='+scrnW+', scrollbars=yes, status=yes, location=no, resize=yes, toolbar=no, directories=no, menubar=no, status=no left=5, top=5');	if (window.focus) {newwindow.focus()}	return false;}scrnH=screen.height;scrnW=screen.width;if (scrnH>1200) {  scrnH=800;scrnW=800}else if ((scrnH>1000) && (scrnH<1200)) {  scrnH=800;scrnW=450}else {  scrnH=350;scrnW=550}

I changed the scrnH and the scrnW a bit because I was testing out the script. Also please note that I have this script in an external .js file.Many thanks for the help. :)

Link to comment
Share on other sites

Hey,Try this. You had a bit of a mix up with your bracket nestings. :)

<script type="text/javascript">function popitup(url){	newwindow=window.open(url,'name','height='+scrnH+', width='+scrnW+', scrollbars=yes, status=yes, location=no, resize=yes, toolbar=no, directories=no, menubar=no, status=no left=5, top=5');	if (window.focus) {newwindow.focus()}	return false;}scrnH=screen.height;scrnW=screen.width;if (scrnH<1200) {  scrnH=800;scrnW=800}else {  if (scrnH>1000 && scrnH<1200) {  scrnH=800;scrnW=450  }else {  scrnH=350;scrnW=550}}</script>

It worked perfectly for me (in a couple of different resolutions) in FireFox. Try it out :)Choco

Link to comment
Share on other sites

Thanks for correcting the script mistake choco, however it's still not working. I'm using Firefox and even with your updated script it's still not fully functional. You can look for yourself here:[removed] (Updated sizes)I noticed that if I change around the ">" to "<" on the if (scrnH>1200) {scrnH=800;scrnW=800} part of the code, the pop-up size changes to that of the highest resolution size and vise-versa. That however DOES NOT fix the problem. :)I have a script on the actual pop-up now to tell me and you how big the pop-up window is (it's not exact, but it helps) and what resolution you are currently using for testing purposes, but this script only works correctly in Firefox (please note that). Thanks again for all of y'alls input. :)

Edited by RahXephon
Link to comment
Share on other sites

Thanks scott. I see the scrnH>1200 "if" statements and that way will work also, however the problem that I'm having with that script is that only the else {scrnH=350;scrnW=200} part of the script is working, it's completly ignoring the other parts of the script regardless of the screen resolution I have on at the time. Perhaps I messed something up. Can you tell me what went wrong?
Try this, i made a couple of changes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>  <title>Test Page</title>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  <meta name="robots" content="noindex, nofollow" /><script type="text/javascript">function popitup(url){scrnH=screen.height;scrnW=screen.width;if (scrnW>1200) {  scrnH=500;scrnW=500}else if (scrnW>1000 && scrnW<1200) {  scrnH=400;scrnW=400  }else {  scrnH=300;scrnW=300} newwindow=window.open(url,'name','height='+scrnH+', width='+scrnW+', scrollbars=yes, status=yes, location=no, resize=yes, toolbar=no, directories=no, menubar=no, status=no left=5, top=5');    if (window.focus) {newwindow.focus()}    return false;}</script></head><body><p><a href="pop_up.html" onclick="return popitup('pop_up.html')">Pop-up Window</a></p></body></html>

Link to comment
Share on other sites

Wierd--when I tested the pop up and changed my resolution, it gave me the 350x200 window or whatever that was. :S
No problem. I still appreciate your help on the matter. :)(That is until I code javascript fluently! :) J/K)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...