Solved

Problem with two instances of CarouFredSel on same page

Posted on 2014-03-14
30
3,921 Views
Last Modified: 2014-03-14
I have a page with two image carousels - seen here:
http://andrewsgroup.ca/test/listingdetail.cfm?sysid=260834707



The lower one works fine (except it is scrolling the upper one at the same time.)
The upper one only scrolls on arrow key press, but it is also moving both at the same time.

I have tried to change div id's, and tried to create separate functions for each instance..I am having no success, I don't really know what I am doing, sort of a shotgun method to try to fix..

My knowledge of JS and Jquery is very basic.
Can you help?


for convenience here are the scripts files-:
http://andrewsgroup.ca/test/assets/js/carousel.js
http://andrewsgroup.ca/test/assets/js/realia.js
http://andrewsgroup.ca/test/assets/css/realia-blue.css

Thanks
0
Comment
Question by:izweig
[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
  • 15
  • 14
30 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39930228
The code is junk.  It can not even make all the way through the HTML validator.  The validator reports 18 errors before bombing on line 385 because of block elements stuffed inside an a tag.

Two carousels in the same page is less of a problem than the quality of the code.  there is very little point in trying to make special effects work for a page that is so badly broken that the validator cannot make it all the way through.

Take the page to: http://validator.w3.org/

After you validate it and fix the erors, you will have a better chance of getting the effects to work.

Cd&
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39930233
Try this for your navigation

 $('.carousel-wrapper .content ul').carouFredSel({
scroll: {
items: 1
},
auto: false,
next: {
button: function() { return $(this).parent().siblings(".carousel-next")},
key: 'right'
},
prev: {
button:function() { return $(this).parent().siblings(".carousel-prev")},
key: 'left'
}
}); 

Open in new window

0
 

Author Comment

by:izweig
ID: 39930280
replacing that code caused no change...
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!

 

Author Comment

by:izweig
ID: 39930290
COBOLdinosaur- errors fixed.
0
 

Author Comment

by:izweig
ID: 39930303
Gary (Cathal)

I stand correct. Works beautifully
Thanks!!
0
 

Author Closing Comment

by:izweig
ID: 39930304
Thanks for the quick and perfect fix..
Can i get a bit of an explanation on how this fixed it?
Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930317
CarouFredsel doesn't have anything coded in to target individual sliders itself (bad on them)
So this code tells it exactly which element in the dom to attach the prev/next actions to.
0
 

Author Comment

by:izweig
ID: 39930326
I actually just uploaded the change to the webserver, it is not working( weird) it works fine on localhost. Any idea why this may be?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930347
Do an hard refresh.
0
 

Author Comment

by:izweig
ID: 39930354
Refreshed,Cleared my cache...When the page loads you can see the blue scrolling buttons load on the top scroller, then they disappear, they do however show in the source tho...and
key press will not move the top scroller either...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930365
Do CTRL+F5

Working fine for me on both sliders independently
0
 

Author Comment

by:izweig
ID: 39930421
Seems to be an issue with Chrome Mac....
Did a Cmd Shft R...
Still buggy..should I ask the E-E community?
1015-EYREMOUNT-DR-West-Vancouver.jpg
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930450
Yeah I get the same problem in Chrome
You have two bindings for the slider under function InitCarousel() {} - remove the first one - might be conflicting.
0
 

Author Comment

by:izweig
ID: 39930484
Well that sort of works..lol
It looks good, but does not work at all like that....
The really odd thing is it works just fine locally(with both bindings).
Any Other ideas?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930531
Something is adding a bootstrap hidden class to them.
0
 

Author Comment

by:izweig
ID: 39930580
I only come up with:

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

This should not cause this??

Do you see something other that that?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930592
I'm still looking through the code, its annoying its only Chrome (which I find hard to debug with)

Maybe time to move to a better carousel
http://owlgraphic.com/owlcarousel/

(This is one I use with multiple sliders on the page and never had a problem with it cross browser, even better it is touch enabled)
0
 

Author Comment

by:izweig
ID: 39930598
You're probably right about owl... are you giving up?:)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930607
I'll keep looking for a while longer.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930626
It's hard to debug something when it works fine on first load in a new tab then stops working when you refresh the page.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930633
All I can suggest is give the two carousels unique classes and duplicate the init code for the two classes and see if it works.
0
 

Author Comment

by:izweig
ID: 39930645
I had originally tried that before posting my question.Either I did it incorrectly or I did i correctly and it did not work.

Is it not called by ID?

ID  #main wraps both carousels.
Could I call one by class and one by ID...this is where i get a bit confused...

For example would this work..

...InitCarousel2();...


function InitCarousel() {
      $('#main .carousel .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            auto: false,
            next: {.....


function InitCarousel2() {
      $('.MyNewClass .carousel .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            auto: false,
            next: {.....


HTML:

<div class="MyNewClass span12">
  <div class="carousel">
    <h2 class="page-header">Similar Listings</h2>
    <div class="content">
        <a class="carousel-prev"> Previous</a>
        <a class="carousel-next" >Next</a>......
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930654
Give each carousel div a unique class where you currently use carousel for both of them and change the jquery like so

function InitCarousel() {
      $('.carousel1 .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            ...

      $('.carousel2 .content ul').carouFredSel({
            scroll: {
                  items: 1
            },
            ...

}
0
 

Author Comment

by:izweig
ID: 39930668
I sort of get it..Tried it not great results...
Don't I also have to change all css instances of carousel to carouse1 and carousel 2 and then change all the atributes of each?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930679
You can leave the carousel class but add the other unique class
0
 

Author Comment

by:izweig
ID: 39930693
Add it where?
To the stylesheets or to the divs or to both?

I had just commented out the code block for the lower carousel.
It did not help...

Is frustrating indeed as I see it working randomly..grrrr
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930705
Your two carousels add another class

Top slider
<div class="carousel property">
<div class="preview">
...

And bottom slider
<div class="carousel bottom-slider">
<h2 class="page-header">Similar Listings</h2>
...

The js becomes
function InitCarousel() {
	$('.property .content ul').carouFredSel({
		scroll: {
			items: 1
		},
		auto: false,
		next: {
			button: function() { return $(this).parent().siblings(".carousel-next")},
			key: 'right'
		},
		prev: {
			button:function() { return $(this).parent().siblings(".carousel-prev")},
			key: 'left'
		}
	});
	$('.bottom-slider .content ul').carouFredSel({
		scroll: {
			items: 1
		},
		auto: false,
		next: {
			button: function() { return $(this).parent().siblings(".carousel-next")},
			key: 'right'
		},
		prev: {
			button:function() { return $(this).parent().siblings(".carousel-prev")},
			key: 'left'
		}
	});
} 

Open in new window

0
 

Author Comment

by:izweig
ID: 39930714
I am sad to say this did not fix it..I used to like Chrome..
And btw Thank you very much for doing this!

I am totally  stumped..are you?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930737
At this point I would give up, when it takes hours to try and make a plugin work its time to move on to one that just works
I know in the past I have tried this plugin and could never get it to work properly and was pretty certain it didn't even support multiple sliders on the same page (apparently it does now but doesn't seem to do it very well)
I don't know if there is some conflict between it and your other js, it's weird it works locally.
You could say there is nothing wrong with the code as it works fine in FF and IE, maybe it is just a Chrome bug.
0
 

Author Comment

by:izweig
ID: 39930741
I do thank you for all your time and expertise.
Have a great day or evening, wherever you are.
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 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 style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

756 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