I got a navigation menu that opens a submenu dropdown on hovering over the first level items. After a click on a first level link the mouse is on the same position on the new page .... so here's the thing:
On normal browsers (Firefox, Safari and Chrome) it triggers the hover effect only after the mouse moves.
On Internet Explorer it seems that the hover is triggered immediatly after load because the dropdown opens directly (which is pretty annoying). I even mapped the hover function in a mousemove but that doesn't change anything (does ie even trigger mousemove on load without even moving Oo).
Here the simplified code:
jQuery( '#mainmenucontainer' ).hoverIntent( {
over: function() {
jQuery( 'body' ).addClass( 'mainmenu_active' );
},
out: function() {
jQuery( 'body' ).removeClass( 'mainmenu_active' );
}
} );
jQuery( '#mainmenu > ul > li' ).hoverIntent( {
over: function() {
jQuery( '#mainmenu > ul > li' ).removeClass( 'active' );
jQuery( this ).addClass( 'active' );
}
} );
Related
When I am click on the dots within my data-dot nav, the slide seems to reset to the first slide. However, if I click pixels off the fa-circle, or the text, it goes to the appropriate slide. I've tried watching the events firing, but I can't seem to find out what is causing that at all.
Here is a link to my site in progress
I'm not running anything in particularly difficult, and have been playing with and without using this bit of code:
I call to the slide element with:
<div class="item" data-dot ="<span><i class='fa fa-circle'></i></span><span><?php _e( $i['description'], 'firkisok' );?></span>">
Content item stuff happens here
</div>
(function($) {
$(function() {
// Call Vars
var owl = $('.owl-carousel');
// Setup owlCarousel
owl.owlCarousel({
dots: true,
dotsData: true,
center: true,
autoWidth: true,
smartSpeed: 500,
});
$( '.owl-dot' ).on( 'click', function() {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
$( '.owl-dot' ).removeClass( 'active' );
$(this).addClass( 'active' );
})
$( '.owl-dot span .fa-circle' ).on( 'click', function() {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
$( '.owl-dot' ).removeClass( 'active' );
$(this).parent().parent().addClass( 'active' );
})
})(jQuery);
Whether it's active or not, the event still happens the same, clicking fa-circle resets the slideshow to slide 1.
When I apply the CSS attribute pointer-events: none to the fa-circle elements on your Web page, the carousel works correctly. That tells me that the event handler on these circle elements is not needed and only causes problems. Therefore, you can remove it completely and keep only the event handler on the owl-dot elements:
$( '.owl-dot' ).on( 'click', function() {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
$( '.owl-dot' ).removeClass( 'active' );
$(this).addClass( 'active' );
})
// Remove this event handler
//$( '.owl-dot span .fa-circle' ).on( 'click', function() {
// owl.trigger('to.owl.carousel', [$(this).index(), 300]);
// $( '.owl-dot' ).removeClass( 'active' );
// $(this).parent().parent().addClass( 'active' );
//})
On top of page it has a menu that opens with click on it:
menu opens with click
I need to change it to open with hover, the code is this:
$(document).on('click','.btn-open-mobile',function(){
var width = $(window).width();
if(width > 1024){
if($('body').hasClass('home') && !$('.box-vertical-megamenus').is('.hiden_content')){
if($('#nav-top-menu').hasClass('nav-ontop') || $('#header').hasClass('option6') || $('#header').hasClass('option5') ){
}else{
return false;
}
}
}
$(this).closest('.box-vertical-megamenus').find('.vertical-menu-content').slideToggle();
$(this).closest('.title').toggleClass('active');
if( width < 768 ){
$('.main-menu .navigation-main-menu').hide();
}
return false;
})
when I replace "click" with "hover", it works But problem is menu is open only if cursor is on "three lines icon".
How to force this menu continue to stay open until cursor moved out of sub menus.
sorry for dirty code, I'm newbie.
Make sure you have a proper parent/child structure.
You need to target the entire div and not only the button when using hover.
jQuery Mousenter
https://api.jquery.com/mouseenter/
Should give you more freedom to play with your menu.
$( "nav" )
.mouseenter(function() {
$( "p:first", this ).text( "mouse enter" );
$( "p:last", this ).text( ++n );
})
.mouseleave(function() {
$( "p:first", this ).text( "mouse leave" );
});
I have a html page with over 1500 element !!!
and a menu .
when I click somewhere on document , the page locked for over 2 seconds (at least).
After some search I found this block of code in JQuery.UI :
// Clicks outside of a menu collapse any open menus
this._on( this.document, {
click: function( event ) {
if ( !$( event.target ).closest( ".ui-menu" ).length ) {
this.collapseAll( event );
}
// Reset the mouseHandled flag
this.mouseHandled = false;
}
});
the if statement fires over and over and it become problem .
How this could fix ?!
Links that are subject to display: none aren't in the default tabbing order. However, when they're revealed - e.g. CSS for a drop-down menu reveals a sub-menu when a parent link gains focus - they still aren't in the tabbing order. Presumably JavaScript is required, but simply setting tabindex="0" does nothing.
The problem here is that as soon as you tab off the "Top level page with child" link, the CSS is updated and the parent of the anchor becomes display:none before the anchor can receive focus. You will need to use JavaScript to solve this problem and delay the change in the CSS using a timeout until you can determine whether the loss of focus has resulted in the focus shifting to the child element.
Setting tabindex="0" when the parent is display:none will not help, display:none means that the content might as well not be in the document.
I've come up with a solution that basically works: http://codepen.io/gyrus/pen/waKjKv/ There seem to be some issues in IE, I'm working on that. But the general idea is:
Add a small delay before hiding the drop-down
Set a data attribute to flag whether any links inside the drop-down have focus, and check this before hiding
This is just the jQuery, check the pen for more:
jQuery( document ).ready( function( $ ) {
$( '.nav' ).on( 'mouseenter focusin', '.menu-level-0.menu-item-has-children', function( e ) {
var el = $( this );
// Show sub-menu
el.attr( 'aria-expanded', 'true' )
.find( '.sub-menu-wrapper' ).show();
}).on( 'mouseleave focusout', '.menu-level-0.menu-item-has-children', function( e ) {
var el = $( this );
// Only hide sub-menu after a short delay, so links get a chance to catch focus from tabbing
setTimeout( function() {
var smw = el.find( '.sub-menu-wrapper' );
if ( smw.attr( 'data-has-focus' ) !== 'true' ) {
el.attr( 'aria-expanded', 'false' );
smw.hide();
}
}, 100 );
}).on( 'focusin', '.sub-menu-wrapper', function( e ) {
var el = $( this );
el.attr( 'data-has-focus', 'true' );
}).on( 'focusout', '.sub-menu-wrapper', function( e ) {
var el = $( this );
el.attr( 'data-has-focus', 'false' );
// Hide sub-menu on the way out
el.hide().parents( '.menu-level-0' ).attr( 'aria-expanded', 'false' );
});
});
My question concerns the swipe event on a mobile device (I'm using a Nexus 7) with Chrome. I am working off the Jquery Mobile 1.4.2 demo which can be found here:
http://demos.jquerymobile.com/1.4.2/swipe-page/
I'll ask my question and copy the sample javascript below. I can get everything to work, both on my laptop (using Chrome) and on my tablet (using Firefox), but the swipe works maybe one out of ten times in Chrome with my tablet. Any advice? Thanks!
// Pagecreate will fire for each of the pages in this demo
// but we only need to bind once so we use "one()"
$( document ).one( "pagecreate", ".demo-page", function() {
// Initialize the external persistent header and footer
$( "#header" ).toolbar({ theme: "b" });
$( "#footer" ).toolbar({ theme: "b" });
// Handler for navigating to the next page
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
transition: "slide"
});
}
// Handler for navigating to the previous page
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
transition: "slide",
reverse: true
});
}
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
// Check if there is a next page and
// swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if ( next && ( event.target === $( this )[ 0 ] ) ) {
navnext( next );
}
});
// Navigate to the next page when the "next" button in the footer is clicked
$( document ).on( "click", ".next", function() {
var next = $( ".ui-page-active" ).jqmData( "next" );
// Check if there is a next page
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
$( document ).on( "click", ".prev", function() {
var prev = $( ".ui-page-active" ).jqmData( "prev" );
if ( prev ) {
navprev( prev );
}
});
});
$( document ).on( "pageshow", ".demo-page", function() {
var thePage = $( this ),
title = thePage.jqmData( "title" ),
next = thePage.jqmData( "next" ),
prev = thePage.jqmData( "prev" );
// Point the "Trivia" button to the popup for the current page.
$( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );
// We use the same header on each page
// so we have to update the title
$( "#header h1" ).text( title );
// Prefetch the next page
// We added data-dom-cache="true" to the page so it won't be deleted
// so there is no need to prefetch it
if ( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
}
// We disable the next or previous buttons in the footer
// if there is no next or previous page
// We use the same footer on each page
// so first we remove the disabled class if it is there
$( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );
if ( ! next ) {
$( ".next" ).addClass( "ui-state-disabled" );
}
if ( ! prev ) {
$( ".prev" ).addClass( "ui-state-disabled" );
}
});
I've done the same experiment and I've observed similar results with my tablet (Nexus 7 - Google Chrome).
You should not use heavy frameworks like jQueryMobile if you are going to create a web app or a mobile website because even if these tools make your life easier at the end the result, especially on Android devices, will be slow and sluggish.
In other words you should create your own .css and .js.
If you need to manipulate the DOM very often you should also look for alternatives to jQuery.
I suggest that you use Zepto.js.
In the end, I decided to use the jQuery touchSwipe plugin and write my own code, works fine in different browsers and across devices. Some of this may not make sense without the HTML, but essentially I determine the direction of the swipe based on the variable that is passed into the method. Then, by getting various attributes and class names, I am turning on and off the display of the various divs that have previously loaded the JSON into them from another method. The way I do that is through substrings, where the last digit of the id is a number. If anyone has any comments about how this code could be more efficient, I'd be happy to hear your thoughts. Cheers.
function swipeLiterary() {
$("#read").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
switch (direction) {
case 'left':
var thisPage = $('.display').attr('id');
var nextPageNum = parseInt(thisPage.substring(8)) + 1;
var nextPage = thisPage.substring(0,8) + nextPageNum;
if (nextPageNum > 9) {
break
}
$('#' + thisPage).removeClass('display').addClass('nodisplay');
$('#' + nextPage).removeClass('nodisplay').addClass('display');
console.log(nextPage);
break;
case 'right':
var thisPage = $('.display').attr('id');
var prevPageNum = parseInt(thisPage.substring(8)) - 1;
var prevPage = thisPage.substring(0,8) + prevPageNum;
if (prevPageNum < 0){
break;
}
$('#' + thisPage).removeClass('display').addClass('nodisplay');
$('#' + prevPage).removeClass('nodisplay').addClass('display');
console.log(prevPage);
break;
case 'up':
console.log('up');
break;
}
//$(this).text("You swiped " + direction );
//console.log(this);
}
});
}