i want to show hide div onclick jquery slowly when i click the button.this div will have result from database .i want it when it opened open with slow motion.
<head runat="server">
<title></title>
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery-1.11.1.min.js">
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").slideDown('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
Use the toggle function of jQuery:
<script>
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").toggle("slow");
});
});
</script>
Toggle function is used to show the div if it is hide and to hide if it is visible.
You can also pass the time in seconds in instead of "slow".
Few things:
You can't set a src in your script tag and then have script inside that - it must be closed:
Your buttons have a server generated ID (caused by runat="server") - so you need to use the ClientID
Your div doesn't need to include runat="server" - I suspect you're only doing this for the Visible="false attribute. Instead, use CSS
slideDown also takes a time in milliseconds as a parameter
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
Related
Hey I can hide my divs but my problem is if I reload my page I always see the hidden div for one second.
Do someone know how to fix that?
To tackle this kind of issue, you need to have the <div> with an attribute hidden or something in the inline. Then you need to hide it with JS and the remove the inline thing.
$(function () {
$(".hide").hide().removeClass("hide");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">I am not shown</div>
Method 2: Using hidden attribute.
$(function () {
$(".hide").hide().removeAttr("hidden");
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
Method 3: Using hidden attribute and .prop().
$(function () {
$(".hide").hide().prop("hidden", false);
});
.hide {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>I am not shown</div>
In the CSS that you apply to your div, add:
display:none;
So the div will be loaded but invisible. When you need to you it, you can do as you are doing now
Just add hidden attribute to your div and it should fix your problem then remove it by javascript when you want to show it
$(document).ready(function() {
$('#myDiv').hide();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"><p>hello</p></div>
</body>
Yes you can create the div by javascript.
var div = document.createElement("Div");
var text = document.createTextNode("this is my Div")
div.appendChild(text);
document.body.appendChild(div);
<body>
</body>
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>
I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well
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.
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);
});