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>
Related
Aka: why are <div></div> and <div /> not equivalent to each other?
Consider the following HTML + js:
setTimeout(function() {
document.getElementById("message2").innerHTML = "blah";
}, 1000);
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="message2" />
<div id="message1" >Hello</div>
</body>
</html>
As you can see, when executing the snippet, first "Hello" is shown, and briefly afterwards, "Hello" disappears (*) and "blah" is shown. (I.e. the innerHTML of message2 was changed, and, as a side-effect, message1 disappeared.)
(*) I checked this on two different browsers (Linux/FF and Mac/Safari), so I'm quite confident this is not a browser-specific issue.
If, on the other hand, message2 is expanded to opening/closing tags, then changing its innerHTML won't affect message1:
setTimeout(function() {
document.getElementById("message2").innerHTML = "blah";
}, 1000);
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="message2" ></div> <!-- notice that it was expanded -->
<div id="message1" >Hello</div>
</body>
</html>
Questions:
Why does the other div disappear in the first case?
Why do the "compact" and the "expanded" form have different effects? (I thought they were fully equivalent.)
This div <div id="message2" /> is not closed as you think it is. Here is a list of HTML's self closing tags. Note that div is not one of them.
See this:
setTimeout(function() {
document.getElementById("message2").innerHTML = "blah";
}, 1000);
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="message2" >
<div id="message1" >Hello</div>
</div>
</body>
</html>
So in your second snippet you just change innerHTML of the first div, while second just sits there.
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>
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<button class="test" ng-click="a?'run()':'break()'">click=calling...{{a?'run()':'break()'}}</button>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Here i want to dynamically change the value of ng-click based on a value using conditional statement,but it is not working as expected.Please help me out
Thanks in advance
Change this line shown as below
Because it is already interpolated. You need not to mention ' ' again to call the scope function
<button class="test" ng-click="a?run():break()">click=calling...{{a?'run()':'break()'}}</button>
remove the single quote in the function
change this
{{a?'run()':'break()'}}
to this
{{a?run():break()}}
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<div class="test" ng-click="a?'run()':'break()'">click=calling....{{a?run():break()}}</div>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Here is the code from the book "HTML 5 + JS for Dummies", looking at it for more than 2 hours and can't find a reason why it doesn't want to work. I'm in very early stage and sorry for my newb question.
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script language ="JavaScript">
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onlick="WriteText()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script>
function WriteText()
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onclick="WriteText()"/>
</div>
</body>
</html>
Here's what i did/what was wrong:
You have used wrong syntax for functions or you forgot to use the function keyword
You misspelled onclick (onlick)
I moved the script part out of the head
Use setAttribute method because input filed have not innerHTML property.
`<script language ="JavaScript">
function WriteText()
{
document.getElementById("myText").setAttribute("value", "Clicked!");
}
</script>
</head>
`
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>