473,327 Members | 1,892 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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

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...]
Jul 20 '05 #1
2 2467

"David" <ru**************@yahoo.com> schreef in bericht
news:Xn*******************************@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

Jul 20 '05 #2
David <ru**************@yahoo.com> 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 - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Prometheus Research | last post by:
http://newyork.craigslist.org/eng/34043771.html We need a JavaScript component which will auto-submit a form after a set period has elapsed. The component must display a counter that dynamically...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.