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 Victor Ruiz
Victor Ruiz
16,570 Points

I have a Jquery question about child elements linking back to parent elements, Can anyone help?

So my question is how do I link my #carousel back to my peopleslider? 

var index = 0, hash = window.location.hash;

if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1;
}

$("#peopleslider").flexslider({

    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    directionNav: false,

    startAt: index, 
    after:function(slider){
        window.location.hash = slider.currentSlide+1;
        //now when you navigate, your location updates in the URL
    }


})



$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,

    prevText: "<i class='fa fa-caret-left fa-lg'></i>",
    nextText: "<i class='fa fa-caret-right fa-lg'></i>",


    itemWidth: 175,
    itemMargin: 0,
    minItems: 1,
    maxItems: 5,

    asNavFor: '#peopleslider'

});
Jose Soto
Jose Soto
23,407 Points
Jose Soto
Jose Soto
23,407 Points

You may want to provide a little more information. What does your HTML look like? What have you tried? What are you actually trying to do?

Victor Ruiz
Victor Ruiz
16,570 Points

Sorry Jose Soto about that here is a link to the current project:

http://wpsklarkirsh.vicruiz.com/

I'm having an issue, when your on the home page and you click on the "Read More" under the "Sklar Kirsh Team".

Directs you to the team page where I have a carousel a list and the bio. The problem is that my hover state isn't linking to the right thumbnail.

Everything else links up if you click on the list everything is sync also when you hit the thumbnail it works.

I'm trying to figure out what would be the best way to solve this issue. I'm still learning jquery and I got the basic javascript down.

Let me know if you can help me out with this issue. I would greatly appreciate it.

4 Answers

Jose Soto
Jose Soto
23,407 Points
Jose Soto
Jose Soto
23,407 Points

The persons id is in the URL after the hashtag. You can grab that number and call the jQuery command I provided earlier. You can add something like this to your '/people/' page:

//Run this once the page is done loading

$( window ).load(function() {

    //grab the hash value and slice out the '#'
    //then make the value an integer
    num = parseInt(window.location.hash.slice(1,3));

    //Then adjust the slider to the proper person
    $('#peopleListing').flexslider(num-1);  

});
Victor Ruiz
Victor Ruiz
16,570 Points

Jose Soto Cool! it seem to work fine with the first guy but the second guy has the same function. Any suggestions?

Thanks!

Jose Soto
Jose Soto
23,407 Points
Jose Soto
Jose Soto
23,407 Points

You have to call both command again. Update the num variable and then run the jquery command. You might even create a function out of them and just call the function every time some event happens.

Cheers.

Jose Soto
Jose Soto
23,407 Points
Jose Soto
Jose Soto
23,407 Points

You're working with a third party plugin for this. So I looked at their documentation here: https://github.com/woothemes/FlexSlider

So you have your 'peopleListing' slider and it is essentially an array of people. If you run this:

$('#peopleListing').flexslider(0);

Your page will update to the first person on the list. For the 17th person on the list, you can run:

$('#peopleListing').flexslider(16);

You can figure out the rest. Cheers!

Victor Ruiz
Victor Ruiz
16,570 Points

@josesoto I get the array part and I've tested the code you added to the peopleListing on the console. Its works fine but how would I go about this so not to break the page. I've looked over the documentation and I was thinking of having and "if statement" or do you think something else can work?

Thanks!

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Never-mind I got it! thanks for all the help!

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Jose Soto thanks for the help I'm having one final issue on the loading and refreshing of the page. If you refresh the page it cuts off some of the people or if you jump back to the homepage and click the links back it cuts the people. You have to do a force refresh comd+shift+R for this not to happen. Is their anyway of fixing this?

Victor Ruiz
Victor Ruiz
16,570 Points

Jose Soto This a small glitch I'm getting if I refresh the page. or if I go to the homepage and click on the read more they seem to be cut off. They only work fine if I do a force refresh. Any ideas here?