I have an HTML page that has a div that is position absolutely. I'm trying to write some Javascript that would dynamically move the div down whenever some data before it is generated. I've been playing with the .css jquery function but it does not appear to be working. Any ideas on how this can be accomplished?
I have the following div that is positioned on my page with the styles below it.
<div id="MyControl">
<%Html.RenderPartial("MyControl")%>
</div>
#MyControlControl {
position:absolute;
text-align:开发者_如何学运维left;
left:100px;
top:900px;
}
In the main part of my html i'm building a dynamic table with records from a database. Whenever a new row is added I want to call some sort of Javascript to move the div down by 50 px. I've tried both javascript (document.getElementByID gives me an object expected error) and jquery .css function. I can't get either to work.
Grab the position using jQuery and increment it.
var d = $('#mydiv');
// Move down by 50px
d.css({top:d.position().top+50+'px'});
If you know the number of units to move it down, you could achieve it using:
var obj = document.getElementById('<div id>');
obj.style.height = '<new height><units>'; i.e. '15px';
Edit
I didn't see you were using jQuery until after I posted.
Can you not just add 50px to the top attribute?
var myControl = document.getElementById("MyControl");
var oldTop = parseInt(myControl.style.top);
myControl.top = oldTop +50;
so. Assuming you have a div with rules
div.fixed{
position:absolute;
top:10px;
left:10px;
}
and some javascript
...
$('.fixed').css('top','20px');
...
you've moved the absolute DIV with class .fixed to be 20 pixels from the top of the page.. we really need to see some actual code to help you out any better...
精彩评论