changing CSS dynamically..

Discussion in 'Web Design, HTML And CSS' started by Bhullarz, Apr 1, 2009.

  1. Bhullarz

    Bhullarz New Member

    Joined:
    Nov 15, 2006
    Messages:
    253
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    System Manager
    Home Page:
    http://www.tutors161.com
    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".
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Its marginLeft and not margin-left
     
  3. Bhullarz

    Bhullarz New Member

    Joined:
    Nov 15, 2006
    Messages:
    253
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    System Manager
    Home Page:
    http://www.tutors161.com
    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 ?
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    It should.

    Check this

    HTML:
    <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.
     
  5. Bhullarz

    Bhullarz New Member

    Joined:
    Nov 15, 2006
    Messages:
    253
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    System Manager
    Home Page:
    http://www.tutors161.com
    thanks. it worked for me. Can you guide me where can I get cross-browser scripting tips ?
     
  6. Bhullarz

    Bhullarz New Member

    Joined:
    Nov 15, 2006
    Messages:
    253
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    System Manager
    Home Page:
    http://www.tutors161.com
    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??
     
  7. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Try getting them into a variable and then add them as numbers
     
  8. Bhullarz

    Bhullarz New Member

    Joined:
    Nov 15, 2006
    Messages:
    253
    Likes Received:
    13
    Trophy Points:
    0
    Occupation:
    System Manager
    Home Page:
    http://www.tutors161.com
    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
     
    Last edited: Apr 4, 2009
  9. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    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
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice