Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Mobile detection function bound to click and used on a button

    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:

    1. 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.
    2. 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).


    The javascript/jquery
    Code:
    //$(document).ready(function() {
    	//Global function that will detect what device the page is being viewed on
    	function globalDetectDevice() {
    		var deviceIphone = "iphone";
    		var deviceIpod = "ipod";
    		
    		//Initialize our user agent string to lower case.
    		var uagent = navigator.userAgent.toLowerCase();
    		
    		
    		//**************************
    		// Detects if the current device is an iPhone or iPod Touch.
    		function DetectDevice()
    		{
    		    if (DetectIphone()) {
    		    	window.location = "/landing/register/mobile" ;
    		    }
    		    else if (DetectIpod()) {
    		    	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').removeClass('pbx_ajax').bind('click', DetectDevice);
    	        clearTimeout(bindTimer);
    	    }
    	}, 50);
    //}
    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
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

    Just in case there might have been any confusion on that part. I suppose where things break down is my polling & binding... although again, i'm not sure.

    cheers


  •  

    Posting Permissions

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