www.webdeveloper.com
Results 1 to 2 of 2

Thread: getElementById with if statement

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    42

    getElementById with if statement

    Hi All,

    Im not very good with javascript and im trying to figure out how to use if and getElementById to change the contents of a link in order to point to different pages depending on if the browser detected is pc or mobile. If PC i want to launch it in an iframe using fancybox, and if its mobile, i just want to link directly to the page (ie, i dont just want to change the href, but other parts of the link also). Here's what i have so far:

    Code:
    <head>
    <script type="text/javascript">
    function mobileversion() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        document.getElementById('mobilev1').a="'class="fancybox fancybox.iframe" data-color="#F9F9F9" data-width="980" data-height="1230" data-scrolling="no"  href="linkformobiles.html" data-fancybox-group="gallery-1"'
    }
    else {
        document.getElementById('mobilev1').a='href="linkforpc.html"'
    }
    }
    
    </script>
    </head>
    
    <body>
        <a id="mobilev1">Click here to see the page for your browser type</a>
    </body>
    Does anybody know how to go about this?

    Many thanks in advance for any help.

    Matt

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Hello.

    You can use setAttribute for most of that.

    Code:
    <head>
    <script type="text/javascript">
    function mobileversion() {
        var link = document.getElementById('mobilev1');
    
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            link.setAttribute('class', 'fancybox fancybox.iframe');
            link.setAttribute('data-color', '#F9F9F9');
            link.setAttribute('data-width', '980');
            link.setAttribute('data-height', '1230');
            link.setAttribute('data-scrolling', 'no');
            link.setAttribute('data-fancybox-group', 'gallery-1');
            link.setAttribute('href', 'linkformobiles.html');
        } else {
            link.setAttribute('href', 'linkforpc.html');
        }
    }
    
    </script>
    </head>
    
    <body>
        <a href="javascript: void(0);" id="mobilev1">Click here to see the page for your browser type</a>
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles