enavu webdevmania tutsvalley psdestination
visit the enavu network
13 Comments Article Title Overlay Article Title

Making a nice jQuery content scroller with ease.

In this tutorial we are going to make a news scroller. You don’t have to use it for news, there are a lot of other uses for it. When you have a lot of content you can use this to make it organized :)

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo     Source

Here’s what we’re making here :)

1

HTML

<!--START THE DIV THAT WILL WRAP IT ALL UP-->
<div id='wrapper'>

    <!--START THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->
    <div id='all_news_container'>

        <!--START SINGLE NEWS CONTAINER-->
        <div class='single_news_container'>

            <!--PUT THE TITLE-->
            <h3>What is Lorem Ipsum?</h3>

            <!--AND THE CONTENT-->
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

        </div>
        <!--END SINGLE NEW CONTAINER-->

        <!--AND REPEAT IT HOW MUCH TIMES YOU WANT...-->
        <div class='single_news_container'>
            <h3>Why do we use it?</h3>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
        </div>

        <div class='single_news_container'>
            <h3>Where does it come from?</h3>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur.</p>
        </div>

        <div class='single_news_container'>
            <h3>Where can i get some?</h3>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
        </div>

        <div class='single_news_container'>
            <h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <!--DONE WITH SINGLE NEWS CONTAINERS-->

    </div>
    <!--END THE DIV THAT HOLDS ALL THE NEWS CONTAINERS-->

    <!--AN EMPTY DIV WHERE JQUERY MADE NAVIGATION WILL BE-->
    <div id='news_navigation'></div>

</div>
<!--END THE WRAPPING DIV-->

2

Not what you expected? Well it’s just HTML we need to style it :)

CSS

    .single_news_container {
        display:none; /* IMPORTANT: hide all the news containers */
    }

    /*  BELLOW IS JUST STYLING, NOT REQUIRED FOR THIS TO WORK  */

    body { font-family: 'Georgia'; } /* just styling */

    /* style the h3 (title) in the news container */
    .single_news_container h3 { padding:0px; margin:0px; margin-bottom:10px; }

    /* style the navigation div */
    #news_navigation{ font-size:30px; text-align:center; padding:5px; background-color: #336499; color:white;}

    /* style */
    #all_news_container { padding:10px; color:black; height:200px; border:1px solid #336499;}

    /* if you want this app to have a specific width, just make a specific width for wrapper div */
    #wrapper { width:400px;  }

And we ge this…

3

… there is no content :) That’s because we have hidden all the news containers, and the navigation is generated with JQuery. Let’s do it…

JQuery

    $(document).ready(function(){

        //show the first singlde news container using fadeIn
        $('.single_news_container:first').fadeIn(100);
        /*add news_visible class to the same container
        important: this class has no css effects, it's only used so we can know which
        news container is currently shown '*/
        $('.single_news_container:first').addClass('news_visible');

        //DECLARE VARIABLES WE WILL NEED
        var news_No = $('.single_news_container').length; //get number of single news containers
        var prev_html = '<img border=0 src="images/prev.png" style="vertical-align:middle">'; //the html inside <a>  for previous news
        var next_html = '<img border=0 src="images/next.png" style="vertical-align:middle">'; //the html inside <a>  for next news

        //fill the news_navigation container with the navigation html
        $('#news_navigation').html('<a href="javascript:prev_news();">' + prev_html + '</a> <span id="current_news_num">1</span>/' + news_No +' <a href="javascript:next_news();">' + next_html + '</a>');
        /* explanation: we have - previous link , current news number, / , amount of news, next link
        so it looks like < 1/5 >. As you can see in the href attribute inside our two <a> are
        links to function we will declare bellow, so when clicked those functions are called*/

});

//now we start our functions

function prev_news(){

            //check if there is a single news container before the current visible container...
            if($('.news_visible').prev('.single_news_container').length){

                //... and if there is we hide the current visible news container by using fadeOut...
                $('.news_visible:not(:animated)').fadeOut(100, function(){
                    /*...and when the animation ends we have few chain events.
                    explanation: we first remove the news_visible class from the current visible news container
                    and apply it to the previous news container, and show that container by using fadeIn()...*/
                    $('.news_visible').removeClass('news_visible').prev('.single_news_container').addClass('news_visible').fadeIn(100);
                    //... then we get the current page number and using parseInt we convert it from text to number (string to integer)...
                    var current = parseInt($('#current_news_num').text());
                    //...and change the current page number
                    $('#current_news_num').text(current - 1);
                });
            }

}

/*bellow we make a function for next_news. I wont explain it line by line because it's almost the same like the previous function.
the difference:
1) instead of checking if there is previous news (by using prev()) we check if there is by using next()
2) and in the chained events we change the prev() to next() so we show the next news div  '*/
function next_news(){
            if($('.news_visible').next('.single_news_container').length){
                $('.news_visible:not(:animated)').fadeOut(100, function(){
                    $('.news_visible').removeClass('news_visible').next('.single_news_container').addClass('news_visible').fadeIn(100);
                    var current = parseInt($('#current_news_num').text());
                    $('#current_news_num').text(current + 1);
                });
            }
}

And we get this nice news slider.

1

Final words

That’s it for today. Hope you like it.

If you want to see more features on this little app, just tell me in the comments and i’ll get on it asap.

Updated, inserted ‘:not(:animated)’ inside the selectors for fading out the current div, so now if you scroll fast there are no problems with getting a bigger or smaller number then the possible amount.

Related posts:

  1. Make a custom tab interface with JQuery
  2. Making a jQuery infinite carousel with nice features
  3. Making a jQuery pagination system
  4. Equal Column Height with jQuery
  5. Making image captions using jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • Nice TUT,thanks for share

  • Thanks. Very useful tutorial, but how to make it to change content automatically?

    Admin edit:
    Your comment somehow got into the spam section (akismet sent it there). Sorry about that.

  • Great tutorial, any chance you could let us know how to get rid of the ‘next’ button on the last page (or the previous button on the first page)?

    Thank you!

  • $(‘#news_navigation’).html(‘<a href=”javascript:prev_news();” rel=”nofollow”>’ + prev_html + ‘</a> <span id=”current_news_num”>1</span>/’ + news_No +’ <a href=”javascript:next_news();” rel=”nofollow”>’ + next_html + ‘</a>’);

    first we need to set ids on the anchor links. So change that to:

    $(‘#news_navigation’).html(‘<a ID=”arrow_left” href=”javascript:prev_news();” rel=”nofollow”>’ + prev_html + ‘</a> <span id=”current_news_num”>1</span>/’ + news_No +’ <a ID=”arrow_right” href=”javascript:next_news();” rel=”nofollow”>’ + next_html + ‘</a>’);

    Then in the javascript functions.
    For function to scroll left, after the last line recheck if there is an item before or there isn’t.
    if($(‘.news_visible’).prev(‘.single_news_container’).length){
    $(‘#arrow_left’).show();
    }else{
    $(‘#arrow_left’).hide();
    }

    Same for function to scroll right (but instead of “prev” put “next” and instead of “arrow_left” put “arrow_right”.

    I haven’t test this, but should work, can’t see a reason not to.
    :)

  • Thanks Boba, I tried your suggestion and the only problem is that once the .hide has kicked in it doesn’t come back (i.e hides next on last slide, but doesn’t show it again if you go back a slide). It’s given me a starting point though.

    Thanks again :)

  • Final update :)

    For prev_news function. After the $(‘#current_news_num’).text(current – 1); put this:

    if($(‘.news_visible’).prev(‘.single_news_container’).length==false){
    $(‘#arrow_left’).hide();
    }
    if($(‘.news_visible’).next(‘.single_news_container’).length){
    $(‘#arrow_right’).show();
    }

    And for next_news function. After the $(‘#current_news_num’).text(current + 1); put this:

    if($(‘.news_visible’).next(‘.single_news_container’).length==false){
    $(‘#arrow_right’).hide();
    }
    if($(‘.news_visible’).prev(‘.single_news_container’).length){
    $(‘#arrow_left’).show();
    }

    Tell me if it works for you :)

  • Thank you, Boba!! Can’t believe I couldn’t see it with the last comment. Duh!

    Anyway, there’s another small issue I found with IE7, not a problem with the code here, but IE7 (and probably 8 ) turns off cleartype when filters are applied. This means that there’ll be no font smoothing regardless of whether or not the system setting is on.

    To fix this I used:
    $(‘.news_visible’).fadeIn(function(){
    this.style.removeAttribute(“filter”);
    });

    …after the ‘fadeOut this/fadeIn that’ within the fader functions.

    To correct the first container use the same line straight after the .new_visible class is created. This removes the filter after the fade effect has completed, so the fade is still without cleartype but this is IE’s problem.

    Thanks again, and my compliments to you for your prompt replies.

  • Hehe :)

    I completely forgot about IE having problems with the fadeIn and fadeOut , thanks for the tip :)

    Hehe, thanks for the compliments :)

  • Excellent post. You have won a new fan. Please keep up the nice work and I look forward to more of your gripping posts.

  • Nice tutorial for Web Designer.
    Thanks Ttutsvalley

  • very nice frenz..
    how to give speed to this ease ?
    if we want to make it faster and slower ?
    thanks

  • Cakka, i’m not sure if this is true, but if you changed the fadeOut(100 part of the jquery to 1000 it should change the value in miniseconds which equates to 1 second. Let me know if that works.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting