Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > My javascript works great for every browser but Safari. How can I fix that?

Reply
Thread Tools

My javascript works great for every browser but Safari. How can I fix that?

 
 
David
Guest
Posts: n/a
 
      09-20-2003
On every web browser except Safari, this website works great. (Well,
by "every" I mean Mozilla, Netscape, and Internet Explorer, for Mac
and Windows).

The site is: http://www.ruleofthirds.com

(the problem does not exist on the first page... just all the other
pages, so you'll have to click on something to see the problem)

The problem lies with images swapping on rollover. I use a small
black .gif file to swap with images at various places in the site so
that they seem to disappear when you're done mousing over them. I use
the same small black .gif file regardless of the size of the image
it's being swapped with. All the other browsers know to resize the
black .gif to the same size as the file it's being swapped with. But
Safari simply overlays the tiny black .gif on top of the image it's
being swapped with, leaving both images occupying the same space
(making it look like a small bite has been taken out of the image).

Can I fix this for Safari users without creating a big headache for
myself? (the only solution I can think of is to actually use black
..gif files that are the same size as the images they're swapping with
-- which seems unnecessarily complicated).

Anyone able to help? Since my target audience largely uses Macintosh
computers, I don't want to shrug off the Safari users.

[Note: I'm no pro when it comes to coding, so my scripting may be a
little sloppier than some...]
 
Reply With Quote
 
 
 
 
Janwillem Borleffs
Guest
Posts: n/a
 
      09-20-2003

"David" <(E-Mail Removed)> schreef in bericht
news:Xns93FCAA2AA5760sparkeynyyahoocom@24.168.128. 74...
>
> The problem lies with images swapping on rollover. I use a small
> black .gif file to swap with images at various places in the site so
> that they seem to disappear when you're done mousing over them. I use
> the same small black .gif file regardless of the size of the image
> it's being swapped with. All the other browsers know to resize the
> black .gif to the same size as the file it's being swapped with. But
> Safari simply overlays the tiny black .gif on top of the image it's
> being swapped with, leaving both images occupying the same space
> (making it look like a small bite has been taken out of the image).
>


I'm not using a mac, so I can't be shure, but what you could try is to pass
the image's dimensions to the Image constructor when you aren't laready
doing this:

// Preload an image of 100 X 200 pixels
var img = new Image(100, 200);


HTH,
JW



 
Reply With Quote
 
 
 
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      09-21-2003
David <(E-Mail Removed)> writes:

[ http://www.ruleofthirds.com ]

> On every web browser except Safari, this website works great. (Well,
> by "every" I mean Mozilla, Netscape, and Internet Explorer, for Mac
> and Windows).


And nothing else will work.
In the portfolio pages, the doPic function contains two conditions:
if (ns5up || ie4up) {
....
else { if (ns5up == false && netscape == true) {

This pretty much excludes anything non-netscape and non-IE4+. If sure
excludes Opera and I would guess also Safari. Clicking on the image
has no effect when you don't match one of these tests.

You are also calling it with the "javascript:" pseudo protocol. That
is bad for several reasons, and you should use the onclick event handler
instead.

> The problem lies with images swapping on rollover.


That code could do with a fixup too. It contains:
document.images[imgLocation].src = eval(imgLocation + now + ".src");
A value for "imgLocation" would be "image1" and "now" is, e.g., 4.

You never need to use the eval function to access an object property
or variable value. It will work, but it is prettier to use
document.images[imgLocation].src = window[imgLocation + now].src;
or, since you know the value of that src property, you can just set
it directly:
document.images[imgLocation].src =
(now==0)?"../images/black.gif""images/"+now+"-thumb.gif");

> But Safari simply overlays the tiny black .gif on top of the image
> it's being swapped with, leaving both images occupying the same
> space (making it look like a small bite has been taken out of the
> image).


That is obviously a bug. It fails to refresh the part of the display
that is no longer covered by the image.

> Can I fix this for Safari users without creating a big headache for
> myself?


You could change the CSS property "visibility" to "hidden" instead of
changing the image to black.

> [Note: I'm no pro when it comes to coding, so my scripting may be a
> little sloppier than some...]


Not really, you overestimate most of the coders out there

/L
--
Lasse Reichstein Nielsen - http://www.velocityreviews.com/forums/(E-Mail Removed)
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Can't Ping from Serial0, but E0 works great - One address only? scooter133@gmail.com Cisco 2 10-10-2008 09:30 AM
Xah's Edu Corner: The Concepts and Confusions of Pre-fix, In-fix, Post-fix and Fully Functional Notations Xah Lee Perl Misc 21 03-21-2006 07:02 AM
Xah's Edu Corner: The Concepts and Confusions of Pre-fix, In-fix, Post-fix and Fully Functional Notations Xah Lee Python 23 03-21-2006 07:02 AM
Xah's Edu Corner: The Concepts and Confusions of Pre-fix, In-fix, Post-fix and Fully Functional Notations Xah Lee Java 22 03-21-2006 07:02 AM



Advertisments