PDA

View Full Version : Different CSS for different DHTML window instances?



finger
09-03-2008, 02:09 PM
DHTML window script: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

Is there any way to customize the script in order to select diferent CSS when open the window? I mean, having for example .drag-contentarea and .drag-contentarea-2, and calling from "attr" the style 1 or 2?

In this way we can have the option for diferent CSS styles.

Thanks in advance

finger
09-03-2008, 05:54 PM
Is there any way to customize the script in order to select diferent CSS when open the window? I mean, having for example .drag-contentarea and .drag-contentarea-2, and calling from "attr" the style 1 or 2?

In this way we can have the option for diferent CSS styles.


Ok, I got something. I guess the code it is not so "elegant" because I sucks in javascript. However I faced a problem: I am able to select color background like "334455", but not using letters like "ff0000".

I'd appreciate some help.

Here is the code changes:
Take a look at //change the background color of contentarea and //change the background color of handle



open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtml window object
function getValue(Name){
var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found
}
if (document.getElementById(t)==null) //if window doesn't exist yet, create it
t=this.init(t) //return reference to dhtml window div
else
t=document.getElementById(t)
t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
//modificação para seguir a posicao do mouse
if (getValue("pmousey") != ""){
var ypos=getValue("center")? "middle" : event.y + (getValue("pmousey")) //Get y coord of window
}else{
var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window
}
if (getValue("pmousex") != ""){
var xpos=getValue("center")? "middle" : event.x + (getValue("pmousex")) //Get x coord of window
}else{
var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window
}
//change the background color of contentarea
if (getValue("ctback") != ""){
var ctbackground=getValue("ctback")
t.contentarea.style.background=ctbackground
}
//change the background color of handle
if (getValue("hdback") != ""){
var hdbackground=getValue("hdback")
t.handle.style.background=hdbackground
}
//t.moveTo(xpos, ypos) //Position window
if (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){ //reposition window when page fully loads with updated window viewpoints?
if (window.attachEvent && !window.opera) //In IE, add another 400 milisecs on page load (viewpoint properties may return 0 b4 then)
this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")
else
this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")
}
t.isResize(getValue("resize")) //Set whether window is resizable
t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
t.style.visibility="visible"
t.style.display="block"
t.contentarea.style.display="block"
t.moveTo(xpos, ypos) //Position window
t.load(contenttype, contentsource, title)
if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently minimized?
t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0]) //Change "restore" icon within window interface to "minimize" icon
t.controls.firstChild.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
}
return t
},

ddadmin
09-04-2008, 03:29 AM
Yep you can specify additional, different CSS to be applied to different instances of DHTML window on your page. This is possible since each DHTML window carries a unique ID for its outermost DIV, which you can target using CSS. See this thread for more info: http://www.dynamicdrive.com/forums/showthread.php?t=29965

finger
09-13-2008, 04:45 AM
Thank you. It works very well!