943,964 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Aug 29th, 2007
0

javascript not working for firefox!

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
yasserstein is offline Offline
12 posts
since Aug 2007
Aug 29th, 2007
0

Re: javascript not working for firefox!

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).
Moderator
Reputation Points: 161
Solved Threads: 38
He's No Good To Me Dead
stymiee is offline Offline
1,422 posts
since May 2006
Aug 30th, 2007
0

Re: javascript not working for firefox!

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. style="filter:alpha(opacity=30)"
  2. onmouseover="nereidFade(this,100,30,5); slideShow.src=this.src"
  3. 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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
yasserstein is offline Offline
12 posts
since Aug 2007
Aug 30th, 2007
0

Re: javascript not working for firefox!

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Aug 30th, 2007
0

Re: javascript not working for firefox!

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

Quote ...
# 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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function nereidFade(object, destOp, rate, delta)
  2. {
  3. if (!document.all)
  4. return
  5. if (object != "[object]")
  6. {
  7. nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
  8. return;
  9. }
  10.  
  11. clearTimeout(nereidFadeTimers[object.sourceIndex]);
  12.  
  13. diff = destOp-object.filters.alpha.opacity;
  14. direction = 1;
  15. if (object.filters.alpha.opacity > destOp)
  16. {
  17. direction = -1;
  18. }
  19. delta=Math.min(direction*diff,delta);
  20. object.filters.alpha.opacity+=direction*delta;
  21.  
  22. if (object.filters.alpha.opacity != destOp)
  23. {
  24. nereidFadeObjects[object.sourceIndex]=object;
  25. object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
  26. }
  27. }
  28.  

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
yasserstein is offline Offline
12 posts
since Aug 2007
Aug 30th, 2007
0

Re: javascript not working for firefox!

try something like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. object.filters.alpha.opacity+=direction*delta;
  2. 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 4:38 am.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Aug 30th, 2007
0

Re: javascript not working for firefox!

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!
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <table style="width: 700px; text-align: center" cellpadding="0" cellspacing="0">
  2. <tr>
  3. <td class="style357">
  4. <br />
  5. <center>
  6. <img alt="Slideshow" src="issueimages/Q&A/eWaitaker.jpg" id="slideShow" width="500px"
  7. height="450px" />
  8. <p id="quote" style="text-align: center; font-family: Tahoma; color: #3a5774; font-size: large; height: auto; width: auto; direction: ltr;">
  9. </p>
  10. </center>
  11. </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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
yasserstein is offline Offline
12 posts
since Aug 2007
Aug 30th, 2007
0

Re: javascript not working for firefox!

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..
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Aug 30th, 2007
0

Re: javascript not working for firefox!

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
yasserstein is offline Offline
12 posts
since Aug 2007
Aug 30th, 2007
0

Re: javascript not working for firefox!

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 )
c++ Syntax (Toggle Plain Text)
  1. std::vector < std::string > the_cpp_array;
  2. some_function_to_populate_the_array( the_cpp_array );
  3. std::cout << "<script type='text/javascript'>\n";
  4. std::cout << "var the_js_array = new Array( ); \n";
  5. for( int i = 0; i < the_cpp_array.size( ); i++ )
  6. {
  7. std::cout << "the_js_array[" << i << "] = '" << the_cpp_array[i] << "';\n";
  8. }
  9. std::cout << "</script>";
thus, if 'the_cpp_array' was filled like: { 'hi', 'I', 'am', 'an', 'array' }
then the generated javascript would be:
HTML Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. var the_js_array = new Array( );
  3. the_js_array[0]='hi';
  4. the_js_array[1]='i';
  5. the_js_array[2]='am';
  6. the_js_array[3]='an';
  7. the_js_array[4]='array';
  8. </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.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: menu swapper/slush box help
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: master page interaction





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC