Greetings as stated in the title i am unable to chain multiple jQuery animation.
I need to use switchClass function to progressively toggle bootstrap classes with a specific timing to build up my animation. I would premit that i found strange this error, because i rememer that the function worked as intended few week ago. Here the code i had used :
$(button).switchClass("btn-primary", "btn-warning", 800)
$(button).switchClass("btn-warning", "btn-success", 800)
$(button).switchClass("btn-success", "btn-primary", 800);
Here a jFiddle with a minimal example of my scenario, in which i the animation does not work anymore :
https://jsfiddle.net/s6uxaLzt
So my question is, how can i execute the transition (switchClass) in the order described above?
Given your description of the goal, it appears you're attempting to have the background-color of the button element fadde between the different colours. Switching classes through JS is not an ideal way of doing that.
A better approach would be to use CSS to animate the colour changes using #keyframes. It would look something like this:
$('button').on('click', e => {
$(e.currentTarget).addClass('animate');
}).on('animationend', e => {
$(e.target).removeClass('animate');
});
body button.btn.btn-primary:focus {
outline: 0;
box-shadow: none;
}
button.animate {
animation: background-fade 2.4s;
}
#keyframes background-fade {
0% {
background-color: #007bff;
border-color: #007bff;
}
33% {
background-color: #ffc107;
border-color: #ffc107;
}
66% {
background-color: #28a745;
border-color: #28a745;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<p>Click the button to see the colour fade animation:</p>
<div class="row mt-2 ml-2">
<button class="btn btn-primary text-uppercase edit" type="button">
<span class="edit-label">Animate</span>
<span class="spinner-grow spinner-grow-sm edit-spinner" role="status" aria-hidden="true" style="display:none;"></span>
</button>
</div>
Related
Javascript beginner here. I essentially want to make a simple switch. If an element is black, change it to white. If it is white, change it to black.
function changeClass() {
if (document.getElementById('myButton').style.backgroundColor == "white") {
document.getElementById('myButton').style.backgroundColor = "black";
} else {
document.getElementById('myButton').style.backgroundColor = "white";
}
}
<button class="normal" id="myButton" onclick='changeClass()' >Change Colour</button>
This code is quite messy though. Is there a better way to do this?
Toggle a class:
function changeClass(){
document.getElementById('myButton').classList.toggle("the-class");
}
where your CSS is:
.the-class {
background-color: black;
}
...assuming the element's normal background color is white.
More about classList here. Support is good, but you may need a polyfill in older environments.
Example:
function changeClass() {
document.getElementById('myButton').classList.toggle("the-class");
}
.the-class {
background-color: black;
}
<button class="normal" id="myButton" onclick='changeClass()'>Change Colour</button>
You can use classList.toggle()
document.querySelector('#myButton').addEventListener('click',e => {
e.target.classList.toggle('black')
})
.black{
background:black
}
<button class="normal" id="myButton">Change Colour</button>
Use something like classList.toggle()
function switchColor(){
document.getElementById("resultDiv").classList.toggle("toggle")
}
.element {
height: 100px;
width: 100px;
background-color: red;
}
.element.toggle{
background-color: blue !important;
}
<button onclick="switchColor()">Click me</button>
<div id="resultDiv" class="element toggle"></div>
You can create some specific class in your css (say, .black class which contains a background-color: black; rule) and then attach/detach that class based on your condition.
Your DOM element (HTML tag) have a handy classList property, which can be treated as a list of classes attached to this DOM. I suggest to read a bit more about it here.
Overall, your function can be written like:
const element = document.getElementById("coolDiv");
element.classList.contains('black')) {
element.classList.remove('black')
} else {
element.classList.add('black')
}
or even a little more concise with a ternary operator
const element = document.getElementById("coolDiv");
element.classList.contains('black') ?
element.classList.remove('black') : element.classList.add('black')
or just with a toggle function of the same classList property
const element = document.getElementById("coolDiv");
element.classList.toggle('black')
Hope it helps! Cheers!
and if white it's not the defualt color you can refactor using ? operator:
let btn = document.getElementById('myButton');
btn.style.backgroundColor = btn.style.backgroundColor === 'white' ? 'black' : 'white';
For this action not needed external javascript you can write simple inline javascript here the code:
.black-button {
background: black;
color: #fff;
outline: 0;
padding: 20px;
}
button {
transition: 0.3s;
cursor: pointer;
}
<button class="normal" onclick="this.classList.toggle('black-button')">Change Colour</button>
I have a button in React and when I hover over it a funky saw animation happens. However, the effect I truly want is for the H1 tag on the page to have the saw animation in the background occur when I hover over the button. Yet, whenever I add a className and try to target that in the button:hover css, I get no effect. I've tried .btn:hover h1 and .btn:hover."classname" and a number of other combinations. yet none work.
How can I target a class, div, or h1 when hovering over a button that is not directly connected to the class, div, or h1 that will have the effect?
The current CSS I'm using for this, which works for the button itself, is:
.btn {
color: black;
}
.btn:hover {
animation: sawtooth 0.35s infinite linear;
background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em
, linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em;
color: adjust-hue($color,180);
}
#keyframes sawtooth {
100% {
background-position: 1em 0;
}
}
The template I have is:
return (
<div className="App">
<h1>Question Genie</h1>
<button className="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
{questions}
</div>
);
}
}
You can use a next sibling selector (~) and flexbox column-reverse to accomplish this. The main issue here is that there is no previous sibling selector in CSS
So, you can reorder the HTML so that <h1> is after the <button>, like this:
<div class="App">
<button class="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
<h1>Question Genie</h1>
</div>
and then you can use flex-direction: column-reverse; (or even order: -1 on the button) to make the <h1> appear above the <button>
CSS:
.App {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.btn:hover ~ h1 {
animation: sawtooth 0.35s infinite linear;
... rest of the stuff
}
Here's the codepen: https://codepen.io/palash/pen/ZvVNav
Be sure to check flexbox support here https://caniuse.com/#feat=flexbox
Just use javascript...
<button onmouseover="H1_ID.style.animation='sawtooth 0.35s infinite linear';" onmouseout="H1_ID.style.animation='none';"></button>
I have a situation where I need to apply Styles on a POPUP based on if "Opener window" of that POP has a style class defined on it.
<html>
<body class="myClass">
<input type="button" onClick="Open('xyz.html')"/>
</body>
</html>
Now on xyz.html I want to have a CSS selector which can toggle some style based on if parent.html has class="myClass".
Is it possible without Jquery?
If not: what alternatives I have for this including Jquery and Javascript?
Please note: parent.html is opening xyz.html they are both separate windows.
You don't need to use jQuery to check it. You can make use of simple CSS for it. Check the code below. Here, if container has the class my-class. The property of background-color will be applied to the popup. Otherwise, it won't. Check the code and try using the same with and without the my-class in the container.
$('button').on('click', function() {
$('.popup').toggleClass('active')
})
.popup {
padding: 10px;
border: 1px solid #ddd;
opacity: 0;
transition: all 0.8s ease;
}
.popup.active {
opacity: 1;
}
.container.my-class .popup {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container my-class">
<button>Click</button>
<div class="popup"> HAI </div>
</div>
I am trying to code in a Bandzoogle website, which might be causing errors for this, and I have tried many different ways to get this to work. I have tried changing CSS, showing and hiding objects, but this is the only way that it seems to remotely work. The issue is that when loaded, the divs only switch once or twice, when they should be on an infinite loop. I'm all out of ideas, please help. Keep in mind that not all styles are present, as much of the styling is done through the themes of the website. This is all of the code I have done.
.nextshow {
color:#00000;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
text-align: center;
cursor: pointer;
border:solid;
height:150px;
border-color:#747a85;
box-shadow: none;
padding:7px;
}
div.nextshow:hover {
-moz-box-shadow: inset 0 0 20px #b3b3b3;
-webkit-box-shadow: inset 0 0 20px #b3b3b3;
box-shadow: inset 0 0 20px #b3b3b3;
}
.new_album {
color:#00000;
text-align: center;
cursor: pointer;
padding:1px;
display:none;
}
.nextshow_title {
color:#00000;
text-align:center;
padding: none;
}
.nextshowtext2 {
font-size: 200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="nextshow">
<a href="somelink for show" id="nextshow_title" class="nextshow_title">
<div id="nextshow_title" class="nextshow_title">
<h2 class="nextshowtext1">
This is text
</h2>
<h2 class="nextshowtext2">here is more text
</h2>
</div>
</a
<a href="this is another link" id="new_album" class="new_album">
<div id="new_album" class="new_album">
<h2>
All the text here<br>
</h2>
<h1>is just filler<br>
</h1>
<h2>and is just to show what the code is like
</h2>
</div>
</a>
<script>
$('.nextshow').ready(function() {
setInterval( function() {
$('.nextshow_title').css('display', 'none');
$('.new_album').css('display', 'block');
}, 8000);
setInterval( function() {
$('.nextshow_title').css('display', 'block');
$('.new_album').css('display', 'none');
}, 16000);
});
</script>
Try the following code:
var page1=true;
$('.nextshow').ready(function() {
setInterval( function() {
if(page1){
$('.nextshow_title').css('display', 'none');
$('.new_album').css('display', 'block');}
else{
$('.nextshow_title').css('display', 'block');
$('.new_album').css('display', 'none');
}
page1=!page1;
}, 8000);
});
I feel its better to have one interval (for simplicity). All it does is it takes some variable (page1) and toggles it, toggling the visibility of the divs.
Edit: Much Simpler Way
$('.nextshow').ready(function() {
setInterval(function() {
$('.nextshow_title').toggle();
$('.new_album').toggle();
}, 8000);
});
If I'm understanding your problem correctly, you should only need one interval. If you do anything else with those elements, you should also set them as a far for performance reasons.
$('.nextshow').ready(function() {
setInterval(function() {
$('.nextshow__title').toggle();
$('.new_album').toggle();
}, 8000);
});
I'm using Twitter Bootstrap 3 and have a DIV containing a picture or video. the div is col-sm-3, but using a jQuery I switch that class with a col-sm-12 on hover. Is there any way to make a smoother transition and add some effects when the resize happens? Thanks.
Try CSS transitions for good performance:
.col-sm-3, .col-sm-12{
transition: all 200ms; //replace 200ms with time of your choice
}
http://jsfiddle.net/cm3oc7vh/
You could always use jQuery-UI and the switchClass method. This will animate the difference in styles.
$(function($){
$('#switch').on('click',function(e){
var $p = $('#target')
if($p.is('.foo')){
$p.switchClass('foo','bar',1000);
}else{
$p.switchClass('bar','foo',1000);
}
e.preventDefault();
});
});
.foo { color: red; font-size: 150%; }
.bar { color: blue; font-size: 100%; }
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<p id="target" class="foo">Hello, world!</p>
<button id="switch">Switch</button>