display image ONLY if ipad/ipod/iphone is detected

[mallory]

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.

[ZABI]

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

[mallory]

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*

[MrSnowDrop]

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

// 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 ;-)

[mallory]

woah MrSnowDrop, thats awesome! thanks very much,
I will store that one away.

[ZABI]

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>

[mallory]

Zabi thats so cool! so I could make an if statement for the infoclick to appear
if the istouchdevice comes back true!?

[ZABI]

yeaaaaaaah

[mallory]

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

[ZABI]

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>