Make 'Expand' work on Tap for Tablet
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Make 'Expand' work on Tap for Tablet
We have a site that has a mouseover event, when you do that, it reveals the rest of the image. It basically expandings the DIV I think.
We'd like it to do that on an ipad, but when they tap it first time, it expand, second time, it opens the page the banner is for.
Is this possible??
We'd like it to do that on an ipad, but when they tap it first time, it expand, second time, it opens the page the banner is for.
Is this possible??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Make 'Expand' work on Tap for Tablet
If you get a click event and the thing isn't expanded, expand it and do a preventDefault().
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Make 'Expand' work on Tap for Tablet
So rather than use "onMouseover", I use "onClick". But what is a preventDefault(), how does that help here?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Make 'Expand' work on Tap for Tablet
Not rather. Also.
Desktop: mouseover, expands, click, is expanded so continues activating the link
Mobile: no mouseover, click, is not expanded so expands, click, is expanded so continues activating the link
event.preventDefault(), varies based on browser and Javascript framework, is what you use in the click handler code so that the browser doesn't execute your code and then continue with the default click behavior.
Desktop: mouseover, expands, click, is expanded so continues activating the link
Mobile: no mouseover, click, is not expanded so expands, click, is expanded so continues activating the link
event.preventDefault(), varies based on browser and Javascript framework, is what you use in the click handler code so that the browser doesn't execute your code and then continue with the default click behavior.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Make 'Expand' work on Tap for Tablet
Code: Select all
<tr>
<td style='background-repeat: no-repeat' width='711px' height='188px' onMouseOver=\"this.style.cursor='hand';this.height=550;\" onMouseOut=\"this.height=188;\" background=\"/images/pages/$row->image\">
<a href='$row->url'><img src='/images/homepagemask.png' height='188px' border='0' onMouseOver=\"this.style.cursor='hand';this.height=550;this.width=711\" onMouseOut=\"this.height=188;this.width=711\" /></a></td></tr><tr><td valign='top' style='font-size: 11.2px;'>$row->freetext<br/></td></tr><tr><td> </td></tr>So onClick it explands, and then on the next click... it will activate the URL <a href>
Right now as you can see you hover over it, and the whole thing can be clicked. How would this work with a tablet?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Make 'Expand' work on Tap for Tablet
It works the way I described in my previous post.
If you stop using inline Javascript and move to event handlers then it will be a fair bit easier. Grab yourself a Javascript framework like jQuery or YUI and start learning.
If you stop using inline Javascript and move to event handlers then it will be a fair bit easier. Grab yourself a Javascript framework like jQuery or YUI and start learning.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Make 'Expand' work on Tap for Tablet
Thanks for that.
I'm totally lost.
Oh well.
I'm totally lost.
Oh well.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Make 'Expand' work on Tap for Tablet
"Oh well"? So do you want to learn new things or just stay with what you know now?
-
thinsoldier
- Forum Contributor
- Posts: 367
- Joined: Fri Jul 20, 2007 11:29 am
- Contact:
Re: Make 'Expand' work on Tap for Tablet
simonmlewis wrote:This is what needs changing.Code: Select all
<tr> <td style='background-repeat: no-repeat' width='711px' height='188px' onMouseOver=\"this.style.cursor='hand';this.height=550;\" onMouseOut=\"this.height=188;\" background=\"/images/pages/$row->image\"> <a href='$row->url'><img src='/images/homepagemask.png' height='188px' border='0' onMouseOver=\"this.style.cursor='hand';this.height=550;this.width=711\" onMouseOut=\"this.height=188;this.width=711\" /></a></td></tr><tr><td valign='top' style='font-size: 11.2px;'>$row->freetext<br/></td></tr><tr><td> </td></tr>
So onClick it explands, and then on the next click... it will activate the URL <a href>
Right now as you can see you hover over it, and the whole thing can be clicked. How would this work with a tablet?
This code, the js parts of it, are simply saying "do this on mouse over and do this on mouse out".
What you need is a real block of js code where you can add some real logic:
check bird, check fish, if bird and fish are both breathing, then make boy jump up and down.
If bird and fish are both not breathing, them make boy cry.
If either bird or fish is not breathing, give the breathing one to boy, and give the non breathing one to Man.
But if fish cannot be found, find Man, use a function of Man to acquire a new Fish, now check bird and fish again.
If bird cannot be found, give up and return false.
It's a crappy example, But it shows how much more expressive you can be in a straight block of code versus the limited things you can do with onMouseOver attributes on the html tags.
Also there are .style.* things in there that could and probably should be moved to plain css files or at least a style tag.
Warning: I have no idea what I'm talking about.