Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Forums (http://www.go4expert.com/forumdisplay.php?f=30)
-   -   changing CSS dynamically.. (http://www.go4expert.com/showthread.php?t=16753)

Bhullarz 1Apr2009 15:22
changing CSS dynamically..
 
here is the code:
Code:
<head>
<script type="text/javascript">
function setpad()
        {alert(document.getElementById("complete").style.margin-left);}
</script>
<style type="text/css">
#complete{
margin-left:180px;}
</style>
</head>
<body onload="setpad();">
<div id="complete">
text data
</div>
</body>
I am unable to access property of div "complete" ie. margin-left. What could be the other way to change it?
I a getting the error that "left is undefined".

shabbir 1Apr2009 16:24
Re: changing CSS dynamically..
 
Its marginLeft and not margin-left

Bhullarz 1Apr2009 21:31
Re: changing CSS dynamically..
 
Quote:
Originally Posted by shabbir (Post 45145)
Its marginLeft and not margin-left
I am using Dreamweaver which shows margin-left. not marginLeft. by the way, marginLeft didn't work.
I am trying to setup the div in the middle of the screen independent of screen resolution.
How can I ?

shabbir 1Apr2009 21:43
Re: changing CSS dynamically..
 
It should.

Check this

HTML Code:
<html>
<head>
<script language="JavaScript">
function setMargin(){
  document.getElementById("myButton").style.marginLeft = 200;
}
</script>
</head>
<body>
<input type="button" id="myButton" value="Click Me" onclick="setMargin()">
</body>
</html>
Now screen.width would help to get it centered.

Bhullarz 3Apr2009 17:05
Re: changing CSS dynamically..
 
Quote:
Originally Posted by shabbir (Post 45173)
It should.

Check this

HTML Code:
<html>
<head>
<script language="JavaScript">
function setMargin(){
  document.getElementById("myButton").style.marginLeft = 200;
}
</script>
</head>
<body>
<input type="button" id="myButton" value="Click Me" onclick="setMargin()">
</body>
</html>
Now screen.width would help to get it centered.
thanks. it worked for me. Can you guide me where can I get cross-browser scripting tips ?

Bhullarz 3Apr2009 17:49
Re: changing CSS dynamically..
 
Code:
window.onscroll=function(){
document.getElementById("content").style.marginTop = document.getElementById("content").style.marginTop + document.body.scrollTop
}
using this code, I am trying to fix the div id="content" in the center while scrolling the page up/down. but this code is not working as value of marginTop and value of scrollTop are not getting added here, instead of that, it is getting concatenated..
How to fix this problem??

shabbir 3Apr2009 21:37
Re: changing CSS dynamically..
 
Try getting them into a variable and then add them as numbers

Bhullarz 4Apr2009 17:28
Re: changing CSS dynamically..
 
Quote:
Originally Posted by shabbir (Post 45288)
Try getting them into a variable and then add them as numbers
Code:
<script type="text/javascript">
var margin;
function setScrollPage(){
        document.getElementById("content").style.marginTop = parseInt(margin) + parseInt(window.document.body.scrollTop)
        document.title = document.getElementById("content").style.marginTop
}
window.onscroll = function(){
        setScrollPage()                       
}
</script>
I tried as u said. but still its not working. moreover IE is not setting the DIV in the center whereas FIREFOX successfully running the script of centering the DIV

shabbir 4Apr2009 20:00
Re: changing CSS dynamically..
 
May be you need to see the scroll bar width.

Also IE compatibility is always an issue and let us know how it is not working in IE


All times are GMT +5.5. The time now is 08:03.