Grow your CSS skills. Land your dream job.

how to create an active class on a list item when a certain slide is showing.

  • # June 17, 2013 at 5:48 pm

    hajzer.info/#portfolio

    when you click live sites i want the list tiem to change color and stay like that until i change it.

    # June 17, 2013 at 5:57 pm

    this is a jquery approach

    $(‘.list li’).click(function(){
    $(‘.active’).removeClass(‘active’);
    $(this).addClass(‘active’);

    });

    # June 17, 2013 at 5:58 pm

    seriously thats it?

    # June 17, 2013 at 5:58 pm

    i’m totally underestimating myself.

    # June 18, 2013 at 11:34 am

    X100 better to use css for this IMO.

    # June 18, 2013 at 11:41 am

    >X100 better to use css for this IMO.

    How would you do this with a click?

    # June 18, 2013 at 6:49 pm

    I second that question..

    # June 18, 2013 at 7:47 pm

    it is possible with checkboxes and the ~ selector.
    When a checkbox-category is clicked(selected)
    first its label assuming you will use labels changes style
    and then you select a div with the ~ selector and change its background to the slide you want
    as an alternative you could change the opacity of 4 absolutely positioned div s
    one on top of another.

    # June 19, 2013 at 1:41 am

    ohh okay i see what your saying but i may have misinformed you its not really a slide. its more a javascript call :

    jQuery(document).ready(function($) {

    var elements = {
    TheDotPeople: {
    image: “http://hajzer.info/wp-content/uploads/2013/06/The-Dot-People.png”,
    text: “We created a website on the Powerful CMS Website Tonight provided by GoDaddy. With css engineering we made this client more than happy with the outcome of a beautiful website.”
    },

    KingHenryFeasts: {
    image: “http://hajzer.info/wp-content/uploads/2013/06/Kink-Henry-Feasts1.png”,
    text: ‘This website features easy drop-down navigation and a modern look and feel. Our client wanted the user to be drawn in by a big, bold image, as well as highlight some important areas on interest, such as the “Specials” and “Community Events” found down the side of the page.’
    },

    WineReview: {
    image: “http://hajzer.info/wp-content/uploads/2013/06/Wine-Review.png”,
    text: “Brockamour Manor’s elegant and classic architecture is reflected upon by its website. Keeping all ages in mind, we’ve created the site to be informative, yet simple. Roll-over images, such as on the Rooms & Rates page, keep attention focused on one page without having to open new windows everytime an image is viewed.”
    },
    FamousBattles: {
    image: “http://hajzer.info/wp-content/uploads/2013/06/Famous-Battles.png”,
    text: ‘This website features easy drop-down navigation and a modern look and feel. Our client wanted the user to be drawn in by a big, bold image, as well as highlight some important areas on interest, such as the “Specials” and “Community Events” found down the side of the page.’
    }
    }

    var imageInPage = $(‘.image-to-be-replaced’);
    var textInPage = $(‘.text-to-be-replaced’);

    $(‘.link’).on(‘click’, function(e) {
    var target = $(this).attr(‘data-target’);
    var data = elements[target];
    imageInPage.attr(‘src’, data.image);
    textInPage.text(data.text);
    console.log(data)
    e.preventDefault();

    var leftHeight = $(“.left”).height();
    var rightHeight = $(“.right”).height();
    if (leftHeight > rightHeight){ $(“.right”).height(leftHeight)}
    else{ $(“.left”).height(rightHeight)};

    });

    Portfolio

    Sorry about that.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".