So… the time has come that you’re getting ready to make some big changes to the site. Or maybe you’re moving to a new webserver. Or doing something to your database. Whatever the reason, you’ve decided to direct visitors to a “down for maintenance” page, to let them know the site will be back up soon.
Here’s a “back to the basics” post about how to create a simple navigation bar.
You might ask, “Aren’t there already 1000 tutorials out there about how to do this?” Well, I’m sure there are more than that, but yes, there probably are.
So, with that said, let’s get this navigation bar put together!
Hi again everyone…
Last time I created a “return to top” button, I did a simple button that had a smooth scrolling effect thanks to a little jQuery. You can read that article here if you’d like: Smooth Scrolling Return to Top of Page
This time, what I’d like to do is actually create a button that floats down at the bottom right corner of the page, and has the same smooth scrolling effect on the way back up. Additionally, if we’re already at the top of the page, let’s hide the button, and only have it show once the user has scrolled down the page a bit.
Hello again happy coders! I hope that you are all enjoying these short tutorials, and learning some new things for your web projects.
Today, let’s talk about creating some nice fading effects using jQuery. There’s an incredibly easy way to have elements on your web page fade in or fade out, giving them a nice animation effect.
WebCoding411 is now on Twitter. Really. You can check it out for yourself!
If you have a Twitter account and would like to follow us for notifications of new posts (you can also follow us via email from the main page of this site), visit our Twitter page here:
Also, feel free to use the Share buttons on the site to share your favorite blog posts via Twitter so that others may benefit from them…
So, you’ve got a lot of content on one page. It’s a long page. Really long. Okay, it doesn’t have to be that long, but you get the point. You need a “return to top” button… something that quickly takes the visitor back to the top of your page.
Simple, sure… you could have a simple HTML anchor to jump to the top of the page, as I show in Jumping Inside Web Pages.
But what if we want to do something a bit more? Maybe have a nice, smooth animation on the way up to the top of the page?
So, you have some content on a web page. Maybe it’s a long page, with lots of content along the way down, broken in to different sections. Sure, the visitor can scroll all the way to find the content.
But we can also provide some “jump points” with links on the page so that the user can move between sections quickly. It’s easy. Really easy.
Here’s a nice and simple bit of CSS that will create a blurry text effect, without loading another font on to your website.
Looking for a way to spruce up paragraph text? How about using drop caps?
If you aren’t familiar with drop caps, a drop cap is when the first letter of a paragraph is enlarged to “drop down” two or three lines. It’s common to see drop caps used at the beginning of novels, or the beginning of chapters in a book.
I have upgraded the commenting system this morning to use the Disqus platform. I’ve noticed Disqus being used on more and more sites, and so far have been impressed with the way it works.
Hopefully you will all enjoy the change… but if you have any problems with the new commenting system, please let me know right here!