current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have 4 page links in my nav bar. I want to resize them when using mobile browsers.

This is my JS to detect mobile: function detectmob() { 

 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    alert('This be a mobile browser');
    style3(); //a function which applies other CSS changes to my page
    //Trying to figure out how I'd change the width of my a elements within my nav to 100% width 

  }
}

CSS:

#topnav ul li a {
    width: 175px; //I'd like to change this to 100% using JS based on above condition
    height: 40px;
    line-height: 53px;
    border-bottom: 4px solid #636393;
    padding:0px;
    color: #fff;
    font-size:18px;
    font-weight:lighter;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .1s all linear;
    -moz-transition: .1s all linear;
    transition: .1s all linear;
}

HTML:

<nav id="topnav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="video.html">Trailers</a></li>
        <li id='adminPage'><a href="admin.html">Admin</a></li>
    </ul>
</nav>

This is what I have tried inside detectmob() if true:

navItems = document.getElementsByTagName('a');

 for(var i =0; i < navItems.length;++1){
navItems[1].style.width = "100%"; 
    }

but i got error: Uncaught ReferenceError: Invalid left-hand side expression in prefix operation

share|improve this question
2  
ahhh! Browser detection = bad. Use feature detection. –  War10ck Apr 3 '13 at 17:32
    
Wouldn't this be considered platform detection? I don't care about the browser. I just want to make certain changes if it's not a desktop/laptop –  Batman Apr 3 '13 at 17:47
1  
@Batman, you really don't. Imagine you walk into a restaurant and you see another customer order a steak. You decide to order a steak too. When the steak comes, the other customer has mashed potatoes on the side and A1 sauce, yours, however is just a steak with no extras. When you ask the waiter why, he replies that it's because you entered from the side door, rather than the front door. Although this example is a bit extreme, it's exactly what developers do to users when they try to change how a website reacts based on the device a user uses. –  zzzzBov Apr 3 '13 at 18:10

3 Answers 3

up vote 5 down vote accepted

You should just use media queries right in your css to adjust based on browser size. For example, the following CSS would be used when the browser is less than 500px:

@media screen and (max-width : 500px) {
    /* Styles for less than 500px */
}
share|improve this answer
    
My issue with media queries is that i don't want to get into the guessing game with different devices, screen resolutions and whatnot. I want a solution that's going to apply to all mobile devices. Plus since i already have a condition to call function style3, I may as well make other css changes within that one function and keep it all in the same place.....or am I completely wrong here? –  Batman Apr 3 '13 at 17:45
    
Browser detection is generally seen as bad practice. It seems to me that it's a bigger guessing game to try and detect every mobile device (present and future)! You also may run into issues with some devices not having JS enabled. –  dsundy Apr 3 '13 at 18:11
    
Okay I'll try media queries than. Can you explain what @media screen is? Or is the whole thing saying apply these styles if the screen is small than 500px? –  Batman Apr 3 '13 at 18:26
    
Correct, the whole thing is saying to apply the styles. Those styles will override your existing styles (put it at the end of your stylesheet). @media screen means that you're targeting the screen. There are other medias that you can target (tv, print, etc), but this is the one you want for your purposes. Here's a link to the MDN where Media Queries are explained. –  dsundy Apr 3 '13 at 19:49
    
How do you know if 500px is enough. What about screens with high resolutions or those with really low resolution. Is 500px just a random number you picks or like an average standard that applies to must devices? –  Batman Apr 3 '13 at 19:53
up vote 3 down vote

Using media queries allows you to define styles in your css based on the device currently using your site.

I think media queries are a much better way to achieve the responsive layout you seek :

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

share|improve this answer
up vote 3 down vote

Use media queries instead. CSS:

@media all and (max-width: 320px) {

    #topnav ul li a {
        width:100%;
    }

}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.