?
Solved

Firing Event for all visible images jCarousel scroller

Posted on 2011-03-24
7
Medium Priority
?
798 Views
Last Modified: 2012-05-11
I am trying to get a jQuery tooltip to get displayed when jCarousel items come into view. So when a user hovers over the item in view a tooltip will appear. I am using jQuery Tooltip plugin.

I have added my tooltip function to the:

itemLastInCallback: {
    onAfterAnimation: afterAnimationLastInCallback
}

But my tooltips do not get displayed in the carousel.

I have created a basic example of my issue here: http://jsfiddle.net/QAFZX/12/

I know this is a bit confusing and I hope someone will be able to help me.

Thanks!
0
Comment
Question by:R1ND3R
[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
  • 5
  • 2
7 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 35216737
Try
#tooltip h3, #tooltip div { margin: 0; line-height: 13px; color: #f00; font-size: 1.1em; }      

0
 
LVL 12

Expert Comment

by:Amick
ID: 35216767
Ignore that advice,  It worked once, showing a nice red H3 pop-up on a black background, but I went back to try it again and it failed, so there must be something else going on.
0
 
LVL 12

Expert Comment

by:Amick
ID: 35216807
Change your version of jQuery to the current release and all should be well.  Tested in 1.5.1.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 12

Expert Comment

by:Amick
ID: 35216934
My apologies. It just looked as if it worked. I didn't understand the problem before.  The tooltip fires on the first pass, and fails subsequently.
0
 

Author Comment

by:R1ND3R
ID: 35217387
Do you have any idea why this is happening and how I can get a javascript function to fire for those viewable images?

Any help is appreciated.
0
 
LVL 12

Accepted Solution

by:
Amick earned 2000 total points
ID: 35218040
Yes, the way the plugins work together is such that tooltips doesn't see all of the images when it initializes, so needs to be updated on each group load.  You can prove that to yourself with this quick modification of itemLoadCallback.

function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > mycarousel_itemList.length) {
                break;
            }

            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
        afterAnimationLastInCallback(carousel); //Inserted this line to test the theory
    };

Open in new window



Unfortunately, it will not allow the same tooltip to be initialized twice, so returns a null or blank tooltip on the second pass through. You can see this most clearly at flowers 1,2 and 3, then again at 10.
Flower 1,2,3 won't show a tooltip at all, because they were initialized upon instantiation. If you eliminate the initial call to afterAnimationLastInCallback($(this)), Flowers1,2 and 3 tooltips will be visible again.

The afterAnimationLastInCallback function has avoid writing tooltips for the already initialized.  I haven't done any further code analysis, but this may be an issue that occurs within tooltips, and may require modification of that code instead of your own.  If that's the case, please share your code with Jörn Zaefferer, the author of tooltips.

I hope this helps to point you in the right direction.
0
 

Author Comment

by:R1ND3R
ID: 35222808
Thanks for you help Amick.

I think I learnt more about how jcarousel works thanks to your previous post.

I have decided a different approach to getting a tooltip to display in my carousel which has worked.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

718 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