Design Lunatic

Create a Jquery “Slidebar”

Today, we’ll go over how to create an interesting navigation section that slides into the page when a link is clicked on. We’ll use HTML(surprisingly enough), Jquery, and a bit of CSS3 to spice things up.

Jquery Search

Usually, search forms are done with PHP. But why does this always have to be the case? Exactly, it doesn’t. Today, I will explain how to make a javascript search form.

Isotope Tutorial

I’m sure many of you have heard of jQuery Masonry. It “Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.” Now, I’m not going to lie to you, masonry is definitely […]

Jquery Sticky Sidebar

Today, I will be showing you guys how to make a simple jquery sticky sidebar script. So simple, as a matter of fact, that I made it into a plugin. The link is in the post.

Create a Super-Simple Jquery Content Slider

Content sliders are generally a good thing. They minimize screen usage, and can show lots of content in one small space. Today, I will show you how to build a super-simple content slider, with the barest of styles. We will begin with some html markup. We have a main container, so we can center it […]

Dynamically Load WordPress Posts with jQuery

Today, I will show you how to dynamically load wordpress posts with jQuery’s .load function. Dynamically loading posts has many advantages and disadvantages over simply linking to the post page. It makes the page more dynamic, and decreases the wait time between the post preview and the actual post. However, this technique does have some […]

Animated Top Panel with Jquery

In this tutorial, we will learn to make a sliding top panel that slides out when you click a special link. The logic behind this: We have a div with a fixed height at the very top of the page, with a margin-top equal to the negative of its height. We also have a link inside that panel with position set to absolute, and a margin-top. The link ends up sticking out of the panel. When the link is clicked, the margin-top of the panel changes from -500 to 0, which ends up in it being fully visible.

Beginning Jquery Animations

Recently, I wrote a post on David Martin’s blog The post is basically an intro to animating HTML elements with jquery. Link: Getting Started With jQuery Animations

Newer Posts