Solved

Problem with two instances of CarouFredSel on same page

Posted on 2014-03-14
30
3,765 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
  • 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
 

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
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…

760 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

18 Experts available now in Live!

Get 1:1 Help Now