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

Discussion in 'Javascript' started by David, Sep 20, 2003.

  1. David

    David Guest

    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...]
     
    David, Sep 20, 2003
    #1
    1. Advertising

  2. "David" <> 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
     
    Janwillem Borleffs, Sep 21, 2003
    #2
    1. Advertising

  3. David <> 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 -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Sep 21, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page