document on hover not working jquery - javascript

I have two buttons and two list. This is my code code:
$(document).on('hover','.select-user-type-js',function(){
if($(this).hasClass('select-user-type_customer')){
$('#buyer').show();
$('#seller').hide();
$($this).addClass('active');
$('.select-user-type_performer').removeClass('active');
}
else{
$('#buyer').hide();
$('#seller').show();
$($this).addClass('active');
$('.select-user-type_customer').removeClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
I need on hover buttons change specific menu for seller or buyer. How I can do it? My code is not working..

First, you have 2 id="seller". An id should always be unique.
Second, you should use mouseenter.
Third, you have a spelling error in $($this) it should be $(this)
$(document).on('mouseenter', '.select-user-type-js', function() {
$('.select-user-type-js.active').add($(this)).toggleClass('active');
if ($(this).hasClass('select-user-type_customer')) {
$('#buyer').show();
$('#seller').hide();
} else {
$('#buyer').hide();
$('#seller').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>

Seller
---^^^^^^^-----
<ul id="seller" style="display: none;">
---^^^^^^^-----
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
In above code you have duplicate ID values for DOM and DOM must have unique ID values. So try giving different IDs to DOM. It will work.
Also remove inline style from second UL.
JSFIDDLE LINK : https://jsfiddle.net/dipeshbeckham/qq617gs5/4/

plese try mouseover with jQuery on function.
$(document).on('mouseover','.select-user-type-js',function(){
if($(this).hasClass('select-user-type_customer')){
$('#buyer').show();
$('#seller').hide();
$(this).addClass('active');
$('.select-user-type_performer').removeClass('active');
}
else{
$('#buyer').hide();
$('#seller').show();
$(this).addClass('active');
$('.select-user-type_customer').removeClass('active');
}
});

$(".select-user-type_customer").hover(function() {
$('#buyer').show();
$('#seller').hide();
}, function() {
$('#buyer').show();
$('#seller').hide();
});
$(".select-user-type_performer").hover(function() {
$('#buyer').hide();
$('#seller').show();
}, function() {
$('#buyer').show();
$('#seller').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Customer
Seller
<ul id="buyer">
<li>Menu for buyer #1</li>
<li>Menu for buyer #2</li>
<li>Menu for buyer #3</li>
</ul>
<ul id="seller" style="display: none;">
<li>Menu for seller #1</li>
<li>Menu for seller #2</li>
<li>Menu for seller #3</li>
</ul>
You can use class selector element when the mouse pointer hovers over it:

Related

Superfish sf-js-enabled seems to be not working

I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><div>Project's Stories</div></li>
<li><div>Menus</div></li>
<li><div>Promotions</div></li>
<li><div>Celebration Tips</div></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<div>FAQ</div>
</li>
<li>
<div>Feedback</div>
</li>
<li>
<div>Contact Us</div>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.
Here is an working sample example
Your code need some css changes too so i referred some basic example from
here
Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current">menu item
<ul style="display: none;">
<li>menu item</li>
<li class="current">menu item
<ul style="display: none;">
<li class="current">menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
<li>menu item
<ul style="display: none;">
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>
you need to make sure the document ready is placed after your html body.
if u place in top of body, it wont work because the dom element is not created yet.

Check if anchor has specific url with jQuery no duplicate [duplicate]

This question already has answers here:
How do I select all anchors with a specific href?
(7 answers)
Closed 4 years ago.
Heyo,
I'm currently trying to create a script that checks if one of the anchor-elements has a specific url. I've tryed this but it didn't work out for me at all. What am I missing?
var url = '/right_url';
if ($('a').attr('href') == url ) {
$(this).addClass('active');
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
To refer the specific element with this you have to loop through all the element so that you can check the attribute:
var url = '/right_url';
$('a').each(function(){
if ($(this).attr('href') == url ) {
$(this).addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Though I think you do not need to use loop and use this to achieve what you want. You can simply use href attribute in the selector to add the class:
var url = '/right_url';
$(`a[href='${url}'`).addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="/right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>
Try following
var url = 'right_url';
$('a[href='+url+']').addClass('active');
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Test 1</li>
<li><a class="test" href="right_url">Test 2</a></li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</nav>

Using a scroll in a bootstrap dropdown

I'm trying to add a scroll to a bootstrap dropdown menu. It's a vertical scroll and the code looks like below. First I have a dropdown that works but when I add the scroll like the second dropdown everything falls apart. How do I properly add a scroll to a dropdown the correct way. I want to use the plugin in my example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
});
</script>
</body>
</html>
Download the source and specify the path to your plugin.
You should invoke jQuery as shown.
This worked for me.
Hope this helps

jquery onclick toggle nearest UL

Trying to toggleClass the nearest #dropdown element using jQuery and I can't seem to find the ul. jQuery is loading fine and each element acknowledges the click.
HTML code is:
<li onclick="showDropDown()" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
jQuery code is:
function showDropDown() {
jQuery(this).parents("li").find("ul").toggleClass('show');
}
dropdown ul is the child element of filter-button li. So you dont need to find the parent here
$(".filter-button").click(function() {
$(this).find("ul").toggleClass('show');
});
OR,
If you really need to use the inline method calling then you need to pass the current object as well,
<li onclick="showDropDown(this)" class="filter-button">
code,
function showDropDown(obj) {
jQuery(obj).find("ul").toggleClass('show');
}
If there are many UL elements as child and nextSibling, you have to write as below.
demo : https://jsfiddle.net/nigayo/Lo3yf31y/1/
[JavaScript]
$(".filter-button").click(function() {
$(this).find("ul:first").toggleClass('show');
$(this).next("ul:first").toggleClass('show');
});
[HTML]
<li class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>Test 2</li>
</ul>
</li>
<ul id="dropdown_next" class="dropdown-content">
<li>Test 2</li>
</ul>
<ul id="dropdown_next2" class="dropdown-content">
<li>Test 2</li>
</ul>
You were missing this object in the method call.
Refer the demo here.
Please find the code below:
HTML:
<ul>
<li onclick="showDropDown(this)" class="filter-button">
Filter by <strong>Aread</strong> +
<ul id="dropdown" class="dropdown-content">
<li>Test 1</li>
<li>Test 3</li>
<li>Test 2</li>
</ul>
</li>
</ul>
JS:
function showDropDown(obj) {
$(obj).find("ul").toggle();
}

jQuery tab and shift+tab to show navigation

I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.
Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown( function(e) {
if (e.keyCode == 9 && e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab last");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu"></button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu" style="display: block;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu" style="display: none;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>
Something like this?
[Has sub-sub-menus and hides siblings when showing current. To not hide siblings, simply remove code after .end() in the li.keydown event]
/* Here i simply assign each event to a variable for easy implimintation. */
var myEvents = {
click: function(e) {
jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
},
keydown: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
}
},
keyup: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
else myEvents.click.apply(this, arguments);
}
}
}
jQuery(document)
.on('click', 'li', myEvents.click)
.on('keydown', 'li', myEvents.keydown)
.on('keyup', 'li', myEvents.keyup)
// this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });
/* Below is simply for making menus with sub menues more noticable */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });
li ul { display: none; }
.highlight > a { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu">Button</button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>

Categories