jQuery Progress bar and counter - javascript

I searched alot about this and tried some of my own but I can't seem to make it work.
What I'm trying to realize is a progress bar that adds 10 or subtracts 10 every time you press a button.
Example when you press the button UP you add 10 to the progress bar and when you press the button DOWN you remove 10 from the bar.
Whatelse I'd want to realize is a script that can "read" the status of the progressbar and with an if or else function display a text from a paragraph (If > 50 it'll fadeIn a text, else < 50 it'll fadeIn a different text)
Hope I explained myself well and hope anyone can help me. I'm still new in jQuery/JavaScript.

jQuery UI has a built-in progress bar that you can do what you want easily.
http://jqueryui.com/demos/progressbar/
Here's a simple implementation of what you're trying to do:
http://jsfiddle.net/makotosan/bW5Wd/3/

Here is a little example to get you started; there are a lot of capabilities to this script, don't be afraid to experiment a little bit:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Progress Bar</title>
<meta charset="utf-8" />
<style>
#progress {
position:relative;
width:25px;
height:100px;
border:2px solid #000;
background-color:#ccc;
}
#progress div {
position:absolute;
bottom:0;
height:0;
width:25px;
background-color:#f00;
}
span {
margin:10px auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// Define your variables
var interval=10;
var half=50;
var max=100;
var texts=['Less then 50...','More then 50!'];
var upButton=$('button[name="up"]');
var downButton=$('button[name="down"]');
var bar=$('#progress').find('div');
upButton.on('click',function(){
var height=bar.height();
if(height>=0 && height<max) {
var newHeight=parseFloat(height+interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
downButton.on('click',function(){
var height=bar.height();
if(height>0 && height<=max) {
var newHeight=parseFloat(height-interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
});
</script>
</head>
<body>
<h1>Progress Bar</h1>
<p>
<button name="up">Add</button> <button name="down">Remove</button>
</p>
<div id="progress">
<div> </div>
</div>
<span></span>
</body>
</html>

Related

How to change visitors location on page [duplicate]

This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 6 years ago.
I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page.
How can this be done?
Thanks
If you have a keyboard attached:
Press the 'Home' button.
The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex:
<div id="top">...</div>
It is then enough to make a link to this anchor:
top of page
Demo:
<!DOCTYPE html>
<html>
<head>
<title>top link</title>
<meta charset="UTF-8">
</head>
<body>
<div id="top">...</div>
<!-- Content -->
<!-- Content -->
<!-- Content -->
top of page
</body>
</html>
On button click, run the Javascript:
window.scrollTo(0, 0);
You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>
<!-- BackToTop Button -->
Top<span></span>
<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
</body>
</html>
Just Copy & Paste the script and run
For a link:
Back to top
With button:
<a href="#">
<button>Back to top</button>
</a>
See also:
How to create an HTML button that acts like a link?
HTML Anchors with 'name' or 'id'?

I want to be able to change each picture to appear in the same place on the screen every time i click a button

I am having some problems, the plan is when i click a button, the pictures change one bu one to represent a traffic light sequence. So when i run the code i want it to start on red and run through the sequence (British sequence). Although when i do run the code all i get is all the pictures coming up at the same time with no effect coming from the button. if anyone can help to accomplish this then that would be greatly appreciated! :)
Cheers!
Here is my code for HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Traffic Lights</title>
<link href="flag_style.css" rel="stylesheet" type="text/css">
<script src="flagscript.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="changeLight()">
<img id="state_1" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg">
<img id="state_2" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg">
<img id="state_3" onclick="changeLight()" src="http://www.drivingtesttips.biz/images/traffic-lights-green.jpg">
<img id="state_3" onclick="changeLight()" src="https://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg">
</body>
</html>
CSS:
.state_1 {
width:300px;
height:300px;
}
.state_2 {
width:300px;
height:300px;
}
.state_3 {
width:300px;
height:300px;
}
.state_4 {
width:300px;
height:300px;
}
JavaScript:
var flagSeq = ["state_1","state_2","state_3","state_4"];
var state = 0;
function changeFlag() {
if (state == 0) {
document.getElementById("state_1").className = flagSeq[state][0];
state++;
}
if else (state == 1) {
document.getElementById("state_2").className = flagSeq[state][1];
state++;
}
if else (state == 2) {
document.getElementById("state_3").className = flagSeq[state][2];
state++;
}
if else (state == 3) {
document.getElementById("state_4").className = flagSeq[state][3];
state = 0;
}
}
I deleted my other answer because this is apparently a homework problem. I'll gladly point out what to improve, though, so here's the first paragraph from the answer I posted.
There are several issues with your code, to the point where I wonder why you haven't noticed some of them yourself.
You seem to only want to show one image at a time, but you never actually hide any of them.
You're giving the images id attributes but only use class selectors in your CSS.
There are two elements with an id of state_3.
if else is not valid in JavaScript (the console will be happy to point out a syntax error). You probably meant to write else if instead.
As j08691 pointed out, you define a function changeFlag but refer to it as changeLight in your HTML.
Side note: for real-life projects, you'd be better off downloading the images and using those instead of linking to external resources.
What I would do is have only one img element and use JavaScript to change its src attribute.
What you want is something like this plunker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Traffic Lights</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="changeLight()">
<div id="light-div" class="light light-0" onclick="changeLight()"></div>
</body>
</html>
.light {
width: 300px;
height: 300px;
display: block;
background-position: center center;
background-repeat: no-repeat;
}
.light-0 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-light-red.jpg);
}
.light-1 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg);
}
.light-2 {
background-image: url(http://www.drivingtesttips.biz/images/traffic-lights-green.jpg);
}
.light-3 {
background-image: url(http://assets.digital.cabinet-office.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg);
}
var lightSeq = ['light-0', 'light-1', 'light-2', 'light-3'];
var state = 0;
function changeLight() {
state++;
if (state === lightSeq.length)
state = 0;
document.getElementById('light-div').className = 'light ' + lightSeq[state];
}
Really there are a lot of errors in your code both HTML/JS, first hide something then better try to show it-
Still I got something for you, maybe this is what you needed, check the link below-
$(document).ready(function(e){
$('#ab').click(function(e){
//alert(1);
var a = document.getElementsByTagName('img');
for(i=1;i<=a.length;i++){
setTimeout(function(x){
return (function(){
$('img#state_'+x).show();
});
}(i),1000*i)
}
});
});
https://plnkr.co/XGG5PHI6bMP0XJ484rUS?p=preview

Animate a div on and off screen when press a button

I'm new to coding and hope someone could help me with my hopeless code skills. I'm trying to create a div that will animate on and off the screen on press a button. Here is what I've got so far.... it's probably stupidly wrong but I guess that's what this site is for.. here you go
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">Example Text</div>
<script>
function myFunction()
{
var position = test.position();
if("#test".position<0)
{
alert("hello");
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -15
},1000);
});
}
</script>
</body>
</html>
This function is called when an image is clicked. My idea was to basically tell the div to animate onto the screen if it's position value is less than 0, which I think tells it that it's off the screen. If it doesn't detect it's value is offscreen, it means the div is onscreen at the moment and so it should animate away. I'd be very grateful of any help that anyone can provide. Thanks very much in advance!
Here you go.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">TESTTEST</div>
<input type="button" name="myButton" value="Click Me" onclick="myFunction()" />
<script>
function myFunction()
{
var divPosition = $("#test").offset();
if(divPosition.left < 0 )
{
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -150
},1000);
};
}
</script>
</body>
</html>
And CSS:
#test{
background-color:white;
border:3px solid black;
font-size:30px;
position:absolute;
left:-20%;
top:10%;
}
Working Fiddle: http://jsfiddle.net/KeE4h/48/

setTimeout() doesn't make a transition effect

I was trying to make a red bar (created with a div and a red background-color) that can extend from 0 pixels in width to 200 pixels in width. My code works when I insert a window.alert(x.width) in the function myF(), but the code doesn't give me a transition when I don't put it in. Is it just a problem with the setTimeout()?
<!DOCTYPE html>
<html>
<head>
<script>
function myF(){
var x = document.getElementById("bar1").style;
if(parseInt(x.width)<200){
x.width = (parseInt(x.width)+1)+"px";
setTimeout(myF(),1);
}
}
</script>
</head>
<body onload="myF()">
<div id="bar1" style="width:0px; text-align:center; height:10px;background-color:red; font-size:10px; padding:0px; margin:0px;"></div>
</body>
</html>
you should do :
setTimeout(myF,1);
instead of :
setTimeout(myF(),1);

Rotating Box With CSS and JavaScript

Okay so I have a box that I made in CSS and what I want it to do is basically spin. However the part that I am lost at is, how do I control the speed at which box spins at using a range/slider?
This is my HTML Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="box.css" />
<link rel="javascript" href="spin.js" />
</head>
<body>
<div id="box">
<p id="text">Something goes here...</p>
</div>
<div id="control">
<input id="controlo" type="range" min="10" max="50" step="5" value="25" />
</div>
</body>
</html>
This is my CSS Code:
body{
text-align:center;
}
#box{
display:block;
width:150px;
margin:150px auto;
padding:15px;
text-align:center;
border:7px solid blue;
background:red;
-webkit-transition: -webkit-transform 1.5s linear;
}
.eg {
-webkit-transform: rotate(360deg);
}
And finally the JavaScript Code:
var cur = 0;
function doit() {
var speed = +$("#controlo").val();
cur = (cur + speed);
$("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}
setInterval(doit, 100);
I cant get this box to spin. I don't know whats wrong but please help!
You're including the JavaScript wrong.
You should include it like this:
<script type="text/javascript" src="spin.js"></script>
and not like this:
<link rel="javascript" href="spin.js" />
You should also make sure that you've included jQuery before. So prepend
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I pasted your code straight into jsfiddle.net at this link http://jsfiddle.net/86D7Z/ and it worked just fine. I can't seem to find your problem.
Edit: I can't believe I missed what Micha spotted. Time for bed.

Categories