jQuery Tutorial: Scroll-down Twitter Style Information Header (Part 2)

A scrolling information header with jQuery. Pops down with a message of your choice. Really easy to make and even easier to integrate into your website. Works well with Chrome, Firefox and Safari, but not as well with IE (no suprise). Source code available in the ‘Source Code’ section of the phpacademy forum. FORUM phpacademy.org TWITTER twitter.com

No related content found.

Revisions

There are no revisions for this post.

Tags: , , , , , , , , ,

25 Responses to “jQuery Tutorial: Scroll-down Twitter Style Information Header (Part 2)”

  1. MrHondros September 11, 2011 at 8:32 AM #

    hi there love your tutorials, your a gun of a teacher, better then what my school teachers are like. The question i have for you is how can we make it so you can click on it and goes back up, in stead of the speed delay working?
    Please help.

  2. thegurucoder September 11, 2011 at 8:40 AM #

    Cool tutorial, but check mine out, this is a jQuery function which you can use and its quite easy /watch?v=uqG2CXk3ues

  3. blolang September 11, 2011 at 8:47 AM #

    please create tutorial for uploading file/photo with progress bar…

  4. jimjimmy1995 September 11, 2011 at 9:01 AM #

    Uh… hopefully the last comment but I somehow got it to work by deleting all the files on my server and reuploading them. I have no idea how that fixed it.

  5. jimjimmy1995 September 11, 2011 at 9:47 AM #

    Still doesn’t work!

  6. jimjimmy1995 September 11, 2011 at 10:18 AM #

    @jimjimmy1995 My bad… It didn’t rename the file properly so the filename was wrong.

  7. jimjimmy1995 September 11, 2011 at 10:34 AM #

    I can’t get it to work… The banner won’t show when I click the button. I have my code pretty much the same as yours but it doesn’t want to work.

  8. PetkoDelchev September 11, 2011 at 10:40 AM #

    Dude you are the best!! With your help i’m working on my own newssite in the moment! 🙂

    Keep going.

  9. REXanadu September 11, 2011 at 10:59 AM #

    I’m having a problem where the button is shown for a split second, but then the text ,alongside the transparent image, appear and nothing happens after that. I’ve tried commenting out the script tags in the php page, but the result is the same.

    Is there something I’m missing here?

  10. jewel1989r September 11, 2011 at 11:22 AM #

    Very very thanks
    I like your all tutorial, I like your voice too much.. I want to learn jquery and javascript , so please make more jquery & javascript tutorial tutorial

    thanks
    from your fan
    Md Jewel Rana

  11. LexSpringfield September 11, 2011 at 12:02 PM #

    have you ever heard of ctrl-c & ctrl-v (1:20)
    😉

  12. Poppzan September 11, 2011 at 12:38 PM #

    @blacklightstudio2 I believe you could just put a click event on the body element and hide it when the event has been triggered.

    Something like

    $(‘body’).click(function(){
    $(‘#header’).fadeOut();
    });

  13. blacklightstudio2 September 11, 2011 at 1:34 PM #

    is there an easy way to make it hide again if the user clicks anywhere in the page?
    it would be useful to have

  14. younessmeb September 11, 2011 at 1:45 PM #

    thanks a lot man 😀
    but it wont work with me completly when it gos down it wont gos up atomaticly again like what i see in the video :s :s :s any help please ???
    also you have to add width:1024px; in # header to work correctly if we use IE browser

  15. saqibkhan24 September 11, 2011 at 2:01 PM #

    nice so nice of u specially for paypal ipn tutorial but if u creat a complete shopping cart then that will be good too bcoz ur way of teaching is really good really thanks.

  16. saqibkhan24 September 11, 2011 at 2:49 PM #

    nice so nice of u specially for paypal ipn tutorial but if u creat a complete shopping cart then that will be good too bcoz ur way of teaching is really good really thanks alot!

  17. mclaarson September 11, 2011 at 3:41 PM #

    you can use css opacity to make the picture transparent, since not everyone might have photoshop or used to work with photo editing softwares

  18. reberga September 11, 2011 at 4:01 PM #

    i love you alex. great tutorials.

  19. rockleed87 September 11, 2011 at 4:56 PM #

    Great tutorial! I’m learning web scripting from your videos better than when I was taking classes at school. Thank you for doing this!! 🙂

  20. reconhungary September 11, 2011 at 5:50 PM #

    very good.. thx

  21. n1tr0b September 11, 2011 at 5:50 PM #

    Suggestion :

    – Instead of using a submit button you could use a standard button. Conflicts might happen if there are 2 or more submit buttons, Inside a form tag.

    Innovation :

    If you’re too lazy enough to put an onClick tag in a button you could also use jQuery to trigger the function.

    $(‘#button’).click( function () {
    /* Contents of hscroll function */
    });

  22. jerneje September 11, 2011 at 6:43 PM #

    thx man, really nice tutorial

  23. MultiComputerScience September 11, 2011 at 7:29 PM #

    Congrats 200 vids man, continue making jquery 😀 i will fucking donate u soon

  24. shayat123456 September 11, 2011 at 8:05 PM #

    Great tutorial keep it coming

  25. willzurmacht September 11, 2011 at 8:52 PM #

    One of the best tutorials!! 🙂

Leave a Reply