jquery slider is not working properly in Chrome

Question

Here is a live demo: http://sp.smartclientdemo.com/index.php/portfolio?id=commercial

The problem can be seen by clicking on the last thumbnail. In Chrome the gap is coming between the thumbnail and navigational arrows. It working fine with Firefox. The carousel is contained inside this <ul>:

<ul id="pikame" class="pika-thumbs jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: -315px; margin: 0px; padding: 0px; width: 1155px;">

Clicking on other thumbnails, for example ones to the left, are working properly in Chrome and the carousel is behaving inconsistently. Here is a screenshot of the problem.

Could you please give me suggestion how to solve problem in chrome.

Thanks, Animesh

From a quick inspection of the page source you are including `http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.js` twice and also multiple versions of jQuery. This will cause multiple events to fire and could be the source of the problem. — andyb, May 20 '11 at 09:20
@Xavier: the behaviour is different between Chrome and Firefox — andyb, May 20 '11 at 09:23
But i removed http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.‌js in one place .But still showing the problem. — Animesh Sheolikar, May 20 '11 at 09:44
Here is a link of image that will clearly show problem.Thanks — Animesh Sheolikar, May 20 '11 at 09:47
There are still 3 copies of jQuery on the page, `http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery-1.2.1.min.js`, `http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js` and `http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js`. They are different versions so you will need to choose which version you need. I would also try to keep the jQuery file naming convention, e.g. `jquery-1.6.1.min.js` for the minified v1.6 — andyb, May 20 '11 at 10:08
You are also missing the `` tag! Please try and fix the [validation errors](http://validator.w3.org/check?uri=http%3A%2F%2Fsp.smartclientdemo.com%2Findex.php%2Fportfolio%3Fid%3Dcommercial&charset=%28detect+automatically%29&doctype=Inline&group=0) as invalid markup can also lead to non-deterministic cross-browser behaviour. — andyb, May 20 '11 at 12:33

Pehmolelu · Answer 1 · 2011-05-20T10:37:03.097

2

I looked at your code and there are now three jQuerys included total and two are at the beginning:

<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery-1.2.1.min.js"></script> 
<script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>

Also the last one is included twice. The other time its included at the end of the source where the "pikachoose" starts.

The first one is very old jQuery version 1.2.1 and the last one seems to be 1.5. You should check what jQuery version your carousel plugin supports and use that, or then try if it works fine with newest jQuery version.

I believe the error might be how firefox and chrome handles these multiple times included jquerys and it MIGHT be that chrome uses the older and firefox newer version. You should also tell what firefox version and chrome version you were using if the problem persists after deleting the extra jQuerys.

edited May 20 '11 at 10:37

answered May 20 '11 at 10:30

Pehmolelu

3,534
2
26
31

yeah.But i did remove all the jquery other than remaining .But still it is showing same problem. – Animesh Sheolikar May 20 '11 at 11:30
Unless you changed it in a different page, you are incorrect. There are still 3 copies of the jQuery library on the page as I have pointed out in my comment on the question and as @Pehmolelu has answered in this question. – andyb May 20 '11 at 12:19
@andyb Oops, yes like you said :) Didn't notice the hidden comments. – Pehmolelu May 20 '11 at 12:41
@Animesh Sheolikar Did you update your code to live demo because there are still the extra libraries? – Pehmolelu May 20 '11 at 12:42

score 1 · Accepted Answer · answered May 20 '11 at 12:54

Here is a complete demo using your resources that works but with all the extra libraries removed. It works as expected in Chrome 13 and Firefox 4.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>portfolio | S.P</title>
    <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery1.js"></script>
    <script type="text/javascript" src="http://sp.smartclientdemo.com/system/sp/themes/conjuction/js/jquery.pikachoose.js"></script>
    <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/bottom.css" type="text/css" rel="stylesheet" />
    <link href="http://sp.smartclientdemo.com/system/sp/themes/conjuction/css/style1.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            $('#pikame').PikaChoose({carousel:true});
            $('<div class="slide-top"></div>').insertBefore('.pika-stage');
            $('<div class="slide-bottom"></div>').insertAfter('.pika-stage');
        });
    </script>
</head>
<body>
<ul id="pikame" class="jcarousel-skin-pika">
    <li><a href="#" ><img src="http://sp.smartclientdemo.com/uploads/files/93270001.JPG" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car8.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car1.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car2.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car4.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car5.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car3.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car7.jpg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car9.jpeg" alt=""/></a><span></span></li>
    <li><a href="#" ><img src="http://sp.smartclientdemo.com//uploads/files/car10.jpeg" alt=""/></a><span></span></li>
</ul>
<div class="portfolioright">
    <div class="pikachoose"></div>
</div>
</body>
</html>

Note: It is not a completely valid demo, due to the markup in the JavaScript; but it's close enough.

@andyb.I am very much impressed .This is the first time i had posted in this site.Not only i got quick reply but also perfect answer.Once again thank for all who took effort and provided solution. — Animesh Sheolikar, May 21 '11 at 09:21
Happy to help! It's good practice to accept an answer if it has solved your problem. To "accept" an answer you can click on the check mark outline under the voting buttons on the answer you want to accept as the solution. — andyb, May 21 '11 at 11:10
One more doubt if possible that though i understood for what reasons it is occuring but my problem is that in left side of page ie menu is using jquery 1.3 and for right side ie gallery is using 1.5 .And i want both to be used.Even though i tried using no conflict code.And tried to search but not got any solution.Any idea — Animesh Sheolikar, May 21 '11 at 12:01
[`jquery.noConflict()`](http://api.jquery.com/jQuery.noConflict/) should allow multiple versions of jQuery but you have to use this functionality in a very specific order. See [here](http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/) or [Google](http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=njqyer+noconflict+multiple) for examples with 2 versions of jQuery. Are you in control of the menu code? If so you could upgrade the menu to use the new version of jQuery? Or maybe the slider will work with the old version of jQuery? — andyb, May 21 '11 at 12:55

jquery slider is not working properly in Chrome

2 Answers2