I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click').
https://jsfiddle.net/lkw274/7zt1zL0g/87/
<div class="user-navigation">
<a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>
$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
e.preventDefault();
$(".user-navigation a.mobile-menu-new").toggleClass("current");
});
});
.current { background: #F00;}
Expected behaviour:
On clicking 'Menu', either by touch or with clicked with mouse, the background is highlighted red until it is clicked again when the class should be removed, removing the red background and returning it to its original state.
Current behaviour:
On clicking 'Menu', by touch on mobile/tablet device, the background is highlighted red however the class is not removed when 'menu' is clicked for the second time.
Could anyone help to understand how this code needs to be modified for tablet/mobile devices?
I have tried the solution in the below StackOverflow link however this did not function on click once implemented.
document-click-function-for-touch-device
Thanks in advance.
Looks like event delegation is the way to do this since, when you modify the target element, bind seems to fail.
Try the following (works on my iPhone/Chrome).
$(document).ready(function() {
$(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
Please note I have used .delegate since you seem to be using jQuery 1.6 (as per your fiddle) as otherwise, with jQuery 1.7+, you could use .on like below.
$(document).ready(function() {
$(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
add the cursor:pointer to the property of your class and it should work find in mobile
.user-navigation{
cursor:pointer
}
$(selector).bind("click touchstart", function(){
.......
});
Well, in modern jQuery versions, I suppose something like this:
$(document).on('click','selector', function(e){
e.preventDefault();
your code here
});
...would do the trick for mobile devices...
Related
$(function closeMenu() {
$('.list-item').removeClass('activeItem');
$('.showSubMenu').removeClass('showSubMenu');
$('input[type=checkbox]').prop('checked', false);
$('#burger').removeClass('change');
});
$('html').on('click', function(e) {
closeMenu();
});
$('.list-item, .showSubMenu, #burger, #menuToggle').click( function(e) {
e.stopPropagation();
});
This JS works and closes responsive menu on outside click in Chrome (desktop and mobile) and Safari (desktop-only), but not Firefox!?? What's wrong? Syntax error? Any wisdom is much appreciated.
See full code in action here:(Working in Chrome and Safari desktop):
http://cardscreative.com/cc2017/test444.html
try this
$(document).on('click','body *',function(){
closeMenu();
});
It looks like the body is only taking up the portion where your search bar is in Mozilla, so if you click anywhere else it doesn't register as having clicked on the body. If you set the body to height: 100% it appears to work.
Looking at the JavaScript for the example site you posted, (http://cardscreative.com/cc2017/test444.js), there's the following code:
$(document.body).on('click', function(e) {
...
}
For Firefox, the document body only takes up the full height of its content, not the full height of the window. So, this function does not get attached to click events which happen outside the content <body>. In your example site, the content body consists of the navigation bar.
This issue can be fixed with the following change:
$(document).on('click', ...
This change will attach the function to all clicks in the document, not just the body.
(Also, your question says $('html').on('click', .... You should update your question to reflect the JavaScript of the site.)
Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.
You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.
I try to do the following:
When I click on a specific DIV a CSS class is added/removed from another DIV.
Take a look here for a live example (and click on "click me"):
http://jsfiddle.net/fyehLqsc/
$(document).ready(function() {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
It is working as it should, but when I do the same thing on my WordPress site, it's not working.
Take a look here:
link removed
What I want to achieve: If someone clicks on the play button which has the class "mejs-play" the class "animated" shall be added to "spin-l" and "spin-r".
Can anyone please tell me why it's working on JSFiddle but not on my site?
jQuery is running in noconflict-mode in wordpress, you can't access it via $
Use this:
jQuery(document).ready(function($) {
$(".mejs-play").click(function () {
$(".spin-l").toggleClass("animated");
$(".spin-r").toggleClass("animated");
});
});
Edit:
as it seems the Medialelement-library stops the propagation of the click-event.
This works for me:
jQuery(document).ready( function ($) {
$('audio').on('play pause',function(e){
$(this).closest('.current-cast').prevAll('.cassette').last()
.find(".spin-l,.spin-r").toggleClass("animated",e.type==='play');
});
});
This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks
http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.
Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/
I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div