Solved

Jquery click event not working in Firefox

Posted on 2010-08-24
9
1,332 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

617 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