Solved

Jquery click event not working in Firefox

Posted on 2010-08-24
9
1,296 Views
Last Modified: 2012-06-27
Hi
I am working on a Jquery image slider.
Basically I have a main image on the top and  few thumbnail images at the bottom.
When I click on the thumbnail image, it should show up as the main image on the Top.
My following code is working perfectly on IE but its not working on Fire Fox.
When the page loads It displays the l images properly,  but when I click on one of the thumbnail images , main image on the Top is not changing. Basically click event is not working in Fire Fox.
I am using Firefox 3.5.11 version.
Not sure why its not woking in Fire fox .
Any suggestions or help is  appreciated.

Thanks

Ken



var images = new Array();
    var currentIndex = 0;
    var stripSize;

    $(function() {
        LoadImages();
        InitializeFilmStrip();
        // set default border for thumbnail to 0px
        $('.ImgThumbnail').css({ "borderWidth": "0px" });
        // setting mouse over thumbnail effect
        $('.ImgThumbnail').hover(function() {
            $(this).css({ "borderWidth": "2px" });
        },
                function() { $(this).css({ "borderWidth": "0px" }); }
            );

        // setting click event for each thumbnail
            $('.ImgThumbnail').click(function() {
                var thumbSrc = $(this).attr("src");
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });
      

        $('#rightArrow').click(function() { MoveImages("right"); ResetImages("right"); })
                .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
        $('#leftArrow').click(function() { MoveImages("lefT"); ResetImages("left"); })
                .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
    });

    function StopFlashing(obj) {
        $(obj).stop(true).css("opacity", "show");
    }

    function StartFlashing(obj) {
        $(obj).animate({ "opacity": "toggle" }, "slow", "linear", function() { StartFlashing(obj); });
    }


<div class="right_col">
            <div id="viewer" style="width:500px">
                <img id="viewerImg" />
                <div width="500px">
                   
                    <div id="filmstrip" class="FilmStrip">
                     <img id="leftArrow" tooltip="Previous Page" src="Images/left_arrow.png" class="MovingLeft" />
                        <img src="Images/BigThumbnail1.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail2.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail3.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail4.gif" class="ImgThumbnail" />
                         <img id="rightArrow" tooltip="Next Page" src="Images/right_arrow.png" class="MovingRight" />
                    </div>
                   
                </div>
            </div>
        </div>

Open in new window

0
Comment
Question by:artnet1
  • 4
  • 4
9 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33516200
you can verify if it's actually calling the click by putting a break point in the click event with Firebug.

One thing I would suggest looking for is multiple items in the page with an id of viewerImg

I've had instances where using $("#viewerImg") in IE will return the first item that matches that id, while in Firefox nothing is returned.  Id's are supposed to be unique and I think the fact that it's not unique causes Firefox to not return it.
0
 

Author Comment

by:artnet1
ID: 33516498
Hi

I tried putting an alert  after  the click event.
Its never reaching the alert in Firefox .

"viewerImg" id is used only once.
Still not working.
Any other solution??


0
 
LVL 15

Expert Comment

by:SRigney
ID: 33517452
Is this on a site that's public and I can look at?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 15

Expert Comment

by:SRigney
ID: 33517455
in Firebug you can use the console to type
$("#viewerImg").size() and make sure that it is matching something.
0
 

Author Comment

by:artnet1
ID: 33521342
Hi Rigney

Unfotunately its not live yet. So you cant look at it .
In Firebug $("#viewerImg").size()  is giving the value 1

0
 

Author Comment

by:artnet1
ID: 33521797
Hi Rigney

Please desregard my earlier message.
when I checked $("#viewerImg").size() from Firefox>Tool>ErrorConsole
I am getting error "$ not defined".
0
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 33522521
Without being able to see the site in action it's harder to see what the problem is.  Let's try this.

Try adding this to help identify where it is having the error.

Instead of
 // setting click event for each thumbnail
            $('.ImgThumbnail').click(function() {
                var thumbSrc = $(this).attr("src");
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });


 // setting click event for each thumbnail
alert( "number of .imgthumbnails found (should be > 0): " + $('.ImgThumbnail').size() );
            $('.ImgThumbnail').click(function() {
alert(".imgThumbnail clicked");
                var thumbSrc = $(this).attr("src");
alert("source attribute: " + thumbSrc);
alert("viewerImage count (should be 1): " + $('#viewerImg').size());
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });
0
 
LVL 3

Expert Comment

by:SuchetaL
ID: 33528304

~* " I am getting error "$ not defined". *~

Have you included the call to include Jquery ? And is it getting included correctly?  
Incase you have not included try adding the following to the top of your code & execute
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
0
 

Author Closing Comment

by:artnet1
ID: 33641308
thanks for your advice!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 35
Google Maps API and PHP 25 29
Botom of page is wrong color 5 11
JqueryUI sortable append variable to post 1 38
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question