Changing CSS Values Using Javascript If/Else Statement

Question

I essentially know nothing when it comes to Javascript, so any help is appreciated.

When a user is on a mobile phone, I want a div to popup with a link to my mobile website. Naturally, I don't want the popup to show when the user is on their desktop.

My issue is that I can't get the javascript to apply the css.

Here's the javascript that I'm using.

<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

if(isMobile){
document.getElementById('mobile').style.display = 'block';
}
else{
document.getElementById('mobile').style.display = 'none';
}
;

</script>

This is the div:

<div id="mobile" style="left:116px; position: absolute; top: 106px;">
If you would like to visit our mobile website optimized for your device, click <a href="http://m.website.org">here</a>.</div>

Any help is appreciated. I've tried figuring it out myself, but I've hit a road block.

If you have a better, completely separate solution, that is welcome as well.

Cameron Martin · Accepted Answer · 2012-06-08 21:34:52Z

3

You need to apply the styles after the DOM has loaded. I suggest using jQuery's ready() for this.

$(document).ready(function() {
  // Code here
});

answered Jun 8, 2012 at 21:34

Cameron Martin

6,0102 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sparebytes · Accepted Answer · 2012-06-08 21:41:22Z

2

I think you're problem is that the javascript is being executed before the DOM (the HTML) is loaded and ready for manipulation. That code must fire after the window's onload event fires. As usual, I'd recommend using jQuery library but I'll give an example that doesn't use it just so you don't need to include it - you just have to be careful that there isn't other javascript that needs to be ran when the event fires; its easy to accidently override it.

Also, I would recommend keeping the div hidden by default and use JS to show it when needed.

See it here http://jsfiddle.net/vmuX8/1/

This script is safe to use with other scripts on the same page.

In my example, I declare an anonymous (nameless) function which gets ran instantly after it is declared. That is to scope the variables inside of it so that no global variable is ever affected (except the window.onload function).

edited Jun 8, 2012 at 21:41

answered Jun 8, 2012 at 21:36

sparebytes

13.2k3 gold badges23 silver badges33 bronze badges

3 Comments

James Over a year ago

Thanks for the help and the explanation on any potential pitfalls. Much appreciated.

sparebytes Over a year ago

@ddlshack Why not? What else is there, document.onreadystatechange? If onload isn't clean enough then just use jQuery or other framework to do it for ya instead.

Cameron Martin Over a year ago

DOMContentLoaded event is preferred, since this fires right after the DOM is ready to be manipulated, rather than waiting for images to load. Most modern browsers support it.

Andrew Odri · Accepted Answer · 2012-06-08 22:22:46Z

2

While searching for a specific user agent may allow you a achieve your goal for now, I would recommend against it for the following reasons:

Different devices may share the the same user agent (eg. Blackberry, Android, HTC, etc.), and this can mean different screen resolutions and ratios
Even on a consistent device with a consistent browser, difference between landscape and portrait orientation will effect the layout of the site
Future devices and browser technology cannot be addressed without manual updates

All of this can result in delivery of an website that is not appropriate to the device.

I would suggest using media queries adjust the elements on the page based on viewport size rather than the user string. This is usually referred to as adaptive design (and you could say it encompasses responsive design as well).

You do this using CSS; it looks something like this:

@media screen and (min-width: 0px) and (max-width: 480px) {
    #mobile {
        display: none;
    }
}

Basically, if the screen size is between 0px and 480px, the element with the id of mobile is hidden; otherwise it is visible.

Here are some standardized media queries for various mobile devices here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

There is a an excellent collection of websites using this approach here: http://mediaqueri.es/

edited Jun 8, 2012 at 22:22

answered Jun 8, 2012 at 21:43

Andrew Odri

9,5286 gold badges48 silver badges56 bronze badges

1 Comment

James Over a year ago

This is an interesting solution. I'm familiar with media queries and responsive design, but it never occurred to me that it could solve this particular issue.

azt3k · Accepted Answer · 2012-06-08 21:53:05Z

1

You need to make sure you either call the script onDOMReady / onLoad or place it after the div otherwise the div may not exist when the script is called.

eg.

<script type="text/javascript">

    function add_e_handler(obj, e, func){
        //test if func exists - prevents problems in IE
        if(typeof func != "undefined"){     
            if(obj.attachEvent){
                 obj.attachEvent('on' + e, func);
            }else if(obj.addEventListener){
                obj.addEventListener(e, func, false);
            }else{
                obj['on' + e] = func;
            }
       }
    }

    add_e_handler(window,'load'function(){
        var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

        if(isMobile){
            document.getElementById('mobile').style.display = 'block';
        }else{
            document.getElementById('mobile').style.display = 'none';
        }
    });

</script>

edited Jun 8, 2012 at 21:53

answered Jun 8, 2012 at 21:39

azt3k

711 silver badge7 bronze badges

2 Comments

sparebytes Over a year ago

This method could be dangerous if there are other scripts which run events when the window loads.

azt3k Over a year ago

Aggreed. I changed it to use an attachEvent / addEventListener approach. I was just trying to keep it simple and provide a bare js solution. It would have worked fine if it were the only onload callback.

Jerome WAGNER · Accepted Answer · 2012-06-08 21:32:30Z

0

have you tried to check if your detection is correct via a document.write() or something ?

I advice you to use the categorizr library to detect if the device is mobile : https://github.com/skookum/categorizr.js#readme

answered Jun 8, 2012 at 21:32

Jerome WAGNER

22.6k10 gold badges64 silver badges79 bronze badges

1 Comment

James Over a year ago

Hi, thanks for replying. Yes, the detection works, but I will look into that anyway to future proof the detection.

Collectives™ on Stack Overflow

Changing CSS Values Using Javascript If/Else Statement

5 Answers 5

Comments

3 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related