SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript doesn't work in IE8 or Firefox

    thanks in advance to all that give on this site...Please excuse my nubieness! Included is the code for a gallery that loads 6 images. Click on the thumb and get the image. However, it doesn't work in the newer browsers IE8 & Firefox. Chrome, Opera, and IE 7 work fine. I'm looking for some suggestions. There is also an external page and a page of functions which I can't tell if they relate to this. I would be happy to post them as well if needed. Thanks!

    Code JavaScript:
     


    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','1')" id="1" ></a></div>
    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','2')" id="2" ></a></div>
    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','3')" id="3" ></a></div>
    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','4')" id="4" ></a></div>
    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','5')" id="5" ></a></div>
    <div class="thumb"><a href="javascript:;" onmousedown="changeMain('gallery_img','6')" id="6" ></a></div>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Try returning false from the onmousedown so that the garbage you have in the href doesn't try to run.

    You really ought to replace the href garbage with something meaningful for those with JavaScript disabled as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANKS Stephen...Please excuse my ignorance of JS.
    Try returning false from the onmousedown so that the garbage you have in the href doesn't try to run.
    Do you mean..
    <div class="thumb"><a href="javascript:;" onmousedown=False"changeMain('gallery_img','1')" id="1" ></a></div>

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd be better off using the onclick method for each of your anchors...

    eg.

    Code:
    <div class="thumb"><a href="#image1" onclick="changeMain('gallery_img','1'); return false;" id="1" ></a></div>

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You for your help! Works perfect in opera & chrome. basically same deal with IE8 and FF. IE8 it seems like I can get images to change if I click on left side of thumb in exact right place. But it's tough. I get no image change in Firefox.

  6. #6
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code for the external function for the changeMain. Maybe this is messing it up? Help...

    function changeMain(the_div,the_change)
    {
    var the_style = getStyleObject(the_div);
    if (the_style != false)
    {
    current = hiddenform.current.value;
    changeBg(current);
    the_style.background = "#ECE2C4 url(images/" + the_div + "_" + the_change + ".jpg) no-repeat 1px 1px";
    hiddenform.current.value = the_change;
    changeBg2(the_change);
    }
    }

    function next(the_div)
    {
    var the_style = getStyleObject(the_div);
    if (the_style != false)
    {
    current = hiddenform.current.value;
    if (current >= 15)
    {
    changeBg(current);
    the_change = 1;
    changeMain(the_div,the_change);

    }
    else
    {
    changeBg(current);
    the_change = ++current;
    changeMain(the_div,the_change);

    }
    }
    }

    function previous(the_div)
    {
    var the_style = getStyleObject(the_div);
    if (the_style != false)
    {
    current = hiddenform.current.value;
    if (current-1 >= 1)
    {
    changeBg(current);
    the_change = --current;
    changeMain(the_div,the_change);
    }
    else
    {
    changeBg(current);
    the_change = 15;
    changeMain(the_div,the_change);
    }
    }
    }

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyone that can help me with this? I'm seriously stuck....

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a working example so we can test to see what the problem is?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hexxabubba View Post
    Is there anyone that can help me with this? I'm seriously stuck....
    I have created a local simulation using your HTML (with the update) and script code, and some other functions to make it work, such as getStyleObject, changeBg, and changeBg2.

    My simulation works well across all of Opera, Internet Explorer and Firefox, so that confirms that the problem lies with something else in your page that we have not yet seen.

    You will need to provide a link to a test page, or some other way for us to experience the web page that fails to correctly work for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much...My problem is with FF and IE8...

    http://beauchenecompany.com/project_gallery.html

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yeah okay, I see what's the problem.

    You're using an identifier for the form (correct) and expecting a global variable to find it (wrong).

    Most web browsers will find named elements as global variables, but things differ between id and name attributes. You really should access things the proper way instead with getElementById.

    Wherever your code uses hiddenform, and that section of code has not defined hiddenform, you need to create that variable.

    Code javascript:
    function changeMain(the_div, the_change) {
        var the_style = getStyleObject(the_div);
        if (the_style != false) {
            current = hiddenform.current.value;
            ...

    First we specify all of the new variables that we create in the function, which are the_style, current, and hiddenform

    Code javascript:
    var the_style, hiddenform, current;

    Then we assign content to them.

    Code javascript:
    the_style = getStyleObject(the_div);
    hiddenform = document.getElementById('hiddenform');
    ...
    current = hiddenform.current.value;

    Here it is all put together.

    Code javascript:
    function changeMain(the_div, the_change) {
        var the_style, current, hiddenform;
        the_style = getStyleObject(the_div);
        hiddenform = document.getElementById('hiddenform');
        if (the_style != false) {
            current = hiddenform.current.value;
            ...

    Then you need to do something similar to all of the other places that the script uses hiddenform.

    If you think that there is then too much duplication, you may be right. Then, we can look at techniques to reduce the duplication.

    For now though, get things working. Once it's working we can then go through techniques to reduce duplication, such as passing hiddenform to where it's needed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnaks so much! That was very helpful. I now have it working in Chrome, Safari, Opera, and FF! Yeah! But IE 8 is still my nemesis. It seems like it works if you click on a small portion of the thumbnail, but anyone using it would think it didn't work. Here's what I did with the functions.

    Code JavaScript:
    function GetRandom(start,end) 
    { 
        var range = end - start + 1; 
        var result = start + Math.floor(Math.random()*range); 
        return result;
    }
     
    function LoadRandom(the_div, images) 
    { 
      result = GetRandom(1,images);
      var image = new Array();
      image[0] = new Image();
      image[0].src = "images/" + the_div + "_" + result + ".jpg";
      var the_style, current, hiddenform;
        the_style = getStyleObject(the_div);
        hiddenform = document.getElementById('hiddenform');
        if (the_style != false)
     
      {
        the_style.background = "#ECE2C4 url(images/" + the_div + "_" + result + ".jpg) no-repeat 1px 1px";
        hiddenform.current.value = result; 
        changeBg2(result);
      }
      for (a=1;a<=images;a++)
      {
        image[a] = new Image();
        image[a].src = "images/" + the_div + "_" + a + ".jpg";
      } 
    }
     
    function changeBg(the_div)
    {
      var the_style = getStyleObject(the_div);
      if (the_style != false)
      {
        the_style.background = "#D3D8E3";
      }
    }
     
    function changeBg2(the_div)
    {
     var the_style, current, hiddenform;
        the_style = getStyleObject(the_div);
        hiddenform = document.getElementById('hiddenform');
        if (the_style != false)
     
      {
     
        the_style.background = "#747D95 url(images/white.gif) no-repeat 50% 50%";
        hiddenform.current.value = the_div; 
      }
    }
     
    function getStyleObject(objectId) {
      if (document.getElementById && document.getElementById(objectId)) {
        return document.getElementById(objectId).style;
      } else if (document.all && document.all(objectId)) {
        return document.all(objectId).style;
      } else {
        return false;
      }
    }
     
     
    function changeMain(the_div, the_change) {
        var the_style, current, hiddenform;
        the_style = getStyleObject(the_div);
        hiddenform = document.getElementById('hiddenform');
        if (the_style != false) {
    current = hiddenform.current.value;
        changeBg(current);
         the_style.background = "#ECE2C4 url(images/" + the_div + "_" + the_change + ".jpg) no-repeat 1px 1px";
        hiddenform.current.value = the_change;
        changeBg2(the_change);
      }
    }
     
    function next(the_div)
    {
      var the_style, current, hiddenform;
      the_style = getStyleObject(the_div);
      if (the_style != false) {
    current = hiddenform.current.value;
        if (current >= 15)
        {
    	    changeBg(current);
    	    the_change = 1;
    	    changeMain(the_div,the_change);
     
        }
        else
        {
    	    changeBg(current);
    	    the_change = ++current;
    	    changeMain(the_div,the_change);
     
        }  
      }
    }
     
    function previous(the_div)
    {
      var the_style, current, hiddenform;
      the_style = getStyleObject(the_div);
      hiddenform = document.getElementById('hiddenform');
     
      if (the_style != false)
      {
        current = hiddenform.current.value;
        if (current-1 >= 1)
        {
    	    changeBg(current);
    	    the_change = --current;
    	    changeMain(the_div,the_change);
        }
        else
        {
    	    changeBg(current);
    	    the_change = 15;
    	    changeMain(the_div,the_change);
        }    
      }
    }

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Once you update a test page with these changes, further investigation can then be done.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    IE doesn't give you anything to click on because there is nothing to click on in the link. Only the border in IE is recognising that the mouse is over it.

    What you could do is to put a 1x1 transparant gif inside the link and set its width and height.

    I don't know of other solutions that would work on IE, unless anyone else has some ideas?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've come across this problem before and think its a common IE bug...

    As pmw57 suggested you could place an image in the link with the appropriate dimensions or you can also resolve this issue by setting a transparent gif as the background for the anchors.

    Good luck

  17. #17
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jacked by MS again...Why do they make it so hard?
    Thank you both so much for your time, I will play with this using your recommendations and see what I can come up with.

    Stay Tuned...I may be back!

  18. #18
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only the border in IE is recognising that the mouse is over it.
    I get this, as i see I can expand the size of the border in the .thumb a:hover in CSS thus giving me me more real estate to click on.
    What you could do is to put a 1x1 transparant gif inside the link and set its width and height.
    I'm assuming that this piece of code <div class="thumb"><a href="#image1" refers to the area to be clicked on, but I am at a loss as to where to place the image. I have tried in the CSS and Html with bad results, which I will not show you because it's embarassing. Please excuse my ignorance of these matters, I'm trying to learn and would appreciate some more help.

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Try the suggestion from Hexxabubba and set the transparant gif as the background for those links.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am hexxabubba, and do you mean in the CSS or the html? I've tried both but I'm sure I'm doing it wrong.

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hexxabubba View Post
    I am hexxabubba, and do you mean in the CSS or the html? I've tried both but I'm sure I'm doing it wrong.
    Pardon, it was SlickAU.

    Please give us a look at a test page where you have tried the transparant background image on the links.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is...Don't Laugh...
    http://michaelwood.me/project_gallery.html

    The transparent gif is in he background of the CSS. .thumb a

    Thanks Again Paul..

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    When I visit the location of the transparent gif, I find that the image doesn't exist at:
    http://michaelwood.me/images/white.gif
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Member
    Join Date
    May 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The inline style attribute that you currently have on the links is over-riding any other style declarations that you make.

    The bad link is on the inline style attribute, and that is what you need to fix. If the white background image is not appropriate, then remove the reference to it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •