Question

I have a javascript slider located on a page at: crothersenvironmental.com/crothers/index.html that keeps sending the associated paragraph text under it off the side of the screen. You can see it under the slider down to the right. Once you click the associated numbers above the slider you’ll see the text move to the right every time the numbers are clicked until they are moved off the screen and disappear. Also, once you click #1 the footer comes way up and then moves back down after you click any of the other numbers.

Any help, thoughts or direction would be very helpful. Thanks very much in advance.

Here is the js script I am using:

$(‘#recentprojects li a’).click(function() {

var $this = $(this);

if ( !$this.parent('li').hasClass('selected') ) {

    var url = this.href,
        height = $('#recentworkimage img').css('height');

    $this
      .parents('ol')
      .find('li.selected')
        .removeClass('selected');

    $this.parent('li').addClass('selected');

    $('#recentworkimage')
      .css('height', height)
      .children('img')
        .fadeOut(1000, function() {
            $(this).attr('src', url).load(function() {
                $(this).fadeIn(1000);
            });

        $this.parents('#recentprojects')
          .find('p:last')
            .empty()
            .html('<p>' + $this.attr('title') + '</p>');
    });

}

return false;

});

Answer 1

First of all, you do not need to empty the element before setting the new HTML string, as .html() already replaces the whole contents. The reason your subtitle is moving more and more to the right, is because you’re adding <p> elements recursively.

Try the following:

$this.parents('#recentprojects')
    .find('p:last')
    .html($this.attr('title'));

Although in this case (as you ar looking up a unique ID) you could simplify like so:

$('#recentprojects')
    .find('p:last')
    .html($this.attr('title'));

Or if this is the only <p> you have within that element, you can reduce even further:

$('#recentprojects p')
    .html($this.attr('title'));

If you want to update the subtitle with JavaScript when the page loads, add the following:

$(document).ready(function () {
    var projects = $('#recentprojects');
    projects
        .find('p:last')
        .html(projects
            .find('a:first')
            .attr('title'));
});