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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Home
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html5 /CSS3 mobile help please

    I know that there is JavaScript that allows you to detect the size of the screen that a webpage is being viewed on and i know there is some JavaScript to change pages. This is put in the head section of your html page i believe.

    I need to know how to change style sheets as opposed to webpages and i dont know how to do this.

    My question is what is it?

    This is what i have found and researched myself but i dont think it is a window.location i need to be changing. Any help?

    <!--
    if ((screen.width>=1024) && (screen.height>=768))
    {
    window.location="highres.html";
    }
    else
    {
    window.location="lowres.html";
    }
    //-->

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    If you’re actually talking about CSS 3 then do a search for “media queries”. This is all you need to serve different styles to different physical conditions.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Home
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah i have one of those currently implemented but i had a lecture with Bruce Lawson not so long ago and he did a demonstration on html5 and css. He could move his browser window to different widths and once he got so far the whole site would use a different style sheet. He cold go so far and it rearrange all the positioning and then when he went to a really small width it would load just an image. Now i have reason to believe that it was Java but i cant find it anywhere. A media queries will have to do for now unless some one can enlighten me thanks though Stephan it did help.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    You can do exactly what you explained with CSS media queries. Look at this example in the newest Firefox or Safari while resizing your browser window horizontally:

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>CSS3 media query test</title>
    		<meta charset="utf-8" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    		#div1 {
    			height: 100px;
    			width: 45%;
    			background: lime;
    			float: left;
    			padding: 10px;
    		}
    		#div1:after {content: "float: left;";}
    		#div2 {
    			height: 100px;
    			background: red;
    			padding: 10px;
    		}
    		@media screen and (max-width: 800px) {
    			#div1 {
    				background: aqua;
    				float: right;
    			}
    			#div1:after {content: "float: right;";}
    			#div2 {background: yellow;}
    		}
    		@media screen and (max-width: 500px) {
    			#div1 {
    				float: none;
    				background: maroon;
    				color: white;
    				width: auto;
    			}
    			#div1:after {content: "float: none;";}
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div id="div1">div 1</div>
    			<div id="div2">div 2</div>
    		</div>
    	</body>
    </html>


  •  

    Posting Permissions

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