javascript not working for firefox!

[yasserstein]

i'm building a webpage using CSS and javascript to produce special effects. i use onmouseover, onmouseout, and onclick events inside a table's cells to change their cssclasses.
everything was going perfect so far, as i'm using VS 2008 BETA2, with the default browser IE 7.0
so now when i try to open my page in either firefox or safari, it's all messed up! the links do not work anymore - i.e. the onclick event is not firing - and the images' fading effects are not taking place!
my question is: is it that difficult to produce a javascript page that works across different browsers?
is there some code i'm missing for my events? i'm feeling totally confused as my code should work!
i'm thankful to any replies.
yasser.

[stymiee]

Developing in IE is your first mistake. Develop in Firefox and then test in IE. Much less work to do to make it compatible.

Post your code so we can see if there is any proprietary code in their (which Microsoft likes to do).

[yasserstein]

thanks for the reply. well i guess that is indeed what i was supposed to do from the beginning, but maybe i chose the easy way to go, which was the more painful too.
anyway, here's a piece of code that i use to generate some thumbnails (image links) and apply a javascript effect on them. the code runs perfectly as expected on ie, but doesn't fire the onclick event on firefox or safari:

style="filter:alpha(opacity=30)"
onmouseover="nereidFade(this,100,30,5); slideShow.src=this.src"
onmouseout="nereidFade(this,30,30,5)"

i copied this code off dynamicdrive.com, and it works fine with IE, but firefox shows the images with 100% opacity, and when i mouse-hover them nothing happens, when they're supposed to become 100% opaque, and change the slideshow image to their original source.

thanks a lot for your time, i'm grateful to any help.
yasser.

[MidiMagic]

IE does it differently than Firefox.

You are using an IE proprietary opacity filter.

Mozilla (Firefox) already uses the CSS3 opacity element.

Neither method works on the other browser.

[yasserstein]

thanks very much for the reply. i already did some search, and came up with the following

# Mozilla (version 1.6 and below) uses the property -moz-opacity:0.5; for transparency. # IE uses the propietary filter:alpha(opacity=50);

http://www.domedia.org/oveklykken/css-transparency.php

so now i used all three statements, and opacity works. but then i can't figure out how make opacity = 100% again it in the javascript function.
here's my function - originally copied off dynamicdrive.com:

function nereidFade(object, destOp, rate, delta)
{
    if (!document.all)
        return
    if (object != "[object]")
    {
        nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
        
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp)
    {
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp)
    {
        nereidFadeObjects[object.sourceIndex]=object;
        object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

the function works on IE only apparently. i tried making some modifications using object.filters.MozOpacity but it doesn't seem to work.
any comments?
thanks.
yasser.

[MattEvans]

try something like this:

object.filters.alpha.opacity+=direction*delta;
object.style.MozOpacity+=direction*delta;

+ other additions where neccessary;[object].style.MozOpacity is the JS property though.

Also, for style attributes it's not usually advisable to work incrementally (i.e. += x )... it will probably be ok in this case, to be honest, but I try and stick to creating a global variable somewhere, incrementing that, and then setting the style attribute directly...

[yasserstein]

thanks a lot for all of you guys, you really helped me out!
i'll go ahead take the liberty of asking one more question, though:
does firefox normally go around changing control positions, placing them wherever it likes, or is it my code that is not enough for it?
the following is a part of a table's code. IE shows the controls inside its cells very neatly, centered inside and everything is perfect, but firefox and safari show them all justified to the left!

<table style="width: 700px; text-align: center" cellpadding="0" cellspacing="0">
    <tr>
        <td class="style357">
             
             <center>
                <img alt="Slideshow" src="issueimages/Q&A/eWaitaker.jpg" id="slideShow" width="500px"
                                                    height="450px" />
                 <p id="quote" style="text-align: center; font-family: Tahoma; color: #3a5774; font-size: large; height: auto; width: auto; direction: ltr;">
                  </p>
             </center>
        </td>

as you can see, i did almost everything to center the controls. they still shift left. i even put the tag before my image but still, nothing!
firefox has been my favorite browser, but now..? i think i'm gonna change my mind a bit about it :D
any ideas?
thanks.
yasser.

[MattEvans]

Do you have a t the beggining of your page? if not, why not? =P See: http://www.w3schools.com/tags/tag_doctype.asp; and http://hsivonen.iki.fi/doctype/ .

If you do, which one? text-align: center; should cascade from table into table cells.. if it doesn't try setting it explicitly on the table cell : tag ( because of the align:center; on the table )...

What is the content of the class 'style357'? Can you post a screenshot of it NOT working, I can't seem to get it to display wrongly, but I'm not entirely sure of what it should look like..

[yasserstein]

thanks for the effort but i solved it just simply by deleting the table i was using and moving the controls to a new table. i know it sounds silly, but none of the many solutions that you gave me worked! anyway, VS is still in beta!
anyway, my problem now is that i need to populate two labels with text in an array i build with C# codebehind. the two labels should be populated when the user hovers over certain images.
i couldn't figure out a way to do it in the onmouseover event, as the array was built in the C# script section.
what should i do?

thanks again :)
yasser.

[MattEvans]

You can't read the data you have in your C# server app from the javascript code running in the client. A common way to 'get' data from server apps to javascript is to write the data values directly into the generated javascript code in a response... I don't know any C#, but I'll pretend C# is C++:

( in part where outputing the page data )

std::vector < std::string > the_cpp_array;
some_function_to_populate_the_array( the_cpp_array );
std::cout << "<script type='text/javascript'>\n";
std::cout << "var the_js_array = new Array( ); \n";
for( int i = 0; i < the_cpp_array.size( ); i++ )
{
  std::cout << "the_js_array[" << i << "] = '" << the_cpp_array[i] << "';\n";
}
std::cout << "</script>";

thus, if 'the_cpp_array' was filled like: { 'hi', 'I', 'am', 'an', 'array' }
then the generated javascript would be:

<script type="text/javascript">
var the_js_array = new Array( );
the_js_array[0]='hi';
the_js_array[1]='i';
the_js_array[2]='am';
the_js_array[3]='an';
the_js_array[4]='array';
</script>

That code could then run on the client, and the javascript could access the data. That assumes that you're generating the page content from within C#.. Erm.. sorry if you can't translate that from C++, I can't translate it to C#.

You might get a more useful answer from the C# forum.

[yasserstein]

very nice. thanks a lot.
you have no idea how you've helped me out!
thanks again.
yasser.