Design Lunatichttp://www.designlunatic.com
Just another WordPress siteTue, 12 Nov 2013 17:22:29 +0000en-UShourly1http://wordpress.org/?v=3.6.1Isotope infinite scrollhttp://feedproxy.google.com/~r/DesignLunatic/~3/auDEWZBlbvU/
http://www.designlunatic.com/2012/12/isotope-infinite-scroll/#commentsTue, 25 Dec 2012 07:02:39 +0000Design Lunatichttp://www.designlunatic.com/?p=1303The faster something loads, the happier the user is. This is something it is important to understand when creating websites. Today, I’ll show how to use jQuery’s AJAX capabilities in conjunction with isotope.js to dynamically load content in once the user reaches the bottom of the page, which makes everything seem faster and improves the user experience.

Before you begin this tutorial, make sure you have a local web server set up, because jQuery’s AJAX functions don’t work when the file is just opened locally.

HTML

The HTML remains the same as it was in the original isotope tutorial. However, you must create some more pages. Create a duplicate of the index.html file from the original isotope tutorial and call it page2.html. Do the same thing again, and call it page3.html. Put the pages you created in a directory called “pages”. Feel free to change the content of the boxes inside each page – that will just make it easier to distinguish which box came from what page.

Now, can start on the AJAX functionality. First, we need a variable to store what page is currently being displayed on the page.

var page = 1;

This will go up by one every time another page is loaded in.

Next, we’ll create the window.scroll function that all of our code today will go into.

var page = 1;
$(window).scroll(function(){
});

This is where all the magic will happen. Since the whole purpose of the script is to detect when a user has scrolled down to the bottom of the page and load content in when that happens, we need a window.scroll function. Every time the user scrolls, the code inside this function is executed.

The parameter inside the load function is what jquery is retrieving. In this case, it is a page inside the “pages” directory, and the page is whatever the next page is – that’s why page is being incremented by one. The second part of the parameter is “#content”, which means jquery is only retrieving the #content div from the next page, since we don’t need anything else. The HTML jquery retrieves is placed inside the “#temp-load” div.

This code makes the elements inside the “temp-load” div have an opacity of 0, so that they can later on be nicely animated in. The “toAdd” variable contains the HTML for all the elements that were just loaded in with jquery. We’ll insert the content of this variable into the main container. To do this, we’ll use isotope’s insert function.

Here’s what happens: isotope takes the value of “toAdd” and appends it to the inside of the $container. It then triggers a reLayout, which means everything inside is re-filtered. This way, all the items are now isotoped. Once the items have been added, the callback function fires. Inside that, we make all of $container’s children have an opacity of 1. Since the elements we just added all have an opacity of 0, they need to become visible. Modifying their styles to make their opacity 1 animates them to become visible. Lastly, the temporary div is removed since we no longer need it.

That’s the end of this tutorial; I hope you enjoyed it. If you have any questions or comments, feel free to leave them in the comments section below.

]]>http://www.designlunatic.com/2012/12/isotope-infinite-scroll/feed/7http://www.designlunatic.com/2012/12/isotope-infinite-scroll/Custom Scrollbars with jQueryhttp://feedproxy.google.com/~r/DesignLunatic/~3/aU2HFSrXLc4/
http://www.designlunatic.com/2012/11/custom-scrollbars-with-jquery/#commentsThu, 22 Nov 2012 21:13:01 +0000Design Lunatichttp://www.designlunatic.com/?p=1281Sometimes, as web designers, we create a perfect design. Everything is exactly the way it should be, every pixel in the right spot, every color the right tinge. However, there is one thing that we often leave unchanged, and that is the scrollbar. Today, I’ll show how to create custom scrollbars using jQuery.

HTML

The HTML is extremely basic – it’s just a “section” with some paragraphs inside. The javascript we’re about to write inserts all the HTML the custom scrollbar needs, so you can place whatever you want into the HTML.

We’re giving it a width, fixing it to the viewport so that it stays in the same spot no matter where the user scrolls, we attach it to the right of the screen, and we give it a height of “100%”, which makes it the same height as the viewport. The last thing is just a light grey background.

The CSS is almost the same as that of the scrollbar track’s, but here there is no “height: 100%”, since the height will vary depending on how much content there is on the page. The scrollbar also has a width of 10px, is attached to the right side of the viewport, and is given some mild styling.

Keep in mind that you won’t be able to see these styles yet, as the elements haven’t actually been created by the javascript yet.

jQuery

The first thing we need is to include a couple of scripts. Download the files for this tutorial. Inside, you’ll find “jquery-ui-draggable.js” and “jquery.mousewheel.js”. The “draggable” script is just a custom build of jQuery UI that only contains the code for “draggable”, and “mousewheel” gives us some handy functions based on the user’s mousewheel or trackpad. Place them in the directory in which you’re following this tutorial.

There’s now a function called “scrollBar”, which has some variables inside it. The first one, “viewportHeight” is the height of the browser viewport. The next, “docuHeight”, is the height of the whole HTML page. “trackHeight” is the height of the scrollbar track, which is the same as “viewportHeight”. I just like to keep the two separate to make it clearer what the code actually does. Next, the “scrollbarHeight” variable. This variable is created by taking the ratio of the viewport height to the document height, which is usually between 0 to 1. If the ratio is higher, that means that the viewport is bigger than the whole HTML document, in which case the scrollbar doesn’t do anything. We take the ratio and multiply it by the “trackHeight”. This gives us the height of the scrollbar. Let’s imagine that the whole document is exactly twice as big as the viewport. For example, the height of the viewport is 500px and the height of the document is 1000px. 500/1000 is “0.5″, so the ratio is “0.5″. We then multiply “0.5″ by the trackHeight, which gives us a value exactly half the size of the track height. This is how the height of the scrollbar is determined.

This is where the “draggable” script comes in. We use the “draggable” function to make the scroll bar draggable. The “axis” parameter is set to “y”, which means that it can only be dragged up or down. The “containment” parameter is set to “parent”, which means it can’t be dragged out of the boundaries of the parent, which in this case, is the “track”. The last thing is the “drag” paramater, which accepts a function as a value. Basically, whenever the scrollbar is being dragged, this function fires. Inside the function, the first thing we do is create a variable called “scrollbarTop”, which takes the CSS “top” value of the scrollbar (how far away it is from the top of the track) and converts it into an integer. This allows us to use it in mathematical equations such as the one that determines the value of the next variable, “scrollTopNew”. “scrollTopNew” is the new value of where the window should scroll to. In order to do this, we take the ratio of the scrollbar’s “top” value and the “trackHeight”. We then take this ratio and multiply it by the “docuHeight”, which gives us a value to which the window should scroll. The last line actually scrolls the window to this value.

This code is just after the “draggable” scrollbar code. Here, we bind a “mousewheel” event to the body, so whenver the mousewheel is moved, the code inside is executed.

The first variable, “scrollTop”, is how far the window has already scrolled. The next one, “scrollTopNew”, is where the window should now scroll to. It is determined by taking the current “scrollTop”, and using teh “delta” variable. The “delta” variable is a number, “1″ or “-1″. It is “-1″ if the user just scrolled down, and “+1″ if the user scrolled up. This number is multiplied by “30″, so when the user moves their mouse wheel down once, the page scrolls down by 30 pixels. This new value is then applied to the window’s “scrollTop” by using the “scrollTop” function. “scrollbarTop” is where the scrollbar should be as a result of the user’s mouse wheel or touchpad scrolling. It takes the current scrollTop divides it by the document height to get the ratio, and multiplies the ratio by the trackHeight so that the scrollbar is in the right position. The scrollbar is then given a top of “scrollbarTop”.

This code should work well, but it doesn’t work when the user resizes their browser window. We can fix this by using the following code:

That’s it for this tutorial – I hope you enjoyed it and learned something new. If you have any questions or comments, post them below and I’ll do my best to answer.

]]>http://www.designlunatic.com/2012/11/custom-scrollbars-with-jquery/feed/14http://www.designlunatic.com/2012/11/custom-scrollbars-with-jquery/Awesome jQuery Tooltipshttp://feedproxy.google.com/~r/DesignLunatic/~3/cuBZA92Ooyo/
http://www.designlunatic.com/2012/11/awesome-jquery-tooltips/#commentsSun, 04 Nov 2012 17:58:06 +0000Design Lunatichttp://www.designlunatic.com/?p=1250Tooltips are a great way to display some information about an element on the page. Normally, these are used on links. In this post, I’ll explain how to create a jQuery script that allows for easy tooltips on a page.

The text inside the container will be 15px Arial with a line-height of 25px, and will be a dark grey color. The container will be 600px wide with some padding, and will have borders that are slightly rounded.

All of this is just for visual purposes. We’re giving it a width of 100px, some padding, styling the text inside – basically, we’re just making it pretty. Notice the “left: 50%” and “margin-left: -60px”. This positions the left edge of the tooltip to be halfway in the link, but that’s not what we want; we want it to be perfectly centered. The “margin-left: -60px” makes it perfectly centered by shifting it a value to the left equal to half of the width of the tooltip (since with the padding, the tooltip actually has a total width of 120px). Another important property is the “pointer-events: none” property – this makes the user unable to interact with the tooltip, so that it doesn’t get in the way when it isn’t visible.

With this code, the tooltip already looks pretty – but it doesn’t have a triangle pointing down to indicate where it originated from. Let’s fix that.

Instead of creating a separate element just for the triangle, we’re using the CSS3 “after” pseudo element. The “content” property is so that the pseudo element actually contains something; without this, nothing will show up. Now, the next two lines are centering the triangle. The “left: 50%” will make the left edge of the triangle be halfway, but by giving it a negative margin equal to half of its width, the triangle is now perfectly centered. However, the triangle is not where we want it to be. The “bottom: -10px” makes it be right below the tooltip. The next lines are what make it a triangle. By giving it a width and height of 0, all that’s left is the borders. Each border behaves like a triangle, where four triangles create a square. By making the left and right borders transparent, the top border is all that remains. The top border has the same color as the border of the tooltip, so it fits in nicely.

Jquery

Before we begin writing code, here’s how everything will work:

The script iterates over each link, or “a” element on the page.

For each link, a “div” with a class of “tooltip” is added.

Each tooltip div contains the text from the “data-tooltip” attribute inside its corresponding link.

When a link is hovered over, its corresponding tooltip is animated slightly upwards and the opacity is increased.

This is just the typical jquery document ready function, which waits until the page is loaded to execute the code inside it. The “each” function repeats itself for each element selected; in this case, the code inside it is executed for each link with a “data-tooltip” attribute on the page.

The variable “tooltipHeight” is the height of the tooltip using the “outerHeight” function, which is just the “height” function but it includes padding and borders – this allows for a more accurate height. “$(this).find” finds a particular element inside the current element. In this case, we’re just finding the tooltip that is inside the link the script is currently on. We then give the tooltip a “top” equal to the negative of its height, which puts it right above the link.

The last thing that must be done is making the tooltip actually appear when a link is hovered over.

When a link with a “data-tooltip” attribute is hovered over, the tooltip inside it is animated to “opacity: 1″, and is shifted up 7 pixels. When the tooltip shifts up like that, it not only looks nice, but also shows where the tooltip is actually coming from. These two animations are done during 200 milliseconds. At this point, we’re almost done, but notice what happens when you move the mouse cursor away from a link – nothing. The tooltip stays where it is.

Here, we’ve used a callback to the “hover” function; the code inside the “hover” callback executes when the cursor is no longer hovering over the link. In this callback, we simply move the tooltip back down and reduce its opacity.

That’s the end of this tutorial. I hope you found it useful and enjoyable, and if you have any questions or comments, feel free to comment below – I’d be happy to answer.

]]>http://www.designlunatic.com/2012/11/awesome-jquery-tooltips/feed/0http://www.designlunatic.com/2012/11/awesome-jquery-tooltips/Rearrange content when it’s too wide with jqueryhttp://feedproxy.google.com/~r/DesignLunatic/~3/k24ZH0jB6aA/
http://www.designlunatic.com/2012/09/rearrange-content-when-too-wide-with-jquery/#commentsTue, 18 Sep 2012 02:53:48 +0000Design Lunatichttp://www.designlunatic.com/?p=1222Media queries have proven to be extremely useful in responsive layouts. However, they do have a drawback: they can’t analyze the content on the page before deciding when to kick in. For example, if you have a fluid layout, CSS doesn’t know exactly what width the container has when the browser has a width of, for example, 742px. Javascript does. In this post, I’ll show how javascript can be used to make layouts even smarter and more adaptable.

Header just contains everything, the “h1″ is the title of the site, and the “nav” contains the navigation menu. Feel free to add whatever you want to the HTML – the beauty of this script is that it will work no matter what you have in there.

CSS

In the CSS, we’ll first style the elements to look a certain way, and then we’ll add classes that will be applied to the elements when there isn’t enough space.

Now, the header. We’ll give this a percentage width of 60% to demonstrate the capabilites of the javascript we’ll write in a moment. You can set this to whatever you want, but I would suggest sticking with 60%.

The “header” has a width of 60%, and it doesn’t get any smaller than 260px, because anything less than that is just unreasonably small. The height is 50px, and we’re setting it because the elements inside are floated. It’s centered using “margin: 0 auto”, and is 30px from the top of the page, and after that are just some styles to make it look nice.

Next up, we’re going to style the “h1″ title inside the header.

h1 {
font-size: 32px;
line-height: 50px;
float: left;
}

The font-size is 32px because that’s a reasonable size for the title of a website, and its line height is 50px so that it’s centered in the header. Since the header has a height of 50px, anything inside with a line-height of 50px will be vertically centered, and that’s what’s happening with the title and the navigation.

Now, we just need the “nav” to float to the right.

nav {
float: right;
}

However, the content inside the nav still looks ugly. Let’s fix this.

nav ul li {
display: inline;
padding-left: 10px;
line-height: 50px;
}

Each “li” is displayed inline so that they can all be on one line, they’re all 10 pixels from each other, and the line-height is 50px so that they’re vertically centered.

Unfortunately, the links inside still look pretty bad.

nav ul li a {
color: #515151;
text-decoration: none;
}

There. That nasty blue color is gone, and so is the underline. Much better.

At this point, everything is completely styled – but one thing is missing: the styles for the smaller, alternate versions of the header, the title, and the navigation.

Let’s make an alternate version of the header

.smallHeader {
height: 100px;
}

The height is now twice as tall as it was before, so that all the content inside still fits perfectly. Since the title and the navigation both have a line-height of 50px, and they’re on separate lines now, two rows of 50px is 100px.

Now, let’s make the title and the navigation both 100%, so they make the best use of the space availabe.

I can see this as being especially useful for themes and templates, where you don’t know what the buyer will have as their site title or their navigation. This way, the styles will be applied at the perfect moment. That’s the end of this tutorial – if you have any questions or comments, feel free to post them below and I’ll do my best to help you out.

]]>http://www.designlunatic.com/2012/09/rearrange-content-when-too-wide-with-jquery/feed/0http://www.designlunatic.com/2012/09/rearrange-content-when-too-wide-with-jquery/A Continuation of the Isotope Tutorial: Hash History with Isotopehttp://feedproxy.google.com/~r/DesignLunatic/~3/U_Zxld9bV_g/
http://www.designlunatic.com/2012/08/a-continuation-of-the-isotope-tutorial-hash-history-with-isotope/#commentsSun, 19 Aug 2012 01:38:17 +0000Design Lunatichttp://www.designlunatic.com/?p=1200jQuery hashchange event.]]>I’ve written several tutorials on how to use isotope effectively and maximize its potential, and today’s post will be part of that series. What exactly does isotope do? It reorders the content on a page to only display what is necessary. The user can usually control this by clicking on links that change what the content is filtered by. But what if the user refreshes the page? Or decides that what the content was previously filtered by worked better, and presses the back button? Then, problems begin. The user has to reorder the content again to get back to where they were. Today’s post aims to solve that problem by using a plugin called jQuery hashchange event. This plugin works with the hash, the part after the url of the page that begins with “#”. It adds back button support to cycle through the hashes, and adds a handy “hashchange” jquery event.

HTML

There are no changes from the HTML of the original isotope tutorial.

CSS

Nope, no changes here either. Keep reading.

Jquery

Here’s where the fun starts. We’ll rewrite the jquery from scratch, as there are several changes and optimizations to be made. Before you start writing the code, download the hashchange plugin. Once you’ve included the plugin, start off with jquery’s essential document.ready function.

$(document).ready(function(){
var $container = $('#content');
});

There’s also a “$container” variable defined, which is just what we’re filtering.

Now, we need to create the code that will deal with appending values to the URL when a link is clicked.

The above code takes the “data-filter” attribute of the link that was just clicked, and appends it the url via the “location.hash” method. Then, there’s a return false, so the link isn’t followed. The above code works fine, but personally, I don’t like what is appended to the url. I think the dot before the category is extra – so let’s get rid of it.

The “hashfilter” variable may seem a bit complex at first, but it’s quite simple. We’re taking the “location.hash”, which is the current hash of the URL, and deleting the first character. Why? Because the first character is a “#”, and we don’t need it. We then append a period to the beginning of a variable. Here’s what the process looks like: #cat1 => cat1 => .cat1.

While it may seem that the “hashchange” function works exactly as it has to, that’s incorrect. There’s one big issue with this – try clicking on the “All” button. Notice how nothing happens? That needs fixing.

The “if…else” statement fixes this. If the “location.hash” is NOT equal to a blank, the “hashfilter” is what created earlier. If it IS a blank space, then the “hashfilter” is a “*”, which basically means “All” in isotope.

We’re almost done – there’s just one thing left. If the page doesn’t get refreshed, everything works exactly as it should – but what if the page is refreshed, or is opened in a new window? The code doesn’t know what to filter it by, so it just goes with “*”. This is easy to fix though; we already wrote all the code we need.

Boom. Copy-pasted from inside the “hashchange” function, and it does exactly what we need to it do. At this point, everything should work perfectly for you. If it doesn’t, just download the files for the post and compare them to yours, but if it does, good job! That’s the end of this tutorial. If you have any questions or comments, feel free to post them below, and I’ll do my best to answer them.

]]>http://www.designlunatic.com/2012/08/a-continuation-of-the-isotope-tutorial-hash-history-with-isotope/feed/10http://www.designlunatic.com/2012/08/a-continuation-of-the-isotope-tutorial-hash-history-with-isotope/A Continuation of the Isotope Tutorial: Combination Filtershttp://feedproxy.google.com/~r/DesignLunatic/~3/9nuIcNb8ulk/
http://www.designlunatic.com/2012/07/a-continuation-of-the-isotope-tutorial-combination-filters/#commentsThu, 26 Jul 2012 04:55:04 +0000Design Lunatichttp://www.designlunatic.com/?p=1177Isotope.js is a powerful tool for creating dynamic webpages with interactive capabilities. It does this by using “filtering”, by which certain elements on the page are removed or added, depending on what the user requests. This by itself is incredibly useful, but it can be made even better, by using combination filters. This allows the user to select two criteria by which content is filtered. In this tutorial, I’ll show how to do just that.

We have a class called “june”, which is the month this post was published, and a class called “y2010″, which is the year. It’s not possible to have a class with just numbers, so the “y” is necessary. The same concept applies to every other post.

When a link inside the “#month” div is clicked, that means the user wants to filter the posts according to a single month. So, we need to withdraw the value of the “data-filter” attribute to find out how exactly we need to filter the content. Now, we’ll create a “data-active” attribute to hold what month the content should be filtered by. Lastly, we call the reorder function, which we’ll create in a moment.

Same logic as for the “month” links. When a link is clicked, store its “data-filter” attribute in the “data-active” attribute.

Lastly, we need to create the “reorder” function. When this function is called, it will check the values of the “#month” and “#year” divs, combine them, and filter the content with them. How is it possible to combine them? Simple: jQuery can use the following syntax in selecting elements:

$('.class1.class2')

This selects any elements with both classes. Isotope can also do this.

This works in some cases, but there are some things this is missing. First of all, what if the user has only clicked a “month” link, but not a “year” link? The variable “filterString” will look something like this: “.julyundefined”. The “undefined” is there because the year hasn’t actually been defined yet, since a “year” link hasn’t been clicked yet.

With this code, you should be able to create combination filters on your site as well. That concludes this tutorial; I hope this helped in some way.

]]>http://www.designlunatic.com/2012/07/a-continuation-of-the-isotope-tutorial-combination-filters/feed/4http://www.designlunatic.com/2012/07/a-continuation-of-the-isotope-tutorial-combination-filters/Create An Image Gallery With CSS3 3D Transformshttp://feedproxy.google.com/~r/DesignLunatic/~3/IcIis9HTV7M/
http://www.designlunatic.com/2012/06/create-an-image-gallery-with-css3-3d-transforms/#commentsSat, 23 Jun 2012 07:16:48 +0000Design Lunatichttp://www.designlunatic.com/?p=1153CSS3 offers many exciting new opportunities for web designers looking to spice up their webpages, but one of the most interesting ones are the 3D transforms. Objects on the page can be manipulated in 3D space. In this tutorial, we’ll make an image gallery that utilizes 3D transforms to make things a bit more interesting.

CSS

We’ll start off with some simple styling to make the page look nice. Right now, there’s just a bunch of images stacked vertically on the page. As far as layouts go, it’s not too bad. I’ve seen worse. But in this case, let’s make it a bit easier on the eyes.

Remember the “title” attribute that each “image” div has? We need a way to put that on the back of each image, and this is where CSS3 psuedo-elements come in. Basically, with only CSS, it is possible to create another element right next to each “image” div we have on the page.

.image:after {
content: attr(title);
}

Now, right after each “image” will be an element with the contents of the “title” attribute inside. However, we also need to position this on the back of each image, and for that we will use CSS3 3D transforms. Before they can be used, the following code needs to be added to the parent element of whatever we’re going to manipulate.

-webkit-perspective: 1000;

Defining perspective is necessary for 3D elements to have… perspective, surprisingly enough. WSC does an excellent job of explaining this.

Without perspective, the elements would look boring and flat when rotating.

This part is necessary so that the code inside only executes when all the elements on the page are fully loaded.

Let’s think this through; we want something to happen when an image is clicked.

$('.image').click(function(){
});

We want it to switch back and forth between being rotated 180 degrees around the Y axis and being rotated 0 degrees around the Y axis. For this, we’ll use the HTML5 “data-” attributes capability. Part of HTML5 is that it is now perfectly acceptable to define a custom attribute beginning with “data-”, such as “data-flipped”, which is what we’ll use. In here, we’ll store whether or not that particular element is flipped.

At this point, you should have a working image gallery with flipping images and captions. I hope you enjoyed creating this, and that you learned something today. As always, the comment section is below if you have any questions or… well, comments.

]]>http://www.designlunatic.com/2012/06/create-an-image-gallery-with-css3-3d-transforms/feed/0http://www.designlunatic.com/2012/06/create-an-image-gallery-with-css3-3d-transforms/A Continuation of the Isotope Tutorial: Highlight the currently active linkhttp://feedproxy.google.com/~r/DesignLunatic/~3/pJgCDaWyDeI/
http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/#commentsSun, 20 May 2012 19:52:33 +0000Design Lunatichttp://www.designlunatic.com/?p=1122Isotope.js, the user won't know what is currently being displayed. In this post, I'll show how that can be fixed so that the user can have an excellent experience even on a site using Isotope.]]>In web design, the navigation bar is crucial in telling the user where he is located. Usually, the user is further helped out by highlighting the currently active menu item. For example, if the user is on the “About Us” page, the “About Us” link in the navigation bar will be styled to look different. Unfortunately, if the site uses Isotope.js, the user won’t know what is currently being displayed. In this post, I’ll show how that can be fixed so that the user can have an excellent experience even on a site using Isotope.

Here, the variable $container is whatever container you want to isotope. The variable toFilter is what the $container is filtered by. The reason we have a variable for this is because later on in the code, we have to know what what $container is filtered by. The rest of the code is isotope-specific, and is completely self-explanatory.

Remember that “data-current” attribute on the $container? We’ll start to use it now.

$container.attr('data-current',toFilter);

This code sets teh “data-current” attribute to what the $container was originally filtered by. This way, we can highlight the currently active navigation as soon as the page loads. More on that later.

We can now write the function that will determine what the $container is currently being filtered by, which we’ll call “checkActive”.

function checkActive(){
$('#nav a').each(function(){
});
}

Inside the “checkActive” function, we have a .each function. This basically iterates over each element that matches the selector. In this case, the code inside the “each” function repeats itself for each #nav a.

Now, take a look at the title of each nav link. Notice the fact that it doesn’t have a “.” at the beginning of it. This needs to be fixed before we can accurately compare the “data-current” attribute with the title of each nav link.

However, there’s a slight problem with this code: the links won’t return to their previous states if the active category changes. We can fix this by making a type of “reset” that will make all links the way they were originally, and then changing whichever one needs to be changed.

And there you have it: upon clicking a link in the navigation, it becomes different-looking so that the user knows what is currently being displayed. Now, you may wonder why we didn’t just make the link change color upon being clicked without worrying about the “data-current” attribute and all that. The reason is that this code works much more flexibly and with many other situations. For example, what if there’s a link inside the content of the page? All you need to do is modify the $('#nav a') selector to include links inside the post, and when a link in the post is clicked that filters the content, the navigation changes to reflect that. Or, what if there’s another piece of code that needs to know what category is currently being displayed? You don’t even have to modify anthing! Just find out the “data-current” attribute of the $container, and you’re done.

In other words, this code is highly flexible and adaptible, and not just this situation specific. I hope you learned something from this tutorial. If you have any questions or comments, feel free to use the comment form below.

]]>http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/feed/13http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/CSS3 Fade Effecthttp://feedproxy.google.com/~r/DesignLunatic/~3/tuV4ZfpDxIc/
http://www.designlunatic.com/2012/03/css3-fade-effect-2/#commentsTue, 27 Mar 2012 22:52:58 +0000Design Lunatichttp://www.designlunatic.com/?p=1049Today, I’ll be showing how to create an awesome CSS3 hover effect that is normally done with javascript. This one is particularly useful for masonry layouts and image galleries.

Each image has a lower opacity to start off with and will animate its properties. The “float: left” is just for layout purposes.

Now, we have to actually create the CSS effect itself. Here’s how this works: When we hover over the #images container, we’ll style all of the images inside to animate to a lower opacity. We’ll also add a hover style to the “img” element so that its opacity becomes higher. This way, the hovered image will be the focus of the page.

As you can see, there are 4 different states for an image: Default, hovered, when another image is hovered, and active.

This creates an interesting effect, and with only CSS3! This method is also useful because it gracefully degrades in older browsers. Users with older browsers won’t get the cool effect, but they will still have all the functionality.

]]>http://www.designlunatic.com/2012/03/css3-fade-effect-2/feed/0http://www.designlunatic.com/2012/03/css3-fade-effect-2/CSS3 Lavalamp Menuhttp://feedproxy.google.com/~r/DesignLunatic/~3/MxnouNs2xQQ/
http://www.designlunatic.com/2012/03/css3-lavalamp-menu/#commentsSun, 18 Mar 2012 03:39:49 +0000Design Lunatichttp://www.designlunatic.com/?p=1037This jquery powered one, except for the keyboard control. Lavalamp menus are a unique way to add some creativity to your site, and if said menu is made with only CSS3 - that's pretty cool.]]>Today, I’ll be teaching you how to create a CSS3-only lavalamp menu. This menu will behave much like This jquery powered one, except for the keyboard control. Lavalamp menus are a unique way to add some creativity to your site, and if said menu is made with only CSS3 – that’s pretty cool.

CSS

The CSS for this is very reusable. It’s very easy to just copy-paste this into your CSS file and have it working almost instantly, since all you need is just an unordered list, which is the format most nav menus follow.

Most of the stuff in there is purely for visual purposes, but one thing is necessary – the “position: relative”. Since our “slider” div will be “position: absolute”, we need it to be positioned “relative” to the nav.

Once again, most of this is just for appearances, but there are a few necessary things in here. First of all, “position: absolute”. This allows us to put the div anywhere we want inside the “nav” without affecting any of the other elements. We also give it some CSS3 transition styling so that it smoothly animates to wherever we want it to be. One last thing about this div – it will animate back to whatever the “left” value originally is. Here, the “left” value is set to “0px”, so whenever the user hovers off of the menu, the “slider” div will move underneath the very first menu item. If you set the “left” value to be for example “100px”, the “slider” div will animate back to the second menu item when the user hovers off of the menu. This can be used to signal which is the currently active page.

Boom. That’s it. Here’s how it works. When you hover over an “nth-child” of the “nav” menu, we use the “~” CSS selector to select the adjacent “slider” div and give it a new “left” value. The purpose of the “~” is to select any element that is after the first element. In our case, the “slider” is after each child of the “nav”, so we use the “~” to select it.

I hope you learned something useful from this tutorial. If you have any questions or comments, feel free to post them below.