PDA

View Full Version : DIV do not appear in Firefox.. Help me.



zafi
06-24-2005, 10:38 AM
Hello All,

I've a website where i have lets say 5 images on the left side. when mouse moves over them a div appears showing some information. This works fine in IE , but when tried to see it on Mozilla firefox , it doesn't show anything when mouse move over the images. here is the code i m using :



function chkDiv(divId,strStyle)
{
var objDiv = document.getElementById(divId);
objDiv.style.display = strStyle;
}

<TR>
<TD>
<IMG SRC="../images/index-new_19.gif" name="Image73" WIDTH="198" HEIGHT="24" ALT="" onmouseover="chkDiv('Div1','block');" onmouseout="chkDiv('Div1','none');" style="CURSOR: hand">
<div id="Div1" style="display:none;POSITION:absolute;">
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
- Unique <br>
- Authentic <br>
- Northern Indian <br>
- Served in a warm and&nbsp;<br>
</td>
</tr>
</table>
</div>
</TD>
</TR>



for a live test please open http://www.gokhanapeena.com/l1/default.aspx
plz open it first in IE , and then mozilla to see what i m saying by moving mouse on the images on the left menu (except first 3 images/links).

Thanks all.

jscheuer1
06-24-2005, 11:17 AM
My first suggestion would be to open up the javascript console and try to fix the errors displayed there by line number.

This one's on line 9:

Error: missing name after . operator
Source Code:
MM_preload../images('../images/rl_15.gif','../images/rl_18.gif')

Probably should be:
MM_preloadimages('../images/rl_15.gif','../images/rl_18.gif')This one works in IE only:

Error: objDiv.filters has no properties
Source File: http://www.gokhanapeena.com/l1/default.aspx
Line: 84

These three lines should be surrounded by a test:
objDiv.style.filter="blendTrans(duration=1)";
objDiv.filters.blendTrans.Apply();
objDiv.filters.blendTrans.Play();like:
if (document.getElementById&&document.all&&!window.opera){
objDiv.style.filter="blendTrans(duration=1)";
objDiv.filters.blendTrans.Apply();
objDiv.filters.blendTrans.Play();
}There could be other problems, fix these first.

mwinter
06-24-2005, 12:14 PM
The chkDiv function should be rewritten as:


function chkDiv(id, display) {
var div, style;

if(document.getElementById) {
div = document.getElementById(id);
}
if(div && (style = div.style)) {
if(div.filters) {
style.filter = 'blendTrans(duration=1)';
div.filters.blendTrans.Apply();
div.filters.blendTrans.Play();
}
style.display = display;
}
}


These three lines should be surrounded by a test [...] like:

if (document.getElementById&&document.all&&!window.opera){Browser detection by object inference is never an adequate 'test'. The if statement above certainly will not exclude anything but IE. Always use feature detection instead: we want to know if the filters object is provided, so that's what we look for.

Mike

zafi
06-24-2005, 01:08 PM
Thanks for your replies , i really appreciate that. It has solved most of the problems in terms that the DIV now shows in firefox as well.. :) , just one more thing i would like to ask is if you can please once again refer to the link
http://www.gokhanapeena.com/l1/default.aspx , and open it in both IE and firefox , you'd notice that the position of div is not the same in FF as it's in IE .. what should i do to bring it to the same position. I've used position=Absolute right now.

Thanks again.

jscheuer1
06-24-2005, 07:58 PM
I'm not sure what the trouble is, I only know that FF often sees things differently than IE. I found this work around. Using the page as it is now, as I type, change this:
var
objDiv = document.getElementById(divId);
//objDiv.style.filter="blendTrans(duration=2)";
if (document.getElementById&&document.all&&!window.opera)
{
objDiv.style.filter="blendTrans(duration=1)";
objDiv.filters.blendTrans.Apply();
objDiv.filters.blendTrans.Play();
}
objDiv.style.display = strStyle;
}to this:
var
objDiv = document.getElementById(divId);
//objDiv.style.filter="blendTrans(duration=2)";
if (document.getElementById&&document.all&&!window.opera)
{
objDiv.style.filter="blendTrans(duration=1)";
objDiv.filters.blendTrans.Apply();
objDiv.filters.blendTrans.Play();
}
objDiv.style.display = strStyle;
if (document.getElementById&&!document.all)
objDiv.style.left = ((window.innerWidth-778)/2)+200+'px'
}

mwinter
06-25-2005, 01:55 AM
[...] notice that the position of div is not the same in FF as it's in IE .. what should i do to bring it to the same position.As the markup stands, you can't. However, this may be a good opportunity to strip out some junk. I'll be using the Features 'row' as an example. Before I continue, I'd like to point out that Firefox's behaviour is correct, and IE is broken as usual.

Currently, you have (reformatted):


<tr>
<td>
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<div id="Div1" style="display:none; position: absolute;">
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td style="font-weight: bold; color: #7f1f00; background-color: #be9e56; border-right: 2px solid; border-top: 2px solid; border-left: 2px solid; border-bottom: 2px solid; border-color:#e0c27e;">
<br>
- Unique<br>
- Authentic<br>
- Northern Indian<br>
- Served in a warm and&nbsp;<br>&nbsp;&nbsp;relaxed setting<br>
<br>
</td>
</tr>
</table>
</div>
</td>
</tr>There are several things to note about this snippet.

The first is that you've repeated the long style attribute eight times. That's a lot of redundancy. It would be better to define these properties in a style sheet once, then add them elements via the class attribute. I'll demonstrate that later.

The second, rather glaring observation, is that you have a nested table with one row and one cell that contains text that tries to act like a list. Why not just use a list? That would simplify the above to:


<tr>
<td>
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<ul>
<li>Unique</li>
<li>Authentic</li>
<li>Northern Indian</li>
<li>Served in a warm and relaxed setting</li>
</ul>
</td>
</tr>We can now include what I mentioned earlier: a style sheet and class attribute. You would start by placing:


<style type="text/css">
ul.pop-up,
ul.pop-up li {
margin: 0;
}
ul.pop-up {
background-color: #be9e56;
border: 2px solid #e0c27e;
color: #7f1f00;
font-weight: bold;

padding: 1ex; /* Space between border and content */
width: 10em; /* Use this to control wrapping, not BR elements. */
}
ul.pop-up li {
margin-left: 1em;
padding: 0;
}
</style>in the head element of the document. If you add class="pop-up" to a ul element, like the one in the example above, you'll get a result much like what you have now. However, this doesn't solve the problem, but it does provide a better starting point.

What is happening is that when elements are given a position: absolute declaration, but they aren't actually positioned (no offset properties) they stay where they normally would be if you left the position property alone. As a div element is block-level, that means it will go on a 'line' below the image as you saw. What we need to do is force it onto the end of the same line. We can start by changing the second rule in the style sheet above to:


ul.pop-up {
background-color: #be9e56;
border: 2px solid #e0c27e;
color: #7f1f00;
font-weight: bold;

padding: 1ex; /* Space between border and content */
width: 10em; /* Use this to control wrapping, not BR elements. */

position: absolute;
left: 100%;
top: 0;

display: none; /* Hide by default */
}Perhaps the most important declaration is setting the left property. A value of 100% places the list flush against the right-hand edge of its containing block. All we need to do now, is define what that block is, by setting position: relative on an element.

It would be nice to use the table cell that contains the image, but unfortunately we can't do that as setting the position property on table-related elements is undefined, so instead we'll have to introduce an element: a div will suffice.


<tr>
<td>
<div style="position: relative">
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<ul id="Div1" class="pop-up">
<li>Unique</li>
<li>Authentic</li>
<li>Northern Indian</li>
<li>Served in a warm and relaxed setting</li>
</ul>
</div>
</td>
</tr>Everything will now work properly. Notice that the list now has the id attribute, and it is this that you would show and hide.

Mike