Please show me how to set this style tag with javascript

Discussion in 'Javascript' started by applegreenss@gmail.com, Dec 11, 2006.

  1. Guest

    Hi, can someone please show me how to set the following conditions for
    this DIV tag?

    <div style="position:absolute;left:0px; top:0px;" id="changeme">HELLO
    WORLD</div>

    I want to be able to change the position to 'relative' and the top
    position to negative '-100px' with javascript

    Thank you! :))
     
    , Dec 11, 2006
    #1
    1. Advertising

  2. KC Guest

    I'm new to JavaScript, but I think you can do something like this:

    var obj=document.getElementById("changeme");
    obj.style.position = 'relative';
    obj.style.top = '-100px';


    KC

    wrote:
    > Hi, can someone please show me how to set the following conditions for
    > this DIV tag?
    >
    > <div style="position:absolute;left:0px; top:0px;" id="changeme">HELLO
    > WORLD</div>
    >
    > I want to be able to change the position to 'relative' and the top
    > position to negative '-100px' with javascript
    >
    > Thank you! :))
     
    KC, Dec 11, 2006
    #2
    1. Advertising

  3. Yorian Guest

    KC You are exactly right!

    But to make things a bit more easy you can put it in a function, like
    so:

    function changePosition(id,posType,x,y){
    var obj = document.getElementById(id);

    obj.style.position = posType;
    obj.style.left = x;
    obj.style.top = y;
    }

    Now you can use this function everytime you want to do a change like
    this bij calling the function: example:

    <div onclick="changePosition(this,'absolute', '-100px', '0px')">

    this should work as well and might make things a bit more handy.

    Yorian

    KC wrote:
    > I'm new to JavaScript, but I think you can do something like this:
    >
    > var obj=document.getElementById("changeme");
    > obj.style.position = 'relative';
    > obj.style.top = '-100px';
    >
    >
    > KC
    >
    > wrote:
    > > Hi, can someone please show me how to set the following conditions for
    > > this DIV tag?
    > >
    > > <div style="position:absolute;left:0px; top:0px;" id="changeme">HELLO
    > > WORLD</div>
    > >
    > > I want to be able to change the position to 'relative' and the top
    > > position to negative '-100px' with javascript
    > >
    > > Thank you! :))
     
    Yorian, Dec 11, 2006
    #3
  4. Guest

    Great stuff yorian!

    extra credit style-setting function for over-achievers:

    var myHelpers // Name space your code to avoid embarrassing collisions.
    // You might want to pick a more unique namespace.
    // com.yourSite is a pretty solid choice
    // Don't always have to do this, but if you want others to use your
    code, or to
    // user others code it's something to think about.

    myHelpers.setStyle = function( id, styles )
    {
    var style,
    element = document.getElementById( id )

    for ( style in styles ) // for each key in a { key: 'value' }
    construct
    {
    if ( styles.hasOwnProperty( style ) // don't want to go running
    up the prototype chain
    {
    element.style[ style ] = styles[ style ]
    }
    }
    }

    Use it like:

    myHelpers.setStyle( 'someElement', { color: '#fff', backgroundColor:
    '#454545' } )

    Happy scripting!
     
    , Dec 12, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. moondaddy
    Replies:
    4
    Views:
    502
    Steven Cheng[MSFT]
    Apr 29, 2004
  2. shruds
    Replies:
    1
    Views:
    962
    John C. Bollinger
    Jan 27, 2006
  3. KK
    Replies:
    2
    Views:
    728
    Big Brian
    Oct 14, 2003
  4. Ken Varn
    Replies:
    0
    Views:
    538
    Ken Varn
    Apr 26, 2004
  5. nick
    Replies:
    3
    Views:
    412
    Grant Wagner
    Jun 15, 2004
Loading...

Share This Page