Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

How to handle click event on id that is unknown in a slideshow?

I currently have a slide show that is has three li items in it, but these items are being looped through in twig.

I have given the value of the id for these items equal to the id coming from the database for that entry.

However my problem is that I want to be able to click on one of the li items and then hide that current ul and then show a different ul

here is the html/twig code;

<ul class="cycle-slideshow" data-cycle-slides="li">
    {% for homeItem in homePage %}
        <li id="{{ homeItem.id }}"><img src="img/{{ homeItem.home_img }}" alt="{{ homeItem.home_img}}" /></li>
    {% endfor %}
</ul>


<ul class="ul-list" id="port-ul">
    {% for portItem in portPage %}
        <li id="{{ portItem.id }}"><img src="img/{{ portItem.port_img }}" alt="{{ portItem.port_img }}"/></li>
    {% endfor %}
</ul>

here is the jquery code;

$(document).ready(function(){
    $('#port-ul').hide();

    $('.cycle-slideshow li').on('click', function(event) {
        $('.cycle-slideshow').fadeOut(1200, function() {
            $('#port-ul').fadeIn(1500);
        });
    });

});

Currently I can get it so that when I click on any one of the li items it will go to the new ul but am getting confused on how I can use the link only one of the li items to the new ul

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Which one of the three do you want to have this functionality? Can't you just attach the click handler to only that one, using the id?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Steven Parker thanks for reply, I want all of them to be able to link to something different. As I am going to have different hidden ul that will be made visible depending on which previous li item has been clicked.

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

What if you created a paramterized fade function?

And gave each element a unique hander invocation? You would use an additional value added to the data to indicate which ul to reveal next for each item selected:

Bear with me, I'm not a PHP or twig programmer so I'm guessing at the syntax:

twig.html 
<ul class="cycle-slideshow" data-cycle-slides="li">
    {% for homeItem in homePage %}
        <li id="{{ homeItem.id }}" onclick='crossfade(".cycle-slideshow", {{ homeItem.next_ul}})'>
            <img src="img/{{ homeItem.home_img }}" alt="{{ homeItem.home_img}}" />
        </li>
    {% endfor %}
</ul>

<ul class="ul-list" id="port-ul">
    {% for portItem in portPage %}
        <li id="{{ portItem.id }}" onclick='crossfade("#port-ul", {{ portItem.next_ul}})'>
            <img src="img/{{ portItem.port_img }}" alt="{{ portItem.port_img }}" />
        </li>
    {% endfor %}
</ul>
jquery.js 
    function crossfade(curr, next) {
        $(curr).fadeOut(1200, function() {
            $(next).fadeIn(1500);
        });
    });
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi Steven Parker, thanks again for the help and reply.

This worked! Only thing I had to do is like you said add the next_ul name to the database and then pass it as a parameter using #{{ homeItem.next_ul }}

I had to put the # to let the function know that it is an id.

Sorry I have one more question (this is my first time writing actual jquery, been trying to stick to vanilla js for now).

With regards to my jQuery function should I put in the document ready function? Getting a bit confused on how to actually structure jQuery code.

at the moment I just have this all in one file;

//$(document).ready(function(){
    $('#port-ul').hide();
    function crossfade(curr, next) {
        $(curr).fadeOut(1200, function() {
            $(next).fadeIn(1300);
        });
      }
//});
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The advantage of wrapping things in document.ready is that you can be sure any references you have to document components will exist before you use them. In this case, it's not important to the handler since it will not be used until something is clicked. It might be important to the initial hide, but to prevent the possibility of browser "flashing" that would be better done in CSS anyway.