Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    accounting for all screen resolutions in redirect function???

    OK, I'm using the following redirect function:
    Code:
    
    <SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction redirectPage() {
    //800 x 600 goes full screen//
    if ((screen.width == 800) && (screen.height == 600)){
    var targeturl="http://www.link of your choice.html"
    newwin=window.open("","","scrollbars")
    if (document.all){
    newwin.moveTo(0,0)
    newwin.resizeTo(screen.width,screen.height)
    }	
    newwin.location=targeturl
    }
    //or else 1024 x 768 goes full screen w/toolbar//
    else if ((screen.width == 1024) && (screen.height == 768)){
    var targeturl="http://www.link of your choice.html"
    newwin=window.open("","","toolbar,scrollbars")
    if (document.all){
    newwin.moveTo(0,0)
    newwin.resizeTo(screen.width,screen.height)
    }
    newwin.location=targeturl
    }
    //or else 1152 x 864//
    else if ((screen.width == 1152) && (screen.height == 864)){
    	window.location.href= "http://www.link of your choice.html"}
    //or else 1280 x 768//
    else if ((screen.width == 1280) && (screen.height == 768)){
    	window.location.href= "http://www.link of your choice.html}
    //or else 1280 x 960//
    else if ((screen.width == 1280) && (screen.height == 960)){
    	window.location.href= "http://www.link of your choice.html"}
    //or else 1280 x 1024//
    else if ((screen.width == 1280) && (screen.height == 1024)){
    	window.location.href= "http://www.link of your choice.html"}
    //or else 1600 x 900//
    else if ((screen.width == 1600) && (screen.height == 900)){
    	window.location.href= "http://www.link of your choice.html"}
    //or else 1600 x 1024//
    else if ((screen.width == 1600) && (screen.height == 1024)){
    	window.location.href= "http://www.link of your choice.html"}
    //or else 1600 x 1200//
    else if ((screen.width == 1600) && (screen.height == 1200)){
    	window.location.href= "http://www.link of your choice.html"}}// End -->
    </script>
    The porblem I've discovered is that there are still a few screen resolutions I've missed, these resoltions are what results when users use dual monitor setup, three, etc. This is a small percentage of viewers, but, they need to be accounted for. This, in addition to the fact the the function above (I think) can be written more effeciently.

    Can I use the following to cover all resolutions other than 800 x 600 and 1024 x 768?

    Code:
    
    <SCRIPT LANGUAGE="JavaScript">
    <!-
    else if ((screen.width !=800//1280) && (screen.height !=600//768)){
    	window.location.href= "http://www.link of your choice.html"}}// End -->
    </script>
    Last edited by hothousegraphix; 06-06-2003 at 04:29 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are dozens and dozens of different resolutions, and anyone can choose a custom resolution, so the number of possibilities is basically infinite.

    Forget it - it's a road to nowhere - quite apart from lumbering you with having to maintain multiple pages. Much better to make a design that doesn't need to know what screen resolution it's at.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    // edit: misunderstood question.
    Last edited by chrismiceli; 06-07-2003 at 09:02 PM.

  • #4
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    brothercake -
    I am sorry to say your response indicates to me that you've either not read the question I posted completely, and or, I've not expressed clearly what I'm want to do.

    If you look at the script, there are only two screen resolutions for which I want something different. These resolutions are 800 x 600 and 1024 x 768. More specifically, if you look closer, what I'm changing for these resolutions are the browser properties. The content will remain constant for all resolutions (this point, I see I was not clear on). Everything else (all other resolutions) I intend to send to the same URL.

    The script I'm starting off with is the following:
    Code:
    
    <SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction redirectPage() {
    //800 x 600 goes full screen//
    if ((screen.width == 800) && (screen.height == 600)){
    var targeturl="http://www.link of your choice.html"
    newwin=window.open("","","scrollbars")
    if (document.all){
    newwin.moveTo(0,0)
    newwin.resizeTo(screen.width,screen.height)
    }	
    newwin.location=targeturl
    }
    //or else 1024 x 768 goes full screen w/toolbar//
    else if ((screen.width == 1024) && (screen.height == 768)){
    var targeturl="http://www.link of your choice.html"
    newwin=window.open("","","toolbar,scrollbars")
    if (document.all){
    newwin.moveTo(0,0)
    newwin.resizeTo(screen.width,screen.height)
    }
    newwin.location=targeturl
    }
    
    //THIS IS WHERE I'M NEEDING ASSISTENCE, SCRIPTING THE ELSE IF FOR ALL OTHER SCREEN RESOLUTIONS I CAME UP WITH THE FOLLOWING//
    else if ((screen.width !=800//1280) && (screen.height !=600//768)){
    window.location.href= "http://www.link of your choice.html"}
    }
    // End -->
    </script>
    
    This isn't working (not much of a surprise to me) I'm wondering if I on the right track? JavaScript is not my strong suit. Just looking for some assistance completing this function.

    If you could help, it would be greatly appreciated.

    Thank you.

  • #5
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    chrismiceli,

    I'm guessing what your suggesting is to begin with the assumption that any resolution other than 800 x 600, and 1024 x 768 will be sent to my default URL. Then for the users with these resolutions I tailor the browser properties. I thought that’s what I was doing.

    It looks like your approaching this in a manner I'm completely unfamiliar with.

    Would you have a problem explaining this approach to me?

    Thanks

    By the way, this is what I'm working on
    Last edited by hothousegraphix; 06-07-2003 at 05:28 AM.

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    chrismiceli, I agree generally with brothercake's recommendation to keep each page down to one page version: as he said, you can't hope to address every possible resolution. However, your post really begs some javascript issues which are more fundamental and/or basic. In seeing your markup, there are many other points that could also be raised, but keeping my answer relevant to your question:

    You seem to understand the if() statement, and the else if() statement, but I don't think you've yet encountered the else{} statement.

    In other words, since you are concerned with 2 exception cases only, everything else can be lumped under the final else {} statement:



    if ((screen.width == 800) && (screen.height == 600)){
    /*your statements etc etc*/
    }

    else if ((screen.width == 1024) && (screen.height == 768)){
    /*your statements etc etc*/
    }

    else {
    window.location.href= "http://www.hothousegraphix.com/Hhg2_1024x786+.html"
    }
    /*all the other resolutions are included in the last statement - since you're not doing anything special with these resolutions, there's no need to specify each possible variant*/


    ***

    However, I would add this question: why are you even bothering to open a new window if 800x600 or 1024x768? Instead, you could simply load the target page in the existing window in all cases.


    function redirectPage()
    {
    if ((screen.width <= 800) && (screen.height <= 600)){
    pagevers = "800x600"
    }

    else if ((screen.width <= 1024) && (screen.height <= 768)){
    pagevers = "1024x768"
    }

    else { pagevers = "1024x768+" }


    top.location = "http://www.hothousegraphix.com/Hhg2_" +pagevers+ ".html"
    }


    ***

    or to make it more succinct:

    monXX = screen.width
    monYY = screen.height

    function redirectPage()
    {
    pagevers = ((monXX <= 800) && (monYY <= 600))?"800x600" &#58;((monXX <= 1024) && (monYY <= 768))?"1024x768" :"1024x768+"

    top.location = "http://www.hothousegraphix.com/Hhg2_" +pagevers+ ".html"
    }


    Hope this clarifies a bit for you...

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Lightbulb

    It might not be a direct answer to your problem, but let's think from the start point. Why to use diffreent pages for different resolutions? The answer is basically one: you have to use the entire available space, no more, no less. Most of the time, than, it is "ratio matter", rather than a pure "size matter".

    Does it make sense until here? :-)

    Ok, now, if so, there might be easier to solve that problem trying to build a constat ratio spaced web page. is there any posibility to avoid than the resolution detect problem? I think there is, on using screen.availHeight and screen.availWidth instead of screen.height and screen.width...

    For instance, no matter the resolution will be, the, say, screen.availWidth/3 will be the 3rd part of the availableWidth anytime...

    screen.availHeight - the height of the screen in pixels minus any GUI stuff such as the windows taskbar
    screen.availWidth - the width of the screen in pixels minus any GUI stuff such as the windows taskbar

    Wouldn't be a better ideea that to use a lot of different pages and "If" statements...?...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Wow, I appreciate this input.

    realisis
    However, I would add this question: why are you even bothering to open a new window if 800x600 or 1024x768? Instead, you could simply load the target page in the existing window in all cases.
    The reason for opening the new window for 800 x 600 or 1024 x 768 is to provide those viewers as much viewing space as possible. I would keep the target the existing window but I want to change the browser properties (eliminating a few items to provide more of the screen for viewing) and I didn't think it was possible to alter the browser properties of the viewers’ initial window. I've been of the assumption that browser properties can only be determined for new windows. Again, the actual content (site itself) is no different.

    Kor,

    I've seen the ratio approach used, though; I myself have not attempted to implement it. I would, however, like to have a better understanding of its benefits. I'm wondering how the screen.availHeight and screen.availWidth info would then be applied. Would this info then be used to...say...center the page on a users screen? How would that look (the script) and would it (the function) be placed between the <head></head> tags of the page being called, or in the page sending the user to the target?

    Sorry if I've not used the correct terminology.

    Back to my initial intent, I'm not sure though that this approach will address my desire to customize the browser window for users with these two resolutions: 800 x 600 and 1024 x 768.

    Please correct me if I'm wrong.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Cool

    Ok, now u have to understand that screen.availHeight and screen.availWidth are values. The values for the height and the width for entire browser (including, that is very important, the browsers all bars) MINUS any other Windows bars.

    You see, some has the windows bar on the bottom, some on the left or right or up, some keep it hidden, some don't. So the screen.availHeight and screen.availWidth are a little more precise than the simple screen.height and screen.width, which are pure values of the screen resolution.

    On the other hand, the browsers UPPER tasks bar have different height, according to the type (NS7 larger than IE) or according to user's prefferences (large or small icons, text labels or not). That means the ACTIVE space, used for the web page itself, is different, also. So, you have first to test those values on different browsers with dfferent tool bars options.

    Anyway, u have this problem even if you build classical web pages, but i wanted to remind u tu see my point from now once.

    First at all, you van see what screen.availHeight and screen.availWidth by puting anywere in the body an alert

    <script language="JavaScript">
    alert ("available height is "+ screen.availHeight + " pixels. available width is "+ screen.availWidth + " pixels.");
    </script>

    Now, here's a easy example. A table with a height no greater the the available active space (which, i've told you, it is not the same with the screen.availHeight, so I had to test some values)

    <html>
    <head>
    <script language="JavaScript">
    function objectSetup() {
    //sizes and places the object according to the available height and width on screen
    //the table should fit the bootm margin of the browser - if IE with large icons and text label
    //the table is in the center of the browser, verticaly align
    ztab = new layerSetup("tab",screen.availHeight-139,100,screen.availWidth/2-50);
    alert ("available height is "+ screen.availHeight + " pixels. available width is "+ screen.availWidth + " pixels.");
    }
    function layerSetup(id,height,width,left) {
    this.obj = document.getElementById(id).style;
    this.obj.height = height;
    this.obj.width = width;
    this.obj.left = left;
    return this.obj;
    }
    </script>
    </head>

    <body onload="objectSetup()" leftmargin="0" topmargin="0">
    <table id="tab" bgcolor="#FF0000" style="position:absolute">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    Notice that the script is in the head, as u asked me, and notice that the main function is called on onload, in body tag, the easiest method)

    Now i answered your questins:

    So, yes, u can size an object to maximum visible height and width and u can center an object without mention the different possible resolution may occure. Further more, u can seize as ratio (say 1/3 or 1/5 or ...) and keep the same ratio of the object, nomatter witch resolution may have the surfer.

    Make sense, till now? has anyoane any other ideeas about that?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    NOTE: This trick works because the values of the toobars (browsers an Windows) are ABSOLUTE, they are always the same, nomatter which resolution is used. In my example, which is the largest way of using IE (large icons and text label on upper toolbar) the value of that height is 139 px for all the resolutions
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •