Jquery Header add class on hover [duplicate] - javascript

This question already has answers here:
Jquery addClass and Remove Class on hover
(4 answers)
Closed 5 years ago.
I´m trying to add a hover function which adds a class to my header. I already got this code which does the same but on scroll.
$(document).ready(function(){
jQuery(window).trigger('resize').trigger('scroll');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1 ) {
header.removeClass('scroll').addClass("cover");
$('#phantom').show();
$('#phantom').css('height', Heightcalculate+'px');
} else {
header.removeClass("cover").addClass('scroll');
$('#phantom').hide();
}
});
Is there a way to edit this existing code so it does the same but on hover? i tried everything i could think of and it wouldn´t work.
Thanks in advance.

Without seeing all of your code, it's hard to tell you exactly what to do, but this is the general idea using jQuery's $.hover(). Apply the class on hover, and optionally remove the class when you hover off.
$('header').hover(function() {
$(this).addClass('class');
}, function() {
$(this).removeClass('class');
});
.class {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>header</header>

Related

Why can't I create a div that has more than one style element? [duplicate]

This question already has answers here:
Issue while setting html of div using the jquery html() method
(5 answers)
Closed 6 years ago.
I am trying to create div like so using jQuery:
let gridBlock = $("<div style=width:10px; height:20px; background-color:red;></div>");
However when I look at the render page the console shows that the div only has a style of width:
What am I doing wrong?
Though you have already got the answer in comment but there is a better way to implement using class. The reason css-specificity. Adding style using style attribute is hard to overwrite & need to use !important for that.
So to avoid that you can use the class attribute and define the style in css file
some.css
.someClass {
width: 10px;
height: 20px;
background-color: red;
}
in js file
let gridBlock = $("<div class='someClass'>Hello</div>");
DEMO
Use quotes mate
let gridBlock = $("<div style='width:10px; height:20px; background-color:red;'></div>");

Using Javascript I want a button to show or hide a div by changing the css [duplicate]

This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 6 years ago.
Using JavaScript, I want a button to show or hide a div by changing the CSS.
HTML:
<div id="bottomContainer">
<div id="count" class="count">...</div>
<div id="visualizations>...</div>
</div>
CSS:
.bottomContainer {
display: block;
}
I want to use javascript to do the following
[button]
When button is clicked Javascript changes the CSS for bottomContainer to the following
.bottomContainer {
display: none;
}
Is this possible?
Yes, a number of ways. With vanilla JS, you would do something like:
document.getElementById('myButtonId').addEventListener('click', function () {
document.getElementById('bottomContainer').style.display = "none";
}
This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.
This will work if you only want the button to hide the container and not toggle its visibility.
<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>

How to add a fade effect when changing classes? [duplicate]

This question already has answers here:
animating addClass/removeClass with jQuery
(6 answers)
Closed 6 years ago.
I don't know how to add an animation effect when the classes are changed.
Here is my code:
$("#a-button").click(function() {
$("#a-div").toggleClass("hidden show");
});
This works but it doesn't have any effect when changing the classes.I want to make it smoother, maybe something like fading in and out. How can i do that?
You could use fadeOut()/fadeIn() with hasClass() condition to check the if the div has a specific class:
$('.show_hide').click(function()
{
if($('#target').hasClass('show'))
$('#target').fadeOut('normal');
else
$('#target').fadeIn('normal');
$('#target').toggleClass("hidden show");
});
#target {
background: green;
margin-bottom:15px;
height:150px;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show_hide">Show / Hide</button>
<div id="target" class='show'></div>
Try this and let me know. It is fadeToggle by jQuery.
$("#a-button").click(
function() {
$("#a-div").fadeToggle();
});

How to change style of a class inside Javascript? [duplicate]

This question already has answers here:
jquery to change style attribute of a div class
(9 answers)
Closed 7 years ago.
I want to change background color of my div using jQuery selector and I can't get it to work.
My Codepen.
HTML
<div class='demo'></div>
CSS
.demo {
height: 100px;
width: 100px;
}
JS
$(document).ready(function() {
$('demo').style.backgroundColor = "black";
});
$('demo') will return jquery object not a dom object also your selector is missing a ., use
$('.demo').css('background-color ','black');
Reference: jquery css() doc.

When using ToggleClass how do I overwrite CSS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Code:
$(document).ready(function () {
$('.button').click(function () {
$('.button').toggleClass('active');
});
});
CSS:
.button {
background-color: red;
}
.active {
background-color: green;
}
The JQuery works but the CSS of .button overwrites the css of .active. What can I do so that .active is taking precedence when it's active? I don't want to apply !important. Any other way?
You could take a look at the .removeClass class, you can therefor remove an active class when your click event is triggerer. You can then use the .addClass function to add a selected css class.
You could check the currently selected class and change depending on the situation. Maybe not the best approach but it should work.
You should also take a look at .on, .on can prevent troubles when it comes to constructing and working with the DOM, recommended notes.
$('.button').on("click", function () {
//...
});

Categories