Solved

Jquery click event not working in Firefox

Posted on 2010-08-24
9
1,288 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now