I have this script:
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if ($navToggle.hasClass('active')) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else {
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
});
});
this works great but the hover is incomplete because whenever I add the removeClass line to it , it stops working ? Like so:
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
$('.nav-toggle').removeClass('hover');
});
please can someonne help I am only trying to reset a hover class.
You can call .hover with two arguments, first argument is for a mouse enter callback, the second is for mouse leave
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
Demo
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.nav-toggle.hover {
background:#FF0;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>
Note that if the element you want to trigger a css transition on has some relation to the hovered element you can just use css. So if for instance .nav-toggle was a sibling or child of .navbtn you can use the :hover psuedo class
.navbtn:hover .nav-toggle {
background:#FF0;
}
CSS Demo
Assumes .nav-toggle is a sibling of .navbtn
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.navbtn:hover ~ .nav-toggle {
background:#FF0;
color:black;
}
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>
Related
I'm trying to add active class to an element when someone clicks on it and then auto remove it immediately.
I've already tried with below methods but no luck yet -
Method - 1
setTimeout(function() {
$('.classname').on('click', function() {
$('.classname').addClass('active');
}, 1000);
});
Method - 2
$('.classname').on('click', function() {
$( ".classname" ).switchClass( "active", "no-active", 1000 );
});
You're correct in that you need to use setTimeout(), however the logic is a little off.
Firstly you need to use setTimeout() within the click handler. You will then need to call removeClass() on a reference to the clicked element when the timer completes. Try this:
$('.classname').on('click', function() {
var $el = $(this).addClass('active');
setTimeout(function() {
$el.removeClass('active');
}, 1000);
});
div {
transition: color 0.3s, background-color 0.5s;
}
.active {
color: #FFF;
background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>
<div class="classname">foo</div>
However, from the image you posted it looks like all you may need is to add an :active state. This is applied to the element while the mouse button is held down on it:
div:active {
background-color: #C00;
color: #FFF;
}
<div>Click me</div>
I think that is is better to be done with just CSS:
using :active so it will be something like this:
button {
background-color:red;
}
button:active {
background-color:green;
}
<button type="button">
Click Here
</button>
or with a little delay:
button {
border: 1px solid #bada55;
background-color:red;
transition: .50s all;
transition-delay: 1s;
}
button:active {
background-color:green;
transition-delay: 0s;
}
<button type="button">
Click Here
</button>
$(function () {
setInterval(function () {
$('.classname').addClass('active');
}, 1000);
setInterval(function () {
$('.classname').removeClass('active');
}, 2000);
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div class="classname">Hello</div>
try this one
try this one
before setTimeout function call you add the class and after some seconds it will remove using settimeout
$('.classname').click(function() {
$('.classname').addClass('active');
setTimeout(function() {
$('.classname').removeClass('active');
}, 500);
});
.active {
width: 30px;
height: 20px;
background: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="classname">
test
</div>
and for switchclass
You are missing jQuery UI most likely, as switchClass is part of jQuery UI, and not the jQuery library.
I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});
What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>
I need to automatic, smooth scroll from section #banner, to section #about-me if in section #banner will event scroll.
I try this:
$('#banner').bind('scroll', function(event) {
$(window).scrollTo($('#about-me'), 500);
});
but it not working. (I used scrollTo plugin).
#banner have height 100vh.
The delegation that you are looking for is mousewheel. You need to use e.preventDefault(); to block the default behavior (scroll) of the browser.
Working demo:
$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
if (e.originalEvent.wheelDelta < 0) {
e.preventDefault();
$(window).scrollTo('#about-me', 500);
}
});
body {
margin:0;
}
div {
width:100%;
height:100vh;
}
#banner {
background:red;
}
#about-me {
background:green;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>
http://jsbin.com/dubaza/edit?html,css,js
I have a menu div that is opacity 0, visibility hidden initially. I essentaially want this div to be made available on a click of another div ( its a menu that sticks to the top of my page, discoverable/hide-able via click).
This works great.... ONE TIME...
I can click the "#menuIcon" and my menu is availble. I can click and it is hidden. Then my menu is forever hidden and will not become available again. Help me fix this??
jQuery code
/* Discovers menu on clicks */
$('#menuIcon').click(function () {
if ($('#menu ul').css('visibility') == 'hidden') {
$('#menu ul').css('visibility', 'visible');
$('#menu ul').animate({
opacity: 1
}, 500);
} else {
$('#menu ul').animate({
opacity: 0
}, 500,
function () {
$('#menu ul').css('visibility', 'hidden');
});
}
});
In your animate script, you forget to close the parentheses in the proper location this should fix it:
$('#menuIcon').click(function () {
if ($('#menu ul').css('visibility') == 'hidden') {
$('#menu ul').css('visibility', 'visible');
$('#menu ul').animate({
opacity: 1
}, 500);
} else {
$('#menu ul').animate({
opacity: 0
}, 500,
function () {
$('#menu ul').css('visibility', 'hidden');
});
}
});
Also, note that JSFiddle is your friend. Use it to help tidy up your script and check for errors in your script
Typo:
$('#menu ul').animate({opacity : 0 }, 500, function() {
$('#menu ul').css('visibility','hidden');
});
jsfiddle: http://jsfiddle.net/9geoh4vz/1/
If you want you can try this totally different approach and it's simple too.
Used : fadeToggle() plugin JQuery
JSFiddle : DEMO
CSS
html, body {
margin:0%;
width:100%;
height:100%;
}
.header {
display:block;
width:100%;
height:50px;
margin:0%;
background:#2b2937;
padding:5px 0px;
}
.menu {
display:block;
float:right;
width:80px;
height:auto;
background:lightgreen;
text-align:center;
color:white;
padding:5px 0px;
margin-top:10px;
cursor:pointer;
}
.menu-list
{
display:none;
padding:0px;
background:lightgreen;
float:right;
position:fixed;
top:60px; /* Header height=50px + top/bottom-padding=5px so, 50+5+5 = 60px*/
right:0px;
}
li
{
padding:5px 0px;
}
HTML
<div class="header"> <span class="menu">
MENU
</span>
</div>
<span class="menu-list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</span>
JS
$(".menu").click(function()
{
$(".menu-list").fadeToggle();
});
Try this : You can use a variable to know if menu has been shown for once and use it in your if condition.
Note : - you can use is(':visible') instead of .css('visibility') and user show() / hide() for making menu visible and hidden as shown in code below
var isVisibleOnce = false;
/* Discovers menu on clicks */
$('#menuIcon').click( function() {
//check if isVisibleOnce is false and menu not visible
//then show menu
if(!isVisibleOnce && !$('#menu ul').is(':visible')) {
//set isVisibleOnce to true
isVisibleOnce = true;
$('#menu ul').animate({opacity : 1 }, 500,function(){
$('#menu ul').show();
});
}
else {
$('#menu ul').animate({opacity : 0 }, 500), function() {
$('#menu ul').hide();
});
}
});
I want to now if there's a way to transform this css properties in a jquery .hover, or control this by javascript to change the colour dynamically.
CSS:
ul li:hover a {
color: #FFF;
}
Can anyone Help ?
EDIT:
My problem is:
I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both.
JQuery:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
To animate background color on hover in menu and submenu.
For example if the text are black I want to make the text white on hover. For this I use:(Submenu example, for menu change the selector of course)
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
}, function () {
$(this).css({color:'#00FF00'});
});
All This works fine, but when I hover the submenu the menu returns to the original state(because the mouseleave is activated on hover out). All I want is that when I hover submenu the hover state in menu stays active as well.
I've tried many things but all give me problems, only thing that works is css, but I need to control the text colours dynamically too.
HTML Structure:
<ul class="menu">
<li>text</li>
<li>text
<ul class="submenu">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>text</li>
</ul>
Please let me know if this is along the right track of what you're asking.
I haven't got it working fully, but give this a look and see if it helps:
my JSFiddle
Here's the code so far:
$(document).ready(function() {
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var color_on = '#fff'
, color_off = '#000';
var oPrev;
$('ul.menu > li > a').hover(
function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
sm = $(this).next('.submenu');
if(sm){sm.stop(true, true).fadeIn('slow');}
},
function() {
if (tID) {clearTimeout(tID);}
tID = setTimeout(
function() {
sm.stop(true, true).fadeOut('slow');
}, delay);
}
);
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
sm.closest('ul').stop(true, true).fadeOut('slow');
}, delay);
}
);
});
And CSS:
a
{
color : #000;
text-decoration : none;
}
a:hover
{
color : #fff;
}
ul li
{
background : orange;
border : 1px solid black;
display : inline-block;
padding : 0 1em;
vertical-align : top;
}
.menu
{
background : #ccc;
border : 1px solid black;
display : inline-block;
padding : .25em 1em;
vertical-align : top;
}
.submenu
{
border : 1px solid black;
border-width : 1px 0 0 0;
display : none;
}
.submenu li
{
background : red;
border-width : 0;
}
.submenu li a:hover
{
color : #fff;
}
Note: I'm not saying this is the best answer, nor is it a complete solution, but maybe something in here will assist someone in finding the correct solution.
$("ul li a").hover(function() {
$(this)
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).css("color", $(this).data("color"));
});
$("ul li").hover(function() {
$(this).find("a")
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).find("a").css("color", $(this).data("color"));
});
Update:
Assuming that the first selector (ul li a:hover) is superfluous, we can simplify the code considerably:
$("li").hover(function() {
$(this).find("a").css("color", "#FFF");
}, function() {
$(this).find("a").removeAttr("style");
});
This updated code should work also (under the condition that you don't have additional CSS code inside the style attribute of the ANCHOR elements).
Update:
An alternative solution would be this:
$("li").hover(function() {
$(this).toggleClass("hover", $(this).is(":hover"));
});
with this CSS code:
ul li.hover a {
color: #FFF;
}
I highly recommend this alternative solution!
$('li').hover(
function(){
$(this).css({color:'white'}); //mouseover
},
function(){
$(this).css({color:'black'}); // mouseout
}
);
Try this (now tested: http://jsfiddle.net/nathan/J7HLV/):
$('ul li a, ul li').hover(function () {
$(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
$(this).add($(this).children('a')).filter('a').css('color','');
});
Sure, simply use the hover binding.
$("ul li a").bind("hover", function () {
$(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
$(this).children("a").css("color", "#FFF");
});
Note that this code won't reset the CSS properties when you mouse out. To do that you would need to store the original color values.
It is probably worth it to set that a element to display: block so it expands to the entire parent li element. Then you only need to hover on one of them.
Bind a hover function for the li tag. Whenever mouseover/mouseout is on the <a> tag the event will bubble up to the <li>
$(function(){
$("ul li").hover(function(){
$(this).css("color", "#fff");
},function(){
$(this).css("color", "#000000");
});
});
See a working demo
If you can achieve the effect using CSS then why go for javascript solution.