Hide button until button is clicked - javascript

I want to hide the id="Watch" button.
until the class="button1" button is clicked
The countdown ends
Then the id="Watch" button appears.
function DelayRedirect() {
var seconds = 10;
var dvCountDown = document.getElementById("dvCountDown");
var lblCount = document.getElementById("lblCount");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
setInterval(function () {
seconds--;
lblCount.innerHTML = seconds;
if (seconds == 0) {
dvCountDown.style.display = "none";
window.location = "#Watch";
}
}, 1000);
}
<button class="button1" onclick="DelayRedirect()">continue</button>
<div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span> seconds.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="Watch"><a class="button2" href="https://www.youtube.com/" target="_blank">Watch</i></a></button>

just set opacity 0 on #Watch and when button1 is clicked set opacity = 1 on #Watch. After the countdown reset #Watch opacity to 0.

You can do this,
Adding display to none in HTML by default,
<button style="display : none" id="Watch"><a class="button2" href="https://www.youtube.com/" target="_blank">Watch</i></a></button>
After this grab the button and set display to block once you click the button.
let one = document.querySelector(".button1");
let second = document.querySelector("#Watch");
one.addEventListener("click" , DelayRedirect);
function DelayRedirect() {
second.style.display = "block";
var seconds = 10;
var dvCountDown = document.getElementById("dvCountDown");
var lblCount = document.getElementById("lblCount");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
setInterval(function () {
seconds--;
lblCount.innerHTML = seconds;
if (seconds === 0) {
dvCountDown.style.display = "none";
window.location = "#Watch";
}
}, 1000);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Website</title>
<!-- <script src="./src/index.js" defer ></script> -->
</head>
<body>
<button class="button1" >continue</button>
<div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span> seconds.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button style="display : none" id="Watch"><a class="button2" href="https://www.youtube.com/" target="_blank">Watch</i></a></button>
<script src="./src/index.js"></script>
<!-- added defer also -->
</body>
</html>

You need to give it display: none by default, and after ten seconds give it display: inline, also you should stop the interval as it will run forever.
function DelayRedirect() {
var seconds = 10;
var dvCountDown = document.getElementById("dvCountDown");
var lblCount = document.getElementById("lblCount");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
const timeout = setInterval(function () {
seconds--;
lblCount.innerHTML = seconds;
if (seconds == 0) {
dvCountDown.style.display = "none";
document.getElementById('Watch').style.display = 'inline';
window.location = "#Watch";
clearInterval(timeout)
}
}, 1000);
}
#Watch {
display: none;
}
<button class="button1" onclick="DelayRedirect()">continue</button>
<div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span> seconds.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="Watch"><a class="button2" href="https://www.youtube.com/" target="_blank">Watch</i></a></button>

This can be solved by using the hidden attribute on the button
For The Html
<button class="button1">continue</button>
<div id="dvCountDown" style = "display:none">
You will be redirected after <span id = "lblCount"></span> seconds.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--I would recommend using CSS to position your elements instead of <br> tags-->
<button id="Watch" hidden><a class="button2" href="https://www.youtube.com/" target="_blank">Watch</i></a></button>
The Javascript Portion is
const watchButton = document.getElementById('Watch');
const button1 = document.getElementByClassName('button1');
watchButton.addEventListener('click', delayRedirect() {
watchButton.removeAttribute('hidden');
watchButton.setTimeout(() => {
watchButton.setAttribute('hidden', 'true');
}
,10000)
})

Related

Multiply a variable and store that value/output to screen

I have tried a bunch of ways to get this to work. I'm not a coder, and I have a frankensteined abomination of a counter program I put together as a replacement for our expensive counters that kept breaking on us (basically you input a value at the start of the day, and based on that value a calculation is done for the GOAL for the day).
I now want to add a GOAL BY LUNCH field/display that - however simply doing something like
var lunchgoal = goal * 0.69;
And then putting it on the page like I have with the goal field, does not seem to work.
I can either get it to display 0 - which seems like its displaying just the basic 0 value of goal before it is being incremented, or NaN - not a number.
So I thought I need to convert it to a number before multiplying it, but I nothing has worked for me for that. Right now I'm guessing it may be a matter of where they are contained on the page? I find that part of this confusing honestly. Any help is much appreciated, I would have thought this would be fairly simple!
Thank you!
HTML
<html>
<style>
body {background-color: Black;}
p {color: white;}
</style>
<div class="container">
<p> SAMS VALUE: <span id="output"> </span>
</p>
<p style="font-size:110px"> GOAL: <span id="output2"> </span>
</p>
<button style="background-color:white;width:20%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:110px">Actual Count: <span id="clicks">0</span>
</p>
<div class="row">
<div class="col-sm-4"/>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"/>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"/>
</div>
</div>
</div>
</html>
Script
<script type="text/javascript">
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
}
}, SAMSINPUT * 1000);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false,
t;
</script>
You have to do it in loop where goal is changing & you want this to change as well.otherwise it just stays on 0. i shortened the timer for demo purpose
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
// console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
var lunchGoalNumber = goal * 0.69;
var output3 = document.getElementById("output3")
output3.innerHTML = lunchGoalNumber;
}
}, SAMSINPUT * 25);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false;
<div class="container">
<p> SAMS VALUE: <span id="output"> </span></p>
<p style="font-size:50px"> GOAL: <span id="output2"> </span></p>
<p style="font-size:50px"> Lunch/GOAL: <span id="output3"> </span></p>
<button style="background-color:white;width:35%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:50px">Actual Count: <span id="clicks">0</span></p>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"></time>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"></div>
</div>
</div>
</div>
</body>

Adding together any number of items in an array with Javascript

I am learning Javascript and currently having an issue creating an application. I want to create a webpage that will take the values entered in a textbox, and place them inside an array. Then, I want to create a function that will add the values together. I am nearly complete, but I am having a tough time figuring out how to create a function that will add together the array items. My biggest issue is that any number of values can be entered into the page, and all the documentation I can find is based on having a pre-set array. Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numbers</title>
</head>
<body>
<section>
<header class="header m-2" id="myForm">Numbers App</header>
<section class="row m-2">
<label class="inputLabel">Number: <input type="number" id="numInput"></label>
</section>
<button class="button m-1" onclick="displayText(); addNum(); testCount();" id="addButton">Add Number</button>
<button class="button m-1" disabled>Calculate</button>
<button class="button m-1" onclick="resetPage();">Reset</button>
</section>
<section id="numForm">
<div class="numLabel m-2" id="numLabel">Numbers Added: </div>
<p class="m-2 mt-3" id="numValue"></p>
</section>
<script src="script.js"></script>
</body>
</html>
JS:
//Display "Numbers Added: "
function displayText() {
document.getElementById("numLabel").style.display = "block";
}
//Add the entered values into the array
let numArray = [];
function addNum() {
let num = document.getElementById("numInput").value;
numArray.push(num);
document.getElementById("numValue").innerHTML = numArray.join(" ");
}
//Testing count function
function testCount() {
for(count = 0; count > 2; count++) {
console.log("this works");
}
}
//Reset the page
function resetPage() {
//Clear input field
document.getElementById("numInput").value = "";
//Hide "Numbers Added: "
document.getElementById("numLabel").style.display = "none";
//Clear array items
numArray = [];
document.getElementById("numValue").innerHTML = "";
}
Edit:
To display the addition can just use something like:
const array1 = [1, 2, 3, 4];
const result = array1.reduce((acc, curr) => parseInt(curr) + parseInt(acc));
let additionDisp = array1.join(" + ") + " = " + result;
console.log(additionDisp);
You need to declare your add function first, parse your string input to integer value and perform a reduction to get the sum
//Add the entered values into the array
let numArray = [];
//Display "Numbers Added: "
function displayText() {
var result = numArray.reduce((acc, curr) => parseInt(curr) + parseInt(acc), 0);
var numSumString = "";
for (data of numArray) {
numSumString = data + " + " + numSumString;
}
document.getElementById("numLabel").innerHTML = "Numbers Added:" + numSumString.substring(0, numSumString.length - 2) + "=" + result;
}
function addNum() {
let num = document.getElementById("numInput").value;
numArray.push(num);
document.getElementById("numValue").innerHTML = numArray.join(" ");
}
//Reset the page
function resetPage() {
//Clear input field
document.getElementById("numInput").value = "";
//Hide "Numbers Added: "
document.getElementById("numLabel").style.display = "none";
//Clear array items
numArray = [];
document.getElementById("numValue").innerHTML = "";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numbers</title>
</head>
<body>
<section>
<header class="header m-2" id="myForm">Numbers App</header>
<section class="row m-2">
<label class="inputLabel">Number: <input type="number" id="numInput"></label>
</section>
<button class="button m-1" onclick="addNum();" id="addButton">Add Number</button>
<button class="button m-1" onclick="displayText();">Calculate</button>
<button class="button m-1" onclick="resetPage();">Reset</button>
</section>
<section id="numForm">
<div class="numLabel m-2" id="numLabel">Numbers Added: </div>
<p class="m-2 mt-3" id="numValue"></p>
</section>
<script src="script.js"></script>
</body>
</html>
Use Array.prototype.reduce.
const array = [0, 42, 101, 5, 2];
const total = array.reduce((sum, x) => sum + x);
console.log(total);

Need to find out how to make a button go out

currently, I have a countdown script that counts down to 15.
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button">
<form action="http://website.com">
<input type="submit" style="display: none;" value="Go to website"/>
<script>
var count = 15;
function countDown(){
var timer = document.getElementById("timer");
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
document.getElementById("button");
}
}
countDown();
</script>
It does it's job and counts down to fifteen. What I actually want to happen is that when the 15 seconds is up, it will instead show a button that says "Go to website".
Basically it's like other shortener but it's not.
I don't think document.getElementByID doesnt work. I've been looking for a way to make the button appear but it's not working.
Start with the button hidden, and remove that condition when the timer expires. A common way to do that is to use a "hidden" utility class, as shown below.
Note: Count in this snippet is 3, because I get bored waiting for 15 seconds each iteration. :)
var count = 3;
function countDown(){
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
countDown();
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>
You could use setInterval() function that I think is more natural for the count down process. I reuse most code from #Palpatim answer.
var count = 3;
var myVar = setInterval(function(){ countDown() }, 1000);
function countDown() {
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
}else{
myStopFunction();
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
function myStopFunction() {
clearInterval(myVar);
}
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>

SetInterval(), ClearInterval() timer questions for javascript

Hey guys so I'm trying to make an interval timer where the user inputs the number of rounds, length of working interval and length of resting interval. So if the user inputs 30 sec for work, 10 seconds for rest, and 10 rounds, the timer will display "WORK" for the title and run for 30 seconds,and then the title will change to "REST" and run for 10 more seconds (40 seconds total). Once 40 seconds is reached, the timer will go back to 0 and continue to do this for 9 more rounds (10 in total). I've never created a timer before so I am a little confused. I have gotten the timer to work, but I am having trouble changing the title and restarting the timer at each round. Below are copies of both my HTML and Javascript. any help is much appreciated!
Javascript:
var time = 0;
var running = 0;
var rounds = document.getElementById("numRounds").value;
var work = document.getElementById("numWork").value;
var rest = document.getElementyId("numRest").value;
function startPause()
{
if(document.getElementById("numRounds").value == "" | document.getElementById("numWork").value == "" |
document.getElementById("numRest").value == ""){
document.getElementById("error").innerHTML = "*All fields are required.";
}
else{
if(running == 0){
running = 1;
increment();
document.getElementById("startPause").innerHTML = "Pause";
}
else{
running = 0;
document.getElementById("startPause").innerHTML = "Resume";
}
}
}
function reset()
{
running = 0;
time = 0;
document.getElementById("startPause").innerHTML = "Start";
document.getElementById("output2").innerHTML = "00:00:00";
}
function work(){
time++;
var mins = Math.floor(time/10/60);
var secs = Math.floor(time/10 % 60);
var tenths = time % 10;
if(mins < 10){
mins = "0" + mins;
}
if(secs < 10){
secs = "0" + secs;
}
document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
increment();
if(secs < work){
document.getElementById("work").innerHTML = "WORK";
}
var total = work + rest;
else if(secs >= work && secs< total){
document.getElementById("work") = "REST";
}
else{
clearInterval();
increment();
}
}
function increment()
{
if(running == 1){
for(var i=0;i<rounds; i++){
setTimeout(work(),100);
}
}
}
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/workitt.css"/>
<script type="text/javascript" src="js/stopwatch.js"></script>
<title>Workitt</title>
</head>
<body>
<div class="header" style="margin: 0 auto">
<h1><img src="images/workitt-header.jpg" alt="header" /></h1>
<ul id="navbar">
<li>Home</li>
<li> | </li>
<li>Custom Workout
<ul>
<li>Strength Workout</li>
<li>Cardio Workout</li>
<li>Stretching Workout</li>
<li>Swimming Workout</li>
<li>Office Workout</li>
</ul>
</li>
<li> | </li>
<li>Workout Library
<ul>
<li>Upper Body</li>
<li>Lower Body</li>
<li>Cardio</li>
<li>Core</li>
</ul>
</li>
<li> | </li>
<li>Fitness Accessories
<ul>
<li>Fitness Calculators</li>
<li>Fitness Timers</li>
<li>Fitness Journal</li>
<li><div class="clearfix"></div></li>
</ul>
</li>
</ul>
<p> </p>
</div>
<div> </div>
<div class="body" style="margin: 0 auto">
<div id="work">WORK</div>
<div id="output"><span class='left'> Round</span><span class='right'>Time </span><br/><span id="output2"> 0 00:00:00</span></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div>
Number of Rounds: <input type="text" id="numRounds" name="Rounds" size="6"/>
Length of Work: <input type="text" id="numWork" name="Work" size="6"/> (seconds)
Length of Rest: <input type="text" id="numRest" name="Rest" size="6"/> (seconds)
</div>
<br/>
<div id="controls">
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button><br/><br/>
<span id="error"></span>
</div>
<br/>
</div>
<p> </p>
<p><br /><br /></p>
<hr style="width: 30%;margin-left: auto, margin-right: auto" />
<div style="text-align:center">Created By: Danielle Hafner<br/>
<script type="text/javascript">
<!--
document.write("Last Modified " + document.lastModified)
// -->
</script>
</div>
</body>
</html>
Let me answer your question with a simple example. So we want to make our timer a variable, that way we know what to clear when clearInterval is called. So for our timer we can do : myTimer = setInterval(...), then when we want to clear it we do: clearInterval(myTimer). So here is a small example, a basic counter that resets itself:
HTML:
<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="counter">0</div>
JS:
var myTimer;
var count = 0;
document.getElementById("play").onclick = function()
{
myTimer = setInterval(counter, 1000);
document.getElementById("play").disabled = true;
}
document.getElementById("stop").onclick = function()
{
clearInterval(myTimer);
count = 0;
document.getElementById("play").disabled = false;
}
function counter()
{
count++;
document.getElementById("counter").innerHTML = count;
}
Fiddle here: http://jsfiddle.net/AniHouse/aCfEL/
Chew on this: http://jsfiddle.net/4cmEB/5/ :-)
Change rounds, states and lengths as you suit. I've added another state between rounds called wait, you can remove it, but remenber to remove also the corresponding time from lengths.

Using JQuery how to show and hide different div's onClick event

I would like to show a div based on the Onclick event of an link.
First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..
Code Follows:
<div class="toggle_button">
Toggle
</div>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<div id='div2' style="display:none;">
<!-- content -->
</div>
<div id='div3' style="display:none;">
<!-- content -->
</div>
Jquery Code :
$(document).ready(function() {
$("#toggle_value").click(function(){
$("#div1").show("fast");
$("#div2").show("fast");
$("#div3").show("fast");
});
});
The above code shows all divs on first click itself but it should show div1 on first click as mentioned.
I'll try my shot.
EDIT:
After second though, to avoid global variable use it's better to do the following
$(document).ready(function() {
$("#toggle_value").click((function(){
var counter = 0;
return function()
{
$("#div" + counter).hide("fast");
counter = (counter % 3) + 1;
$("#div" + counter).show("fast");
}
})());
});
You should add a counter in the function.
$(document).ready(function() {
var count = 0;
$("#toggle_value").click(function(){
if (count == 0) {
$("#div1").show("fast");
$('#div2').hide();
count++;
}
else if (count == 1) {
$("#div2").show("fast");
...
count++;
}
else if (count == 2) {
$("#div3").show("fast");
....
count++;
}
else {
$('div').hide();
count=0;
}
});
});
How about this
Working Example here - add /edit to URL to edit the code
$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'
$(function() {
var counter = 1;
$('#toggle_value').click(function() {
$('div','#container')
// to stop current animations - clicking really fast could originally
// cause more than one div to show
.stop()
// hide all divs in the container
.hide()
// filter to only the div in question
.filter( function() { return this.id.match('div' + counter); })
// show the div
.show('fast');
// increment counter or reset to 1 if counter equals 3
counter == 3? counter = 1 : counter++;
// prevent default anchor click event
return false;
});
});
and HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<div class="toggle_button">
Toggle
</div>
<br/>
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div>
</body>
</html>
This could easily be wrapped up in a plugin
A simple way would be to introduce a variable that tracked clicks, so something like this:
var tracker = 0;
$(document).ready(function() {
$("#toggle_value").click(function(){
if(tracker == 0)
{
$("#div1").show("fast");
}else if(tracker ==1)
etc etc
tracker ++;
});
});
My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.
$(document).ready(function() {
$("#toggle_value").click(function(){
if ($("#div1).is(':visible')) { // Second click
// Hide all divs and show d2
$("#div1").hide();
$("#div2").show("fast");
$("#div3").hide();
$("#div4").hide();
} else if ($("#div2").is(':visible')) { // Third click
// follow above example for hiding all and showing div3
} else if ($("#div3").is(':visible')) { // Fouth click
// follow above example for hiding all and showing div1
} else { // first click
// All divs should be hidden first. Show div1 only.
$("#div1").show("fast");
}
});
});
Just to warn you - I have not tested this code :)
Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F
Hope it helps
I prefer to use "filter" method and make a little easier work with counter:
(function () {
var divCounter = 0, divs;
$(function () {
divs = $('#div1, #div2, #div3');
$('#toggle_value').click(function (e) {
divs.hide() // hide other divs
.filter(function (index) { return index == divCounter % 3; }) // select appropriate div
.show('fast'); // and show it
divCounter++;
});
});
})();
I would probably do something like: (The following assumes all your <div>s are in a container with id "container")
$(document).ready(function() {
var $allDivs = $("#container > div");
var counter = 0;
$("#container > div").click(function(){
counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
$allDivs.not(":eq("+counter +")").hide("fast");
$allDivs.eq(counter).show("fast");
});
});
The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.
$("#toggle_value").click(function()
{
$("#div" + (++c) % 3).show().siblings().hide();
}
var c = 1;
$("#toggle_value").click(function()
{
$("#div" + c).hide("fast");
$("#div" + ++c).show("fast");
if (c > 3) c=1;
});
First You have to add query basic file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then you have to add the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function(){
$(".slider_area").hide(1000);
$("#show").css("display","block");
$("#hide").css("display","none");
});
$("#show").click(function(){
$(".slider_area").show(1000);
$("#show").css("display","none");
$("#hide").css("display","block");
});
});
</script>
Add the code above into the header portion and the code below in the body portion.
<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />
The code is ready for the different image click for show and hide div.
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
if (temp1 == 0) {
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 1;
}
else{
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 0;
}
});
</script>

Categories

Resources