Animate hover with jQuery
Animate hover with jQuery - Animate an image while hovering it and show the visitors more information with a nice animating effect. Take a look at an Example.
jQuery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jQuery etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jQuery Feed Menus
-
- Download Example
- Preview/Code
- Tested in:
- Safari 2/3 Mac/PC
- Firefox 2/3 Mac/PC
- Opera 9 Mac
- Internet Explorer 7
- Google Chrome
- No Support For:
- Internet Explorer 6
If you are feelin’ the love, spot me a coffee!
When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound. I have a feed for my blog, the nerdlab, my bookmarks, my friend feed as well as my twitter updates. That’s a butt-ton of feeds.
Browsers have come up with a smart way of offering this content to users and it is usually place somewhere by the location bar as shown below:
Firefox 3 Feed Menu
Safari 3 Feed Menu
With the click of a button, you can view all of the feeds available in the of the document.
But still, it’s nice to offer users an alternate way to get at your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site? Why I ask? Why?
It’d be awesome to allow users to click your feed icon and be presented with a list of feeds to choose from. Hmmm, I want your twitter feed in Atom format or I’d like to subscribe to your blog feed in RSS format. Done.
The jQuery Feed Menu
Here’s how easy it is. I am going to plop one right here: . Go ahead click it. You know you want to. This feed menu was created easily by the following snippet of code:
var fm = new FeedMenu();
fm.write('#jquery_feed_menu_example_1');
Cool huh? That piece of code finds all of your feeds in the of your HTML document and makes them into a handy menu you can plop anywhere. Here are some more examples:
Atom Feeds
Atom Feeds:
Code:
var fm = new FeedMenu('link[type*=atom]‘);
fm.write(’#jquery_feed_menu_example_2′);
RSS Feeds
RSS Feeds:
Code:
var fm = new FeedMenu('link[type*=rss]‘);
fm.write(’#jquery_feed_menu_example_3′);
Different Theme Classes:
Classic Orange
Komodo Media v.4 Woodgrain
Komodo Media Azure
Transparent on Dark (for dark backgrounds)
Transparent on Light (for light backgrounds)
Code:
/*
* @param 1: CSS link selector or array of JSON objects
* @param 2: Class Name: null, wood, azure, trans_on_dark, trans_on_light
/*
var fm = new FeedMenu(null,'wood'); //2nd param is class
fm.write('#jquery_feed_menu_example');
Last, something custom
Let’s say you don’t want the feed menu to find links for you. You want to provide them in code. Check this out:
And, here’s the custom code:
var oCustomLinks = [
{
title:'RSS Feed',
href:"http://feeds.feedburner.com/komodomedia"
},
{
title:'Subscribe with Bloglines',
href:"http://www.bloglines.com/sub/http://feeds.feedburner.com/komodomedia"
},
{
title:'Subscribe with Google Reader',
href:"http://www.google.com/reader/view/feed/http://feeds.feedburner.com/komodomedia"
}
];
var fm = new FeedMenu(oCustomLinks);
fm.write(’#jquery_feed_menu_example_6′);
You can download all of the files used here to use on your site. Feel free to modify and use this code how you see fit and if you use it, please drop a comment here to show me how you’ve used it.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Creating a fading header
Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial explaining how created the effect. I’ll be creating the effect using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.
I’ve chosen jQuery because I like the way it’s built, find the elements you wish and do something with them. If you prefer another library, or just don’t want to use any library at all, that’s fine too (but you’ll need to write your own fade-function). The code shouldn’t differ too much, and since I’ll be explaining all the steps you shouldn’t have any problems translating it to the toolkit of your choice.
The image
This is the image that I’ll be using. It’s a fast mock-up of a header with a little bit of grunge. I’ve included the regular header and the hover effect in the same image. This lowers our HTTP requests, avoids flickering when we hover the image and makes our CSS more straight forward.
The HTML and CSS
The HTML is very straight forward. We have a h1 element with a link inside of it. We’re going to hook our Javascript onto our header (or whichever element we want to add this effect to) and add some custom markup.
<h1 id="header"><a href="#">Awesome header</a></h1>
Now we’ll add some CSS to style our header and give it some imagery
#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
The reason to why we’re setting the h1 to position: relative; is to make it easier to position the imagery for the hover when we add it.
Here’s an example showing what we’ve got so far.
When we load the page we’re going to add some custom markup, so this is what we’ll have to work with in our DOM. The reason we’re adding the span before the anchor is to avoid some issues with Internet Explorer 6 and the z-index property.
<h1 id="header">
<span class="fake-hover"></span>
<a href="#">Awesome header</a>
</h1>
So, let’s start out by adding this markup manually into our document so we can see what it will look like when we apply the effect. Then we’ll adding the following CSS:
#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}
It’s important to make sure that the text doesn’t shift a pixel or two since it will be very obvious when the effect kicks in. You may want to try this a couple of times by removing and adding the span to make sure it’s properly aligned.
Here’s an example of what we’ve got so far.
The Javascript
Now that we’re all set markup and CSS-wise it’s time to start adding some Javascript goodness! First of all, remove the fake span from your document.
As I wrote earlier, I’ll be using jQuery, but feel free to follow along no matter what library you may or may not be using. I’m going to write this using JSON to make the script more modular. I’ll also write it as a more general function so it’s easier to add the effect to any element you want to on your site.
First load the jQuery library
<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>
Now let’s add some code. I’ll be adding it directly into the document but you may want to use an external file for a live site.
var Header = {
addFade : function(selector){
$("").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
}
};
Okay. This function takes a CSS-selector as argument, adds our fake hover and hides it. Simple stuff. Now let’s expand our Header object adding some Javascript events for hovering and removing the mouse, and finally making it load when the page loads. When the mouse is hovered over the header, we fade in the other header graphics, and when the mouse is moved off we fade it out, using jQuery’s built in effects.
var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");
// This makes sure our function executes when the pages load
// It will add a fake hove to the #header element
});
Ok, that’s it! Check out this page for a live demo of the effect in action. Hope you learned something 
Javascript in Modern Web Design
In today’s web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don’t need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and functionality of your website. Don’t forget to check out the sample sites, which show how the plugins can be used.
The Two Popular Javascript Frameworks
Right now, the two commonly used Javascript frameworks are: jQuery and MooTools. Check out the poll below:
Read More!Generating Automatic Website Footnotes with jQuery
Generating Automatic Website Footnotes with jQuery I spent a lot of time (7 long years) in academia, writing about technical communication and new media. During that time, I created many academic documents for the web. A lot of those documents had footnotes. Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way. Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML. And I’m even happier to show you how to do it! If you’d like to see it in action before we begThe Problem: Many websites could
- benefit from having footnotes, but…
- Manually creating footnotes for web documents is a slow process.
The Requirements:
- Creating the footnotes should be as painless as possible (i.e., make use of as many standard tags/attributes as possible).
- Users should be able to create footnotes that are pure commentary, book citation, web reference, or any combination thereof.
The Solution:
I decided to make use of the two most common XHTML tags that might need footnote information: blockquotes and quotations (). Both of those tags can take the “cite” attribute, whose value is the URL from which the quoted material originated.
<-q cite="http://ffb.ceoxi.com/"->
Rob Glazebrook of CSSnewbie is imminently quoatable.
<-/q->
That takes care of the URL portion of our requirements… but what about commentary-type asides or non-web citations? You can’t put those in the cite attribute, because the only acceptable value for that attribute is a URL, and any comments you put in will be rendered as such in the output (it’s ugly… trust me). So for comments and other reference material, let’s turn to the “title” attribute instead.
<-q title="Done with your TPS reports?"->
Is this good for the company?
<-/q->
And if you’d like your footnote to look more like a standard-issue reference citation, you could even put markup inside your title.
<-q title="Zeldman, Jeffrey. Designing with
Web Standards New Riders, 2003."->
We build only to rebuild.
<-/q->
remove red "-"
Admittedly, sticking XHTML markup in your title tag is pretty bad practice, so I can’t say that I 100% recommend this tactic… but I’ve tested it, and it works (at least in XHTML Transitional).
So now that we know what our XHTML looks like, let’s turn to the jQuery!
$(document).ready(function() {
$("#wrap").append("");
footnote = 1;
$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
$(".footnote").each(function() {
$(this).append(""+footnote+"");
cite="" ;
url=$(this).attr("cite");
title=$(this).attr("title");
if(title && url) {
cite+="+url+"\">"+title+"";
} else if(title) {
cite+=title;
} else if(url) {
cite+="+url+"\">"+url+"";
}
cite+="";
$("#footnotes").append(cite);
footnote++;
});
});And now, so that everyone understands exactly what this script is doing, I’ll walk you through each section of code.
$(document).ready(function() {
});
This bit of jQuery is saying “wait until the document is fully loaded (“ready”), then run the following function. This prevents our script from running while the document is only half-loaded.
$("#wrap").append("");
footnote = 1;
The first line finds my element with an ID of “wrap” (you could use whatever element you wanted, such as the body tag), and appends (adds something to the end of) an ordered list with an ID of “footnotes.” This is where our script will stick all of our footnotes. The second line is just setting a variable, “footnote,” to a value of 1. This is the number we want our footnotes to start on.
$("q[cite],q[title],blockquote[cite],
blockquote[title]").addClass("footnote");
This line is going through our entire document and finding every q and blockquote element with either a “cite” or “title” attribute set, and giving them all a class of “footnote.”
This is a workaround to a problem I uncovered while building the script. Originally, I was just cycling through the document, grabbing all q and blockquote elements and checking for their attributes later, using jQuery’s “each” function (which we’ll see in a moment). The problem is, if you specify more than one element in an “each” function, jQuery will build an array (good) of all of your first elements first, and your second elements second, and so on (bad, in our case). Which meant that when I went through and numbered my footnotes later in the script, all the tags would get numbered, and then the script would start over at the top of the page and number all my
tags. That resulted in all my footnotes being out of order. This fixes that problem.
$(".footnote").each(function() {
});
Here’s the “each” function I mentioned previously. This line goes through the document and finds every instance of an item with a “footnote” class (which we just dynamically applied to all the appropriate elements), and then executes the contained function on every element it finds. It’s a cheap and easy “foreach” loop, basically.
$(this).append(""+footnote+"");
The first thing we do in our main function is append a footnote number to the end of the element. We put the footnote in a “sup” (superscript) tag to make it look like a footnote tag by default. You could use a different element if you so chose, and then use CSS to style it however you wish.
cite="" ;
url=$(this).attr("cite");
title=$(this).attr("title");
I’m setting three variables here. The first, “cite,” is the foundation for our footnote at the bottom of the page. Since I’m building my footnote list using an ordered list, every element within will be wrapped with
if(title && url) {
cite+="+url+"\">"+title+"";
} else if(title) {
cite+=title;
} else if(url) {
cite+="+url+"\">"+url+"";
}
We have three “if” checks and three possible outcomes here. If both the “title” and “url” variables are set, we wrap the “title” content in an anchor tag with an href of the “url” content, and add it to the end of our “cite” variable. If just the title is set, we just output the title. And if just the url variable is set, we output the url, wrapped in an anchor tag so it’s active.
cite+="
$("#footnotes").append(cite);
footnote++;
Now we just need to wrap up our script. First, we close the list item in our cite variable, now that the rest of its content has been filled. Then we append the contents of our cite variable to the end of the “footnotes” ordered list that we created at the beginning of our script. And last but not least, we increase the number of our footnote by one, so that the next footnote will be one larger than the last.
That’s all there is to it! You can see this script in action here. Be sure to view the source code so you can see that there is no footnote list in the code… it’s being automatically generated by our script. And of course, you’ll need to include the jQuery framework at the top of your document before you can run this script (view the source on the example page for a demonstration on how to do that). And you could style your footnotes any way you please: my example page contains some rudimentary styles you can feel free to borrow.
This script could probably be made more advanced fairly easily, and I might write another article in the future on expanding this script for added functionality. If you have any suggestions on other things you’d like to see this script do, don’t hesitate to share them in the comments! I’d also love to hear if you’re planning to use this script anywhere, if you know of a better way to write my jQuery (I’m new to the framework, so it’s possible), or anything else of that nature.
Read More!Drupal 6 Basic Javascript w/ jQuery
Drupal 6 Basic Javascript w/ jQuery
Here at SOTC we have been working with Drupal as of late where we are working on updating our site. One of things that I couldn't find a whole lot of documentation on it is getting simple basic Javascript stuff working in Drupal 6. So to get people moving in the correct direction I decided to throw out a small tutorial on this, especially since Drupal 6 has built in support for jQuery, a Javascript library - which should make adding fancy stuff pretty easy.
Below we have a small mock-up of what we are going to build using jQuery and Drupal. A very simple table where the data rows will change style when hovered over and out. This is about the as basic as it gets with jQuery - so good for us 
| Engine | Root Bulk Temp. (R) | Mid Span Bulk Temp. (R) | Tip Bulk Temp. (R) |
| CFM56 | 2250 | 2310 | 2295 |
| GE90 | 2300 | 2322 | 2315 |
| F404 | 2380 | 2399 | 2401 |
| CF34 | 2108 | 2127 | 2118 |
| TF39 | 2090 | 2106 | 2098 |
Ok starting off we are going to take a look at the basic code for the test module. My test module adds a new page which will hold our test content, in this case the page is /testmodule. The page will return content from a callback function named _testmodule_page. The content function will create some test data about jet engine blades (yeah I am geeky) and pass it to a template file to render. The template file is, of course, added by overriding hook_theme in the module. So without further ado here is the code for testmodule.module.
function testmodule_perm()
{
return array('access testmodule content');
}
function testmodule_menu()
{
$items = array();
$items['testmodule'] = array(
'title' => 'Test Module Page',
'page callback' => '_testmodule_page',
'access arguments' => array('access testmodule content'),
'type' => MENU_CALLBACK,
);
return $items;
}
function testmodule_theme()
{
return array(
'testmodule_page' => array(
'template' => 'testmodule-page',
'arguments' => array('engines' => NULL),
),
);
}
function _testmodule_page()
{
$engines = array();
$engines[0] = array(
"model" => "CFM56", "root" => 2250,
"mid" => 2310, "tip" => 2295);
$engines[1] = array(
"model" => "GE90", "root" => 2300,
"mid" => 2322, "tip" => 2315);
$engines[2] = array(
"model" => "F404", "root" => 2380,
"mid" => 2399, "tip" => 2401);
$engines[3] = array(
"model" => "CF34", "root" => 2108,
"mid" => 2127, "tip" => 2118);
$engines[4] = array(
"model" => "TF39", "root" => 2090,
"mid" => 2106, "tip" => 2098);
return theme('testmodule_page', $engines);
}
Now we need to define that template file which I am not going to go over in much depth because it simply creates a table and outputs the data.
id="testcontent">
id="testmodule-table">
| class="engine">Engine | class="root">Root Bulk Temp. (R) | class="mid">Mid Span Bulk Temp. (R) | class="tip">Tip Bulk Temp. (R) |
| class="engine"><?= $engines[$i]['model'] ?> | class="root"><?= $engines[$i]['root'] ?> | class="mid"><?= $engines[$i]['mid'] ?> | class="tip"><?= $engines[$i]['tip'] ?> |
Now this will look like a basic table when built and displayed but we want it to look a bit nicer, right? Well we are going to use a little css to take care of this. Below you can check out the css I added to make the table a little bit nicer looking - put in testmodule.css.
#testmodule-table
{
width: 530px;
font-size: 13px;
border-collapse: collapse;
}
#testmodule-table tr
{
height: 25px;
}
#testmodule-table td
{
border-bottom: solid 1px #AAAAAA;
}
#testmodule-table .root, .mid, .tip
{
text-align: center;
}
#testmodule-table thead td
{
font-weight: bold;
border-top: solid 2px #888888;
}
{
width: 530px;
font-size: 13px;
border-collapse: collapse;
}
#testmodule-table tr
{
height: 25px;
}
#testmodule-table td
{
border-bottom: solid 1px #AAAAAA;
}
#testmodule-table .root, .mid, .tip
{
text-align: center;
}
#testmodule-table thead td
{
font-weight: bold;
border-top: solid 2px #888888;
}
All the above should look pretty normal for just about anyone who has ever used any css. So we have the css to create a pretty table but we need to tell drupal to add the css file to the header links. We do this with the function drupal_add_css which simply takes the path to css file to add and it handles the rest. But where do we put this function? Well there is a perfect place but we need to add a preprocess function for our template. Ours is named after our module and then the theme template, testmodule_preprocess_testmodule_page. In this function we use the Drupal function drupal_get_path to get the path to our module. Then we append the name of our css file to it and call drupal_add_css. You can see the new function for testmodule.module below.
function testmodule_preprocess_testmodule_page($engines)
{
$module_path = drupal_get_path('module', 'testmodule');
drupal_add_css($module_path . '/testmodule.css');
}
{
$module_path = drupal_get_path('module', 'testmodule');
drupal_add_css($module_path . '/testmodule.css');
}
Next we are going to add one more css declaration and our Javascript to change the style when the row is hovered. First the new css style is a class called tr-hover which is added to our css file. All it does it change the background to a light gray.
.tr-hover
{
background: #EEEEEE;
}
{
background: #EEEEEE;
}
Now on the fun stuff - playing with the Javascript. Drupal 6 has made it easier than ever to get Javascript added to your site using jQuery. The first thing to learn is that Drupal abstracts the functionality of jQuery a little bit. If you are familiar with jQuery you will probably remember that all jQuery functionality uses a custom document ready event to add functionality to a page. In Drupal all this is done for us - we simply have to add a function to the Drupal.behaviors object. At runtime Drupal will call all the attached functions on Drupal.behaviors, which in this case will include our code.
We are going to add the testmodule function to the Drupal.behaviors object which will hold our Javascript. Inside the function we use jQuery's hover event and attach it the table body rows of our table. You can see in the code below we use the css selector#testmodule-table tbody tr with jQuery's $ function to grab the relevant elements and add the event to them. All that is left is to actually add and remove the css class using jQuery's functions addClass and removeClass to the element on hover in and out. I put all this code into the file testmodule.js.
Drupal.behaviors.testmodule = function(context) {
$("#testmodule-table tbody tr").hover(function()
{
$(this).addClass("tr-hover");
},
function()
{
$(this).removeClass("tr-hover");
});
}
$("#testmodule-table tbody tr").hover(function()
{
$(this).addClass("tr-hover");
},
function()
{
$(this).removeClass("tr-hover");
});
}
Lastly, we need to get our Javascript file added to the page, which is easy because we have already learned how to do it. We use almost the same code as adding the css file but with a slightly different function to add the file: drupal_add_js. And that pretty much wraps the basics of adding and executing Javascript in Drupal 6. As promised you can download the testmodule source code. Feel free to leave a comment if you have any questions or remarks.
Read More!
