/    Sign up×
Community /Pin to ProfileBookmark

Help! set position of image using javascript?

Copy linkTweet thisAlerts:
Mar 31.2005

I’m trying to determine the position of images & text using javascript. I’ve been using something like:

document.write(“<a href=”+recentarrivals[i].url+”><img src=”+recentarrivals[i].image+” height = ‘185px’ width = ‘120px’ alt=’image’ /></a>”)

and then

document.write(recentarrivals[i].author.fontcolor(“#000000”)+recentarrivals[i].description.italics());

which works, more or less, as long as I know how many images I’m going to use, so I can place each part in a separate div with css formatting. But I want to call the images (& text) from an n-sized array, so I have to use a js loop, which as far as I can figure eliminates the ability to place each part inside a div box. None of the attempts I’ve made using the style method seem to work (which makes sense, the content of the array isn’t an element in the page, it’s in another file.). Hope that’s clear — can anyone help?

Thanks!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 01.2005 — First you need a way to reference the image. By id, by Name(and index) by TagName (and index). Let's say id

<body>

<img src="mypic.jpg" id="blah">

</body>

Now the position is to be found using offset attributes

x=document.getElementById('blah').offsetLeft

y=document.getElementById('blah').offsetTop

Unfortunately, it is not so easy, as offset attributes are [b]relative[/b] to the parent(s), if any. For the simple exemple above it will work, as the parent is the body itself. But the object is nested, things go a little bit more intricate, as you have to circle up through the parents (till the body)and sum all the relative position there might be:

var obj=document.getElementById('blah');

while(obj.offsetParent){

if(obj==document.getElementsByTagName('body')[0]){break;}

else{

x=x+obj.offsetParent.offsetLeft;

y=y+obj.offsetParent.offsetTop;

obj=obj.offsetParent;

}

}
Copy linkTweet thisAlerts:
@GnatauthorApr 01.2005 — Kor--

Thanks! I'll try it. In the meantime, I think I solved my problem, so:

document.write("<div style ='position:absolute; width: 125px;left:"+lpos+";top:"+tpos+"'><a href="+recentarrivals[i].url+"><img src="+recentarrivals[i].image+" height = '185px' width = '120px' alt='image' /></a><br />")

document.write("<span >"+recentarrivals[i].author.fontcolor("#000000")+"<br />"+recentarrivals[i].description.italics()+" </span></div>");



I.e. using div style tags embedded in the js code. It seems messy. Anybody have reasons for doing it one way or the other?
Copy linkTweet thisAlerts:
@KorApr 01.2005 — well, if you already gave your elements an absolute position, the problem is much simplier

just get the

[i]object[/i].style.left

[i]object[/i].style.top

and these are the absulte x-y postions to use them later

Cheers ?
Copy linkTweet thisAlerts:
@GnatauthorApr 03.2005 — Kor--

Preferring relative positioning I've gone back to your first answer. But I can't figure out how to use what you've given me.

I've tried re-positioning the element with the new information this way:

obj.offsetTop = (j+1)* x

but it doesn't seem to work.

Can you give me a clue?

--Nat
Copy linkTweet thisAlerts:
@KorApr 04.2005 — 
I've tried re-positioning the element
[/quote]
all the [b]offset[/b] attributes are read-only, thus you can not modify them. You may use on-the-fly CSS methods... What do you intend to do? Can u give us details?
Copy linkTweet thisAlerts:
@llanitedaveApr 07.2005 — I've done something with just images in a gravitational simulator.


First, I put each image in an object, along with other data that represents the body being simulated, and create an array to hold the objects.

My loop goes something like this:

[CODE]
//calculate screen positions
for(var i = 0; i < vluNumBodies; i++)
{
vluLeftPos = Math.round(fnXalgorithm(aryBodyData[i]));
vluTopPos = Math.round(fnYalgorithm(aryBodyData[i]));
vluCSSBodies += "#bodyNum" + i + " {position: absolute; left: ";
vluCSSBodies += vluLeftPos + "px; top: " + vluTopPos + "px;}";
vluDivHTML += "<div id = bodyNum" + i + "><img src = ";
vluDivHTML += aryBodyData[i].image.src + "></div>";
}
[/CODE]

Every image is in its own [COLOR=Indigo][B]div[/B][/COLOR] block, given the name "[COLOR=Indigo][B]bodyNum[/B][/COLOR]" with the array index appended. That makes the divs easier to manipulate.

Then all I have to do is open the document, if it isn't already, and write it with

[COLOR=DarkRed][B]document.write(vluDivHTML);[/B][/COLOR]

That positions and displays all your images in one swoop.

Hope this helps...
Copy linkTweet thisAlerts:
@HaganeNoKokoroApr 07.2005 — Dave, is that at all related to what you were making in [url=http://www.webdeveloper.com/forum/showthread.php?t=44453]this thread[/url]?
Copy linkTweet thisAlerts:
@llanitedaveApr 08.2005 — Dave, is that at all related to what you were making in [url=http://www.webdeveloper.com/forum/showthread.php?t=44453]this thread[/url]?[/QUOTE]

That's exactly the one. And your advice in that thread helped a lot -- I generated several megabytes of what was essentially a text ephemeris with no slowdowns.

I haven't published that application yet, because it's only tested in Mozilla and Safari. I doubt that it will run on I.E. But I've had lots of fun with it, and I'm still adding features, and learning as I go.
×

Success!

Help @Gnat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...