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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts

    redirect based on screen resolution

    Hello, I know how to detect the resolution of the screen using javascript but not how to use this to execute only some sections of html. I tried:

    Code:
    <SCRIPT TYPE="text/javascript">
    if (screen.width == 1023 && screen.height == 768)
    {
    </script>
    
    <div id="masthead"><a href="frametest.html" target="_parent">
    <img src="title1024.gif" id="title" border=0></a>
    </div>
    
    <SCRIPT TYPE="text/javascript">
    }
    </script>
    but that did not work. I could write all html in javascript using document.write"html") but would rather avoid it. I would rather avoid redirecting from a prior page to separate home pages so how can my desired effect be achieved?

    thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What about the users who have a resolution greater than 1024 x 768? Also why would you create something thats only viewable to that resolution? I'm guessing you were even thinking about the other users which isn't the right thing to do in web design. Either way here you go
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    a img {
    border:0;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
    	if(screen.width == 1024 && screen.height == 768)
    	{
    		var createLink = document.createElement('a');
    		createLink.setAttribute('href','frametest.html');
    		createLink.setAttribute('target','_parent');
    		var createImg = document.createElement('img');
    		createImg.setAttribute('src','title1024.gif');
    		createImg.setAttribute('id','title');
    		createLink.appendChild(createImg);
    		document.getElementById('masthead').appendChild(createLink);
    	}
    }
    </script>
    </head>
    
    <body>
    <div id="masthead"></div>
    </body>
    </html>
    It doesn't use document.write as thats not the right way to do things either. It uses DOM to create the link.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks, that is a clever way of doing it. It is handy to know javascript well. I am thinking about other resolutions too, I just used that one to keep things simple.

    Im slowly getting there with these graphics. Cheers

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    And did you think about users that have JavaScript disabled? Did you think of users with small screen devices (PDA/cell phone)? And I can’t imagine that you are really addressing every possible screen resolution out there?

    I think your approach isn’t quite right. Webdesign in the 21st century isn’t aiming at providing different content to different screen resolutions (as there are millions of different devices that are able to access the world wide web nowadays) but to provide the same content to all user agents (e.g. computer web browsers, screen readers, mobile/small screen devices, projectors, et al) and style it with CSS according to the capabilities of the respecive device/application. This includes the concept of graceful degradation (or fault-tolerant design) in all areas (CSS, JavaScript, & Flash), and not imposing anything on the user (like popup windows, browser size, …).
    Last edited by VIPStephan; 08-03-2007 at 01:07 AM.

  • #5
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    You raise good points but before deciding to cater for all possible resolutions, PDAs, phones, and projectors etc I know the audience the web site is going to receive and the extent and depth of work justified for the nature of the project.

    The web site is designed to display photos and a blog for close friends and family whilst im travelling. If it was for commercial gain I would indeed take into account your points as they are all valid as it would help me achieve a wider audience by making the site accessible to the majority of users.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The other thing you need to consider is that the screen resolution has no relevance to the space available in the browser as the browser itself takes up some space, fixed toolbars on the desktop take up space, and not everyone has their browser maximized (particularly for larger screen resolutions).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I think javascript has the screen.availheight/screen.availwidth command to find out the amount of browser space is available.


  •  

    Posting Permissions

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