FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Image Position

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


DanielXP
Im making a little blog script so people can move images around and save it.

I have the database which records all the images.
The script to move the images.

But im just stuck on the saving the left and top position into the database.

This is my database,
Code:
CREATE TABLE `blogpics` (
`id` int(11) NOT NULL auto_increment,
`owner` varchar(55) NOT NULL,
`picurl` varchar(250) NOT NULL,
`left` varchar(250) NOT NULL,
`top` varchar(250) NOT NULL,
PRIMARY KEY (`id`)
) TYPE=MyISAM;


And basicly this is the code to get out all the images,
Code:
$query = mysql_query("SELECT * FROM `blogpics` WHERE `owner` = '$user'") or die (mysql_error());
while($row = mysql_fetch_array($query)){
echo '<img src="'.$row[picurl].'" style="position:relative; left:'.$row[left].'; top:'.$row[top].'" class="drag" id="'.$row[id].'">';
}


I want to create a funtion to save the images PHP or Javascript im not sure thats why i posted in this forum.

Code:
var x = document.getElementById(ID).left;
var y = document.getElementById(ID).top;


Thats what i tryed in JS and it worked but im not sure how to save all of the pictures in the database. (the new positions)

Thanks,
Daniel
mariohs
You can use ajax to do it. You can get the top / left values through javascript and then call a php page using xmlhttp object.
Example:

Code:
http://yoursite.net/saveposition.php?id=x&top=y&left=z


This way you can get top and left values as well as the image id in the database... and just process the SQL statements.
DanielXP
I know that but the thing i need is to get all the pictures displaying on that page and saving all of there positions.
mariohs
Well, you have to use javascript to get all images loaded in the document. Use the getElementsByTagName function to get all img tags in your document.

Code:
var img = document.getElementsByTagName("IMG");
for (var i=0; i<img.length; i++){
var id = img[i].id;
var top = img[i].top;
var left = img[i].left;
}


Note: Code above was written in 2 minutes and not tested Very Happy
DanielXP
OK.

And how about going saving them all at the same time?

Thanks,
Daniel
mariohs
Just call the function that save the image positions for each image.

Code:
var img = document.getElementsByTagName("IMG");
for (var i=0; i<img.length; i++){
var id = img[i].id;
var top = img[i].top;
var left = img[i].left;

//call ajax function passing parameters

saveimage(id, top, left);

}


Very Happy
DanielXP
It keeps saying the top and left vars are undefined.
mariohs
Quote:
Code:
var x = document.getElementById(ID).left;
var y = document.getElementById(ID).top;


You said that this code works, right (I didn't test this, just believed you Very Happy)? If it works, It should not be undefined unless the values aren't really set.
DanielXP
I fixed it.

Code:
var top = img[i].style.top;
var left = img[i].style.left;


That works

Thanks
mariohs
So... is everything ok? Did you get it to work?
DanielXP
Yup i got it all to work and every thing.

Thanks so much for your help!
Daniel
mariohs
No problems, we're here to help.
Anything, just feel free to ask Wink
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.