$(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.)
Related
so apparently there is an issue regarding hover state of an element in tablet view.
I have made a sample where I have a position-fixed header, inside of it there is an element that can be hovered and will show dropdown content. I'm using additional class to show the dropdown content. Dropdown content will be shown on mouseenter and hidden on mouseleave or when window is scrolled like so:
$('.custom-dropdown').on('mouseenter', function(){
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
$(this).children('.dropdown-content').removeClass('active');
})
$(window).scroll(function () {
document.activeElement.blur();
$('.custom-dropdown').trigger('mouseleave');
});
Here is the sample: https://jsfiddle.net/tja9scg4/
This works fine in desktop mode using mouse interaction, but the problem occurs only when using tablet view (I use Chrome's developer tools to replicate this).
So in tablet mode, if you click on the 'Hover Me', the dropdown content will show. Now try scrolling it and that should hide the dropdown content. But when you click on the 'Hover Me' again, it won't show. I think this happens due to the 'Hover Me' element that is still focused.
So I wonder if anyone can help me on this? Thanks in advance.
Thanks for the help,
I decided to add click event so the dropdown will always show regardless the hover state. Here's the code:
$('.custom-dropdown').on('mouseenter', function () {
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function () {
$(this).children('.dropdown-content').removeClass('active');
}).on('click', function () {
$(this).children('.dropdown-content').addClass('active');
});
If anyone has the best practice, feel free to share. For now, I think this will work fine..
I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.
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...
I have a number of tooltips a date pickers used in my modal. How can I detect if the overflow modal has been scrolled so I can either reposition any open floating elements and reposition them according to the modal scroll position?
Thx
window.scroll is not firing!
An example of this is available here: Long modals (bottom of page)
http://jschr.github.io/bootstrap-modal/
OK, I sorted it.
The scroll event doesn't propagate to the document level of the DOM so $(document).on doesn't work.
I got around it with this hack.
This did work.
$(document).on("shown", "#modalcontact", function() {
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function(){
//do stuff
});
});
This didn't work.
$("#modalcontact").modal({
shown: function (){
$(".modal-scrollable").scroll(function(){
//do stuff
});
}
});
This didn't work.
$(document).on("scroll", ".modal-scrollable", function(){
//do stuff
});
You already answered your own question, but I would add that it's working this way as well:
$("#modalcontact").modal().on('loaded.bs.modal', function(){
$(this).parents('.modal-scrollable').scroll(function(){
//Do stuff
});
});
I've struggled to manage to work with shown event, but it was because the content was loaded remotely.
Try
$(document).on('scroll', '.modal-scrollable', function(){
//your code here
});
The scroll event handler can be bound to more than just the window.
This worked for me, whereas the earlier answers didn't for some reason. But I am opening the modal window using code, so that I can dynamically fill it with content before it is shown.
$('#modalcontact').modal('show');
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function () {
$('body').append('Hey hey hey!');
});
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/