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;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have the beginnings of a simple game in JavaScript, CSS and HTML and the game was working until I created a jump function. OnClick, the character element (generated by the css as the green rectangle) should jump. Instead, it is static and doesn't move.
Initially, I had this code:
.animate{
animation: jump 500ms;
}
in the character's CSS, and it jumped continuously without any user interaction.
What have I done wrong? I assume it is something to do with this:
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
For an answer, I would appreciate the error to be pointed out, with new code and a clear explanation as to how the setTimeout function works. Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
CODE
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump() {
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 500);
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 1px solid #319b4e;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The issue, after copying the code and testing it, is that the term
document.getElementById was spelled with a lowercase b, like document.getElementbyId, these two lines should instead be:
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");`
As for setTimeout, it is a built in function , that executes a function (provided in first paramter) after a certain amount of time (specified in second parameter), this function works in the background, so it doesn't block other things from happening.
For more information on setTimeout (I used this website when I first started learning html etc....)
If you want to change it to the up arrow instead, simply add an event listener to check for the keyup event, and check that the keycode matches that for the up arrow (38), and other keys can be checked by console.loging the keyCode for the event, so somewhere in your JavaScript, do
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
So...
The entire snippet is
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Now working
Issue is:your write document.getElementbyId("character") but character b of getElementbyid is small so it through error
so correct is document.getElementById("character")
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
Yes, setTimeout is an inbuilt method. You can learn about more in here MDN Web Docs.
how the setTimeout function works
So, setTimeout method accepts a function/code and a delay (in ms) after which it will execute it. Refer to the above link.
It takes the event into event loop that will make it async call.
I will look into the code after a while and get back to you! :D
Bookmark MDN Web Docs, it is really handy!
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.
Hi,
I want to make a hyperlink that expands from the top down when clicked and closes when clicked again. I also want a fade effect applied to the link text.
I tried something like this :
HTML
<div id="lime">
hi
<p id="red">How are you doing?</p>
</div>
CSS
#lime
{
background-color:#deff00;
text-align:center;
}
#lime:hover{
height:300px;
transition:height 1s;
}
#lime:hover p{
opacity:1;
transition:opacity 1s;
}
#red {
opacity:0;
color:#ff0000;
}
CSS Demo
But the effect takes place on hovering over the link. What I'd like is for the link to expand from the top down when clicked.
I also tried this but I don't know anything about javascript.
HTML
<div>hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
}
#expand {
height:300px;
transition:height 1s;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
Javascript
$('#btn').click(function(e){
$('#expand') function(){
$('#contract').transition('height 1s');
});
};
Javascript Demo
You need to create two style class - one will expand your div to the desired height, and another will collapse it to the initial position. Code sample follows -
HTML
<div id="lime">hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
height: 20px;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
.expand {
height:300px;
transition:height 1s;
}
.collapse {
height: 20px;
transition:height 1s;
}
JavaScript
$(document).ready(function () {
$('#btn').click(function (e) {
if ($("#lime").hasClass("expand")) {
$("#lime").removeClass('expand').addClass('collapse');
}
else {
$("#lime").removeClass('collapse').addClass('expand');
}
});
});
DEMO.
You can easily to this using j Query.
Example shown below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
#lime
{
background-color:#deff00;
text-align:center;
}
.para {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="lime">
hi
<p id="red" class="para">How are you doing?</p>
</div>
<script>
$( "#click" ).click(function() {
$( "#red" ).slideToggle( "slow" );
});
</script></body>
</html>
You can refer this link http://api.jquery.com/slideToggle/
I am totally agree with Sayem Ahmed's answer...
Here some additional answer
Option 1. If you are using jQuery at that time you can use toggle also for achieving this scenario.
Here is
DEMO
Option 2. You can use pure javascript code for making it done.
Here is
DEMO
Hope this will be helpful !!
I have a div that rotates around the x-axis, around its center, so that the top half "falls away" from the screen while the bottom half comes toward the screen. When I try to capture the onclick event, I only get it from the div if I click on it below its centre. If I click on it above its center, the containing div receives the onclick event.
I've tried moving the div to the front with z-index and translateZ(), but still the containing div receives the onclick when I click on the top half of the div.
How can I get the div to receive the onclick event, regardless of where on the div it is clicked?
Here's a sample that demonstrates the problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function onMainClick() {
console.log('onMainClick()');
}
function onContainerClick() {
console.log('onContainerClick()');
}
</script>
<title>Click Test</title>
</head>
<body>
<div onclick="onContainerClick()" style="width: 200px; height: 200px; background-color: burlywood">
<div onclick="onMainClick()" style="width:100%; height: 100%; background-color: grey; -webkit-transform: perspective(1000px) rotateX(45deg)"></div>
</div>
</body>
</html>
onMainClick() is not called when clicking the top half of the grey div.
Built the case in a jsfiddle, I don't exactly know what the perspective rotation does, but the solution is to give the other div a z-index of -1...
CSS
#div1 {
width: 200px;
height: 200px;
background-color: burlywood;
z-index: -1;
}
#div2 {
width: 100%;
height: 100%;
background-color: grey;
-webkit-transform: perspective(1000px) rotateX(45deg);
}
Update: correct jsfiddle link...