Javascript doesn't work in IE8 or Firefox

Hexxabubba · May 26, 2010, 1:12am

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!

Paul_Wilkins · June 13, 2010, 5:45am

When I visit the location of the transparent gif, I find that the image doesn’t exist at:
http://michaelwood.me/images/white.gif

Paul_Wilkins · June 13, 2010, 10:54pm

First place a transparant gif inside the link and see if that helps solve the problem.


<a href="javascript:;" onmousedown="changeMain('showcase_img','1')" id="1" ><img src="http://michaelwood.me/images/trans_gif.gif"></a>

Then you can fine-tune the appearance of it.

Paul_Wilkins · June 13, 2010, 2:33pm

I have doubts that the background image on the link will have any effect.

I suggest that you return to my suggestion of using a transparent image in the link itself.

Hexxabubba · June 13, 2010, 2:17pm

I removed this from the Function.js

        the_style.background = "#747D95 url(images/white.gif) no-repeat 50% 50%";;

It didn’t seem to make any difference. I really can not figure out how its referenced from the html. I’m totally confused.

http://michaelwood.me/project_gallery.html

Hexxabubba · June 13, 2010, 5:08am

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…

Hexxabubba · June 13, 2010, 6:20am

The image is @.http://michaelwood.me/images/trans_gif.gif

Paul_Wilkins · June 13, 2010, 6:27am

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.

Paul_Wilkins · June 13, 2010, 12:37am

Try the suggestion from Hexxabubba and set the transparant gif as the background for those links.

Paul_Wilkins · June 13, 2010, 1:55am

Pardon, it was SlickAU.

Please give us a look at a test page where you have tried the transparant background image on the links.

Hexxabubba · June 13, 2010, 1:50am

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.

Hexxabubba · June 13, 2010, 4:44pm

I don’t know exactly what you mean.(my fault) Can you be specific about what code(and where) your referring to, and what code I can replace it with that would accomplish my goal.

Thanks…

Hexxabubba · June 12, 2010, 3:47pm

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.

Hexxabubba · June 9, 2010, 4:13pm

Thanks Paul!

http://michaelwood.me/project_gallery.html

Paul_Wilkins · June 9, 2010, 12:54pm

Once you update a test page with these changes, further investigation can then be done.

Hexxabubba · June 10, 2010, 1:20pm

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!

Hexxabubba · June 9, 2010, 12:47pm

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.

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);
    }    
  }
}

Paul_Wilkins · June 8, 2010, 12:46pm

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.


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

var the_style, hiddenform, current;

Then we assign content to them.


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

Here it is all put together.


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.

Hexxabubba · June 8, 2010, 12:32pm

Thanks so much…My problem is with FF and IE8…

http://beauchenecompany.com/project_gallery.html

SlickAU · June 10, 2010, 2:41am

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