We will be back in a couple of weeks.

And http://www.wordpress.org redesigns.

We at Swedishfika like it a lot and we have already updated our system.

Fancy Zoom

• Focused on the smoothest, most polished zooming animation possible
• Automatically scales images from any image link, with no HTML changes
• Preloads full-size images in the background on link mouseover
• No resource-heavy Javascript libraries — 100% coded from scratch to zoom
• Draws a nice drop shadow under the full-size image to offset it from the page
• Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required
• Requires only two new lines of code in your HTML
• Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)

You can get it here: Fancy Zoom

Highslide

• No plugins like Flash or Java required.
• Popup blockers are no problem. The content expands within the active browser window.
• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
• Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

You can get it here: Highslide

We all know how important typography on the web is, and for those who doesn’t like to buy books about it can read it on the web. This is a great resource for learning the basics of typography on the web. I recommend that everyone who wants to be a good webdesigner reads this.

Check it out: http://www.webtypography.net/

I couldn’t say it better myself.
Check it out: http://www.typeneu.com/

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){
$("<span class=\"fake-hover\"></span>").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){
$("<span class=\"fake-hover\"></span>").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

Oh, and if you like it, feel free to give it a digg!

/ Fredrik

PS. I apologize if the code-tags are a bit bugged at the bottom, I blame wordpress!

If you want the repeater to have an alternating background color on the rows in a table it’s just to add an alternating template and add a css-class to the <tr> that’s in the alternating template.

<table id="tableListOfUsers" class="list-of-users">
<tr>
<th>Name</th>
</tr>
<asp:Repeater ID="RepeaterListOfUsers" runat="server">
<ItemTemplate>
<tr>
<td><%# Eval("Name") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr class="alternating">
<td><%# Eval("Name") %></td>
</tr>
</AlternatingItemTemplate>
</asp:Repeater>
</table>

/Simon Kjellberg

The XHTML

<a href="test.html">Delete user</a>

Now add the onclick attribute and write the Javascript

<a href="test.html" onclick="return confirm('Are you sure?');">
Delete user
</a>

If the user clicks on the link he/she must confirm the action. If the user clicks on the OK button in the confirm box the link will be followed, if not the link will not be followed.

/Simon Kjellberg

The XHTML

<div class="box">
<!-- Website content goes here -->
</div>

The CSS

div.box{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* height/2 = 200 */
margin-left: -250px; /* width/2 = 250 */
}

You can also make this shorthand like this:

div.box{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
}

/Simon Kjellberg