Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Please show me how to set this style tag with javascript

Reply
Thread Tools

Please show me how to set this style tag with javascript

 
 
applegreenss@gmail.com
Guest
Posts: n/a
 
      12-11-2006
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! )

 
Reply With Quote
 
 
 
 
KC
Guest
Posts: n/a
 
      12-11-2006
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

(E-Mail Removed) 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! )


 
Reply With Quote
 
 
 
 
Yorian
Guest
Posts: n/a
 
      12-11-2006
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
>
> (E-Mail Removed) 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! )


 
Reply With Quote
 
collintmiller@gmail.com
Guest
Posts: n/a
 
      12-12-2006
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!

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
how do u invoke Tag b's Tag Handler from within Tag a's tag Handler? shruds Java 1 01-27-2006 03:00 AM
how to set Link tag for style sheet in base page moondaddy ASP .Net 4 04-29-2004 12:44 AM
Need help with Style conversion from Style object to Style key/value collection. Ken Varn ASP .Net Building Controls 0 04-26-2004 07:06 PM
Javascript Style Switcher that remebers current site style in use Hardeep Rakhra HTML 8 01-15-2004 08:00 PM



Advertisments