Greywacke Posted January 11, 2011 Share Posted January 11, 2011 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 12, 2011 Share Posted January 12, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.