Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Jquery effect like Disjointed Rollover ……

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #36760
    autodefrost
    Participant

    I’ve looked everywhere and tried one to many tutorials…so I’m asking for help :)

    I have a site, with Disjointed CSS rollover text – works, ok – not as sexy as Jquery.

    Here’s an example: http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml

    I’m trying to find a Jquery effect/tutorial/something in the correct direction, like this: http://www.iamkreative.co.uk/jquery/panel.html

    Basically, I have 5 to 8 bullets, for each bullet there is a small paragraph that I would like to appear the right of the bullet.
    Same effect as the Disjointed Rollover, but with the sexy feel of Jquery.

    Any help would be GREATLY appreciated.

    #97050

    I’m have only just started learning JS/jQuery so I would love some feedback from those more experienced, but how is this: http://jsfiddle.net/joshnh/cbErf/

    #97092
    sliver37
    Member

    I also just started learning, taking @joshuanhibbert’s example, mine would have looked something similar to this:

    http://jsfiddle.net/sliver37/HSB9h/

    If it doesn’t work, It’s because I haven’t used fiddle until now, will work it out eventually.

    Also quick question for you @joshuanhibbert, instead of using an == with just return true, couldn’t you just have != and remove the else?



    listItemHeader.click( function() {
    if($(this).parent('li').attr('class') != 'active') {
    list.find('.active').removeClass().children('p').fadeOut();
    $(this).parent('li').addClass('active').children('p').fadeIn();
    }
    });‚Äč

    As I said, also learning so not sure if it matters, would like to hear others input :)

    #97094

    @sliver37 Yes, yes I could have, but as a jQuery noob I did not think of that. Thanks!

    #97061
    Mottie
    Member

    Since you asked, this is how I would modify @joshuanhibbert’s version

    var list = $('ul'),
    listItemHeader = list.find('h1');

    listItemHeader.click( function() {
    if (!$(this).parent().hasClass('active')) {
    list.find('.active').removeClass().children('p').fadeOut();
    $(this).parent().addClass('active').children('p').fadeIn();
    }
    });

    Don’t look at the class attribute as other scripts may add class names and thus break the script functionality. You can use .hasClass() (returns boolean), .filter() (returns objects) or .is() (returns boolean) to check class names – I like to use .is(), it’s a tiny bit slower, but I like to use it.

    And this is how I’d modify @silver37’s version

    var list = $('ul li'),
    listItemHeader = list.children('h1');

    listItemHeader.hover(function() {
    $(this).parent('li')
    .addClass('active').children('p').fadeIn();
    }, function(){
    list
    .removeClass('active')
    .children('p').stop(true, true).fadeOut();
    });

    There is no need to do wrap the list ($(list)) since it is already a jQuery object.

    #97136

    Awesome, thanks for that @Mottie, you just taught me something!

    #97161
    sliver37
    Member

    Yes, thanks @Mottie for taking the time to re-factor our code and providing some nice advice. It really does help getting feedback from the pro’s.

    Hope this thread has helped you find your answers, @autodefrost. ;)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.