I'm trying to handle an event when the user click on a Youtube embedded videos to start them.
Each video is included in a <li> element which, again, is included in a <div> container.
Like:
<div class="container">
<ul>
<li><embed src="..."></embed></li>
<li><embed src="..."></embed></li>
</ul>
</div>
This container is a prototype scroller which automatically go next after a time (by setInterval). I want that, on observe (click) on videos, the autoScroll stops (by clearInterval).
Neither observing clicking on embed or li elements works but, with Firefox, the observing on the container element works, allowing me to clear the interval.
The problem is that only Firefox works, other browsers don't get the observe method on it.
Any solution?
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
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.
I have recently taken up web design and I am in no way an expert. I am developing this site for myself and I seem to be having some problems. This site looks about the same (it's still under development) across all browsers and I've been working on tablet and mobile phone specific css. While doing testing for the iPad (I use the xCode iOS Sim) I noticed that my menu bar was not working except in what seem like random moments (usually when I was zoomed in). I had a family member test this on their physical iPad and they couldn't use the nav bar at all. This jsFiddle link contains the html and css that run the navbar. I will be spending the next few hours working on this and will update or remove this post if I figure it out, but if I do not, any help is appreciated.
This is the html only, the css is too long.
<h2>Auburn PC Repair<br>& Building</h2>
<div id="header-image">
<h1></h1>
</div>
<nav id="buttonbar">
<ul>
<li id="services-button"><div class="buttonHighlight"></div>
<h3>Our Services</h3><p>how can we help you</p>
<ul>
<li>PC Repair</li>
<li>Mobile Device</li>
<li>Networking</li>
<li>PC Building</li>
</ul>
</li>
<li id="contact-button"><div class="buttonHighlight"></div>
<h3>Contact Us</h3><p>phone and email</p>
</li>
<li id="about-button"><div class="buttonHighlight"></div>
<h3>About Us</h3><p>all about us</p>
</li>
</ul>
</nav>
EDIT: The navbar was designed around www.panic.com/coda navbar. It works just fine on the iPad.
EDIT: The current setup works on all non-iOS devices.
Your navigation relies on hover events to trigger menu content to appear.
A hover event is triggered by the mouse moving over an element.
Touch devices, such as all iOS devices, as well as most, if not all, contemporary smartphones and tablets, do not have a mouse and as such there is no way for a hover event to be triggered.
You cannot achieve what you want on contemporary touch devices using only CSS.
There are various touch-related events that can be fired and responded to using JavaScript. You will need to opt not for a CSS-based menu-triggering approach and instead use a JavaScript-based approach where both hover and touch events are handled to produce the menu system you desire.
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
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>