<a href="http://boosterads.co.uk/newsite/" tooltop="dashboard" tooltip="dashboard">
<img src="http://boosterads.co.uk/newsite/wp-content/uploads/2012/12/homelight.png" class="headerlogo" onmouseover="this.src='http://boosterads.co.uk/newsite/wp-content/uploads/2012/12/homedark.png'" onmouseout="this.src='http://boosterads.co.uk/newsite/wp-content/uploads/2012/12/homelight.png'" /></a>
I am using this code to change an image onmouseover. Does anyone know what i need to include for it to work on iphones/ipads?
i.e. the user clicks once and the hover displays, they click again and they are sent to the link.
To do this you would have to define what a "click" was, as tapping on a ipad is equivalent to clicking on a computer. This means that currently, your code would take a use straight to the link when they hover their mouse over the image (using a mouse) and on an ipad, there is no way to hover over an image, as there is no curser. the only way I can think of to get round this is to find some code (I don't know any myself) which adds a curser to your webpage when it is used on a mobile device. Hope this helps :)
Related
I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
On my website (still in beta version), here : http://www.collectifsaga.com/X/wordpress/fr/home-fr, I have a menu hover (filters for the grid)
I have a problem on phones (I have an iPhone, I don't know if there is problem on other devices) with that hover menu.
The hover is working well (with :active in the CSS) and by adding this in the <head> : document.addEventListener("touchstart", function() {},false);
This problem is, when I tap on the hover menu, the page goes directly to the top, even if I'm on the middle or bottom of it. And that's quite tiring
Do you know how to solve that ?
You need to add:
onclick="event.preventDefault();
so you would have:
<img src="http://www.collectifsaga.com/_SAGA/_graph/icone/plus.svg" width="160px">
inside your link that shows your menu when u tap on it. You could also use span instead of "a" for it, might even be better solution as thats not link.
I implemented this css dropdown menu system a few years ago and I am just realizing now that it does not work on my iPhone, yet it works fine on my bosses android phone. I was under the impression that since IOS5, i-devices do register a touch event as a hover automatically but I guess I was wrong.
The structure of this menu is a little weird in that the main tabs (other than Home and Contact) are not meant to take the user anywhere, only the submenu items actually go to another page. I have a feeling this is where the issue may lie, but I can't figure it out.
Here is a JS Fiddle.
The :hover is on <li> to cause the dropdown. Maybe this is the issue? or maybe its the way my boss coded the button so it would look like a link but not do anything on a click:
<li id="aboutus" class="blogbutton"><a><span>About Us</span></a>
I tried removing the anchor tags and the whole button goes away. I removed the span tags and the original problem still remains.
Is there a fix without having to rewrite the whole menu system?
Try adding an onclick="return True;" attribute to the base menu that triggers the drop-down. Safari will trigger the hover attributes, but only if it thinks that the element does something when it's tapped, and for a static element like a li, this is the easiest way to achieve that.
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.