Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

DHTML Window "Bleedthrough"

Fix DHTML Window Bleedthrough



9:46 pm on Apr 28, 2012 (gmt 0)

5+ Year Member

I just created a dhtml popup window photo gallery and everything is working great except I am getting a "bleedthrough" (for lack of the correct word) from the underlying window.

The "bleedthrough is coming from the "AdChoices" buttons on ads on the window underlying the dhtml popup window.

Not sure what to even call this and I have been search for a solution with no results.


9:50 pm on Apr 28, 2012 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

You do realise that anything that obscures or interferes with or changes the aspect of the adsense, can get you thrown out of adsense ..?


9:59 pm on Apr 28, 2012 (gmt 0)

5+ Year Member

Yes, I do not want interfere with the ads in anyway. I just wanted to convert my photo galleries from lighbox2 to dhtml windows and I don't feel that a photo gallery popup window is interfering in anyway with ads. Am I wrong about this? I just don't want to see the "AdChoices" icon, from the window below, on my images.

The advertisements that I am using are actually from Tribal Fusion who is apparently now adding the "AdChoices" icon too.


10:07 pm on Apr 28, 2012 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Am I wrong about this?

No :-) ..thought you were on adsense..was merely warning you "in case"..Google tend to shoot first and ignore you later..


1:18 am on Apr 29, 2012 (gmt 0)

5+ Year Member

Thanks, this "AdChoices" icon bleed-through has me stumped. Is there a better term to describe this situation?


1:26 am on Apr 29, 2012 (gmt 0)

5+ Year Member

Here is the Code:

var dhtmlwindow={
imagefiles:['/files/min.gif', '/files/close.gif',
'/files/restore.gif', '/files/resize.gif'], //Path to 4 images used by script, in that order
ajaxbustcache: true, //Bust caching when fetching a file via Ajax?
ajaxloadinghtml: '<b>Loading Page. Please wait...</b>', //HTML to show while window fetches Ajax Content?

minimizeorder: 0,
tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes
lastactivet: {}, //reference to last active DHTML window

var domwindow=document.createElement("div") //create dhtml window div
var domwindowdata=''
domwindowdata='<div class="drag-handle">'
domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[1]+'" title="Close" /></div>'
domwindowdata+='<div class="drag-contentarea"></div>'
domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[3]+') top right no-repeat;">&nbsp;</div></div>'
//this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus
var t=document.getElementById(t)
var divs=t.getElementsByTagName("div")
for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefix
if (/drag-/.test(divs[i].className))
t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name
//t.style.zIndex=this.zIndexvalue //set z-index of this dhtml window
t.handle._parent=t //store back reference to dhtml window
t.resizearea._parent=t //same
t.controls._parent=t //same
t.onclose=function(){return true} //custom event handler "onclose"
t.onmousedown=function(){dhtmlwindow.setfocus(this)} //Increase z-index of window when focus is on it
t.handle.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on handle div
t.resizearea.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on resize div
t.show=function(){dhtmlwindow.show(this)} //public function for showing dhtml window
t.hide=function(){dhtmlwindow.hide(this)} //public function for hiding dhtml window
t.close=function(){dhtmlwindow.close(this)} //public function for closing dhtml window (also empties DHTML window content)
t.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)} //public function for setting window dimensions
t.moveTo=function(x, y){dhtmlwindow.moveTo(this, x, y)} //public function for moving dhtml window (relative to viewpoint)
t.isResize=function(bol){dhtmlwindow.isResize(this, bol)} //public function for specifying if window is resizable
t.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)} //public function for specifying if window content contains scrollbars
t.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)} //public function for loading content into window
return t //return reference to dhtml window div

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
t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window
var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window
//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")
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.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

setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
t.style.width=Math.max(parseInt(w), 150)+"px"
t.contentarea.style.height=Math.max(parseInt(h), 100)+"px"

moveTo:function(t, x, y){ //move window. Position includes current viewpoint of document
this.getviewpoint() //Get current viewpoint numbers
t.style.left=(x=="middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"
t.style.top=(y=="middle")? this.scroll_top+(this.docheight-t.offsetHeight)/21+"px" : this.scroll_top+parseInt(y)+"px"

isResize:function(t, bol){ //show or hide resize inteface (part of the status bar)
t.statusarea.style.display=(bol)? "block" : "none"
t.resizeBool=(bol)? 1 : 0

isScrolling:function(t, bol){ //set whether loaded content contains scrollbars
t.contentarea.style.overflow=(bol)? "auto" : "hidden"

load:function(t, contenttype, contentsource, title){ //loads content into window plus set its title (3 content types: "inline", "iframe", or "ajax")
if (t.isClosed){
alert("DHTML Window has been closed, so no window to load contents into. Open/Create the window again.")
var contenttype=contenttype.toLowerCase() //convert string to lower case
if (typeof title!="undefined")
if (contenttype=="inline")
else if (contenttype=="div"){
var inlinedivref=document.getElementById(contentsource)
t.contentarea.innerHTML=(inlinedivref.defaultHTML || inlinedivref.innerHTML) //Populate window with contents of inline div on page
if (!inlinedivref.defaultHTML)
inlinedivref.defaultHTML=inlinedivref.innerHTML //save HTML within inline DIV
inlinedivref.innerHTML="" //then, remove HTML within inline DIV (to prevent duplicate IDs, NAME attributes etc in contents of DHTML window
inlinedivref.style.display="none" //hide that div
else if (contenttype=="iframe"){
t.contentarea.style.overflow="hidden" //disable window scrollbars, as iframe already contains scrollbars
if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it first
t.contentarea.innerHTML='<iframe src="" frameborder="0" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'
window.frames["_iframe-"+t.id].location.replace(contentsource) //set location of iframe window to specified URL
else if (contenttype=="ajax"){
this.ajax_connect(contentsource, t) //populate window with external contents fetched via Ajax
t.contentarea.datatype=contenttype //store contenttype of current window for future reference

var d=dhtmlwindow //reference dhtml window object
var t=this._parent //reference dhtml window div
d.etarget=this //remember div mouse is currently held down on ("handle" or "resize" div)
var e=window.event || e
d.initmousex=e.clientX //store x position of mouse onmousedown
d.initx=parseInt(t.offsetLeft) //store offset x of window div onmousedown
d.width=parseInt(t.offsetWidth) //store width of window div
d.contentheight=parseInt(t.contentarea.offsetHeight) //store height of window div's content div
if (t.contentarea.datatype=="iframe"){ //if content of this window div is "iframe"
t.style.backgroundColor="#F8F8F8" //colorize and hide content div (while window is being dragged)
document.onmousemove=d.getdistance //get distance travelled by mouse as it moves
if (t.contentarea.datatype=="iframe"){ //restore color and visibility of content div onmouseup
return false

var d=dhtmlwindow
var etarget=d.etarget
var e=window.event || e
d.distancex=e.clientX-d.initmousex //horizontal distance travelled relative to starting point
if (etarget.className=="drag-handle") //if target element is "handle" div
d.move(etarget._parent, e)
else if (etarget.className=="drag-resizearea") //if target element is "resize" div
d.resize(etarget._parent, e)
return false //cancel default dragging behavior

getviewpoint:function(){ //get window viewpoint numbers
var ie=document.all && !window.opera
var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsers
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
this.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
this.docwidth=(ie)? this.standardbody.clientWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(domclientWidth, window.innerWidth)
this.docheight=(ie)? this.standardbody.clientHeight: window.innerHeight

rememberattrs:function(t){ //remember certain attributes of the window when it's minimized or closed, such as dimensions, position on page
this.getviewpoint() //Get current window viewpoint numbers
t.lastx=parseInt((t.style.left || t.offsetLeft))-dhtmlwindow.scroll_left //store last known x coord of window just before minimizing
t.lasty=parseInt((t.style.top || t.offsetTop))-dhtmlwindow.scroll_top
t.lastwidth=parseInt(t.style.width) //store last known width of window just before minimizing/ closing

move:function(t, e){

resize:function(t, e){
t.style.width=Math.max(dhtmlwindow.width+dhtmlwindow.distancex, 150)+"px"
t.contentarea.style.height=Math.max(dhtmlwindow.contentheight+dhtmlwindow.distancey, 100)+"px"

var d=dhtmlwindow
var sourceobj=window.event? window.event.srcElement : e.target //Get element within "handle" div mouse is currently on (the controls)
if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control
d.minimize(sourceobj, this._parent)
else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control
d.restore(sourceobj, this._parent)
else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control
return false

minimize:function(button, t){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized" //indicate the state of the window as being "minimized"
if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windows
dhtmlwindow.minimizeorder++ //increment order
t.style.left="10px" //left coord of minmized window
var windowspacing=t.minimizeorder*10 //spacing (gap) between each minmized window(s)

restore:function(button, t){
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
if (t.resizeBool) //if this window is resizable, enable the resize icon
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px" //position window to last known x coord just before minimizing

var closewinbol=t.onclose()
catch(err){ //In non IE browsers, all errors are caught, so just run the below
var closewinbol=true
finally{ //In IE, not all errors are caught, so check if variable isn't defined in IE in those cases
if (typeof closewinbol=="undefined"){
alert("An error has occured somwhere inside your \"onclose\" event handler")
var closewinbol=true
if (closewinbol){ //if custom event handler function returns true
if (t.state!="minimized") //if this window isn't currently minimized
dhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closing
if (window.frames["_iframe-"+t.id]) //if this is an IFRAME DHTML window
t.isClosed=true //tell script this window is closed (for detection in t.show())
return closewinbol

setopacity:function(targetobject, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
if (!targetobject)
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
else //IE 5.5
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax

setfocus:function(t){ //Sets focus to the currently active window
t.isClosed=false //tell script this window isn't closed (for detection in t.show())
this.setopacity(this.lastactivet.handle, 0.5) //unfocus last active window
this.setopacity(t.handle, 1) //focus currently active window
this.lastactivet=t //remember last active window

if (t.isClosed){
alert("DHTML Window has been closed, so nothing to show. Open/Create the window again.")
if (t.lastx) //If there exists previously stored information such as last x position on window attributes (meaning it's been minimized or closed)
dhtmlwindow.restore(t.controls.firstChild, t) //restore the window using that info
t.state="fullview" //indicate the state of the window as being "fullview"


ajax_connect:function(url, t){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
page_request.onreadystatechange=function(){dhtmlwindow.ajax_loadpage(page_request, t)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

ajax_loadpage:function(page_request, t){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

dhtmlwindow.etarget=null //clean up

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)

for (var i=0; i<dhtmlwindow.tobjects.length; i++){

} //End dhtmlwindow object

document.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>') //container that holds all dhtml window divs on page


1:44 am on Apr 29, 2012 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

What do you get if you set background to opacity=" 1" instead of transparent..and what browsers is this happening in..IE can be a pain depending upon which one..

I'd have put this question in CSS forum rather than javascript forum..


2:40 am on Apr 29, 2012 (gmt 0)

5+ Year Member

It is happening in ie, chrome and firefox.

Still happens with opacity="1"

Can you transfer this post to CSS Forum for me? Thanks!


1:30 am on Apr 30, 2012 (gmt 0)

5+ Year Member

Is there anything that I can do with anchor tags to fix this?


1:37 pm on Apr 30, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

domwindowdata += '<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url(' + this.imagefiles[3] + ') top right no-repeat;">&nbsp;</div></div>'

Perhaps this is the problem? Try giving it a solid color background like #fff, and see if that fixes it.


4:05 pm on Apr 30, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You might also look at this.

//this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus

It's been commented out, and even so 100 might not be enough. Perhaps your ads are positioned absolutely their z-index places them above the window. Inspect it all in Firebug to see.


2:25 am on May 2, 2012 (gmt 0)

5+ Year Member

I tried the background, but that did not work.

I was thinking about the ZIndex too, but this has really gotten above my knowledge base and I am not sure how to proceed.


1:38 pm on May 2, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

domwindow.className = "dhtmlwindow"

What CSS goes along with this?


3:38 pm on May 2, 2012 (gmt 0)

5+ Year Member

position: absolute;
border: 1px solid black;
visibility: hidden;
background-color: white;

.drag-handle{ /*CSS for Drag Handle*/
padding: 11px;
text-indent: 3px;
font: bold 14px Arial;
background-color: #CA0000;
color: white;
cursor: move;
overflow: hidden;
width: auto;
-moz-opacity: 1;
opacity: 1;

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 1px;
top: 2px;
cursor: hand;
cursor: pointer;

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;

.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid brown;
background-color: white;
color: black;
height: 150px;
padding: 2px;
overflow: auto;

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/

.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;


3:45 pm on May 2, 2012 (gmt 0)

5+ Year Member

I also added the following to the dhtmlwindow.js but it didn't do the job.



5:12 pm on May 2, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

riospace, I sent you a PM.


1:44 am on May 3, 2012 (gmt 0)

5+ Year Member

Thank you Fotiman for figuring this out for me.


The image that was bleeding through from the underlying window had a Z value of 2147483647 so I added the following to the dhtml window script:


This did the trick! Thanks again Fotiman.


1:45 am on May 3, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month


Featured Threads

Hot Threads This Week

Hot Threads This Month