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.
Related
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.
Posting this question largely in the hopes of confirming my suspicions of the behaviour, and thus documenting it for other programmers. (Since I found no record of this anywhere online)
I have a site that I'm building, whose nav bar has the following properties:
The horizontal section is a <ul> of <li>s and some of the <li>s hav both:
A n<a> element taking you to that topic.
A hover CSS selector that triggers display:block on a submenu - a nested <ul> which then drops down vertically.
On a desktop this all behaves as I'd expect: hovering on the key element exposes the submenu, and clicking on it executes the click event (in this case a normal <a> link.
But on an iOS device (tested on Air, Mini, iPhone 6) I found that tapping once would expose the submenu, and tapping a second time (when the submenu is open) will actually invoke the link on the controlling element.
Long-pressing will bring up the "link context menu"
This is exactly what I wanted it to do, which is GREAT! But I don't know WHY it is doing it. Whilst the Menu is Bootstrap based, but I can't find any bootstrap that is doing it.
Currently my best guess is that iOS Safari has some magic code that adds this (obviously desirable) behvaiour by deciding that if you have an element with :hover CSS (or, I imagine, an onhover eventhandler bound) and also a click eventhandler bound then the first tap will invoke, and keep invoked, the hover event, and the second tap will invoke the click event.
Question:
Does anyone know, confidently, what the source of this behaviour is.
Can anyone find any documentation of this behaviour!?
Would people like to contribute other platforms on which this does/doesn't work (Android tablets? Windows tablets? older iOS?)
The behavior triggering a clickable element such as an anchor link to fire only on the second tap in iOS, is described in this post by Nicholas C. Zakas (#slicknet). What triggers the double tap is a:
:hover Rule that either hides or shows another element using
visibility or display.
e.g.
<style>
p span {
display: none;
}
p:hover span {
display: inline;
}
</style>
<p>Tap me<span>You tapped!</span></p>
Apple also provides a documentation on Handling Events for reference.
No other platforms do this. It's iOS specific since at least version 5 (likely since version 1). Because it's not cross-platform, for Android and other touch devices, it has to be handled differently, and requires canceling click events etc... using JS. While I have managed to do this. I think it's fair to say that for CSS navigation menu bars to work with toggle elements that are both links and toggles is very difficult to achieve in a touch-only environment.
I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.
SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.
<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 :)