I was builiding lately life counter and i can't figure out what the issue around here, I mean i got 2 divs, when you on div with class "alive" you get score up and when you in "dead" div you get score down.
Now I've made this code that work on seconds, but it not working stright, I mean 1, 2, 3. But it working like this: http://jsfiddle.net/4Tby5/
Or as visual code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Alive - Dead</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var l = 1;
var good = " Excelent!";
var bad = " OH NO!";
$(document).ready(function () {
$('#alive').hover(function () {
if (l > 100) {
window.clearTimeout("tim");
}
else {
document.getElementById("percent").innerHTML = "Life: " + l + good;
l++;
var tim = window.setTimeout("count()", 1000);
}
count();
});
});
$(document).ready(function () {
$('#dead').hover(function () {
if (l < 0) {
window.clearTimeout("tim");
}
else {
document.getElementById("percent").innerHTML = "Life: " + l + bad;
l--;
var tim = window.setTimeout("count()", 1000);
}
count();
});
});
</script>
<style>
body {
background: red;
}
.dead {
cursor: url(thumb-down.cur) 6 6, auto;
padding-bottom: 285px;
}
.alive {
background: #32ff0a;
height: 300px;
margin: -8px;
cursor: url(thumb-up.cur) 6 6, auto;
}
</style>
</head>
<body>
<div class="alive" id="alive">
Stay here to survive!
</div>
<div class="dead" id="dead">
<br />
Stay away from dead area!
</div>
<div id="percent"></div>
</body>
</html>
So my question is how can i fix this to get it 1,2,3 (replace 1 with 2 and 3, 4...)?
You do not have a count function, make one
And you clear a timeout using the variable itself not its name
window.clearTimeout(tim);
also with your current code you will need to use a global variable
window.tim = window.setTimeout("count()", 1000);
window.clearTimeout(window.tim);
otherwise the clearTimeout wont see it.
Here is solution to your problem.
Problem in your code is... Hover function is calulated only when Mouse enters... Not as long as mouse remains inside.
http://jsfiddle.net/Vdq39/2/
$(document).ready(function () {
var good = " Excelent!";
var bad = " OH NO!";
var tim;
var counter = 0;
function count() {
counter++;
document.getElementById("percent").innerHTML = "Life: " + counter + good;
if (counter > 100) {
window.clearInterval(tim);
}
}
function countDown() {
counter--;
document.getElementById("percent").innerHTML = "Life: " + counter + bad;
if (counter < 0) {
window.clearInterval(tim);
}
}
$('#alive').hover(function () {
if (counter > 100) {
window.clearInterval(tim);
} else {
tim = window.setInterval(count, 1000);
}
}, function () {
window.clearInterval(tim);
});
$('#dead').hover(function () {
if (counter < 0) {
window.clearInterval(tim);
} else {
tim = window.setInterval(countDown, 1000);
}
},
function () {
window.clearInterval(tim);
});
});
Related
I am trying to set a background image rotation for a div with a image already in it, doesn't seem to change anything, thought I would check if someone could see the problem since no errors come up.
<script>
$( document ).ready(function() {
setInterval(function() {
var tips = [
"header.jpg",
"header2.jpg",
"header3.jpg",
"header4.jpg",
"header5.jpg",
];
var i = 0;
if (i == tips.length) --i;
$('.containercoloring').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + tips[i] + ')');
}).delay(1000).fadeTo('slow', 1);
i++;
}, 5 * 1000);
});
</script>
<body>
<div class="containercoloring"> </div>
</body>
Below is the working(updated) code. I hope you are importing jquery lib separately.
<script>
$(document).ready(function() {
var i = 0;
setInterval(function() {
var tips = [
"header.jpg",
"header2.jpg",
"header3.jpg",
"header4.jpg",
"header5.jpg"
];
var imageIndex = ++i % tips.length;
$('.containercoloring').fadeTo('slow', 0.3, function() {
$(this).css('background-image', 'url(' + tips[imageIndex] + ')');
}).delay(1000).fadeTo('slow', 1);
}, 5 * 1000);
});
</script>
<body>
<div class="containercoloring" style="height: 100px;">Image Container</div>
</body>
You can test here in this jsfiddle - https://jsfiddle.net/nbq9f6bg/
Hope it helps!
So there were a couple of notes I had about your example. Please see the comments below. I used background color and removed the transitions to show it easier.
// declare variables
var tips = [
"#ff9000",
"#ff0000",
"#0099ff"
];
// counter
var i = 0;
// direction
var direction = 'forwards';
// time in between intervals
var timer = 2000;
function changeBackground() {
// Check the length minus 1 since your counter starts at 0
if (i == (tips.length - 1)) {
direction = 'backwards';
} else if(i == 0) {
// only set the direction back to forwards when the counter is 0 again
direction = 'forwards';
}
$('.containercoloring').css('background-color', tips[i]);
// add or subtract based on the direction
if(direction == 'forwards') {
i++;
} else {
i--;
}
}
$( document ).ready(function() {
// save interval to a variable so you can stop it later
var theInterval = setInterval(changeBackground, timer);
// run the function since the interval will take 2000ms to execute
changeBackground();
});
.containercoloring {
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containercoloring"> </div>
I hope you understand my problem.
At the moment I have a JS-function that choses randomly a div of a specific Html-Class.
Now i would like to rewrite the function that it picks one div after the other, just like they are ordered in the HTML-content.
How can I do this?
For information: the random selection is made with jquery and looks like this:
function pickrandom() {
var elems = $(".classname");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
console.log(keep);
$(elems[keep]).click();
}
}
Thanks
$(document).on('click', '.classname', function(){
var self = $(this);
var total_items = $('.classname').length; // 10
var index = self.index(); //2 for 3rd element
if (index < total_items) {
setTimeout(function () {
$('.classname').eq(index+1).trigger('click');
}, 3000);
}
});
this will call the next clicks in 3 sec interval
i don't know why you are using a randomizer function.you can allow the user to make that click
Hopefully this helps you - can't see your markup, but it should get you on the right track. I've also changed your .click() to a .trigger('click') which should be quite a bit more dependable.
JavaScript
function pickrandom() {
var elems = $(".classname");
if (elems.length) {
var curTarget = Math.floor(Math.random() * elems.length);
console.log(curTarget);
$(elems[curTarget]).trigger('click');
// Find index of our next target - if we've reached
// the end, go back to beginning
var nextTarget = curTarget + 1;
if( nextTarget > elems.length ) {
nextTarget = 0;
}
// Wait 3 seconds and click the next div
setTimeout( function() { $(elems[nextTarget]).trigger('click'); }, 3000 );
}
}
$("div").click(function() {
var el = $(this);
setTimeout(function() {
console.log(el.text());
el.toggleClass("click");
}, 2000);
});
var random = Math.floor((Math.random() * $("div").length) + 1);
var index = random - 1;
console.log("Random number: ", random);
var clicker = setInterval(function() {
if (index === $("div").length) {
clearInterval(clicker);
console.log("cleared interval");
} else {
$("div").eq(index).click();
index++;
}
}, 2000)
div {
height: 50px;
width: 100%;
border: 2px solid black;
background-color: lightgreen;
margin-bottom: 10px;
text-align: center;
font-size: 30px;
}
.click {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Div 1
</div>
<div>
Div 2
</div>
<div>
Div 3
</div>
<div>
Div 4
</div>
<div>
Div 5
</div>
<div>
Div 6
</div>
I have this code:
jQuery/JavaScript
$(document).ready(function () {
function min() {
var number = parseInt($('span').html());
return number - 30;
}
function add() {
var number = parseInt($('span').html());
return number + 31;
}
$("#container").click(function () {
$('span').text(min());
});
$("#box").click(function () {
$('span').text(add());
});
var time = parseInt($('b').html());
if (time <= 0) {
alert("AAAAA");
};
});
CSS
#container{
background: #00ff00;
width: 500px;
height:500px;
}
#box{
background: black;
width: 100px;
height:100px;
color: white;
cursor: pointer;
}
HTML
<div id="container">
<span> 60 </span>
<div id="box"> </div>
</div>
when you click on you text in change for +31 and -30 so you will got 61 because default is 60 and but if you click on text in span will change for -30 only and it will display 30 i wish to alert when text in span reach 0 i made this but didn't work.
does any one know how to fix it?
I think that I'm not understanding completely to you. Maybe this the next link can help you.
You have some errors, check the solution.
$(document).ready(function(){
var $span = $('span');
function min() {
var number = parseInt($span.html());
return number - 30;
}
function add() {
var number = parseInt($span.html());
return number + 31;
}
$("#container").click(function(){
$('span').text(min());
checkTime();
});
$("#box").click(function(){
$('span').text(add());
checkTime();
});
function checkTime() {
debugger
var time = parseInt($span.html());
if (time <= 0) {
alert("AAAAA");
};
}
});
Please next time publish your problem in JSfiddle or similar.
I think you're selector to get the span is incorrect. You also need to execute the check after you decrement the value.
$(document).ready(function(){
function min() {
var number = parseInt($('span').html());
return number - 30;
}
function add() {
var number = parseInt($('span').html());
return number + 31;
}
$("#container").click(function(){
$('span').text(min());
CheckValue();
});
$("#box").click(function(){
$('span').text(add());
});
function CheckValue() {
var val = parseInt($('#container > span').html());
if (val <= 0) {
alert("AAAAA");
}
}
);
My div goes right but when i click again should be back to its original location.....
i tried many stuff but not working.Here is my code...
How do i reverse it when clicked. on every click it should be the reverse of the previous action i.e.
if on click the div moves right then on next click at the same location it should move left similar to a pendulum
<html>
<head><title></title>
<script type="text/javascript" language="javascript">
//<![CDATA[
window.onload=function()
{
document.getElementById("d2").onclick = slideIt;
};
function slideIt()
{
var slidingDiv = document.getElementById("d1");
var stopPosition = 50;
if (parseInt(slidingDiv.style.left) < stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
setTimeout(slideIt, 1);
}
/*
if(parseInt(slidingDiv.style.left) > stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
setTimeout(slideIt, 1);
}*/
}
//]]>
</script>
</head>
<body>
<div id="d1" style="position:absolute; left:-131px;">
<div style=" float:left" >click here to slide the div</div>
<div id="d2" style=" float:left" >click here to slide the div</div> </div>
</body>
</html>
Change your JavaScript with this one
<script type="text/javascript" language="javascript">
$(document).ready(function(){ $("#d2").click(function(){
if($("#d1").css("left") <="-131px")
{
$("#d1").animate({left:'250px'});
}
else {
$("#d1").animate({left:'-131px'});
}
});
});
</script>
This will work fine
Good Luck..
Okay, so here's how I have done things...
DEMO: http://jsfiddle.net/xDDX8/2/
HTML
<div id="d1">
<div id="d2">click here to slide the div</div>
</div>
CSS
#d1 {
position: absolute;
border: 1px solid red;
cursor: pointer;
left: 0;
}
.moveLeft {
color: blue;
}
.moveRight {
color: lime;
}
Javascript
window.onload = bindEvents();
function bindEvents() {
document.getElementById('d2').onclick = slideIt;
}
// Global variables
var slidingDiv = document.getElementById('d1'); // Cache the element
var timeout = 0;
var minPosition = 0;
var maxPosition = 50;
function slideIt() {
// Work out current position
var currentPosition = slidingDiv.offsetLeft;
// Check which direction to move
if (hasClass(slidingDiv, 'moveRight'))
{
// Have we hit our movement limit?
if (currentPosition <= minPosition)
{
// remove all classes and set a class to move the other direction
slidingDiv.removeAttribute('class');
slidingDiv.setAttribute('class', 'moveLeft');
// Clear our timeout
clearTimeout(timeout);
}
else
{
// Still space to move so let's move a few pixels (-)
slidingDiv.style.left = (currentPosition - 2) + "px";
timeout = setTimeout(slideIt, 1);
}
}
else // all comments as above really
{
if (currentPosition >= maxPosition)
{
slidingDiv.removeAttribute('class');
slidingDiv.setAttribute('class', 'moveRight');
clearTimeout(timeout);
}
else
{
slidingDiv.style.left = (currentPosition + 2) + "px";
timeout = setTimeout(slideIt, 1);
}
}
}
// Function to test whether an element has a specific class
// https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
I have this JavaScript code:
<script type="text/javascript">
function timeMsg() {
var t=setTimeout("doRedirect()",10000);
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
timeMsg();
</script>
But I want to show how much time is left in a box that floats at the top right, and with my l;ittle knowledge of JavaScript i have no idea where to start :(
Can someone help me?
(function(count) {
setInterval(function() {
if( count === 0) {
window.location.href = "http://www.codemeh.com/";
}
else {
document.getElementById('box_that_floats_top_right').innerHTML = 'Timeleft: ' + (count / 1000);
count -= 1000;
}
}, 1000);
}(10000));
Demo: http://www.jsfiddle.net/4yUqL/77/
A quick solution for you:
<input id="box" type="text" size="8" />
<script>
//Init vars
var milsec=0;
var sec=30;
var box = document.getElementById("box");
function display() {
if (milsec <= 0){
milsec=9;
sec-=1;
}
if (sec <= -1){
milsec=0 ;
sec+=1;
} else {
milsec-=1 ;
box.value = sec + "." + milsec;
//call function display after 100ms
setTimeout(function() {display();},100);
}
}
display();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
timeLeft = 10;
function timeMsg() {
if(--timeLeft == 0) {
doRedirect();
} else {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
}
}
function doRedirect() {
window.location.replace( "http://www.codemeh.com/" );
}
$(document).ready(function() {
$("#time").val(timeLeft);
setTimeout("timeMsg()",1000);
});
</script>
<input id="time" size="5"></input>