I am developing a site and I want to make a script that will detect when the page is more than 500px and when it is below so I can make changes to the code. My current code has some links at the end of the page, like a footer, and when it is below 500px I want them to e close to each other for example;

<div class="footer-titles">
    <ul class="footer-titles-ul">
        <li><h class="titles">Link 1</h></li>
        <li><h class="titles">Link 2</h></li>
        <li><h class="titles">Link 3</h></li> 
    </ul>
</div>

And my css

.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}

So when the page is below 500px I want the padding-right from the .footer-titles-ul li to be 30px but, if the page gets back to over 500px to revert back to normal.

I am developing a site and I want to make a script that will detect when the page is more than 500px and when it is below so I can make changes to the code. My current code has some links at the end of the page, like a footer, and when it is below 500px I want them to e close to each other for example;

<div class="footer-titles">
    <ul class="footer-titles-ul">
        <li><h class="titles">Link 1</h></li>
        <li><h class="titles">Link 2</h></li>
        <li><h class="titles">Link 3</h></li> 
    </ul>
</div>

And my css

.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}

So when the page is below 500px I want the padding-right from the .footer-titles-ul li to be 30px but, if the page gets back to over 500px to revert back to normal.

• javascript
• jquery
• html
• css
• width

• 3 Media queries. Google them. – Shomz Commented Oct 21, 2013 at 16:56

3 Answers 3

You don't need JavaScript for this and you shouldn't use JavaScript for this. You want CSS3 Media Queries (Unless you need old browser support that's not possible with a polyfill).

You would want something like this to get the change:

@media screen and (max-width: 500px) {
  /* UNDER 500px CSS here */

  .class{
   color: red;
  }
}

Using media queries is the way to go. Just add this to the bottom of your CSS file:

@media only screen and (max-width: 500px) {
    .footer-titles-ul {padding-right: 30px;}
}

If you want jQuery, I think this would work for you. But then again, I would remend CSS media queries as the others say.

$(document).ready(function(){
    var detectViewPort = function() {
        var Wwidth = $(window).width();
        if (Wwidth < 500){
            $('.footer-titles-ul li').css('padding-right', '30px');
         }
        if (Wwidth > 500){
            $('.footer-titles-ul li').css('padding-right', '90px');
        }
    };

    $(function(){
      detectViewPort();
    });

    $(window).resize(function () {
       detectViewPort();
    });
});