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>
Related
I have a page like this:
----------------------
.header
----------------------
.content
.hidden-element (fixed right side)
----------------------
.footer
----------------------
I want to show the hidden element when you only scroll on content section.
For example you start to scroll down from header section. When you come to content section, hidden element will appear. If you scroll down again and come to footer section, hidden element will be hidden again.
How can I do that?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.myDiv').hide(1000);
}
else {
$('.myDiv').show(1000);
}
});
</script>
<br />
<div style="height:400px"></div>
<div class="myDiv">
<ul>
<li>Arunachal Pradesh</li>
<li>Himachal Pradesh</li>
<li>Uttar Pradesh</li>
<li>Madhya Pradesh</li>
<li>Andhra Pradesh</li>
</ul>
</div>
<div style="height:1000px"></div>
</body>
</html>
please check the above code
this sample code is so easy 2 main functionn
$(window).scroll()
is detect scroll event of page
if($(this).scrollTop() > 300)
check the pixel of scrolling from top of page when is more than 300 then hide the div or show the div in else condition.
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().
In the following code, how can I move the <div class="move">I was moved to the parent.</div> after the parent of the element I click, when I click Add New.
I have everything right, but I cannot do the part where I need to move it after() the parent.
Can you please help?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.add').click(function() {
$("#container").find('.flag, .edit, .delete').remove();
$(this).parent("div").after(".move");
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers <span class="add" data-id="US01">Add New</span></div>
<div class="h2" data-id="2">Who is your favorite Math teacher? <span class="add" data-id="US02">Add New</span></div>
<br>
<div class="h1" data-id="8">Restaurants <span class="add" data-id="US10">Add New</span></div>
<div class="h2" data-id="9">Which is your favourtie restaurant in town? <span class="add" data-id="US20">Add New</span></div>
<div class="move">I was moved to the parent.</div>
</div>
</body>
</html>
.after() doesn't accept selectors, currently you are inserting .move string after the selected element. You can use .insertAfter() method instead:
$(".move").insertAfter(this.parentNode);
http://jsfiddle.net/RYzpG/
try this fiddle http://jsfiddle.net/QP3MZ/
$(document).ready(function () {
$('.add').click(function () {
$("#container").find('.flag, .edit, .delete').remove();
var $move = $('#container .move');
$(this).parent("div").after($move);
});
});
This code should work.
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$("#container").find('.flag, .edit, .delete').remove();
$('.move').insertAfter($(this).parent());
//Or (Note we have to pass a jQuery element inside after, if we pass string then it will copy the string instead)
//$(this).parent('div').after($('.move'));
});
});
Also here is a jsfiddle. The reason why yours wasn't working is you are passing a string inside the .after, which jQuery would treat as an HTML string. You had to pass a jQuery element or DOM element. See it here.
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>
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.