Jump to content

positioning and sizing div to cover select elements


Greywacke
 Share

Recommended Posts

hi there,my last problem on TruckCapXchange.com... the div that is supposed to cover the loading select option, is positioned by the following java script:

function setOffset(el) {	var _x = 0;	var _y = 0;	var _w = el.offsetWidth;	var _h = el.offsetHeight;	el.style.zIndex = 1;	while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {		_x += el.offsetLeft - el.scrollLeft;		_y += el.offsetTop - el.scrollTop;		el = el.parentNode;	}	document.getElementById("ajaxbg").style.left		= _x + "px";	document.getElementById("ajaxbg").style.top		= _y + "px";	document.getElementById("ajaxbg").style.width		= _w + "px";	document.getElementById("ajaxbg").style.height		= _h + "px";	document.getElementById("ajaxbg").style.visibility	= "visible";	//alert("Left: "+_x+"px\nTop: "+_y+"px\nWidth: "+_w+"px\nHeight: "+_h+"px");}

passing the relative select object to the setOffset function - the correct sizes are retrieved, as shown by the alert - however, it keeps loading the div top left of the page as set by the css file! :)

div#ajaxbg {	font-size: 1px;	position: absolute;	z-index: 998;	width: 125px;	height: 17px;	top: 0px;	left: 0px;	border: none;	background: transparent url("images/ajax-bg.png") top left scroll repeat;	text-align: center;	vertical-align: middle;}div#ajaxloader {	font-size: 1px;	position: relative;	z-index: 999;	width: 16px;	height: 16px;	top: 1px;	left: 54px;	border: none;	background: transparent url("images/ajax-loader.gif") top left scroll no-repeat;	text-align: center;	vertical-align: middle;}

some direction as to why it is not positioning OVER the select fields in Firefox, would be appreciated if anybody has an inkling... the inline styles for a div should override the styles in the stylesheet - correct? :/note the loader div displaying when you initially load TruckCapXchange.com. it is supposed to position it over the Make div but it leaves it 10px,10px from top left of the document - even in firefox... :/i am at wits end here, PLEASE HELP!

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

I don't think it is reverting to styles in the stylesheet, I think its more to do with the while loop giving incorrect result and setting the top, left to zero.as i see it the #ajaxbg element will only appear over one <select> element at a time, the el in setOffset(el) represents this <select> tag element.while it loops, the el = el.parentNode; would go from <select> to parent <td>, to parent <tr> and so on to body, or even html tag.in the first/second loop it is positioned correctly, after that it is very erratic. the changes i made to position over the top of #make select tag arehtml - added position relative.

<td style="PADDING-BOTTOM: 2px; PADDING-TOP: 2px; position:relative;"><select  name="Make"  id="Make" style="Z-INDEX: 14; WIDTH: 125px; COLOR: #7f7f7f; FONT-SIZE: 11px"><option value="0" selected>Select</option></select></td>

jscript

function setOffset(el) {	var _w = el.offsetWidth;		var _h = el.offsetHeight;	el.style.zIndex = 1;		var _x = 0;	var _y = 0;	//while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {   		p_el = el.parentNode;		_x += p_el.offsetLeft - p_el.scrollLeft;		_y += p_el.offsetTop - p_el.scrollTop;		alert(el.id)				document.getElementById("ajaxbg").style.left		= _x + "px";	document.getElementById("ajaxbg").style.top			= _y + "px";	document.getElementById("ajaxbg").style.width		= _w + "px";	document.getElementById("ajaxbg").style.height		= _h + "px";	document.getElementById("ajaxbg").style.visibility	= "visible";	alert("Left: "+_x+"px\nTop: "+_y+"px\nWidth: "+_w+"px\nHeight: "+_h+"px");	//}}

Also there is an error stating document.truckcap.Make has no properties, this is probably due to the script looking for document.truckcap.Make before it has even been created fully.to fix this, i placed all event handling script under the window.onload function

window.onload = function () {	return ajaxRequest(document.truckcap.Make);document.truckcap.Make.onchange = function () {	return ajaxRequest(document.truckcap.Model);}document.truckcap.Model.onchange = function () {	return ajaxRequest(document.truckcap.Year);}document.truckcap.Year.onchange = function () {	return ajaxRequest(document.truckcap.CabSize);}document.truckcap.CabSize.onchange = function () {	return ajaxRequest(document.truckcap.BedSize);}document.truckcap.ZipCode.onkeypress = function (e) {	if (!e) var e = window.event;	//alert([e.keyCode||e.which]);	if (this.value.length >= 3) window.setTimeout("ajaxRequest(document.truckcap.ZipCode);",1000);	if ([e.keyCode||e.which]==9||[e.keyCode||e.which]==35||				// this is to allow tab, home & end keys		[e.keyCode||e.which]==36)		return true;	if ([e.keyCode||e.which]==8||[e.keyCode||e.which]==46||				// this is to allow backspace or delete		[e.keyCode||e.which]==37||[e.keyCode||e.which]==39)				// this is to allow left or right arrows		return true;	if ([e.keyCode||e.which] < 48 || [e.keyCode||e.which] > 57)		e.preventDefault? e.preventDefault() : e.returnValue = false;}document.truckcap.Phone.onkeypress = function (e) {	if (!e) var e = window.event;	//alert([e.keyCode||e.which]);	if ([e.keyCode||e.which]==32||[e.keyCode||e.which]==45||			// this is to allow - or spacebar		[e.keyCode||e.which]==35||[e.keyCode||e.which]==36)				// this is to allow home & end keys		return true;	if ([e.keyCode||e.which]==8||[e.keyCode||e.which]==46||				// this is to allow backspace or delete		[e.keyCode||e.which]==37||[e.keyCode||e.which]==39)				// this is to allow left or right arrows		return true;	if ([e.keyCode||e.which] < 48 || [e.keyCode||e.which] > 57)		e.preventDefault? e.preventDefault() : e.returnValue = false;}document.truckcap.onsubmit = function () {	var strFilter = /^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i;	for (i = 0; i < this.elements.length; i++) {		var nam = this.elements[i].name;		var val = this.elements[i].value;		var sel = this.elements[i].selectedIndex;		if (nam != "IM" && nam != "add_reqs") {			if (sel) {				if (sel < 1) {					alert("Please select "+nam+"!");					this.elements[i].focus();					return false;				}			}			if (val) {				if (val.length < 5) {					alert("Please provide a valid "+nam+"!");					this.elements[i].focus();					return false;				}			}			if (nam == "email") {				if (!strFilter.test(val)) {					alert("Please provide a valid e-mail address!");					this.elements[i].focus();					return false;				}			}		}	}}}//End winow.onload

I just ran it in a rough test and it seemed to work for when the page first loads (only in FF), can't really test it anymore than that, so hope this will help in getting it to work for other select elements.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...