SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile detection function bound to click on a button, sadly having issues with it

    Hi all,

    Background:
    I'm currently working on a landing page which will display the same on both desktop & mobile devices, which is what we "want" for now.
    However, we've created an alternate registration page for mobile devices. This page can be accessed by clicking on a specific button, which has a class on it that will determine if the user is on a mobile device or not. If they are not, the normal action will occur, such as a registration popup, built specifically for desktop users.


    The problem is:
    I'm firstly having to use .remove to take away the class of pbx_ajax which operates the popup, so mobile users aren't affected by the popup and will continue onto the page we specially built for them. However, it seems my script is removing the class straight away, which prevents the popup from working for desktop users.
    Secondly, the script doesn't actually seem to work, it simply doesn't fire, which begs the question if i've cocked up my class bind.

    Code is attached below, please if anyone has any advice, do let me know as i'm at my wits end.

    Oh and i'm sure you'll notice, i'm polling for when the jQuery has loaded, as the library is located at the bottom of our site (its a rather large site).

    Forgot to also mention, that the first section of my JS, which is contained within a function named: globalDetectDevice, is a mobile detection script from this site: http://www.hand-interactive.com/reso...javascript.htm


    The javascript/jquery
    Code:
    <script type="text/javascript">
    
    //Global function that will detect what device the page is being viewed on
    function globalDetectDevice() {
    	var deviceIphone = "iphone" ;
    	var deviceIpod = "ipod" ;
    	var deviceAndroid = "android" ;
    	//Initialize our user agent string to lower case.
    	var uagent = navigator.userAgent.toLowerCase() ;
    	}
    
    function DetectDevice() {
    	if ((uagent.search(deviceIphone) > -1) || (uagent.search(deviceIpod) > -1) || (uagent.search(deviceAndroid) > -1)) {
    		window.location = "/landing/register/mobile" ;
    	}
    	else {
    		return false;
    	}
    }
    
    //Binding the above function to a class, that we can then attach to any clickable element
    //As jQuery is at the bottom of page, we poll the function until jQuery has loaded, once loaded, we clear the polling using clearTimout
    var bindTimer = setInterval(function() {
        if ("undefined" != typeof jQuery && globalDetectDevice && DetectDevice) {
            $('.detectDevice').removeClass('pbx_ajax').bind('click', DetectDevice);
            clearTimeout(bindTimer);
        }
    }, 50);
    
    </script>
    the html button
    Code:
    <a class="detectDevice pbx_ajax" title="Join Free" href="?cat=popup&amp;action=open&amp;settings=pbx_popup_register">~graphic("btn-get-started-prints-LP")</a>


    thanks for any help

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,282
    Mentioned
    180 Post(s)
    Tagged
    4 Thread(s)
    Firstly, when/where are you calling the "detection" function(s)?
    It may not return a valid result until the page is fully loaded (dependent upon the client, I believe).

  3. #3
    SitePoint Member
    Join Date
    Oct 2009
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    should update my code a bit:

    Code:
    //Global function that will detect what device the page is being viewed on
    function globalDetectDevice() {
    	var deviceIphone = "iphone" ;
    	var deviceIpod = "ipod" ;
    	var deviceAndroid = "android" ;
    	//Initialize our user agent string to lower case.
    	var uagent = navigator.userAgent.toLowerCase() ;
    	
    	function DetectDevice() {
    		if ((uagent.search(deviceIphone) > -1) || (uagent.search(deviceIpod) > -1) || (uagent.search(deviceAndroid) > -1)) {
    			window.location = "/landing/register/mobile" ;
    		}
    		else {
    			return false;
    		}
    	}
    }
    
    //Binding the above function to a class, that we can then attach to any clickable element
    //As jQuery is at the bottom of page, we poll the function until jQuery has loaded, once loaded, we clear the polling using clearTimout
    var bindTimer = setInterval(function() {
        if ("undefined" != typeof jQuery && globalDetectDevice) {
            $('.detectDevice').bind('click', globalDetectDevice);
            clearTimeout(bindTimer);
        }
    }, 50);

    so i'm calling my function named "globalDetectDevice" once the jquery library and uagent script has loaded. that function has been bound to my newly created class of .detectDevice

    i know i'm making a blinding **** up somewhere, but i've been staring at the script for a while and i now can't make heads or tails of it.

  4. #4
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,282
    Mentioned
    180 Post(s)
    Tagged
    4 Thread(s)
    Wait.
    You have two nested functions. You are binding to the 'globalDetectDevice' function onClick.
    But the 'DetectDevice' is not ever being called.
    Shouldn't your code read like this:?
    Code:
    //Global function that will detect what device the page is being viewed on
    function globalDetectDevice() {
    	var deviceIphone = "iphone" ;
    	var deviceIpod = "ipod" ;
    	var deviceAndroid = "android" ;
    	//Initialize our user agent string to lower case.
    	var uagent = navigator.userAgent.toLowerCase() ;
    	
    	if ((uagent.search(deviceIphone) > -1) || (uagent.search(deviceIpod) > -1) || (uagent.search(deviceAndroid) > -1)) {
    		window.location = "/landing/register/mobile" ;
    	}
    	else {
    		return false;
    	}
    }
    
    //Binding the above function to a class, that we can then attach to any clickable element
    //As jQuery is at the bottom of page, we poll the function until jQuery has loaded, once loaded, we clear the polling using clearTimout
    var bindTimer = setInterval(function() {
        if ("undefined" != typeof jQuery && globalDetectDevice) {
            $('.detectDevice').bind('click', globalDetectDevice);
            clearTimeout(bindTimer);
        }
    }, 50);
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  5. #5
    SitePoint Member
    Join Date
    Oct 2009
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the assistance so far Parkin, appreciated.
    I've tried that fix of your's, however to no avail. I do agree with you though that DetectDevice was never even being called.
    I think it may also be an issue with my polling, as i don't think .bind is working. Sadly the jQuery lib can't be moved to the top, but i shouldn't really need to do that anyway.

  6. #6
    SitePoint Member
    Join Date
    Oct 2009
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could i do something similar with javascript instead of jquery? Although my javascript isn't too hot.

  7. #7
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,282
    Mentioned
    180 Post(s)
    Tagged
    4 Thread(s)
    Thinking about your 'problem' rather than simply 'an answer to your question', I have another approach in mind:

    Using CSS you can display or hide one of two different links for the Registration (thus sending the user to a different registration page).
    Are you familiar with the "media" attribute in the CSS style tag? Are you comfortable with CSS?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  8. #8
    SitePoint Member
    Join Date
    Oct 2009
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    absolutely, i see where you are going with this. nice idea i'll give it a shot, cheers Parkin. Sometimes hard to think out of the box when you've been cooped up inside it for so long.


Bookmarks

Posting Permissions

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