Imre Z. Balint, BSc, MPM, MBA

Ever visit a website where if you start to scroll then certain elements on a page will stick to a particular location, like a navigation bar that stays put at the top of the page? Sometimes even a link will also appear from a side of the document which allows the user to jump back to the top of the page with a single click. Well that's what this tutorial is about. In fact the concepts I'll be discussing can actually be taken a step further and you'll be able to create other "sticky" elements on your page (like a social media link list that can slide into view). With this walk-through I'm assuming you're somewhat familiar with jQuery and CSS, so as with pretty much all things jQuery please download the library if you want to try this for yourself. Overall this example is really easy, so even with minimal experience it should be a snap to get this working on your site. First let's take a look at how this works. Click here to view the example and ...

Not only is it a full moon today, but it's also Friday the 13th. So it's only fitting that I tackle a scary topic: CSS only dropdown menus that work on mobile devices! Ok, so really it's not that scary and I'll try to make it as painless as possible... don't mind the machete. First off, it's nice to see what we're trying to accomplish. Because this example is geared for mobile type devices only you should be viewing this example on such a platform, or if you are using a desktop computer, pretend that you can only "tap": http://www.imrezbalint.com/blogexamples/csstargetmenu.html The actual presentation of the example is not critical; you can create your own design in pretty much whatever manner you wish. The focus here is that on a mobile device one can tap a menu to see the dropdown list that will then stay open until the user taps another menu item or the "Close Menu" option. Secondly, I have not bothered to create media queries ...

This is the first of hopefully many Web technology related blog posts I'll be writing. More specifically these articles will be involving JavaScript / jQuery and Cascading Style Sheets (CSS). In this tutorial I will be using JavaScript to analyze which Web page a user is viewing and then apply a CSS style to the relevant menu element to provide the audience some visual feedback. Please download jQuery as it is requited for this example. I often use the library to simplify parts of my code and to gain some benefits like not having to worry as much about coding cross browser compatibility. First off, let's take a look at exactly what we're trying to do (click the pic for a larger size). Take a look at the URL bar. You'll see that it contains the text, "www.imrezbalint.com/videos.php". Now look at the navigation bar of my site. See how the VIDEOS link is highlighted? Well that's the work of the script we're about run through. Now you're pro...