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

x
?
Solved

Problem with two instances of CarouFredSel on same page

Posted on 2014-03-14
30
Medium Priority
?
4,071 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 2000 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
How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

 

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

Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

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…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

705 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