Adding a class property dynamically

[kevinmtu]

Greetings,

I am trying to create new layers on the fly and give them a class property so that they can be draggable. For some reason they are not able to use the drab property even though I am giving them the class drag attribute. Here is the function that I use to add the new div layer. Drag is the name of the class that I want the new layers to use, it is also a javascript function.

function clickSchedule(id,L,T,W,H,bgColor,visible,zIndex) {
if (document.layers) {
if (document.layers[id]) {
alert ('Layer with this ID already exists!')
return
}
x=event.clientX
var LR=document.layers[id]=new Layer(W)
LR.name= id
LR.left= event.clientX
LR.top = T
LR.clip.height=H
LR.className = drag
LR.visibility=(null==visible || 1==visible ? 'show' : 'hide')

if(null!=zIndex) LR.zIndex=zIndex
if(null!=bgColor) LR.bgColor=bgColor
}
else if (document.all) {
if (document.all[id]) {
alert ('Layer with this ID already exists!')
return
}
var LR= '\n<DIV id='+id+' style="position:absolute'
+'; left:' +event.clientX
+'; top:'+T
+'; width:'+W
+'; height:'+H
+'; clip:rect(0,'+W+','+H+',0)'
+'; class: drag '
+'; border: #000000 2px solid'
+'; visibility:'+(null==visible || 1==visible ? 'visible':'hidden')
+(null==zIndex ? '' : '; z-index:'+zIndex)
+(null==bgColor ? '' : '; background-color:'+bgColor)

+'"></DIV>'

document.body.insertAdjacentHTML("BeforeEnd",LR)
}
}

Any ideas on what I am doing wrong? I am completely new to javascript coming from oo programming languages.

Thanks,
Kevin

[Twey]

Javascript is also fairly OO. You just can't define your own objects. I believe the drag script uses mouse events as well - the class is just to show it where to dynamically add them. You'll need to also add these in.

[kevinmtu]

So I can't just give them the drag property? I'll have to add the drag code into the clickSchedule function? Below is the code that I grabbed off of the site for dragging

var dragapproved=false
var z,x,y



function move(){
if (event.button==1&&dragapproved){
if(temp1+event.clientX-x < 550 && temp1+event.clientX-x > 200){
z.style.pixelLeft=temp1+event.clientX-x
/*z.style.pixelTop=temp2+event.clientY-y*/
return false
}
}
}

function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){

dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
/*y=event.clientY*/
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

- Kevin

[jscheuer1]

From the first post in this thread:

LR.className = drag

should be:

LR.className = 'drag'

because, unless I misunderstand, drag is the literal class name you wish assigned, not some variable or parameter, right? Literals must be quoted for assignment.

And, depending upon how the drag script works that may do it. Otherwise you may need to reinit it (the drag script) after assigning the new element its class name. From glancing at the code though, this should not be necessary, no promises on that one. Also, I am not vouching for the rest of your code that creates the element either.

[kevinmtu]

Thanks for your help! I think that I got it figured out, I am sure that not having ' ' around drag was part of my problem as was the fact that I was setting the class property inside of the style property and not outside of it where it belonged....whoops

thanks again,
Kevin