var totalMoney = 0;
var clickMultiplier = 1;
var incomeSecond = 0;
var totalVirus = 0;
var totalTrojan = 0;
var totalWorm = 0;
var totalServer = 0;
function totalMoneyText() {
totalMoney = totalMoney + 1 * clickMultiplier;
}
setInterval(function() {
totalMoney = incomeSecond + totalMoney;
incomeSecond = (totalWorm) + (totalTrojan * 2) + (totalVirus);
}, 1000);
setInterval(function() {
updateText();
}, 100);
setInterval(function() {
totalTrojan = totalTrojan * 1.001;
totalWorm = totalWorm * 1.01;
}, 5000);
function updateText() {
document.getElementById("totalMoney").innerHTML = totalMoney.toLocaleString("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
document.getElementById("buyablenum1").innerHTML = Math.round(totalVirus * 1000) / 1000;
document.getElementById("buyablenum2").innerHTML = Math.round(totalTrojan * 1000) / 1000;
document.getElementById("buyablenum3").innerHTML = Math.round(totalWorm * 1000) / 1000;
}
function buyable1() {
if (totalMoney > 49) {
totalMoney = totalMoney - 50;
totalVirus = totalVirus + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable2() {
if (totalMoney > 149) {
totalMoney = totalMoney - 150;
totalTrojan = totalTrojan + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable3() {
if (totalMoney > 499) {
totalMoney = totalMoney - 500;
totalWorm = totalWorm + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable4() {
if (totalMoney > 99) {
totalMoney = totalMoney - 100;
totalServer = totalServer + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
#font-face{
font-family:HackingT;
src:url(assets/HackingTrashed-Regular.ttf);
}
#font-face{
font-family:Currency;
src:url(assets/Currency.ttf);
}
#font-face{
font-family:Hacker;
src:url(assets/Hacker.tff);
}
body,
html {
overflow-x:hidden;
overflow-y:hidden;
}
html {
background:url(assets/background.png) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
head {} body {} #meme {
color:transparent;
}
.globalcontainer {
position:relative;
margin:0% 0;
min-height:100vh;
}
.buyablecontainer {
position:relative;
z-index:2;
}
.clickablecontainer {
margin:26.5% auto;
position:relative;
z-index:2;
}
#Money {
font-size:50px;
color:whitesmoke;
text-align:center;
font-family:"HackingT";
text-shadow:1px 1px grey;
margin:0 auto;
}
#totalMoney {
font-size:40px;
color:whitesmoke;
text-align:center;
font-family:"Currency";
letter-spacing:3px;
text-shadow:1px 1px grey;
margin:0 auto;
}
.column {
position:absolute;
}
.buyImg {
width:15%;
border:2px grey solid;
}
.noselect {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#imgComputer {
width:15%;
}
.clickable {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-user-drag:auto | element | none;
-moz-user-select:none | text | all | element -ms-user-select:none | text | all | element
}
.number {
color:snow;
padding:1px;
}
#buyImg:active {} .buyable1 {
position:relative;
}
.tooltip {
position:absolute;
margin:0% 1%;
padding:14% 44%;
border:4px grey solid;
background-color:black;
background-blend-mode:difference;
}
.tooltipheader {
font-family:"Hacker";
color:forestgreen;
position:absolute;
display:inline;
top:-10%;
left:0;
}
.tooltiptext {
color:forestgreen;
position:absolute;
font-family:"Hacker";
display:inline;
text-align:center;
font-size:15px;
left:0%;
top:50%
}
.tooltipincome {
position:absolute;
font-size:20px;
left:5%;
margin:-13% 24%;
font-family:"Hacker";
color:forestgreen;
}
#tooltip1 {
display:none;
}
#tooltip2 {
display:none;
}
#tooltip3 {
display:none;
}
#tooltip4 {
display:none;
}
#virus:hover~#tooltip1 {
display:inline;
}
#trojan:hover~#tooltip2 {
display:inline;
}
#worm:hover~#tooltip3 {
display:inline;
}
#server:hover~tooltip4 {
display:inline;
}
#server {
width:25%;
padding:1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hacker Clicker</title>
<link rel=stylesheet type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class=noselect>
<div class=globalcontainer>
<div class="header">
<a id=meme href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click me</a>
<h1 class=noselect id=Money>Money</h1>
<h1 class=noselect id=t otalMoney>$0</h1>
</div>
<!-- Numbers and Buyables -->
<div class="container buyablecontainer noselect">
<div class="column">
<div class="buyable1">
<h2 class=number id=buyablenum1>0</h2>
<img draggable="false" id=virus onclick="buyable1()" class=buyImg src="assets/virus.png" />
<div id=tooltip1 class=tooltip>
<h1 class=tooltipheader>"Virus"</h1>
<h2 class=tooltipincome>Income: $1 per second Price:50</h2>
<p class=tooltiptext>A virus tries to infect anyone and everyone that it can, it's usually used as a way to collect revunue through email spam, aswell to fuck your life up.</p>
</div>
</div>
<div class="buyable2">
<h2 class=number id=buyablenum2>0</h2>
<img draggable="false" id=trojan onclick="buyable2()" class=buyImg src="assets/trojan.png" />
<div id=tooltip2 class=tooltip>
<h1 class=tooltipheader>"Trojan"</h1>
<h2 class=tooltipincome>Income:$2 per second 0.01% replication Price:150</h2>
<p class=tooltiptext>A trojan creates a backdoor to your computer and gives confidential or personal information to the creator.</p>
</div>
</div>
<div class="buyable3">
<h2 class=number id=buyablenum3>0</h2>
<img draggable="false" id=worm onclick="buyable3()" class=buyImg src="assets/worm.png" />
<div id=tooltip3 class=tooltip>
<h1 class=tooltipheader>"Worm"</h1>
<h2 class=tooltipincome>Income:$1 per second 1% replication Price:500</h2>
<p class=tooltiptext>A worm self replicates through the interwebs and lives inside everyone which it is allowed. They are used to do any ill-biddings that the creator wants.</p>
</div>
</div>
<div class="buyable4">
<h2 class=number id=buyablenum4>0</h2>
<img draggable="false" id=server onclick="buyable4()" class=buyImg src="assets/server.png" />
<div id=tooltip4 class=tooltip>
<h1 class=tooltipheader>"Server"</h1>
<h2 class=tooltipincome>Income:$0 +2 on click Price:100</h2>
<p class=tooltiptext>The more servers you got, the more you can hack. Get it foo?</p>
</div>
</div>
</div>
</div>
<div class=clickablecontainer align="center">
<img draggable="false" onclick="totalMoneyText()" id=imgComputer class=clickable src="assets/hacking.gif" />
</div>
</div>
</body>
</html>
Jsfiddle
What's supposed to show up
I apologize in advance for not being able to see the images, but if you try to hover over the 4 icons to the left they work except the last one, hopefully it isn't a simple mistake as I started HTML CSS and Javascript 2 days ago, but it is entirely possible and I'm sorry if that's the case :p.
Also, I'm having a hard time with CSS positioning things exactly where I want them, for example if I want to have an image in the center no matter what ever is around it how do I do that?
Any tips?
Typo in CSS.
#server:hover~tooltip4 {
should read
#server:hover~#tooltip4 {
Many refactoring possibilities here - happy learning!
Related
I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript
I have an animation build with setInterval.
function changeBatteryIcon(status, i) {
switch (status) {
case 1:
i.className = "fa fa-battery-half red"
return ++status
case 2:
i.className = "fa fa-battery-3 orange"
return ++status
case 3:
i.className = "fa fa-battery lightgreen"
return 1
}
}
function animateHeaderBatteries() {
const i =
document.getElementById("header-batteries").querySelector('i')
let status = 1
setInterval(function() {
status = changeBatteryIcon(status, i)
}, 300)
}
animateHeaderBatteries()
const chargeBtn = document.getElementById('charge')
const drainBtn = document.getElementById('drain')
let ammount = 1
let not = document.getElementById('battery-not')
function charge(battery_charge) {
if (ammount == 1) {
const intervalHandler =
setInterval(function() {
++ammount
const style = `width:${ammount}%;`
battery_charge.style = style
changeStyle(ammount)
if (ammount == 100) {
clearInterval(intervalHandler)
not.style = 'background-color:lightgreen'
}
}, 50)
}
}
function drain(battery_charge) {
if (ammount == 100) {
const intervalHandler =
setInterval( function() {
--ammount
const style = `width:${ammount}%`
battery_charge.style = style
changeStyle(ammount)
if (ammount < 100) {
not.style = 'background-color:white'
}
if (ammount == 1) {
clearInterval(intervalHandler)
}
}, 50)
}
}
const battery_charge = document.getElementById('battery-charge')
function changeStyle (ammount) {
if (ammount > 25)
battery_charge.style['background-color'] = 'orange'
if (ammount > 50)
battery_charge.style['background-color'] = 'yellow'
if (ammount > 75)
battery_charge.style['background-color'] = 'lightgreen'
}
chargeBtn.onclick = function () {
charge(battery_charge)
}
drainBtn.onclick = function () {
drain(battery_charge)
}
body {
font-family:arial;
}
.red {
color:red;
}
.orange {
color:orange;
}
.lightgreen {
color:lightgreen;
}
header {
flex-direction:column;
display:flex;
align-items:center;
justify-content:center;
background-color:#252525;
color:yellow;
}
#header-batteries {
padding-top:20px;
}
header h1 {
margin-top:0;
}
article {
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
#battery-container {
width:50%;
margin-top:20px;
margin-bottom:20px;
display:flex;
align-items:center;
}
#battery {
border:2px solid #252525;
height:75px;
width:90%;
display:flex;
align-items:center;
}
#battery-not {
height:25px;
border:2px solid black;
border-left:0;
width:2%;
}
#battery-charge {
height:100%;
width:1%;
background-color:red;
display:flex;
}
#bolt {
position:absolute;
left:45%;
font-size:50px;
color:grey;
}
#controls {
width:50%;
display:flex;
justify-content:flex-end;
}
#controls button {
height:40px;
flex-basis:40%;
background-color:#f2f200;
border:0;
font-size:16px;
font-weight:bold;
font-family:Helvetica;
margin-left:10px;
}
footer {
display:flex;
align-items:center;
justify-content:center;
margin-top:50px;
}
<html lang="pt-BR">
<meta charset="UTF-8">
</html>
<body>
<div id="container">
<header>
<div id="header-batteries">
<i class="fa fa-battery"></i>
</div>
<h1>Battery</h1>
</header>
<article>
<div id="battery-container">
<div id="battery">
<i class="fa fa-bolt" id="bolt"></i>
<div id="battery-charge">
</div>
</div>
<div id="battery-not">
</div>
</div>
<div id="controls">
<button id="charge">
CHARGE
</button>
<button id="drain">
DRAIN
</button>
</div>
</article>
<footer>
<span>Made with <i class="fa fa-heart red" ></i> by Alex Alonso</span>
</footer>
</div>
</body>
It should run smoothly, changing the css and thus animating the battery charge. But what happens is that it hangs up a little bit in the beginning, but only at the first cycle of animation. After that all animations run smoothly.
const intervalHandler =
setInterval(function() {
++ammount
console.log(ammount)
const style = `width:${ammount}%;`
battery_charge.style = style
changeStyle(ammount)
if (ammount == 100) {
clearInterval(intervalHandler)
not.style = 'background-color:lightgreen'
}
}, 50)
I want to know why it behaves like this
Try using requestAnimationFrame as it is the recommended way as compared to other options to do stuff like animations etc.
I am creating a game with jquery, the meaning of the game is that you should , with one element ( a bucket in this case "#spelare" ) catch other elements ".food" that are falling down from above. How can i make so that when the falling elements touch the (bucket), they disappear, and you get 1 score?
Thanks in advance for all help i can get!
Here is the code I have atm:
body{
text-align: center;
background-color:black;
}
#spelplan{
width: 1000px;
height:610px;
position:absolute;
margin-left:460px;
box-shadow: inset 0px 0px 50px;
background-color: green;
}
#spelare{
width:110px;
height: 12vh;
position: relative;
top:53.4vh;
background-image:url(hink.png);
background-size:cover;
}
.food{
width:50px;
height:50px;
position:absolute;
background-image:url(vattendroppe.png);
background-size:cover;
display:block;
}
p{
position:relative;
font-family: 'Electrolize', sans-serif;
}
#poäng{
color:white;
bottom:17vh;
right:45%;
}
#liv{
color:white;
bottom:18vh;
right:46.5%;
}
.fa-heart{
color:red;
bottom:21.5vh;
right:43.5%;
position:relative;
}
#info{
color:white;
font-family: 'Electrolize', sans-serif;
margin-top:68vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Jquery Spel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode ==39 && $("#spelare").css("left") < '880px')
$("#spelare").animate({left: '+=20px'}, 0);
else if (e.keyCode ==37 && $("#spelare").css("left") > '0px')
$("#spelare").animate({left: '-=20px'}, 0);
});
setInterval(spawnFood,2000);
setInterval(fall, 0);
});
function spawnFood(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
$("#spelplan").append(element);
}
function fall(){
var elementFall = $(".food").animate({top: '+=20px'}, 500);
$("#spelplan").append(elementFall);
}
</script>
</head>
<body>
<h2 style="color:white">JQUERY SPEL</h2>
<div id="spelplan">
<div id="spelare"> </div>
<div class="food"> </div>
<p id="poäng"> Poäng: </p>
<p id="liv"> Liv: </p>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
<div id="info">
<h1> Instruktioner: </h1>
<p> Spelet går ut på att du med hjälp av hinken och piltangenterna ska fånga alla vattendroppar! <br/> Du måste hålla ut i 40 sekunder, missa tre vattendroppar så förlorar du! </p>
</div>
</body>
</html>
You have to constently compare each falling element position versus the bucket position.
A nice place for it is in your fall() function.
Have a look!
CodePen
$(document).ready(function(){
var score=0;
var fails=0;
//Bucket movement
$(document).keydown(function(e){
//console.log(e.which);
// if left or right keyboard arrow
if (e.keyCode ==39 && $("#spelare").css("left") < '880px')
$("#spelare").animate({left: '+=20px'}, 0);
else if (e.keyCode ==37 && $("#spelare").css("left") > '0px')
$("#spelare").animate({left: '-=20px'}, 0);
});
// Game init
var spanfoodInterval = setInterval(spawnFood,2000);
var fallInterval = setInterval(fall, 0);
// Water append
function spawnFood(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
$("#spelplan").append(element);
}
// dropping object animation
function fall(){
var elementFall = $(".food").animate({top: '+=20px'}, 500);
//$("#spelplan").append(elementFall);
$(".food").each(function(){
if( typeof($(this)) !="undefined" && typeof($("#spelare"))!="undefined" ){
// item position
var thisPosition = $(this).position();
var thisWidth = $(this).width();
// Bucket position and width
var bucketPosition = $("#spelare").position();
var bucketWidth = $("#spelare").width();
var bucketHeight = $("#spelare").height();
// If object and bucket at same position
if( thisPosition.top >= bucketPosition.top
&& thisPosition.left >= bucketPosition.left
&& thisPosition.left <= bucketPosition.left + bucketWidth ){
$(this).remove();
score++;
//console.log(score);
// Update the score display
$("#score").html(score);
}
// Food not catched...
if( thisPosition.top >= bucketPosition.top + bucketHeight){
$(this).remove();
fails++;
//console.log("FAILS: "+fails);
}
// if more than 3 miss => Game over.
if(fails>3){
$("#failMsg").show();
$("#spelare").remove();
$(".food").remove();
clearInterval(spanfoodInterval);
clearInterval(fallInterval);
}
}
});
}
}); // ready
body{
text-align: center;
background-color:black;
}
#spelplan{
width: 1000px;
height:610px;
position:absolute;
margin-left:460px;
box-shadow: inset 0px 0px 50px;
background-color: green;
}
#spelare{
width:110px;
height: 12vh;
position: relative;
top:53.4vh;
background-image:url(https://placehold.it/350x150); /* hink.png); */
background-size:cover;
}
.food{
width:50px;
height:50px;
position:absolute;
background-image:url(https://placehold.it/350x150); /* vattendroppe.png); */
background-size:cover;
display:block;
}
p{
position:relative;
font-family: 'Electrolize', sans-serif;
}
#failMsg{
position:fixed;
top:50%;
left:50%;
transform:translate(50% 50%);
color:white;
font-size:4em;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<h2 style="color:white">jQuery GAMES - Your score: <span id="score">0</span></h2><!-- JQUERY SPEL</h2-->
<div id="spelplan">
<div id="spelare"> </div>
<div class="food"> </div>
<p id="poäng"> Poäng: </p>
<p id="liv"> Liv: </p>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
<div id="info">
<h1> Instructions: </h1>
<p> The game is that you are using the bucket and the arrow keys to catch all the drops of water! <br/> You have to hold out for 40 seconds, missing three water drops, you lose! </p>
</div>
<div id="failMsg">Game over!</div>
I have designed an image slider that slides through the pictures . But I want it also to display that specific image associated to that corresponding button user clicks on i.e. if user clicks 3rd button it would display the 3rd image and then it should slide on normally.
I have coded that but it is not working as expected in fact it is not working at all . can anyone point me out where am I doing wrong ?
and help me solve that?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:40px auto;
background-image:url(Images/Loading.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#fff;
}
.shadow_div
{
background-image:url(Images/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:800px;
height:30px;
margin:-39px auto;
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
var count = 1;
var temp_count = 0;
var _tempClicked = false;
$(document).ready(function () {
$(("#my_image_slider>#")+count).show("fade", 1000);
$(("#my_image_slider>#")+count).delay(3500).hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length;//total number of images
$(".Round_Buttons li").click(function () {
temp_count = this.id.charAt(0);
_tempClicked = true;
});
count = count + 1;
setInterval(function () {
alert("In setinterval --- " + count);
$(("#my_image_slider #") + count).show("slide", { direction: 'right' }, 1000);
$(("#my_image_slider #") + count).delay(3500).hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
alert("In first If -- " + count);
}
else if (_tempClicked == true) {
count = temp_count;
alert("In Else If " + count);
}
else {
count = count + 1;
alert("In else -- " + count);
}
}, 5300);
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons">1</li>
<li id="2_Round_Buttons">2</li>
<li id="3_Round_Buttons">3</li>
<li id="4_Round_Buttons">4</li>
<li id="5_Round_Buttons">5</li>
</ul>
</div>
</body>
</html>
In your click function it is setting a value that is picked up later by setInterval, so it may appear to not work immediately. Also _tempClicked is not reset to false after it's checked in setInterval so you would never see the user's clicks after the first one.
For immediate UI response you can try something like this...
<script type="text/javascript">
var count = 1;
var _tempClicked = false;
$(document).ready(function () {
var image_count = $("#my_image_slider > img").length;//total number of images
increment_counter = function(){
if (count == image_count) {
count = 1;
}
else {
count = count + 1;
}
};
doslide = function(){
$("#my_image_slider>#"+count).show("fade", 1000);
$("#my_image_slider>#"+count).delay(3500).hide("slide", { direction: 'left' }, 800);
increment_counter();
};
doslide();
setInterval(function () {
doslide();
}, 5300);
$(".Round_Buttons li").click(function () {
count = parseFloat(this.id.charAt(0));
// hide currently visible image
$('#my_image_slider').children().each(function(index,obj) {
if( $(obj).css("visibility") != "hidden"){
$(obj).hide();
};
});
$("#my_image_slider>#"+count).show();
});
});
</script>
you have error in your code:
$(("#my_image_slider>#")+count)
this type of selector is wrong, instead use this type of selector
(you should remove inner parentheses):
$("#my_image_slider>#" + count )
NOTE: jQuery selector should be a string.
This question already exists:
Closed 10 years ago.
Possible Duplicate:
trying to create simple Slide show method in Javascript
I have learn to make carousel image slideshow script with JavaScript. I think it's better to learn it from the basic than we just make something from the framework (instant script) but I'm a newbie. I write this script using my technique, but I think it's terrible.
OK, here is my question :
I don't know how to make this slideshow loop, anyone can help me?
Thanks
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;
height:140px;
position:absolute;
left:50%;
top:50%;
margin: -70px 0 0 -200px;
background: #383838;
overflow: hidden;
}
#abc-container {
position: absolute;
width:1200px;
height:140px;
}
#a {
width:400px;
height:140px;
background: #FF0000;
float: left;
}
#b {
width:400px;
height:140px;
background: #FFFF00;
float: left;
}
#c {
width:400px;
height:140px;
background: #00FFFF;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="abc-container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>
<div id="asas"></div>
<div id="asass"></div>
<script type="text/javascript">
var runCarousel, runTimer;
firstval = 0;
secondval = 0;
function Carousel(){
firstval += 10;
document.getElementById('abc-container').style.left = "-" + firstval + "px";
document.getElementById('asas').innerHTML = "-" + firstval;
if(firstval == 400)
{
StopRun();
StartTimer()
return;
}
if(firstval == 800)
{
StopRun();
StartTimer()
return;
}
runCarousel = setTimeout(Carousel, 10);
}
function StartTimer(){
secondval += 1;
document.getElementById('asass').innerHTML = "-" + secondval;
if(secondval == 10)
{
StopTimer();
Carousel();
return;
}
if(secondval == 20)
{
StopTimer();
Carousel();
return;
}
runTimer = setTimeout(StartTimer, 1000);
}
function StopRun(){
window.clearTimeout(runCarousel);
}
function StopTimer(){
window.clearTimeout(runTimer);
}
function firstStart(){
setTimeout("Carousel()", 10000);
}
firstStart();
</script>
</body>
</html>
Firstly there is an error:
function firstStart(){
setTimeout("Carousel()", 10000);
}
correctly:
function firstStart(){
setTimeout(Carousel, 10000);
}
in the end, all settings are reset to default and start timer:
in Carousel:
if(firstval == 1200){
document.getElementById('abc-container').style.left = "0" + "px";
firstval = 0;
StopRun();
StartTimer()
return;
}
in StartTimer
if(secondval == 30) {
secondval = 0;
StopTimer();
Carousel();
return;
}
DEMO
Here is my example