www.webdeveloper.com
Results 1 to 10 of 10

Thread: display image ONLY if ipad/ipod/iphone is detected

  1. #1
    Join Date
    Jul 2009
    Posts
    17

    display image ONLY if ipad/ipod/iphone is detected

    Hi

    I have images in my site that display text over them on mouse over.
    silly me, well obviously the ipad needs a click!
    SO my only thoughts are to make a small info button appear in each of the images,
    so they know to click there.
    I want them only to appear only on ipad, iphone, ipod, or touch devices in general.

    Is this possible with an if statement?;

    <?php
    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
    {
    echo('<style type="text/css">.infoclick { display: block; }</style>');
    }
    else ( echo('<style type="text/css">.infoclick { display: none; }</style>');
    }
    ?>

    this makes sense to me, but not quite right.
    Here is the code in my about page which I have changed to a about.php:

    <div class="rollover_img1"><a href="images/merinovsescorial.jpg">
    <div class="infoclick"></div>
    <span>The distinction is in the fibre. This resilient naturally coiled
    fibre creates unsurpassed luxurious fabrics. </span>
    </a></div>

    ---------css

    .infoclick{position:relative;
    float:right;
    background-image:url(images/info_click.png);
    width:20px;
    height:20px;
    z-index: 2;

    }


    thanks for any input on this.
    Last edited by mallory; 09-19-2012 at 05:07 AM.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    you can do that in a more simple way.
    <?php
    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
    {?>
    <div class="infoclick"></div>
    <?php }?>

    also for you may have to add few more user agents to target touch screen devices, as there are millions Android as well

  3. #3
    Join Date
    Jul 2009
    Posts
    17
    hey thanks very much. that works well, but still appears in non touch devices?
    dam, maybe this hover idea was not a good one at all after all, if I have to have many more user agents. sigh*

  4. #4
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    101

    Lightbulb Mobile device detection JS code

    Here is a very useful JS code to detect devices or specific browsers in general:

    Code:
    // Javascript iPhone iPad iPod detection example
    var uAgent=navigator.userAgent.toLowerCase();
    if(uAgent.indexOf("ip")>-1) {
    // do some action, for example:
    window.location.replace("www.mysite.com/mobile.html");
    }
    Note: that above code works with iPad/iPhone/iPod because it detects an "ip" text-value in the navigator-name detection, but you can change the value in order to detect whatever you want.
    In the example, if an Apple mobile device is detected, the code redirects to a specific page you may build for mobile devices... but you can do anything you want.

    Hope that will help someway ;-)
    Last edited by MrSnowDrop; 09-19-2012 at 05:34 AM.

  5. #5
    Join Date
    Jul 2009
    Posts
    17
    woah MrSnowDrop, thats awesome! thanks very much,
    I will store that one away.

  6. #6
    Join Date
    Mar 2009
    Posts
    452
    yup you will need an array containing those user agents,

    there are also some ways to detect Touch events with javascript like:

    <script type="text/javascript">
    function isTouchDevice(){
    return (typeof(window.ontouchstart) != 'undefined') ? true : false;
    }

    alert(isTouchDevice());
    </script>

  7. #7
    Join Date
    Jul 2009
    Posts
    17
    Zabi thats so cool! so I could make an if statement for the infoclick to appear
    if the istouchdevice comes back true!?

  8. #8
    Join Date
    Mar 2009
    Posts
    452
    yeaaaaaaah

  9. #9
    Join Date
    Jul 2009
    Posts
    17
    im back. AND im terrible at if statements:



    <script type="text/javascript">
    function isTouchDevice(){
    return (typeof(window.ontouchstart) != 'undefined') ? true : false;
    }

    activate();
    </script>


    <?php
    if(activate)
    {
    <div class="infoclick"></div>
    }
    else
    { echo('<style type="text/css">.infoclick { display: none; }</style>');
    }
    ?>



    ---------
    whats wrong/right with this code?
    thanks for any advice

  10. #10
    Join Date
    Mar 2009
    Posts
    452
    hahah, you mixed up Javascript and PHP, since Javascript is run on client side i.e. in the browser while PHP runs on server side.

    and also you did not define activate function; are you defining it somewhere else ? try the following:


    <script type="text/javascript">
    function isTouchDevice(){
    return (typeof(window.ontouchstart) != 'undefined') ? true : false;
    }

    if (!isTouchDevice()){
    document.write('<style type="text/css">.infoclick { display: none; }</style>');
    }
    </script>


    <div class="infoclick"></div>

Thread Information

Users Browsing this Thread

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

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