#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Show some block of html page according to browser window size


    Hiii...
    I want to create an html page.This page contains different blocks.When i change browser window size it should show some of the blocks and when again i change browser window size it should again show some other blocks of page.. I do not know how to do it...
    Here is my java script method..
    function getWindowInnerSize(){

    var h = window.innerHeight;

    var w = window.innerWidth;
    if(w<500)
    { alert("500");
    // show 1st half page of my current html page}
    if(w>500)
    { alert("btw");
    // show 2nd half page of my current page}


    }
  2. #2
  3. Transforming Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,112
    Rep Power
    9398
    Question for you:

    If you were able to change CSS according to the window size, would that work? Like you could apply a display:block/none on the "halves" however you wanted.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0
    i am able to change window size according to browser window size but this works only when i click the button.Is there any way to change css as window size changes without clicking on button..

    switch_style is a method to switch from one css to another css

    function getWindowInnerSize(){

    var h = window.innerHeight;

    var w = window.innerWidth;
    if(w<500)
    { // alert("500");
    switch_style('blue'); }
    if(w>500&&w<800)
    { // alert("btw");
    switch_style('pink'); }
    if(w>800)
    { // alert("800");
    switch_style('blue');}

    }
    </script>



    </head>


    <body>
    <form>
    <input type="submit"
    onclick="getWindowInnerSize();
    return false;"
    name="theme" value="Blue Theme" id="blue">
    <input type="submit"
    onclick="switch_style('pink');return false;"
    name="theme" value="Pink Theme" id="pink">
    </form>
    </body>
    </html>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by shehar12
    Is there any way to change css as window size changes without clicking on button..
    Yes, you can use CSS3 Media Queries; to change the CSS, based on different max/min screen dimensions.
  8. #5
  9. Transforming Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,112
    Rep Power
    9398

IMN logo majestic logo threadwatch logo seochat tools logo