admin管理员组文章数量:1293040
<html>
<head>
<script type="text/javascript" src=".4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</head>
<body>
<div class="booktitle">
<p>
<font color="red">*</font>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">**
<font color="red">*</font>Title: <input type="text">
</div>
<font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>
The div with class "title" still takes up space between the "Book:" input and the "Page:" input, even though it's hidden! Other divs on this web page don't. How can I make it take up no space until the javascript is activated to slide it down?
Thank you!
EDIT: As requested, here is a screenshot of the problem. I'm trying to get rid of the gap between the Book input and the Title input. Before the 'title' input slides down: After the 'title' input slides down:
And here is my CSS:
<style type="text/css">
@import url("layout.css");
.page {
width: 50px;
}
.URL, .booktitle {
margin-left: 24px;
display:none;
}
.title {
display: none;
}
.newtag {
display:none;
}
.amount, .addtag {
width: 100px;
}
.details {
width: 275px;
}
</style>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</head>
<body>
<div class="booktitle">
<p>
<font color="red">*</font>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">**
<font color="red">*</font>Title: <input type="text">
</div>
<font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>
The div with class "title" still takes up space between the "Book:" input and the "Page:" input, even though it's hidden! Other divs on this web page don't. How can I make it take up no space until the javascript is activated to slide it down?
Thank you!
EDIT: As requested, here is a screenshot of the problem. I'm trying to get rid of the gap between the Book input and the Title input. Before the 'title' input slides down: After the 'title' input slides down:
And here is my CSS:
<style type="text/css">
@import url("layout.css");
.page {
width: 50px;
}
.URL, .booktitle {
margin-left: 24px;
display:none;
}
.title {
display: none;
}
.newtag {
display:none;
}
.amount, .addtag {
width: 100px;
}
.details {
width: 275px;
}
</style>
- have you tried with "visibility: hidden"? – Thea Commented Apr 23, 2012 at 6:47
- perhaps not the solution, but try closing your input tags. – 11684 Commented Apr 23, 2012 at 6:49
- @Teddy: Doesn't work; it still takes up space, and that makes it even worse because then when the javascript slides down the div, the text and input are invisible! – bumbleshoot Commented Apr 23, 2012 at 6:49
- @11684 they are closed?? – bumbleshoot Commented Apr 23, 2012 at 6:50
-
He means
<input type="text" />, but it's just a matter of preference. – JJJ Commented Apr 23, 2012 at 6:51
3 Answers
Reset to default 7It's not the div that's creating the space, it's the <br> you have right after it.
And please, get rid of the <font> tags. My eyes are bleeding.
If you are talking about the huge space under the Book drop down then that is because of the p tag that you have open in the HTML but forgot to close it. The p tag is adding the default margin. Hence the space. Remove the p tag and the margin should go away.
Also as I mentioned in the ments to your question always add a doctype to you page.
The font element is deprecated, use span here. You did not close your script element.
I cleaned up a bit and now you got this:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</script>
</head>
<body>
<div class="booktitle">
<span style="color:red">*</span>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">
<span style="color:red">*</span>
Title: <input type="text" />
</div>
<span style="color:red">*</span>
Page: <input type="text" class="page">
</div>
</body>
</html>
You can see the fiddle here: http://jsfiddle/Allan/cJ6Jq/ works for me.
本文标签： javascriptDiv within a div still taking up space even though displaynoneStack Overflow
版权声明：本文标题：javascript - Div within a div still taking up space even though display:none? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741569988a2385951.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论