Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery click event not working in Firefox

Posted on 2010-08-24
9
Medium Priority
?
1,357 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 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