Most themes which offer a header image as one of its options have a common problem: the entire image often does not get displayed, i.e., the header is too short or the sides of the image get cut off, especially as the screen width gets narrowed. The reason behind this is that in most cases,… Read More »
Use jQuery to change an image in place when the mouse is hovered over different areas.
This post is still under development. But you can still scroll down to see the work in progress. This post is a demo of how to incorporate the Skrollr Animation library, and uses the concepts from Petr Tichy’s Parallax Scrolling tutorial. Elements can fade in and out Background images are from the World Wildlife Fund… Read More »
This post demonstrates how to set up a clickable image that turns into a video when clicked. Click on either of the images below, and a YouTube video will play. Here’s how: The first thing you need to do is add some jQuery. This only needs to be done once for your whole site. If… Read More »
This hamburger demo places the mobile menu at the top of the screen. You can see it in action by re-sizing this page to the same width as a tablet or smart phone.
This hamburger demo inserts the hamburger button on the left side of the breadcrumbs bar. You can see it in action by re-sizing this page to the same width as a tablet or smart phone.
This post demonstrates a basic hamburger menu that replaces the default drop-down menu on mobile viewport sizes. To see a demonstration, re-size this browser window until it is the same width as a smart phone or tablet, and you will see an icon appear with three, short horizontal lines. Clicking or tapping on the icon… Read More »
A lot of people like the transitional effect of the thumbnail images on the blog page. Here is an example of how you can implement the same effect on images within your post, just by assigning a special class name to them. Hover your mouse over either of these images and you should see the… Read More »