Advertisement

06.17.2008 at 04:41PM PDT, ID: 23493623
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.8

Using Event Handling to Notify When A Div Changes Size?

Asked by JaeWebb in JavaScript, Web Browsers, Dynamic HTML (DHTML)

Tags: ,

I'd like to use event handling to notify an external JavaScript (JS) file of when a div grows in size.  How do I do that, with emphasis on making it work in IE6?  My problem in greater detail:

The solution I'm working on includes an external JS file and a 2px-wide div with a script block that calls an image from another server.  Once the call returns the image, the div expands to fit the image inside it, usually larger than 100px-wide.  The div also has a tab with a link to a function meant to close the div.  Since the tab should stay hidden on occasions when the image does not appear, the external JS has a recursive function called 'showHideButtonIfAdScheduled()' that checks the div size and uses CSS to un-hide the tab if the image is present and the div has expanded beyond 2px width...  This method worked just fine until the website it is deployed on underwent a new design.  Since the new design which takes more time to load than the old design did, the solution stopped working on IE6 versions of the page - you'll notice the script runs recursively 13 times in Firefox and IE7 and 1000 time in IE6.  Since running the recursive function 1000 times doesn't work and is unacceptable anyway, I'd like to use event handling instead.  If the div fires some detectable event when its' size changes (???), I'll run the showHideButtonIfAdScheduled() function without recursion on that event.

I have a cross-browser method for adding events but I'm not sure how to use it to get what I want.  
---------------------------------------------------------
function addEvent( element, evType, fn, useCapture )
{
      //If browser is Netscape/Mozilla...
      if ( element.addEventListener ) {
            element.addEventListener( evType, fn, useCapture );
            return true;
      }
      //If browser is Internet Explorer...
      else if ( element.attachEvent ) {
            var r = element.attachEvent( 'on' + evType, fn );
            return r;
      }
      //If browser is neither Netscape/Mozilla or IE...
      else {
            element[ 'on' + evType ] = fn;
      }
}

addEvent( element, 'event', eventListener, false );

function eventListener( e )
{
      var t = window.event ? window.event.srcElement : e ? e.target : null;  
}
---------------------------------------------------------

Can you help?  Please do not make suggestions without proving that it works first; that's why I included the code in this post.  The solution is set to show the image once per day so be sure to clear your cookies after each test; refreshing alone will not show the image.

Thanks!Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
 
<script type="text/javascript"  language="javascript">
//THIS IS THE EXTERNAL SCRIPT, PLACED INTO THE PAGE FOR EASE OF DEPLOYMENT
 
var IA_sitecode;
var timeout;
var showAd = false;
var adVisible = false;
 
/* -- COOKIE LOGIC -- */
function cookiesEnabled() {
	Set_Cookie( 'test', 'none', '', '/', '', '' );
/*
If Get_Cookie succeeds, cookies are enabled, since 
the cookie was successfully created.
*/
	if ( Get_Cookie( 'test' ) ) {
		cookie_set = true;
		Delete_Cookie('test', '/', '');
	} else {
		document.write( 'cookies are not currently enabled.' );
		cookie_set = false;
	}
	return cookie_set;
}
 
function setQuestCookie() {
	var cookie_name = "questFlash" + IA_sitecode;
	Set_Cookie( cookie_name, "already seen", 24, "/", "", "" );
}
 
function Set_Cookie( name, value, expires, path, domain, secure ) {
// set time, it's in milliseconds
	var today = new Date();
	today.setTime( today.getTime() );
/*
if the expires variable is set, make the correct expires time, the current 
script below ( expires = expires * 1000 * 60 * 60 * 24 ) will set 'expires' 
for 'X' number of days; to make it set for hours, delete * 24, for minutes, 
delete * 60 * 24
*/
	if ( expires )	{
		expires = expires * 1000 * 60 * 60;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	
	document.cookie = name + "=" +escape( value ) +
		( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
		( ( path ) ? ";path=" + path : "" ) + 
		( ( domain ) ? ";domain=" + domain : "" ) +
		( ( secure ) ? ";secure" : "" );
}
 
// this function gets the cookie, if it exists
function Get_Cookie( name ) {
	
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) &&	( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) {
		return null;
	}
	var end = document.cookie.indexOf( ";", len );
	if ( end == -1 ) {
		end = document.cookie.length;
	}
	return unescape( document.cookie.substring( len, end ) );
}
			
// this deletes the cookie when called
function Delete_Cookie( name, path, domain ) {
	if ( Get_Cookie( name ) ) {
		document.cookie = name + "=" +
			( ( path ) ? ";path=" + path : "") +
			( ( domain ) ? ";domain=" + domain : "" ) +
			";expires=Thu, 01-Jan-1970 00:00:01 GMT";
	}
}
 
function setIASiteCode( sitecode ) {
	IA_sitecode = sitecode;
}
 
 
/* -- VISUAL LOGIC -- */
function appear() {
	var the_style = getStyle( "floatingflash" );
	the_style.display = 'block';
 
	/*
	//Logic for sliding the target div onto the stage
	//'endPosition' determines where the ad will stop; higher value will equal lower point on page
	var endPosition = 300;
	
	if ( the_style ) {
		var current_top = parseInt( the_style.top );
		var new_top = current_top + 5;
		if ( document.layers ) {
			the_style.top = new_top;
		} else {
			the_style.top = new_top + "px";
		}
		if ( new_top < endPosition ) {
			the_timeout = setTimeout( 'appear();', 10 );
		}
 
		//Adjust inline style on page
		//the_style.marginLeft = 38 + "%";
	}
	*/
	
	
} // appear
 
function disappear() {
	var the_style = getStyle( "floatingflash" );
	the_style.display = 'none';
} // disappear
 
function getStyle(ref) {
	if( document.getElementById && document.getElementById( ref ) ) {
		return document.getElementById( ref ).style;
	} else if ( document.all && document.all( ref ) ) {
		return document.all( ref ).style;
	} else if ( document.layers && document.layers[ ref ] ) {
		return document.layers[ ref ];
	} else {
		return false;
	}
} // getStyle
 
function browserIsIE6() {
	var browser = navigator.appName;
	var ie7 = ( document.all && !window.opera && window.XMLHttpRequest ) ? true : false;
	// browser != "Microsoft Internet Explorer"
	if ( browser != "Microsoft Internet Explorer" && ie7 == false ) {
		return true;
	}
	else {
		return false;	
	}
}
 
function showHideButtonIfAdScheduled( runcount ) {
	/* Show the interstitial div's close button ('X') if an ad loads into 
	the interstial div tag (a.k.a. "floatingflash").  If an ad is not loaded,
	the div will not grow passed the 'emptyDivSize'. */
	var emptyDivSize = 2;
	var recursionLimit;
	if ( browserIsIE6() ) {
		recursionLimit = 1000;
	}
	else {
		recursionLimit = 13;
	}
	var hideButtonStyle = getStyle( "hideButton" );
	var curWidth = parseInt( document.getElementById( "floatingflash" ).offsetWidth );
	var curHeight = parseInt( document.getElementById( "floatingflash" ).offsetHeight );
	//alert( "RUNCOUNT: " + runcount );
	if ( curWidth >= emptyDivSize && curHeight >= emptyDivSize ) {
		//Show button by changing display style from 'none' to 'block'
		hideButtonStyle.display = 'block';
	}
 
	//If IE6's bad timing issue failed to set display to 'block', try again
	if ( runcount < recursionLimit ) {
		if ( hideButtonStyle.display != 'block' && showAd ) {
			showHideButtonIfAdScheduled( runcount++ );
		}
	}
}
 
function fixUppermostFlashLayerBug() {  
	var browser = navigator.appName;
	var ie7 = ( document.all && !window.opera && window.XMLHttpRequest ) ? true : false;
	// browser != "Microsoft Internet Explorer"
	if ( browser != "Microsoft Internet Explorer" ) {
	   //...then apply Firfox's Flash overlap fix
	   document.getElementById('floatingflash').innerHTML = document.getElementById('floatingflash').innerHTML.replace( /="window"/g, '="transparent"');
	   document.getElementById('adscol').innerHTML = document.getElementById('adscol').innerHTML.replace( /="window"/g, '="transparent"');
	} else {
		//...then apply IE's Flash overlap fix
	   document.getElementById('floatingflash').onchange = setTimeout( 'checkIfImageOrFlash()', 500 );
	}
}
 
function checkIfImageOrFlash() {  //UNFINISHED - NEED TO WORK ON IE SECTION
 
	//hideButtonTab is at 'childNodes[1]'.  The dynamic object ('Flash movie/SCRIPT' or 'A tag w/ child IMG tag')
	//should be located at 'childNodes[5]'
	var ff = document.getElementById( 'floatingflash' ).childNodes[ 5 ];
	var ac = document.getElementById( 'adscol' );
	//If dynamic object inside floatingflash is a link with a child image...
	if ( ff.tagName.toLowerCase() == "a" ) {
		if ( ff.firstChild.tagName.toLowerCase() == "img" ) {
			ac.innerHTML = ac.innerHTML.replace( /="window"/g, '="opaque"');
		}
	}
	//...if not, it is a flash movie
	else {
        ac.innerHTML = ac.innerHTML.replace( /="window"/g, '="transparent"');
	}
}
 
/* -- MASTER TIRGGER FUNCTION ( place this function in body tag's onLoad method ) -- */
function checkIfInterstitialAdShouldRun() {
	if ( showAd ) {
		appear();
		showHideButtonIfAdScheduled( 1 );
	}	
}
 
/* -- SECONDARY TIRGGER FUNCTION (appears inside HTML insterstitial div (i.e. floatingflash))-- */
function userHasNotSeenAd() {
   var enableAd = true;
   if ( Get_Cookie( "questFlash" + IA_sitecode )!= null ) {
      enableAd = false;
   } else {        
      setQuestCookie();
      enableAd = true;
   }
   if ( !cookiesEnabled() ) {
      enableAd = true;
   }
   return enableAd;
}
 
		
//alert( "The target childNode ID is: " + targetObj.id + "\n" +
//	   "The childNode tagName is: " + targetObj.tagName + "\n" +
//	   "The childNode type is: " + typeof targetObj + "\n" +
//	   "Content: \n" + targetObj.innerHTML );
//alert( "hideButtonStyle.display: " + hideButtonStyle.display + " \n" + "showAd: " + showAd  + "\n" + "runcount: " + runcount + " \n" + "curWidth: " + curWidth + " \n" + "curHeight: " + curHeight );
</script>
 
<script type="text/javascript" language="javascript">
 
// This script function loads all of the display javascript
window.onload = function(){
		checkIfInterstitialAdShouldRun();
}
 
</script>
<style>
#floatingflash {
	position:absolute;
	display: block;
	z-index: 100; /* z-index may be set also be set as inine style */
}
 
a#hideButton  {
	/* Display property is changed to from 'none' to 'block' upon 
	triggering the 'showHideButtonIfAdScheduled()' function */
	display: none;
	float: right;
	height: 16px;
	border-top: 1px solid #000000; /* black */
	border-right: 1px solid #000000; /* black */
	border-left: 1px solid #000000; /* black */
	padding-top: 1px;
	padding-right: 8px;
	padding-bottom: 1px;
	padding-left: 5px;
	color: #000000;
	background-color:#CCCCCC;
	font-size: 11px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: 600;
	text-decoration: none;
	text-align: left;
	z-index: 99;
}
 
a#hideButton:hover {
	color: #2080AF;
	background-color:#CCCCCC;
}
 
#hideButtonTab {
	width: 100%;
	position: absolute;
	top: -18px;
}
 
</style>
</head>
 
<body>
 
<div id="floatingflash" style="display:none;top:300px;left:200px;">
  <!-- This is the close button that appears over
        generated/visible ads -->
  <div id="hideButtonTab"> <a id="hideButton" href="javascript:disappear();">Close [ X ]</a> </div>
  <!-- This is the link to the remote OAS ad tag -->
  <script type="text/javascript">
		setIASiteCode( "TESTING" );
        if ( userHasNotSeenAd() ) {
           showAd = true;
           document.write('<scr'+'ipt language="JavaScript" type="text/javascript" src="http://oascentral.law.com/RealMedia/ads/adstream_jx.ads/interstitial.law.com/testing/@x96"></scr'+'ipt>');
		}
        </script>
 
</div>
 
</body>
</html>
[+][-]06.18.2008 at 05:08AM PDT, ID: 21811963

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.18.2008 at 05:12AM PDT, ID: 21811991

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.18.2008 at 07:42AM PDT, ID: 21813397

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.18.2008 at 09:39AM PDT, ID: 21814678

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, Web Browsers, Dynamic HTML (DHTML)
Tags: JavaScript, IE6, IE7, Firefox
Sign Up Now!
Solution Provided By: mplungjan
Participating Experts: 1
Solution Grade: A
 
 
[+][-]07.03.2008 at 04:57PM PDT, ID: 21930211

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628