javascript not working for firefox!

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,017 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,992 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3475 | Replies: 10

Page 1 of 2

•

Join Date: Aug 2007

Posts: 12

Reputation: yasserstein is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

yasserstein yasserstein is offline

Offline

Newbie Poster

javascript not working for firefox!

Aug 29th, 2007

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.

•

Join Date: May 2006

Location: New Jersey

Posts: 1,422

Reputation: stymiee is on a distinguished road

Rep Power: 5

Solved Threads: 34

stymiee

Offline

He's No Good To Me Dead

Re: javascript not working for firefox!

Aug 29th, 2007

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).

John Conde
Brainyminds | Merchant Account Services | I Love Code
IT'S HERE: Merchant Accounts 101 Everything you need to know about merchant accounts!

•

Join Date: Aug 2007

Posts: 12

Reputation: yasserstein is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

yasserstein yasserstein is offline

Offline

Newbie Poster

Re: javascript not working for firefox!

Aug 30th, 2007

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:

Help with Code Tags

(Toggle Plain Text)

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.

•

Join Date: Jan 2007

Posts: 2,556

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 114

MidiMagic

Offline

Posting Maven

Re: javascript not working for firefox!

Aug 30th, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Aug 2007

Posts: 12

Reputation: yasserstein is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

yasserstein yasserstein is offline

Offline

Newbie Poster

Re: javascript not working for firefox!

Aug 30th, 2007

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:

Help with Code Tags

(Toggle Plain Text)

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.

•

Join Date: Jul 2006

Location: Deptford, London

Posts: 954

Reputation: MattEvans has a spectacular aura about

Rep Power: 5

Solved Threads: 48

MattEvans

Offline

Posting Shark

Re: javascript not working for firefox!

Aug 30th, 2007

try something like this:

Help with Code Tags

(Toggle Plain Text)

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...

Last edited by MattEvans : Aug 30th, 2007 at 3:38 am.

If it only works in Internet Explorer; it doesn't work.

•

Join Date: Aug 2007

Posts: 12

Reputation: yasserstein is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

yasserstein yasserstein is offline

Offline

Newbie Poster

Re: javascript not working for firefox!

Aug 30th, 2007

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!

Help with Code Tags

(Toggle Plain Text)

<table style="width: 700px; text-align: center" cellpadding="0" cellspacing="0">
    <tr>
        <td class="style357">
             <br />
             <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 <center> 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

any ideas?
thanks.
yasser.

•

Join Date: Jul 2006

Location: Deptford, London

Posts: 954

Reputation: MattEvans has a spectacular aura about

Rep Power: 5

Solved Threads: 48

MattEvans

Offline

Posting Shark

Re: javascript not working for firefox!

Aug 30th, 2007

Do you have a <!DOCTYPE tag at 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 : <td style="text-align:center;", and if that STILL doesn't work; try this on the img tag:
<img style="display:block;margin-left:auto;margin-right:auto;"

However; that does work for me on Firefox version 2.0.0.6. I get the image centered, and it stays centered if I remove the <center> 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..

If it only works in Internet Explorer; it doesn't work.

•

Join Date: Aug 2007

Posts: 12

Reputation: yasserstein is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

yasserstein yasserstein is offline

Offline

Newbie Poster

Re: javascript not working for firefox!

Aug 30th, 2007

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.

•

Join Date: Jul 2006

Location: Deptford, London

Posts: 954

Reputation: MattEvans has a spectacular aura about

Rep Power: 5

Solved Threads: 48

MattEvans

Offline

Posting Shark

Re: javascript not working for firefox!

#10

Aug 30th, 2007

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 )

 Help with Code Tags 
 c++ Syntax (Toggle Plain Text) 
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>";
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:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<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>
<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.

If it only works in Internet Explorer; it doesn't work.