Solved

Firing Event for all visible images jCarousel scroller

Posted on 2011-03-24
7
791 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
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 500 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

738 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