I have a unique little script that I've included below which is designed to add a series of divs to a sliding panel triggered by a button click.
<script type="text/javascript">
// Clicking the button initiates the slide for the panel.
$('#button').click(function(){
$('.panel').slideToggle('slow');
});
// There are 100 specific divs being inserted.
var divsToPlace = 100;
for (i = 0; i < divsToPlace; i++) {
$( '<div/>', {'class': 'addDiv'}).appendTo('#addHere');
}
</script>
These divs create a puzzling formation: 100 squares arranged in a 10 by 10 grid, with no gaps between them and empty interiors.
.addDiv {
border: 1px solid #000;
margin-top: -1px;
margin-right: -1px;
float: left;
width: 10px;
height: 10px;
}
The desired outcome is a panel containing this grid-like pattern. The insertion of the divs via script is crucial.
However, there's an issue where the bottom border of the panel jumps up after the animation ends, leaving the divs positioned oddly between the panel and the rest of the page.
If you could provide help in resolving this dilemma, it would be greatly appreciated.
The complete code is provided here for ease of testing:
<html>
<head>
<style type="text/css">
#header {
margin: auto;
width: 100px;
text-align: center;
}
.addDiv {
border: 1px solid #000;
margin-top: -1px;
margin-right: -1px;
float: left;
width: 10px;
height: 10px;
}
.panel {
border: 1px solid #666;
display: none;
margin: auto;
width: 305px;
}
</style>
</head>
<body>
<div id='header'><button id='button'>Panel</button></div>
<div class='panel'>
List:
<ul>
<li>li 1</li>
<li>li 2</li>
</ul>
<div id='addHere'></div>
</div>
</body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$('#button').click(function(){
$('.panel').slideToggle('slow');
});
var divsToPlace = 100;
for (i = 0; i < divsToPlace; i++) {
$( '<div/>', {'class': 'addDiv'}).appendTo('#addHere');
}
</script>
</html>
P.S. If I need to reference one element multiple times, how should I do so?
// Like this?
/* ... code
$('#element').thing();
$('#element').another_thing();
... code ...
$('#element').more_thing();
code... */
// Or like this?
/* ... code
var element = $('#element');
element.thing();
element.another_thing();
... code ...
element.more_thing();
code... */