I'm trying to get the line of codes below to fadeOut the form with the class ".quote" and replace it with the DIV that has the class ".thanks." when the button is clicked. it only works when you click on the input area but doesn't fadein div.thanks.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".quote, .thanks").click(function(){
$('form:fadeIn(:.thanks)').fadeOut (5000);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: hide;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
I'd also like to know how to make it get the visitors name and insert it in div.thanks.
I think this is what you are looking for...
$(".quote").click(function(){
$(this).fadeOut(5000, function(){
$(".thanks").fadeIn();
});
});
You need to use CSS to position both elements in the same location. Typically this involves using position:absolute and setting left: and right: CSS styles. Once that's set up correctly, you can use jQuery's fadeIn and fadeOut as you expect.
Related
I have html as
<div id ="div-1>
//some content
</div>
<div id ="div-2>
//some content
</div>
when i set display:none for div-1 is hides immediately , and div-2 comes on top abrubtly.
Is there any way that div-2 slides out to top, instead of coming directly.
PS
I have tried transition with max-height set to zero for div 1 but , it's not working.
EDIT
Hi, i am working on a js lib to swipe out html elements.
I just want a animated scroll for bottom elements , when div on top is set to display:none.
I only have reference for first div.
instead of setting display:none, you could set opacity:0 on div-1 and position div-2 on top of div-1 by using z-index and either css transitions to change the position, or use jquery animate.
You can use the slideUp jQuery method to easily achieve this.
jQuery slideUp() doc
Working example :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideUp demo</title>
<style>
div {
margin: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<button>Hide One</button>
<input type="text" value="One">
</div>
<div>
<button>Hide Two</button>
<input type="text" value="Two">
</div>
<div>
<button>Hide Three</button>
<input type="text" value="Three">
</div>
<div id="msg"></div>
<script>
$("button").click(function() {
$(this).parent().slideUp("slow", function() {
$("#msg").text($("button", this).text() + " has completed.");
});
});
</script>
</body>
</html>
it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.
<!--button gets clicked with ID="Import_audit" -->
$('#import_audit').click(function() {
$.post("edit_audits.php?action=import", function(data) {
//need HTML to go into DIV with id = "import_audit_table"
$('#import_audit_table').html(data);
});
});
<!--JQuery -->
<script src="../bootstrap/jquery/1.12.2/jquery.min.js"></script>
<!--button-->
<input type="button" value="Transfer Audit" id="import_audit" /> <!--div-->
<DIV id="import_audit_table"></DIV>
How can I make it so that when I click a button Jquery can load HTML into a DIV?
From mpf82, answer works. I had to put the script on the bottom of the page:
<input type="button" value="Transfer Audit" id="import_audit" />
<DIV id="import_audit_table"></DIV>
<style>
$(document).ready(function(){
$('#import_audit').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</style>
i have 2 div with relative position
user with a button fill first Div(innerHTML)
i want second Div move down when first Div Filled
show below link
Demo
Like this? jsFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
<div id='Content' style='position:relative;background-color:Green'>
</div>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
<div>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</body>
</html>
You had the nesting wrong in the <div>s.
It was really hard to understand your question, next time please write full sentences.
But I think I understood what you want to achieve.You can't just keep open divs, you have to close them. after the div just write </div>.If you open a div inside a div at least have some styling or other content, beside the inner-div, inside the parent-div.Fix those and it will work for you.
Here is the fixed code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
</div>
<div id='Content' style='position:relative;background-color:Green'>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
</div>
</body>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</html>
Is there any way to find the number of DIV's displayed in the browser with class=.class?
Something like this:
$('.class').Numberofobjects();
*Obviously Numberofobjects is made up.
Thanks!
Taylor
You want the length property (and make sure to constrain the tag type):
$('div.class').length
.length will give you the list of classes that match
$('.class').length
api here
http://api.jquery.com/length/
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert($("div.a").length);
});
</script>
</head>
<body>
<input type="button" id="mybutton" value="Click" />
<div class="a">
</div>
<div class="a">
<div class="a">
</div>
</div>
<div class="a">
</div>
</body>