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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts

    Trouble with Javascript Media Queries

    Hi,

    I'm quite new to Javascript, normally just stick to HTML and CSS,

    I've used the following code to make a <div> fit the viewports width and height and it looks fantastic on medium and large screens however I need to change it for small screens because the site i'm building is responsive.

    Code:
    <script type="text/javascript">
    		$(document).ready(function(){
    	      resizeDiv();
    	  });
    	
    	  window.onresize = function(event) {
    	      resizeDiv();
    	  }
    	
    	  function resizeDiv() {
    	      vpw = $(window).width(); 
    	      vph = $(window).height(); 
    	      $('#bg').css({'height': vph + 'px'});
    	  }
    	</script>
    Basically I need to leave it how it is on Medium and Large Screens where the height is the height of the screen but when it's small I just want the height to cover the content in the <div>

    does that make sense?


    I found this bit of script, is there a way to combine them together to achieve what i want?

    Code:
    if (mq.matches) {
    	// window width is at least 48em
    }
    else {
    	// window width is less than 48em
    }
    any help is greatly appreciated and desperately needed
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    First off, for what you got so far you don't need Javascript at all -- that can all be done with CSS:

    Code:
    html, body {
        height: 100%;
    }
    
    #bg {
        min-height: 100%;
        height: auto !important;
        height: 100%;
    }
    Now, even mixing things up for smaller screens can be done using only CSS, with so-called media queries:

    Code:
    html, body {
        height: 100%;
    }
    
    @media all and {min-width: 700px} {
        #bg {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }
    }
    Here's a working example (just resize the iframe): http://jsfiddle.net/G89XK/. Of course you can choose to use min-height instead of min-width. Or use a combination. Or even more. That's all up to you.

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Airblader View Post
    First off, for what you got so far you don't need Javascript at all -- that can all be done with CSS:

    Code:
    html, body {
        height: 100%;
    }
    
    #bg {
        min-height: 100%;
        height: auto !important;
        height: 100%;
    }
    Now, even mixing things up for smaller screens can be done using only CSS, with so-called media queries:

    Code:
    html, body {
        height: 100%;
    }
    
    @media all and {min-width: 700px} {
        #bg {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }
    }
    Here's a working example (just resize the iframe): http://jsfiddle.net/G89XK/. Of course you can choose to use min-height instead of min-width. Or use a combination. Or even more. That's all up to you.
    I tried that first because it's the only way I knew how and It wouldn't work, That's why I turned to Javascript.
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I literally gave you a working example -- if that's not what you want, you need to be more specific on what it is that you want.

  • #5
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Airblader View Post
    I literally gave you a working example -- if that's not what you want, you need to be more specific on what it is that you want.
    That is what I want but for some reason It won't work on this site, I've used that exact example on loads of sites before but it just won't work on this one and I don't know why, There's no validation errors and i've read and reread the code about a thousand times, however the Javascript I have so far works fine which is why I was wondering if it can be done with Javascript.
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Is your browser going to "http://localhost" or "file:///C:\path\to\document.html"?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by WolfShade View Post
    Is your browser going to "http://localhost" or "file:///C:\path\to\document.html"?

    It goes o the file path
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    So why don't you give us an actual example of where it doesn't work and we try to figure out the problem?

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by designer21 View Post
    It goes o the file path
    Try using your computers built-in web server (I'm assuming you're using Windows, of course.)

    http://localhost/path/to/document.html

    I may be wrong.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #10
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    No I'm a Mac User but i'll try and give that ago
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #11
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Do Macs have built-in web servers? I thought that was just a Microsoft "feature".
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #12
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by WolfShade View Post
    Do Macs have built-in web servers? I thought that was just a Microsoft "feature".
    Yes they do however it's a tedious feature to set up
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #13
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    And you're about 6 hours ahead of me (I think), so it's night-time where you are.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #14
    New Coder
    Join Date
    Nov 2011
    Location
    England
    Posts
    62
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by WolfShade View Post
    And you're about 6 hours ahead of me (I think), so it's night-time where you are.
    Yes it's night here, about 10pm,

    I've tried the local host and it still doesn't work, I don't understand why it's not working on this site.
    Absolutely amazing use of HTML5
    Check it out in Google Chrome www.thewildernessdowntown.com/
    Thanks for all the help i've recieved on this Forum

  • #15
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    By your own admission, you are "quite new to javascript", so please forgive me if this sounds like a rookie question.

    You're using jQuery functions; you are loading the jQuery before trying to use the commands?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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