Page 1 of 1

Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 10:38 am
by simonmlewis
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??

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 12:24 pm
by requinix
If you get a click event and the thing isn't expanded, expand it and do a preventDefault().

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 1:04 pm
by simonmlewis
So rather than use "onMouseover", I use "onClick". But what is a preventDefault(), how does that help here?

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 1:35 pm
by requinix
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.

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 1:45 pm
by simonmlewis

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>&nbsp;</td></tr>
This is what needs changing.
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?

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 4:39 pm
by requinix
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.

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 4:53 pm
by simonmlewis
Thanks for that.
I'm totally lost.
Oh well.

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 14, 2014 5:32 pm
by requinix
"Oh well"? So do you want to learn new things or just stay with what you know now?

Re: Make 'Expand' work on Tap for Tablet

Posted: Thu Aug 21, 2014 6:23 pm
by thinsoldier
simonmlewis wrote:

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>&nbsp;</td></tr>
This is what needs changing.
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.