jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

jQuery + CSS – Activate DIV background colour and deactivate other DIV’s bg colour

This little code delivers all the magic, if you are into one page websites/apps like me, this short code will simply save you lots of time.
This code simply activates(changes the style) of an DIV that is clicked on and removes the same style applied to other DIV(active button) in case it has another active style applied to another DIV.
It can be combined with a little CSS code to display a beautiful color transition.
You can see the code running on this little jsFiddle I made: https://jsfiddle.net/cosminr/ampjtwjp/

jQuery load() external file inside div

Sometimes I use the jQuery load() function to display dynamic content inside html elements. As the description says:

load() Description: Load data from the server and place the returned HTML into the matched element.

I provided a working example that loads a simple html file with html tags and another php files that contains variables.

Here is the jQuery code:

Here is the PHP code that deals with the two variables:

Live Demo Here

jQuery .on() method with multiple event handlers

If you need multiple event handlers attached to the same selector executing the same function, you could use:

Learn more about jQuery events here.

What does this function really do? We have two div elements on our page and two different classes .field and .spn. When we click or mouseover over the .field class, the .spn div is showing the “Hello world!” text added via jQuery .text() method.

Try it Yourself / Demo

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.

Try it Yourself / Demo

You can alter the fadeIn() and fadeOut() or change them to other jQuery effect.

Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.

jQuery sidebar menu with show/hide link

This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.

See a live DEMO.

To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).

See a live DEMO.