Jquery: Attaching "each" to an "on" event - javascript

I have a list of results, and I added an hover event to it using jQuery, so the title will be colored red.
It works just fine.
<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
$(document).on({
mouseenter: function () {
$('.ttl').css("color","red");
},
mouseleave: function () {
$('.ttl').css("color","inherit");
}
}, ".hoverbox");
The thing is whenever I do mouseover on a single element, all of the elements turn red. I want only the specific element to go red.
I tried using jQuery's each() but couldn't wrap my head around how to use it with the given syntax.

Is there a reason you need to do this with JavaScript? This can be achieved really easily with CSS.
HTML:
<ul class="list">
<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
</ul>
CSS:
.list > li:hover .ttl {
color: red !important; // if you have to override an already applied theme (like wordpress)
}

You can use the following to get the expected result.
$('.ttl').on('mouseenter',function() {
$(this).css("color","red");
}).on('mouseleave',function() {
$(this).css("color","inherit");
});

Solution without JS
https://jsfiddle.net/w4j5hsLh/3/
.hoverbox{
position:absolute;
z-index:999;
width:100%;
height:100%;
}
li{width:100px;height:100px;position:relative;}
li:hover > .ttl {
color:red;
}

You can't use $('.ttl') because it refers to all the .ttl elements you need to use $(e.currentTarget).parent().find('.ttl') to select the current .ttl element:
$(document).on({
mouseenter: function (e) {
$(e.currentTarget).parent().find('.ttl').css("color","red");
},
mouseleave: function (e) {
$(e.currentTarget).parent().find('.ttl').css("color","inherit");
}
}, ".hoverbox");
However, as others have said, using CSS is recommended over using JS.

You have to do minute change if you want to attach multiple event handlers simultaneously using a plain object.
$('.ttl').on({
mouseenter: function () {
$(this).css("color","red");
},
mouseleave: function () {
$(this).css("color","inherit");
}
});
Check this jsfiddle for demo

Related

Hide dropdown div with jQuery on mouseout

I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});

toggle active on nav-tabs

$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>

addClass and removeCLass in JS with loading content

I have problem with addClass and removeCLass in JS. I would like to do sth like that:
But I have a content div where I load files in PHP. But when I load sth the script resets and first li is selected. Scheme:
I click on Events, it gets new class and the content is load. Now when I click events, page loads and I see the content but class in first li.
How to change it?
EDIT:
OK guys I change code but it still doesn't work as I want. When I chenge "#" in links to url, the page loads as new and I lost this JS. (It starts again).
CODE:
$(document).ready(function () {
$("#MB1").click(function () {
$(this).addClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB2").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB3").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB4").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
});
});
#menu-div ul{
list-style-type:none;
}
.button a{
text-decoration: none;
color:green;
}
.button a:hover{
color: red;
}
.button.active a{
text-decoration: underline;
}
<div id="menu-div">
<ul>
<li id="MB1" class="button active">Home</li>
<li id="MB2" class="button">Projects</li>
<li id="MB3" class="button">About Us</li>
<li id="MB4" class="button">Contact</li>
</ul>
</div>
What happens when you assign the click action using
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
is that only the existing objects receive the event-handler.
You want to use something like this instead:
$("body").on('click', '#menu li a', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
By making body the target, even if the data loads after the script, the event-handler will be set.
In addition, any subsequent changes to the menu won't require you to reset the event handler.
EDIT
Per the changes to your example code:
When you have <a href="#" and so on, pressing the link does not make you leave the page.
You changed some of the links to <a href="?something" and so on. Clicking this link, the whole page is reloaded with the new querystring.
Are the links supposed to get data asynchronously?
If YES, you should return the jquery to the way it was... and use my answer above instead of the one you used of $(document).ready({[...].
If NO, I would suggest that you use PHP to make sure that the correct menu item is set to active.
Something along the lines of (I don't actually know php... this code may be completely off):
<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?>
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>

Hover class on other elements not on selected - javascript

HTML
<div>
<ul class="navBar">
<li class="selected">HOME</li>
<li>WORKS</li>
<li>ARTICLES</li>
<li>ABOUT</li>
</ul>
</div>
CSS
.selected{
background-color: #CCCCCC;
}
.onHover{
display: block;
background-color: #0088FF;
}
JAVASCRIPT
$(function() {
$("ul.navBar li a").hover(
function(){
$(this).addClass("onHover");
},
function(){
$(this).removeClass("onHover");
});
});
What I want here is the javascript to not add 'onHover' class to the HOME link when hovered over, just the other three links.
You can use not() selector to not allow the item to be picked.
$(function() {
$("ul.navBar li:not(.selected) a").hover(
function(){
$(this).addClass("onHover");
},
function(){
$(this).removeClass("onHover");
});
});
BUT you can do this with a pure CSS only solution if you really wanted. No JavaScript is needed.
Use the jQuery :not() selector to not include the "selected" class. Also better to use event delegation .on() rather directly binding the event to elements ie. .hover().
See http://api.jquery.com/not-selector/ for more information on using :not().
$(function () {
$(document).on('mouseenter', 'ul.navBar li:not(.selected) a', function () {
$(this).addClass('onHover');
});
$(document).on('mouseleave', 'ul.navBar li:not(.selected) a', function () {
$(this).removeClass('onHover');
});
});
See fiddle: http://jsfiddle.net/4rZ3D/

Expanding menu on click

I have a basic menu looking something like this.
<ul id="menu">
<li id="auctions">Auctions</li>
<li class="submenu">Submenu 1</li>
<li class="submenu">Submenu 2</li>
<li class="submenu">Submenu 3</li>
</ul>
I want the three submenus to be hidden until the text "Auctions" is clicked. Then they're supposed to appear, and become hidden again when "Auctions" is clicked a second time and so on. Ive tried something like this.
$(function() {
$('#auctions').click(function() {
$('#menu').animate({'height': '200'});
$('#submenu').animate({opacity : 'toggle'});
}, function () {
$('#menu').stop().animate({'height': '100'});
$('#submenu').animate({opacity : 'toggle'});
});
});
In all honesty I suck at jquery. How do I approach this?
Use jQuery's .slideToggle(), also make sure .submenu is not visible:
JAVASCRIPT:
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
CSS:
.submenu{display:none;}
DEMO: http://jsfiddle.net/dirtyd77/SLGdE/4/
why dont you use this code :
$(function() {
$('.submenu').hide();
$('#auctions').click(function() {
//$('#menu').animate({'height': '200'});
$('.submenu').toggle("slow");
});
});
apart from that you use "#submenu" and in your html its class you should use ".submenu"
Your basic structure is fine, yet i wouldn't use css(). Use slideToggle() in stead:
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
Does this work for you?
$('#auctions').click(function(){
$("#menu, .submenu").toggle();
});

Categories

Resources