views:

25

answers:

2

I have a set of LI elements with overflow propety set to hidden by the
jCarouselLite plugin. What I would like to do is to scroll the jCarouselLite'd element in order to scroll to the LI element I want, since I have it configured to show only 3 elements. Looking at the html code generated by the plugin, I can see:

<ul ..>
    <li ..style="..overflow:hidden">1</li>
    <li ..style="..overflow:hidden">2</li>
    <li ..style="..overflow:hidden">3</li>
    <li ..style="..overflow:hidden">4</li>
</ul>

So, I have the first 3 LI elements shown by the plugin, but not the last one. What I would like to do is to scroll so that the 4th LI element is shown, or I can do that by myself if I manage to check if that last LI is within the overflow area, so I can see if it's necessary to scroll for it in order to show it or not.

Hope I'm not getting things confused to understand.

A: 

If I understand you correctly, you want to check if the last li in that group has the style overflow: hidden.

You can do this with a simple selector.

$(document).ready(function(){

  tester = $('li').last().css('overflow');
  alert (tester);

});​

That will set the last li's overflow style to the variable "tester", and when it sends the alert box it will alert the current state of overflow. So if overflow is set to hidden, it will say "hidden", if overflow is set to scroll it will say "scroll".

Sorry if I didn't understand properly or answer your question.

MoDFoX
@ModFoX Thank you for taking the time to help me. Actually, all the LI elements have their overflow prop. set to hidden and it does not change when scrolling. I want, if possible, to check if a particular element is located within the overflowed area. If i scroll to that element I can see it on screen, on the contrary, it remains hidden.
kaneda
A: 

I couldn't find an answer for my original question, but as for any jCarouselLite plugin users, what I did in order to make the carouselLite scroll to a particular item, was to modify just the declaration of the private method go of the plugin in order to make it public, as follows:

.. code ..
go = $.fn.jCarouselLite.go = function go(to) {
        if(!running) {
    .. code ..
}
.. code ..

I'm sure it's not the best, and more importantly, safer solution, but for now it works for me. Just have to call

$().jCarouselLite.go(position);

on my script, considering position as a number starting from 0 (the first position on the carouselLite).

kaneda