|
|
|
date: Mon, 5 Jun 2006 07:47:02 -0700,
group: microsoft.public.inetsdk.programming.scripting.jscript
back
IMG inside a SPAN doesn't always show up
I have a web page with a span definition that includes two IMG definitions. I
want to display only one of the IMG at one time. I use Javascript to change
the display as needed. My problem is that sometimes the image shows up,
sometimes it doesn't.
Here is the SPAN definition:
<TR>
...
<TD nowrap>
<SPAN id=spanVariance title="Variance Explanation"
style="visibility:hidden; position:relative; top:4; height:100%;"><IMG
dynamic id=imgNeedVar SRC="images/need_var_report.gif"
style="visibility:hidden; cursor:default;" height=17 width=15
onclick="openVarianceDesc()" /><IMG dynamic id=imgHaveVar
SRC="images/have_var_report.gif" style="visibility:hidden; cursor:default;"
height=17 width=15 onclick="openVarianceDesc()" /></SPAN> $<SPAN
id=spanYearCChange class=Money></SPAN>
</TD>
....
</TR>
Here is the javascript:
if (trim(document.thisForm.txtVarianceDesc.value) != "")
{
// have a variance description, show checkmark image
spanVariance.style.visibility = "visible";
spanVariance.children[0].style.display = "none";
spanVariance.children[1].style.display = "";
}
else
{
// get the difference between current year budget amount and prior budget
// amount for this budget year
var sInnerText = String(spanYearCChange.innerText).replace("$","");
var oNode = xmlPriorApprovedCashFlow.selectSingleNode("//year_c_total");
if (oNode == null){
oNode = xmlCashFlow.selectSingleNode("//prior_estimate");
}
if(oNode != null)
{
if (oNode.text != xmlCashFlow.selectSingleNode("//year_c_total").text){
sInnerText = "Yes";
}
}
if (sInnerText != "" && sInnerText != "0")
{
// we need to show/allow the variance description as not entered
// show red exclamation point image
spanVariance.style.visibility = "visible";
spanVariance.children[0].style.display = "";
spanVariance.children[1].style.display = "none";
boNeedVariance = true;
} else {
// no variance so we don't need to show/allow the variance description
spanVariance.style.visibility = "hidden";
spanVariance2.style.visibility = "hidden";
}
There is init DHTML behaviour code associated with the IMGs, but my
breakpoints never hit in it, even when the images show up.
As I said, sometimes the images show up, sometimes not. I set breakpoints and
know that it is always executing code that should show the checkmark image.
I noticed that the only way to access the IMG elements is with a
oList = document.all.tags("INPUT")
for (i=0; i < oList.length; i++){
loop, even if I give the IMG elements an ID.
Is there something special in IE 6 that could cause this???
Thanks,
date: Mon, 5 Jun 2006 07:47:02 -0700
author: Xanthus
Re: IMG inside a SPAN doesn't always show up
Thanks for responding.
Each of the image files is 1 KB.
No clicks while loading. Once I tell the previous web page to go to the
problem one, I just sit and wait, 3-5 minutes a couple of times.
I even added code to run the function that sets the display values every 1
second. Still doesn't show up if it didn't originally.
I put debug breakpoints on the DHTML behaviour mouse event handlers and
never hit a breakpoint.
I didn't mention it, but this uses XML data as the datasource/datafields.
I also noticed that when I debug and break in the set function, this is what
I get when I display (command window) "spanVariance.children[0]", which
should be the first image element:
tagname = "SPAN"
innerHTML = "<IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
initilized>"
outerHTML = "<SPAN style=\"DISPLAY: none; OVERFLOW: hidden; WIDTH: 0px;
CLIP: rect(0px 0px 0px 0px); POSITION: relative; HEIGHT: 0px\"
scrollTop=\"0\"><IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
initilized></SPAN>"
I was not expecting the tagname to be "SPAN". Is this correct?
thanks,
"dNagel" wrote:
>
>
> Xanthus wrote:
> > I have a web page with a span definition that includes two IMG definitions. I
> > want to display only one of the IMG at one time. I use Javascript to change
> > the display as needed. My problem is that sometimes the image shows up,
> > sometimes it doesn't.
> <--snip-->
> > There is init DHTML behaviour code associated with the IMGs, but my
> > breakpoints never hit in it, even when the images show up.
> >
> > As I said, sometimes the images show up, sometimes not. I set breakpoints and
> > know that it is always executing code that should show the checkmark image.
> > I noticed that the only way to access the IMG elements is with a
> > oList = document.all.tags("INPUT")
> > for (i=0; i < oList.length; i++){
> >
> > loop, even if I give the IMG elements an ID.
> >
> > Is there something special in IE 6 that could cause this???
>
> Is it a large image? Do you click anywhere else on the page while waiting for it to load?
> Are there mouse(over,enter,leave) events that might be getting raised which request content
> (using ajax maybe)
>
> D.
>
date: Tue, 6 Jun 2006 15:00:01 -0700
author: Xanthus
Re: IMG inside a SPAN doesn't always show up
Xanthus wrote:
> Thanks for responding.
>
> Each of the image files is 1 KB.
> No clicks while loading. Once I tell the previous web page to go to the
> problem one, I just sit and wait, 3-5 minutes a couple of times.
> I even added code to run the function that sets the display values every 1
> second. Still doesn't show up if it didn't originally.
>
> I put debug breakpoints on the DHTML behaviour mouse event handlers and
> never hit a breakpoint.
>
> I didn't mention it, but this uses XML data as the datasource/datafields.
> I also noticed that when I debug and break in the set function, this is what
> I get when I display (command window) "spanVariance.children[0]", which
> should be the first image element:
> tagname = "SPAN"
>
> innerHTML = "<IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
> onclick=openVarianceDesc()
> src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
> initilized>"
>
> outerHTML = "<SPAN style=\"DISPLAY: none; OVERFLOW: hidden; WIDTH: 0px;
> CLIP: rect(0px 0px 0px 0px); POSITION: relative; HEIGHT: 0px\"
> scrollTop=\"0\"><IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
> onclick=openVarianceDesc()
> src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
> initilized></SPAN>"
>
> I was not expecting the tagname to be "SPAN". Is this correct?
>
> thanks,
>
I assume this is the browsers rendering of what you pumped into that SPAN?
To best help you out, the real source code is the only way we'll get to the
bottom of this...
you gave us this earlier...
<TR>
...
<TD nowrap>
<SPAN id=spanVariance title="Variance Explanation"
style="visibility:hidden; position:relative; top:4; height:100%;"><IMG
dynamic id=imgNeedVar SRC="images/need_var_report.gif"
style="visibility:hidden; cursor:default;" height=17 width=15
onclick="openVarianceDesc()" /><IMG dynamic id=imgHaveVar
SRC="images/have_var_report.gif" style="visibility:hidden; cursor:default;"
height=17 width=15 onclick="openVarianceDesc()" /></SPAN> $<SPAN
id=spanYearCChange class=Money></SPAN>
</TD>
....
</TR>
use lowercase for tag and attribute names.
I would recommend your TD look like this:
<td nowrap="nowrap">
I see that you have not quoted your id for spanVariance. All Element Attrributes
must be quoted. Always. This goes for class, height, width, id, etc...
I would not count on "spanVariance." as a means to reference an element... use
the methods supplied by the DOM ( i.e. document.getElementById('spanVariance') )
SPAN's are not actually supposed to be use as containers for anything other than
TextNodes and other in-line elements (you're ok here, just pointing it out)
http://www.highdots.com/css-editor/html_tutorial/inline.html
Your IMG tag does not have an ALT attribute (it's required)
I've never seen the attribute "dynamic", what do you think it does?
Are you using the XHTML Strict DocType at the top of your document?
http://www.w3.org/TR/REC-html40/sgml/dtd.html
You're already using styles, so use them... remove the height and width attributes
and set them using CSS.
Without having access to your actual source and being able to see it fail thats all
I can give you.
Threes a tool called Fiddler which you can DL and install... It's a proxy that traps
the enormous amount of information that goes between your browser and any request that
goes out or comes in over port 80. Can be very useful.
http://www.fiddlertool.com/fiddler/
If your code works in Firefox, I'd suggest installing Firebug... It's a great console
for locating JS Errors.
http://www.joehewitt.com/software/firebug/
Not sure what your environment looks like but you can use .Net to debug scripts or
you can use InterDev (old but still effective) or you can use the MS Script Debugger.
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
hope I've given some avenues to pursue...
D.
date: Wed, 07 Jun 2006 10:45:47 -0700
author: dNagel
Re: IMG inside a SPAN doesn't always show up
Thanks for the suggestions. I have changed the file to use them.
The dynamic and initilized(sic) attributes of the images are used by the
DHTML .htc code. My environment is Win XP Pro SP 2, Visual Studio .NET 2003,
IE 6.0.2900.2180_xpsp_sp2_...
BTW, this is all code that I have inherited to make changes.
Unfortunately, I still have the problem.
I would post the entire source code, but the source file itself is over 2000
lines long and that doesn't include the .htc or include code, (but .htc
source is posted below).
Is there an email address I can send all the relevent source code to?
I have found this though, when the image does appear, the SPAN that contains
the 2 image elements has the correct height, width, clip rect. When the image
does not appear, these are all 0. I have tried setting the SPAN and image
elements height and width each time the display or visiblity style is
changed, but it hasn't helped.
Where does the SPAN get its height and width from when being rendered?
Is the order the SPAN and IMG display and visibility are set important?
It is really looking like a timing problem, but what timing??
Here is the output window display that shows the SPAN, same code executed:
spanVariance // when NO SHOW
{...}
outerHTML: "<SPAN id=spanVariance title=\"Variance Explanation\"
style=\"VISIBILITY: visible; POSITION: relative; TOP: 4px\"><SPAN
style=\"DISPLAY: none; OVERFLOW: hidden; WIDTH: 0px; CLIP: rect(0px 0px 0px
0px); POSITION: relative; HEIGHT: 0px\" scrollTop=\"0\"><IMG style=\"LEFT:
0px; POSITION: absolute; TOP: 0px\" onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
initilized></SPAN><SPAN style=\"OVERFLOW: hidden; WIDTH: 0px; CLIP: rect(0px
0px 0px 0px); POSITION: relative; HEIGHT: 0px\" scrollTop=\"0\"><IMG
style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\" onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/have_var_report.gif\" dynamic
initilized></SPAN> </SPAN>"
offsetLeft: 294
offsetTop: 168
offsetWidth: 3
offsetHeight: 14
clientHeight: 0
clientWidth: 0
clientTop: 0
clientLeft: 0
scrollHeight: 14
scrollWidth: 3
scrollTop: 0
scrollLeft: 0
spanVariance // when shows
{...}
outerHTML: "<SPAN id=spanVariance title=\"Variance Explanation\"
style=\"VISIBILITY: visible; POSITION: relative; TOP: 4px\"><SPAN
style=\"DISPLAY: none; OVERFLOW: hidden; WIDTH: 15px; CLIP: rect(0px 17px
15px 0px); POSITION: relative; HEIGHT: 17px\" scrollTop=\"0\"><IMG
style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\" onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
initilized></SPAN><SPAN style=\"OVERFLOW: hidden; WIDTH: 15px; CLIP: rect(0px
17px 15px 0px); POSITION: relative; HEIGHT: 17px\" scrollTop=\"0\"><IMG
style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\" onclick=openVarianceDesc()
src=\"http://localhost/BudgetWebF3/images/have_var_report.gif\" dynamic
initilized></SPAN> </SPAN>"
clientHeight: 0
clientWidth: 0
clientTop: 0
clientLeft: 0
scrollHeight: 20
scrollWidth: 18
scrollTop: 0
scrollLeft: 0
offsetLeft: 279
offsetTop: 154
offsetWidth: 18
offsetHeight: 20
Here is the DHTML .htc code.
<PUBLIC:COMPONENT lightWeight = "true"></PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="onMouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="onMouseOut()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="onMouseDown()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="onMouseUp()" />
<PUBLIC:ATTACH EVENT="onreadystatechange" ONEVENT="Init()" />
<PUBLIC:METHOD NAME="setChecked" />
<PUBLIC:METHOD NAME="setUnChecked" />
<SCRIPT LANGUAGE="JScript">
var m_boChecked = false;
var m_nHeight = 0;
var m_nInit = 0
var m_nOver = 1
var m_nClick = 2
var m_nDisabled = 3
var m_nOverChecked = 2
var m_nChecked = 4
var m_nClickChecked = 5
var m_boIsOver = false;
function Init(){
/*
var smsg;
if((element.id == 'imgNeedVar') || (element.id == 'imgHaveVar') ||
(element.id == 'imgNeedVar2') || (element.id == 'imgHaveVar2'))
{
smsg = element.id + ": dynamic=" + typeof(element.dynamic) + ",
initilized=" + typeof(element.initilized) +
"\ninner=" + element.innerHTML +
"\nouter" + element.outerHTML;
if((element.id == 'spanVariance') || (element.id == 'spanVariance2'))
{
smsg = smsg + "\noffsheight:clientheight=" + element.offsetHeight + ":" +
element.clientHeight;
smsg = smsg + "\noffswidth:clientwidth=" + element.offsetWidth + ":" +
element.clientWidth;
}
else
{
smsg = smsg + "\nheight=" + element.height + ", width=" + element.width;
}
alert(smsg);
}
*/
if (typeof(element.dynamic) != "undefined"){
if (typeof(element.initilized) == "undefined"){
var sAttachedSpan = ""
if(typeof(element.attachedSpan)!="undefined"){sAttachedSpan =
"attachedSpan=" + element.attachedSpan + " "}
var sCheckImg = ""
if(typeof(element.checkImg)!="undefined"){sCheckImg = " checkImg "}
var sOnClick = ""
if (typeof(element.onclick) != "undefined" && element.onclick != null){
var _aTemp = String(element.onclick).split("\x0A")
sOnClick = " onclick='" + _aTemp[2] + "' "
}
element.outerHTML ="<SPAN scrollTop=0 style='position:relative;
overflow:hidden; " +
"width:" + element.width + "; height:" + element.height +
"; clip: rect(0 " + element.height + " " + element.width + " 0)'
>" +
"<IMG src=" + element.src + " dynamic initilized " + sAttachedSpan
+ sCheckImg +
sOnClick +
"style='position:absolute; top:0; left:0;'></SPAN>"
/*
if((element.id == 'imgNeedVar') || (element.id == 'imgHaveVar') ||
(element.id == 'imgNeedVar2') || (element.id == 'imgHaveVar2'))
{
smsg = element.id + " init: dynamic=" + typeof(element.dynamic) + ",
initilized=" + typeof(element.initilized) +
"\ninner=" + element.innerHTML +
"\nouter" + element.outerHTML;
alert(smsg);
}
*/
} else {
//element.style.display = "block"
m_nHeight = parseInt(element.parentElement.style.height,10);
if (typeof(element.attachedSpan)!="undefined"){
var oSpan = eval(element.attachedSpan)
oSpan.onmouseover = this.onMouseOver
oSpan.onmouseout = this.onMouseOut
oSpan.onmousedown = this.onMouseDown
oSpan.onmouseup = this.onMouseUp
oSpan.style.cursor = "default"
element.detachEvent("onclick", this.onClick);
element.attachEvent("onclick", this.onClick);
}
if (typeof(checkImg) != "undefined"){
element.checked = false;
}
element.ondrag = returnFalse;
element.oncontextmenu = returnFalse;
/*
if((element.id == 'imgNeedVar') || (element.id == 'imgHaveVar') ||
(element.id == 'imgNeedVar2') || (element.id == 'imgHaveVar2'))
{
smsg = element.id + ": dynamic=" + typeof(element.dynamic) + ",
initilized=" + typeof(element.initilized) +
"\nparentid=" + element.parentElement.id + ", parentHeight=" +
String(m_nHeight) +
"\ninner=" + element.innerHTML +
"\nouter" + element.outerHTML;
alert(smsg);
}
*/
}
}
}
function onClick(){
if (typeof(element.attachedSpan)!="undefined"){
eval(element.attachedSpan).click();
}
}
function returnFalse(){
return false;
}
function onMouseOver(){
if (m_boIsOver == false && typeof(element.dynamic) != "undefined"){
m_boIsOver = true;
if (typeof(element.checkImg) == "undefined"){
element.style.pixelTop = "-" + m_nHeight * m_nOver
} else {
if (element.checked == false){
element.style.pixelTop = "-" + m_nHeight * m_nOver
} else {
element.style.pixelTop = "-" + m_nHeight * m_nOverChecked
}
}
}
}
function onMouseOut(){
m_boIsOver = false;
if (typeof(element.dynamic) != "undefined"){
if (typeof(element.checkImg) == "undefined"){
element.style.pixelTop = "-" + m_nHeight * m_nInit
} else {
if (element.checked == false){
element.style.pixelTop = "-" + m_nHeight * m_nInit
} else {
element.style.pixelTop = "-" + m_nHeight * m_nChecked
}
}
}
}
function onMouseDown(){
if (typeof(element.dynamic) != "undefined"){
if (typeof(element.checkImg) == "undefined"){
element.style.pixelTop = "-" + m_nHeight * m_nClick
} else {
if (element.checked == false){
element.style.pixelTop = "-" + m_nHeight * m_nClick
} else {
element.style.pixelTop = "-" + m_nHeight * m_nClickChecked
}
}
}
}
function onMouseUp(){
if (typeof(element.dynamic) != "undefined"){
if (typeof(element.checkImg) == "undefined"){
element.style.pixelTop = "-" + m_nHeight * m_nOver
} else {
element.checked = !element.checked
if (element.checked == false){
element.style.pixelTop = "-" + m_nHeight * m_nOver
} else {
element.style.pixelTop = "-" + m_nHeight * m_nOverChecked
}
}
}
}
function setChecked(){
if (typeof(element.checkImg) == "undefined"){
element.checked = true;
onMouseOut()
}
}
function setUnChecked(){
if (typeof(element.checkImg) == "undefined"){
element.checked = false;
onMouseOut()
}
}
</SCRIPT>
THANKS!
---------------------------------
"dNagel" wrote:
> Xanthus wrote:
> > Thanks for responding.
> >
> > Each of the image files is 1 KB.
> > No clicks while loading. Once I tell the previous web page to go to the
> > problem one, I just sit and wait, 3-5 minutes a couple of times.
> > I even added code to run the function that sets the display values every 1
> > second. Still doesn't show up if it didn't originally.
> >
> > I put debug breakpoints on the DHTML behaviour mouse event handlers and
> > never hit a breakpoint.
> >
> > I didn't mention it, but this uses XML data as the datasource/datafields.
> > I also noticed that when I debug and break in the set function, this is what
> > I get when I display (command window) "spanVariance.children[0]", which
> > should be the first image element:
> > tagname = "SPAN"
> >
> > innerHTML = "<IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
> > onclick=openVarianceDesc()
> > src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
> > initilized>"
> >
> > outerHTML = "<SPAN style=\"DISPLAY: none; OVERFLOW: hidden; WIDTH: 0px;
> > CLIP: rect(0px 0px 0px 0px); POSITION: relative; HEIGHT: 0px\"
> > scrollTop=\"0\"><IMG style=\"LEFT: 0px; POSITION: absolute; TOP: 0px\"
> > onclick=openVarianceDesc()
> > src=\"http://localhost/BudgetWebF3/images/need_var_report.gif\" dynamic
> > initilized></SPAN>"
> >
> > I was not expecting the tagname to be "SPAN". Is this correct?
> >
> > thanks,
> >
>
> I assume this is the browsers rendering of what you pumped into that SPAN?
>
> To best help you out, the real source code is the only way we'll get to the
> bottom of this...
>
> you gave us this earlier...
>
> <TR>
> ...
> <TD nowrap>
> <SPAN id=spanVariance title="Variance Explanation"
> style="visibility:hidden; position:relative; top:4; height:100%;"><IMG
> dynamic id=imgNeedVar SRC="images/need_var_report.gif"
> style="visibility:hidden; cursor:default;" height=17 width=15
> onclick="openVarianceDesc()" /><IMG dynamic id=imgHaveVar
> SRC="images/have_var_report.gif" style="visibility:hidden; cursor:default;"
> height=17 width=15 onclick="openVarianceDesc()" /></SPAN> $<SPAN
> id=spanYearCChange class=Money></SPAN>
> </TD>
> ....
> </TR>
>
> use lowercase for tag and attribute names.
>
> I would recommend your TD look like this:
> <td nowrap="nowrap">
>
> I see that you have not quoted your id for spanVariance. All Element Attrributes
> must be quoted. Always. This goes for class, height, width, id, etc...
>
> I would not count on "spanVariance." as a means to reference an element... use
> the methods supplied by the DOM ( i.e. document.getElementById('spanVariance') )
>
> SPAN's are not actually supposed to be use as containers for anything other than
> TextNodes and other in-line elements (you're ok here, just pointing it out)
> http://www.highdots.com/css-editor/html_tutorial/inline.html
>
> Your IMG tag does not have an ALT attribute (it's required)
>
> I've never seen the attribute "dynamic", what do you think it does?
>
> Are you using the XHTML Strict DocType at the top of your document?
> http://www.w3.org/TR/REC-html40/sgml/dtd.html
>
> You're already using styles, so use them... remove the height and width attributes
> and set them using CSS.
>
> Without having access to your actual source and being able to see it fail thats all
> I can give you.
>
> Threes a tool called Fiddler which you can DL and install... It's a proxy that traps
> the enormous amount of information that goes between your browser and any request that
> goes out or comes in over port 80. Can be very useful.
> http://www.fiddlertool.com/fiddler/
>
> If your code works in Firefox, I'd suggest installing Firebug... It's a great console
> for locating JS Errors.
>
> http://www.joehewitt.com/software/firebug/
>
> Not sure what your environment looks like but you can use .Net to debug scripts or
> you can use InterDev (old but still effective) or you can use the MS Script Debugger.
> http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
>
> hope I've given some avenues to pursue...
>
> D.
>
date: Sun, 11 Jun 2006 14:14:02 -0700
author: Xanthus
|
|
