After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
Related
When I access at this link from iOS the button with the symbol of the clock needs to be tapped twice in order to show the opening hours. This problem affects also the other buttons.
The first tap is handled like a mouseover event.
How can I fix this problem?
This is the code of the button with the clock:
<li><a href='#openinghours' data-toggle='tab' title='Opening hours'>
<span class='round-tabs four'><i class='fa fa-clock-o'></i></span>
</a></li>
<div class="tab-pane fade" id="openinghours">
<!--html content of the opening hours-->
</div>
On the desktop version of the website everything is working well.
I don't have enough rep to comment, but I would clear all your JS errors on your page before you start to debug this. You seem to have around 6 console errors and 2 warnings.
I've tried this in my Simulator, and it behaves as you say - however the W3C Bootstrap 4 Nav Tabs are fine. Therefore, I'd suggest looking at the difference (as well as seeing if any errors are interfering)
Link to w3 Schools:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_nav_tabs_toggleable&stacked=h
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
This is my first post on Stack Overflow. I have searched google for a solution to this issue and have tried many workarounds but to no avail. Here is my case.Please note that this code is running fine on iOs 5 on a client iPads. My issue is only with iOs 6
I have a ul tag and within that I have multiple list items and on clicking each list item I would navigate the usetr to a different page.Please look at the code below.Sorry if the code is not formatted. I am in such a hurry.
<ul class="tp-breadcrumb" style="float: left; width:91%;">
<li class="current">Definition</li>
<li id="brdDateTimeRepSpeaker"><a style="padding-top:1px;height:30px" class="ui-link">Date, Rep,<br>Speaker</a></li>
<li id="brdVenueManagement"><a style="padding-top:8px;height:23px" class="ui-link">Venue</a></li>
<li id="brdAudienceSupport"><a style="padding-top:8px;height:23px" class="ui-link">Audience</a></li>
<li id="brdSummary"><a style="padding-top:8px;height:23px" class="ui-link">Summary</a></li>
</ul>
I am trying to fire the click for the list item(The anchor tag is a blank one with href="#"). It will fire the first time. But after navigating to another page and then coming back, the click event is not firing.
However, if I click on a textbox or any other control on the page and then click the list item the click is firing fine the second time.Below is the click code
$("#brdVenueManagement").live("click", function () {
alert('click');
});
I have tried the following.
Adding an onclick="" handler to the list item
Moving the click event to the hyper link instead of the list item and
specifying onclick="" and href="#"
Have tried tap and touchstart events.
Giving focus to the (Since my li's are dynamically generated)
In all of the above cases it works fine before navigating to another page. On coming back, the click is fired only if i click on some control in the page and then click the list item
Please help me out here guys. I am at a loss as to why this is not working on iOS 6. Its working fine on desktop browsers as well as iPads with iOs5 or lower.
Thanks,
Sriram
Never mind,
I fixed it myself. It was a position:relative on my li that was causing the events not to fired. I removed it and everything's fine.
Sriram
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)
periodically_call_remote is a great rails feature, but with ease comes novices so here I am.
I have a div that is getting updated with content every 5 seconds. Looks great and was easy to setup. This page is the homepage so people will not be staying here long. So when they click another link, such as link_to "All Products", periodically_call_remote creates two displeasing issues.
1) For one thing, periodically_call_remote doesn't stop when a html link is clicked and I believe that this is causing the lag in response to open the selected page.
2) Also, when an html link is clicked the content inside the updated div disappears.
Any conceptual solutions?
This only occurred in FF because I had a div inside the updating div which had my content and that middle div had no purpose.
For example.
<div id="main_div">
<div class="div_with_no_purpose"> <<=== problem div
<div id="div_getting_updated"> <<=== content goes here
</div>
</div>
</div>