A Very Simple Popup Box – HTML, CSS, JavaScript

Popup boxes are the most useful way of showing a warning or any other important information to the website visitors in many HTML5 templates. In this article I’m going to walk you through the creation of a very simple popup box with shadow overlay and close button. We’re going to implement this using HTML, CSS and jQuery in less than 100 lines (not compressed code).

simple popup box html css js
Continue reading “A Very Simple Popup Box – HTML, CSS, JavaScript”

Stick section to the bottom of the page when scrolled through

Don’t let important sections disappear when visitors scroll though the web page. In this article I’m going to present how to stick a HTML element, to the bottom of the page with JavaScript when it’s about to disappear. I have already presented the way of attaching it to the top of the page and this method is very similar to that.
stick bottom

Continue reading “Stick section to the bottom of the page when scrolled through”

getElementByClass JavaScript Function?

TheĀ getElementById is a very common JavaScript function that returns a reference to the element by its ID, but unfortunately when we try to use getElementByClass, the console returns the following error: Uncaught TypeError: document.getElementByClass is not a function.

In this article I’m going to present two workarounds to replace the getElementByClass JS function, with or without using jQuery.
Continue reading “getElementByClass JavaScript Function?”

Fix When jQuery Click Event Is Not Working On Touch Devices

You might have come across situations when the jQuery click event listener works fine on desktop but it doesn’t fire on mobiles, tablets and other touch devices. This might happen when the event is not attached to an anchor tag but to some other element, like a div. There is a very simple solution to fix this issue.
Continue reading “Fix When jQuery Click Event Is Not Working On Touch Devices”

Highlight Active Menu Item With jQuery Script

We can improve the user experience highlighting the active menu item on our websites. This makes navigation easier because the visitor will know at the first glance which is the current page.

This strategy also increases the amount of visited pages because the visitor will more likely click the next page when it’s easier to find that.

highlighted active menu item script

Continue reading “Highlight Active Menu Item With jQuery Script”

Script to stick HTML element to the top when scrolled through

In this article I’m going to present a lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any other important element always stay in focus. Adjusting the script you can trigger other effects when the page scrolls through an anchor point. Here are the HTML CSS and JS codes to use to accomplish this effect.

javascript stick element top scroll through Continue reading “Script to stick HTML element to the top when scrolled through”

jQuery Hover Animation Effect Without Jumping – Using Stop() Method

Probably you experienced some flashing effect the first time you tried to make a jQuery hover animation without the stop() call. This happens when you hover and take your mouse away quickly without waiting for the animation to finish. This behavior triggers a new animation to start before the previous has finished.
In this article I’m going to present the proper way of making jQuery animation calling the stop() method, avoiding shaking fuzzy effects.

jquery animation effect stop Continue reading “jQuery Hover Animation Effect Without Jumping – Using Stop() Method”