make HTML button disappear on click, then reappear after X time? - javascript

How do I make HTML button disappear on click, then reappear after 2 seconds? I found some ways of doing this but I need it to work with the code I already have. How can I accomplish this?
<script language="JavaScript">
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
window.setTimeout("ipwajax('disabletorch');",milliSeconds);
}
</script>
<input type="button" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">

<!--
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
-->
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
$("button").show(2000);/*2 sec time*/
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
this one will hide the button and reshow in 2 sec

$(document).ready(function(){
$("button").click(function(){
$(this).hide().show(2000);
});
});

Check this
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
document.getElementById('torch').style.display="none";
setTimeout(function(){ipwajax('disabletorch');document.getElementById('torch').style.display='inline'}, milliSeconds);
}
<input type="button" id = "torch" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">

Here you go http://jsfiddle.net/4eCrQ/
$('.first').on('click', function() {
$('.second').hide();
setTimeout(function() {
$('.second').show();
}, 2000);
});

Related

Show One Div and Hide Another Div when Click on button

What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>

jQuery - click then show function, then click again and show another function and so on.. Not clicked and show all functions

I'm trying to achieved something that when I click the paragraph my 1st function will run then click the paragraph again and the 2nd function will run, then click the paragraph again and the 3rd function will run and so on.. Not when I click the paragraph all of the functions will run, I have achieved only up to the 2nd function and now I'm stuck.
Here's the code..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
$("h1").hide();
$("h2").hide();
$("h3").hide();
function func1(){
$("h1").show();
}
function func2(){
$("h2").show();
}
function func3(){
$("h3").show();
}
function funcme(){
if($("p").click(func1)){
$("h1").show();
$(this).click(func2);
}
}
$(this).click(func3);
$("p").click(funcme);
});
</script>
</head>
<body>
<p>CLICK ME</p>
<h1>FUNC 1</h1>
<h2>FUNC 2</h1>
<h3>FUNC 3</h1>
</body>
</html>
This might be a more elegant solution?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
var counter = 0;
$('.section').hide();
$(".func-me").on('click', function (event){
$('.section').eq(counter).show();
counter++;
});
});
</script>
</head>
<body>
<button class="func-me">CLICK ME</button>
<p class="section">FUNC 1</p>
<p class="section">FUNC 2</p>
<p class="section">FUNC 3</p>
</body>
</html>
https://jsfiddle.net/vnavv1v7/
Have you try to create a flag? For example, your flag is set in zero. Then you make your first click, change your flag to 1. Then you make the second click, change your flag to 2... and so on...
I don't understand what you need to do in each click.. But I think something like this...
<script>
$(document).ready(function(){
$("h1").hide();
$("h2").hide();
$("h3").hide();
var flag = 0;
$("p").click(funcme(flag));
function funcme (flag){
if (flag == 0)
func1();
if (flag == 1)
func2();
if (flag == 2)
func3();
flag++;
}
function func1(){
$("h1").show();
}
function func2(){
$("h2").show();
}
function func3(){
$("h3").show();
}
}
</script>

jquery moving a copy of div animation

i've searched for hours on google and here on StackO for this little thing I wanna do but couldn't find an answer, so here it goes:
im building a shopping site. when a person clicks on "add cart" button I want to slide a copy of the img/div to the left and make it disappear after 2 seconds (NOT the original div so it won't break the order of the products).
How can I accomplish that?
html code:
http://pastebin.com/mMLMP035
Try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
cloneNode();
});
});
function cloneNode() {
var itm = document.getElementById("img");
var cln = itm.cloneNode(true);
var copy = document.getElementById("parent").appendChild(cln);
$(copy).animate({left: '250px'}); // Animate this tag
}
</script>
</head>
<body>
<button>Start Animation</button>
<div id="parent">
<div id="img" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>
</body>
</html>

Button onClick FadeIn Text

I'd like that somebody could give me an heads-up with the code to achieve this events:
User clicks a button;
Button disappears;
Text fades in saying "Saved!" in the SAME POSITION of the button;
Text fades out;
Button (from 2nd step) reappears.
Here's the code of the button:
<input type="submit" name="gravarpalp" value="Save" />
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#saveme').click(function() {
$('#saveme').fadeOut('slow', function() {
$('#saved').fadeIn('slow', function() {
$('#saved').fadeOut('slow', function() {
$('#saveme').fadeIn('slow', function() {
});
});
});
});
});
});
</script>
</head>
<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>
I would use jquery to accomplish this.
First, put the controls inside of a div with the following css properties set
<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>
Then add the following function in a script tag. This isn't tested though, it's just to get you started.
function() fadeEffect(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
setTimeout(function(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
}, 3000);
}
Check out this link. Looks like you should just be able to set the ForeColor of a Label to a color value that has a different alpha value.
button1.Visible = false;
//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)
button1.Visible = true;
I think you will need some sort of timer so the fade in and out isn't so instant. I'll try explaining better if you need.
EDIT: Sorry, I assumed this was a WinForms app... This won't work for a web application. Try using jQuery or javascript.

Have to click twice on jQuery

Hi. I have the following code that can also be seen live here: http://designliving.tk/test.html When you click on "View 360" the <div> and Text changes as you can see.
When you click on "this is an image" it should reset it back to "View 360" which it does.
Now the only problem is that when you click on "this is an image" you have to click on "view 360" twice to get the DIV to change again.
It should change on the first click. I have tried rearranging my code with no success.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('View Normal');
}, function() {
$('#imgThree').hide();
$('#imgNorm').show();
$(this).html('View 360');
});
$('#changeDiv').click(function() {
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('View 360');
});
});
</script>
<style type="text/css">
#imgThree {
display: none;
}
</style>
</head>
<body>
<div id="toggleDiv">View 360</div>
<br>
<br>
<div id="imgNorm">Normal Product Image Here</div>
<div id="imgThree">360 Spin Image Here</div>
<br>
<br>
<div id="changeDiv">
This is an image<br>
This is an image<br>
This is an image
</div>
</body>
</html>
Thank you all for helping.
$(document).ready(function(){
hide = function(){
$('#imgThree').hide();
$('#imgNorm').show();
$('#toggleDiv').html('View 360');
}
$('#toggleDiv').toggle(function() {
$('#imgThree').show();
$('#imgNorm').hide();
$(this).html('View Normal');
}, hide);
$('#changeDiv').click(function(){
if($('#imgThree:hidden').length > 0){
$('#toggleDiv').trigger('click');
}
});
});​
http://jsfiddle.net/HV39C/

Categories

Resources