using scriptaculous - Draggable find id from getElementsByClassName

benf posted this at 20:29 — 2nd January 2009.

Joined: Feb 2005

the function below creates a new element and places a few on the page when the page loads. I loop through specific tag names and insert this new div as appendchild. It works fine

function div(){ var randint = Math.floor(Math.random()*100); var newdiv = document.createElement("div"); newdiv.className = 'elm'; newdiv.id = randint; newdiv.style.display = 'none'; newdiv.style.padding = '5px'; newdiv.innerHTML = content();

return newdiv;
}

The only problem is trying to get the scriptaculous function "Draggable" to work.

I have tried adding the following line:

     new Draggable(randint);  // where randint is the random id i gave the div when i created it.

It doesnt work.

Any ideas?

Good Value Professional VPS Hosting

decibel.places posted this at 23:47 — 2nd January 2009.

He has: 1,494 posts

Joined: Jun 2008

Hi Ben,

Try declaring the variable randint globally (not inside the function) - and newdiv as well...

var randint;
var newdiv;

function div(){
randint = Math.floor(Math.random()*100);
newdiv = document.createElement("div");
newdiv.className = 'elm';
newdiv.id = randint;
newdiv.style.display = 'none';
newdiv.style.padding = '5px';
newdiv.innerHTML = content();

return newdiv;
}

a link to your page or attached file would help -

[EDIT]
I just noticed you are not displaying the newdiv newdiv.style.display = 'none'; - so unless you are changing this property elsewhere, the newdiv will not be displayed...

benf posted this at 01:34 — 3rd January 2009.

They have: 426 posts

Joined: Feb 2005

Hi Decibel,

I change the status of the display when i rollover a link attached to each newdiv element.

This works - if i loop through all the newdivs which i have given a className and add the onmouseover event:

var drag = document.getElementsByClassName('elm');
	for(var j=0;j<drag.length;j++){
			drag[j].onmouseover = function(){
				
									new Draggable(this.id, { 
											  		scroll: window ,
													ghosting: false
											  });
								}
			drag[j].style.cursor = 'move';
	}

I added this to the end of the function that loads up first on onload.

One additional problem i encountered is that when i move the element the space where it had been sitting still exists and will not close up.

Good Value Professional VPS Hosting

decibel.places posted this at 11:44 — 3rd January 2009.

He has: 1,494 posts

Joined: Jun 2008

Ben,

It's pretty difficult to troubleshoot without seeing it all together.

If you can't provide a URL, you can attach an html file
(if it's not an html page, eg PHP, you can attach the generated source as html)