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>
Related
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>
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>
Here is the css code :
.big-square {
position:relative;
height:768px;
width:768px;
border:1px solid black;
background-color:#007da9;
text-align:center;
display:table-cell;
-webkit-transition:all 0.3s linear;
}
and here the html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script>
function showmenu() {
$(document).ready(function() {
$("#big-square").removeClass("big-square");
});
}
</script>
</head>
<body>
<div id="big-square" onclick="showmenu();" class="big-square">1</div>
<div id="big-square" onclick="showmenu();" class="big-square">2</div>
The problem is when I click on anyone of square, just the first dissapear and I want to make it dissapear separately. For example, if I click on the 2nd square, just the second squuare dissapear.
id must be unique in the whole DOM. (and the relevant functions return only the first one)
What you want is
$(document).ready(function() {
$(".big-square").on('click', function() {
$(this).removeClass("big-square");
});
});
.big-square {
position: relative;
height: 768px;
width: 768px;
border: 1px solid black;
background-color: #007da9;
text-align: center;
display: table-cell;
-webkit-transition: all 0.3s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-square">1</div>
<div class="big-square">2</div>
It is illegal HTML to have id's not be unique. Use a class instead if you plan to have 2 or more elements of similar 'stuff'. Then, you shouldn't nest the ready statement in a function. Next, you shouldn't use onclick, instead opting to listen to the event click. Additionally, the css .class does not match an id of your html. Finally to target 1 item only, I would use the jQuery object $(this).
So, all that said, I would re-write your code as:
<script>
$(document).ready(function() {
$(".big-square").click(function() {
$(this).removeClass("big-square");
});
});
</script>
</head>
<body>
<div class="big-square" id="square1">1</div>
<div class="big-square" id="square2">2</div>
That's newbie coding. Let's try to fix it:
1 - Different id's for each element (as user Vic pointed out already)
2 - $(document).ready doesn't need to be nested
3 - onclick="showmenu();" is completely unnecesary and including scripts in the html is bad practice in modern web development
I won't post any code because I see you already have answers with code :)
What is wrong with this code? The button doesn't work after hovering it.
The code is just copied from the instructional website and it works there.
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
$(document).ready(function() {
$("div").mouseenter(function() {
$("div").fadeTo("fast", 1)
});
$("div").mouseleave(function() {
$("div").fadeTo("fast", 0.1)
});
});
Possible advise #1: You don't want to fade it away that much.
Change the value of fadeTo() to .5 as this was the initial value in your css.
Possible advise #2: It doesn't do anything when you click on it.
Add an onclick="alert('Clicked!');" to the div container.
Possible advise #3: You just want an hover effect for html element.
Why not use just CSS 3 transition:
div {
transition: opacity 1s;
opacity: .5;
}
div:hover {
opacity: 1;
}
Notice: Of course you'll can use vendor-prefixes to support more browsers, like -webkit-transition.
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}