I have been working on a website and I use onclick to open the navigation but when I tried it on mobile it didn't work, it just did the :hover animation. I then added ontouchstart to the div and it still doesn't work on mobile. When I tap it it acts like I hover over it. I've looked at a few articles on why it might not work but I can't figure it out. Also any element that uses onclick doesn't work on mobile. Also the js is a separate file (not sure if this would for some reason affect it).
<div id="navWrap" onclick="openNav()" ontouchstart="openNav()">
<div class="navLine"></div>
<div class="navLine" id="navMid"></div>
<div class="navLine" id="navBottom"></div>
</div>
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
Edit: More code
<div id="headWrap">
<div id="logoWrap"><img src="/static/images/logo.svg" id="logo"></div>
<div id="headText">Cite Chef</div>
<div id="navWrap" onclick="openNav()" ontouchstart="openNav()">
<div class="navLine"></div>
<div class="navLine" id="navMid"></div>
<div class="navLine" id="navBottom"></div>
</div>
</div>
window.addEventListener('load', function(){
document.getElementById('navWrap').addEventListener('mousedown', openNav);
document.getElementsByClassName('closebtn')[0].addEventListener('click', closeNav);
document.getElementById('Create').addEventListener('click', create);
document.getElementById('TInput').addEventListener('click', MYfunctionTwo);
});
This might be due to some overlapping div's or element on the phone view, you need not add a separate event listener for the phone view click.
Try to inspect the code in the mobile view you might some overlapping element.
As you have mentioned on your previous comment, you are testing this on Safari. The inline onclick events are going to cause issues in your Web App. This is not supported in some browsers. I recommend using addEventListener. Simply remove all the inline events and migrate event handling implementations to addEventListener.
<div id="headWrap">
<div id="logoWrap"><img src="/static/images/logo.svg" id="logo"></div>
<div id="headText">Cite Chef</div>
<div id="navWrap">
<div class="navLine"></div>
<div class="navLine" id="navMid"></div>
<div class="navLine" id="navBottom"></div>
</div>
</div>
document.getElementById('navWrap').addEventListener('click', openNav);
In case you are using a lower version of Safari Mobile. This is good information to have from MDN Web Docs in case you plan on doing event delegation in the future:
Safari Mobile 7.0+ (and likely earlier versions too) suffers from a
bug where click events aren't fired on elements that aren't typically
interactive (e.g. <div>) and which also don't have event listeners
directly attached to the elements themselves (i.e. event delegation is
being used).
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
Related
So this is what I have right now
http://jsfiddle.net/Wpn94/1755/
The first part of the javascript is just calling in the jQuery lib. Since I don't have acces to the original files I use a custom css, js plugin (mind this all in done in wordpress).
In the fiddle if you click on one the the 'meer' it only opens the one you've clicked. If you press 'minder'it nicely closes the one you've clicked.
Now to the issue, on my testing area if I click one of these buttons the other 5 open as well, which ofcource is not the intended use.
Is there any solution which could fix this? I'mn not able to link to the testing enviroment since it's about a product which isn't released yet, so sadly I do not have permissions to do so.
Possibly the issue:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
or
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
I think the issue is in one of those two. Since I look for the wrapper class which all the 'buttons'have in common.
Any help would be greatly appreciated.
(structure of the element on the test area)
<div class="column withimage ">
<div class="column-inner">
<div class="image" style="background-image: url(http://eperium.com.testbyte.nl/wp-content/uploads/2016/08/Icoon_orientatie_v02.png)"></div>
<div class="txtwrap"><h4><center>ORIËNTATIE</center></h4>
<div class="wrapper">
<div class="small">
<p style="text-align: center;">
<span style="color: #000000; font-size: 16pt;">title</span><br>
<span style="color: #000000; font-size: 12pt;">text<br>more text week. </span></p>
</div>
<p style="text-align: center;"><a class="btn" href="#">Meer informatie</a></p>
</div>
What are you doing inside this function ?
$('.wrapper').find('a[href="#"]').on('click', function (e) {
You need to toogle your class on $(this) element, not to select all element with jquery again.
As closest doesn't seem to be reliable (maybe only in your test area) it is worth a try to navigate to the desired element with .parent()
$(this).parent().parent().find('.small, .big').toggleClass('small big');
If anyone is interested in the differences:
Difference between jQuery parent(), parents() and closest() functions.
According to this, closest should actually work but parent seems to be the saver way.
You can use Jquery's findByClass.
$('.className')
This will find all the elements use className.
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
I had a suggestion to add this to my code:
<script type="text/javascript">
$(document).on('scroll', '.wrapper1', function () {
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(document).on('scroll', '.wrapper2', function () {
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
</script>
So I could change two scroll bars at together. Here's the HTML that I am using:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
I have jQuery loaded but it seems that the scroll bars don't scroll together. Can anyone help suggest why this is.
Note I need to use .on as the scroll bar area is loaded dynamically.
Here's a fiddle: http://jsfiddle.net/npwD8/
I've updated your example on JSFiddle to one that works, though I am not certain it will ultimately fit your use case.
http://jsfiddle.net/npwD8/4/
$('.wrapper').on('scroll', function({
$(".wrapper").not(this).scrollLeft($(this).scrollLeft());
});
The scroll event does not bubble, so delegating down from window won't work. You'll need to manually handle the attachment of these events when those elements are added to the DOM.
The scroll() event is unqualified to use event bubbling;
"In all browsers, the load, scroll, and error events (e.g., on an <img>
element) do not bubble." - jQuery on() documentation.
Therefore event delegation (e.g. $(document).on('...', '...')) isn't possible with it I'm afraid.
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.
I use jquery for my web application. I want it to be correct for desktop browsers and mobile brousers for touchscreen devices.
I have a div, and some elements inside it:
<div class="well listItem element-div alert-error" data-state="removing">
<strong>Item title</strong> <small>Items count</small>
<div class="pull-right" style="margin-top: -5px;">
<a class="btn btn-success approve-button"><i class="icon-ok icon-white"></i></a>
<a class="btn btn-danger cancel-button"><i class="icon-remove icon-white"></i></a>
</div>
</div>
I catch click and touchend event for .listItem class (top-level div) and same events for every a element (for .approve-button and .cancel-button), but when I'm click on desktop browser on 'a' element, it works correct, and when I am pressing on 'a' element in iOS Safari browser, or WindowsPhone InternetExplorer, works only event for parent div, but not for 'a'. If I remove event listener for parent div, events for 'a' elements works correct in mobile browsers. I want parent-div event works when I touch a free space of it, and when I touch 'a' element - I want only 'a' event listener to go on. Can you advise me how to separate them?
Have you tried to check event target?
$(".listItem").on("click", function(event){
if (event.target === this) {
// clicked exactly on this element
}
});
I've had a similar problem, only my content was more nested. You want to exclude the areas (divs, classes or otherwise) where you expect to handle other events, using :not selector, like so:
<article>
<div class="title">
<span class="title"></span>
<div class="buttons">
<div class="minimize">+</div>
<div class="remove">x</div>
</div>
</div>
<div class="post">
...
</div>
</article>
With jQuery:
$("article :not(.buttons, .minimize, .remove)").click(function (event) {
// toggle display value of div.post
});
This triggers a click event anywhere inside article, except for the .buttons, .minimize and .remove divs.