It includes features like forward and backward navigation, current date highlight, restricting selection of dates, individual styles per date picker, and show currently selected date.

Requirements: jQuery Framework
Demo: http://code.gautamlad.com/glDatePicker/
License: License Free

Sponsors

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

This logo looked like the perfect candidate to do so, since it uses huge pixels and only a couple of colours (4 shades of green). With only little HTML, CSS and jQuery, I was able to generate this logo with not much effort.

  

Did you check out the demo to see what we’re going to do? This is how you can generate this pixellogo yourself!

Read more…

Go to Source

Using such approaches brings h5ai closer to the look and feel of local file browsers and makes browsing files on the server straightforward even for new and unexperienced users. h5ai is provided under the terms of the CC BY-SA 3.0 License.

Requirements: jQuery Framework
Demo: http://larsjung.de/h5ai/sample
License: Creative Commons License

Sponsors

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

Go to Source

Go to Source

Sponsor

Today a new vendor announced its solution, and it is a bit different from what we’ve seen previously. For most of these apps, you get sent a code via SMS to your phone that you have to key in on the Web page of the bank or other vendor that you are trying to authenticate with.

It works in reverse of the other apps: you go to their site, and register your phone number for your credential. Then Textkey brings up a screen on their website with the code – you then enter it on your phone and send a text message back to Textkey HQ to authenticate yourself. It is a clever approach.

You can try the service out yourself by going to the Textkey demo site. The service costs $25 per year per user and while they haven’t yet gotten any paying customers, many are giving it consideration.

Discuss

Go to Source

Sponsor

Today a new vendor announced its solution, and it is a bit different from what we’ve seen previously. For most of these apps, you get sent a code via SMS to your phone that you have to key in on the Web page of the bank or other vendor that you are trying to authenticate with.

It works in reverse of the other apps: you go to their site, and register your phone number for your credential. Then Textkey brings up a screen on their website with the code – you then enter it on your phone and send a text message back to Textkey HQ to authenticate yourself. It is a clever approach.

You can try the service out yourself by going to the Textkey demo site. The service costs $25 per year per user and while they haven’t yet gotten any paying customers, many are giving it consideration.

Discuss

Go to Source

Flicksh is a viewer of flickr galleries with new look .. it’s very good to see more photos in one page!
to use our site .. When you see flickr gallery only replace in URL the (flickr.com) to (flicksh.com).
For example .. replace like this:
(on Flickr Site): http://www.flickr.com/photos/abdul7amid
(On Flicksh viewer): http://www.flicksh.com/photos/abdul7amid

demo: http://www.flicksh.com/photos/eldano

view more

Go to Source

• Live Demo
• Download Theme

• Live Demo
• Download Theme

Last night my photography ebook, “Barcelona Beyond Gaudí” was accepted into the iBookstore. While I’m personally very excited, I’m also professionally excited (!), since this means that Apple accepts Javascript in EPUB files for iBooks.

There is so much that Javascript will let us do in ebooks.Walrus Studio in Paris has an intriguing demo video showing text that can be revealed and blurred, and game points being added, erased, and tallied.

Continue reading Apple accepts Javascript in EPUB ebooks in iBookstore on Liz Castro’s site.

Go to Source

We generally don’t mean that we want the content inside each column to be of equal height. If that were the case there really isn’t a problem as the height of the columns will naturally be the same height.

What we really mean by equal height columns is having the columns look as though they’re of equal height when the content inside isn’t.

We can achieve that by making the css backgrounds behind the column appear to be of equal height. Ultimately we’re faking equal heights.

For those of you wanting to get directly to the demos and code you can click any of the images above the sections below and be taken to the appropriate demo.

Faux Columns

Faux columns have been around a long time. 2004 to be exact. For that same long time they were and maybe still are the deFacto method for creating columns of equal height.

It’s a simple trick using a background image that’s repeated vertically. An example of this repeating image is seen below. I’ve increase the height so you can see it.

The image is usually created as a single px in height and it’s width will match the width of your layout. Where one column becomes another in the layout, the faux column image will change as well.

The html

For this example we’ll use html that’s similar to what we’ve been working with the last few weeks, though I’ll skip the header and footer to focus on the columns.

<div id="container">
	<div id="sidebar">
		<p>Sidebar</p>
	</div>
	<div id="content">
		<p>Main content</p>
	</div>
</div>

You could use the body as the container, but I’m choosing to use a container div so you can see that this technique can work for setting up columns inside a part of your overall layout in addition to the overall layout itself.

The css

#container {
	width:960px;
	margin:0 auto;
	background: url("faux-columns.png") repeat-y;
	overflow: hidden
}
#sidebar {
	float:left;
	width:340px;
}
#content {
	float:left;
	width:620px;
}

The css here is pretty simple. Floating and setting widths on #sidebar and #content should be familiar to you by now as well as setting the width and margin on #container.

What’s new here is setting the faux-column background image on the container and using overflow: hidden on the container.

We need to set the overflow property to ensure the container div doesn’t collapse. Because everything inside is floated we need to force it back open.

The container will then always be the same height as the longer of the 2 columns and the background image will make it appear as though the shorter column is also the same height.

This method works best for fixed width layouts though it can work with more fluid layouts as well.

You also aren’t limited to a simple color change in backgrounds. Borders, shadows, patterns, etc. can be added by adding them in the appropriate place on the faux-column image.

For patterns you might choose to create an image more than 1px in height.

Pros:

• Easy to set up
• Work regardless of which column is the longer or shorter

Cons:

• Requires an image, which requires an additional http request
• Any change to the layout requires the image be reworked
• Need to know what your layout will look like in advance to create the image

Pseudo Columns

I’ve never cared for faux columns. Not because it’s a bad method, but because I have a thing about never using an image for a solid background color.

Because of that I developed my own method for achieving equal height columns, which for lack of a better term I’ll call pseudo columns.

It works similarly to faux columns as it involves setting a background on the container. It’s not a general approach to equal height columns and has a very limited use case, but when you encounter that use case it works well and easily.

The html

We’ll use the same html as the faux column method above.

<div id="container">
	<div id="sidebar">
		<p>Sidebar</p>
	</div>
	<div id="content">
		<p>Main content</p>
	</div>
</div>

Once again no header and footer so we can focus on the columns.

The css

The css is again quite simple. I’ve gone with a fluid layout here for variety, but you could just as easily set this up to be fixed width.

#container {
	background: #555;
	overflow: hidden
}
#content {
	float:left;
	width:75%;
	background:#eee;
}
#sidebar {
	float:left;
	width:25%;
	background:#555;
}

Other than using % instead of px, you’ll notice that here I’ve set the background colors on #content and #sidebar. You’ll only need to set it on whichever column will be longer, but here I’ve set it on both.

The main change from faux columns is instead of a background image we set a background color. It’s the same principle in that we’re allowing the background of the container to show through beneath the shorter columns.

The limitation is we need to know which column will be shorter in advance and ideally that same column would be shorter on every page of the site.

That sounds like a pretty big limitation, but I find in practice one of the two columns is usually shorter across most, if not all, pages and for those pages where it might not be the case, it’s easy enough to add a little more or less content to make it so.

Pros:

• Easy to set up
• Easy to maintain

Cons:

• Harder to implement on more than 2 or 3 columns
• Requires you know the relative heights of columns in advance
• Doesn’t work as well when different columns are longer or shorter on different pages

This method is far from perfect, but you might be surprised how often it can be applied in practice.

Borders and Negative Margins

This is a method I came across not too long ago on a Smashing Magazine article by Thierry Koblentz, though I later found an article by Alan Pearce on A List Apart written a few years ago detailing the same method.

It uses borders and negative margins to give the appearance of the equal height columns.

The html

Nothing new in the html here compared to what we’ve seen above. In his article Thierry uses the body as the container, but I’ll stick to using a container div as is my usual practice.

<div id="container">
	<div id="sidebar">
		<p>Sidebar</p>
	</div>
	<div id="content">
		<p>Main content</p>
	</div>
</div>

The css

The css is where things get interesting. The container is just being used to fix the width and center the layout. The interesting stuff happens on #content and #sidebar.

#container {
	width:960px;
	margin: 0 auto;
}
#content {
	float:left;
	width:700px;
	border-left: 260px solid #555;
}
#sidebar {
	float: left;
	width:260px;
	margin-right: -260px;
	position: relative;
}

All the background colors in this method are set on the #content column. We set it’s background as normal and then give it a left border equal to the width of the sidebar. We also set the border color to what we want the sidebar background to be.

If we stop here you’ll see both columns displayed where you want, however our border-left has pushed the actual sidebar off the page and we need to bring it back.

First we give the sidebar a negative right margin equal to its width (or the width of the left border of the content, which are the same). That will bring the sidebar back to where we want, but it still isn’t visible.

The problem is in the stacking order of the 2 divs. #container is sitting on top of #sidebar so we need to move #sidebar to the front. We do that by adding position: relative to the sidebar and now it’s content is visible.

Pros:

• Works regardless of which columns is longer or shorter
• Easy to set up once you understand how it works
• Easy to maintain

Cons:

• Sidebar width needs to be fixed as border-width only accepts absolute measurements
• Negative margins can potentially trip up some older versions of IE

I’d encourage you to read both articles I linked to above as they offer more details than I am here. Both contain code for using this method with a third column and Thierry’s article talks about setting up borders between the columns.

Offset Columns and Containers

This last method is one created by Matthew James Taylor. Of all the methods presented here this one will work under the most use cases.

I’ve saved it for the end since it’s a little more complex and you might need to read through it a few times to understand how it works.

The html

The html is similar to what we’ve seen above though you’ll note an extra container div to what we’ve seen before.

<div id="container-outer">
	<div id="container-inner">
		<div id="sidebar">
			<p>Sidebar</p>
		</div>
		<div id="content">
			<p>Main content</p>
		</div>
	</div>
</div>

As with the other methods we’ll use these containers to set background colors that will appear as though they belong to our columns.

The css

There’s a lot more going on here than what we’ve seen to this point. Both #sidebar and #content are floated left and given a width, but beyond that just about everything else is new.

The key to this method is the idea that a floated container will always be the same height as its floated content. By floating all of our columns inside all of the floated containers we ensure our container divs will always be equal in height to the tallest column.

#container-outer {
	float:left;
	overflow: hidden;
	background: #eee;
}
#container-inner {
	float:left;
	background: #555;
	position: relative;
	right:75%;
}
#sidebar {
	float: left;
	width: 25%;
	position: relative;
	left: 75%;
}
#content {
	float: left;
	width: 75%;
	position: relative;
	left: 75%
}

The first step here is to float both the columns and the containers. I have everything floated to the left, but the direction isn’t important. Use whatever direction you need for your layout.

The next step is setting backgrounds on the 2 container divs. Here I’ve set the background on the inner container to be the one we want on the sidebar and the outer container background to what we want on the main content.

If we stop here we’ll only see the background on the inner div since it’s higher in the stacking order than the outer div.

We need to a little css positioning to shift the inner div so it shows only where we want the sidebar to display. That will allow the background on the outer div to show through behind where we want the content column to display.

#container-inner {
	position: relative;
	right: 75%;
}

We position the inner column and then set it’s right value to be 75% which is the same as the width of our content column.

Our backgrounds are now in place, however the content of both columns has also shifted 75% to the left. We need to shift it back into place.

#sidebar {
    position: relative;
    left:75%
}
#content {
    position: relative;
    left:75%
}

Once again we use relative positioning and because the content in both columns has been shifted 75% to the left we need to shift it back 75% to the right. We do that by setting the left value to 75%.

Now everything is back where it should be.

Pros:

• Works regardless of which column is longer or shorter
• Works with any kind of layout (fixed, fluid, elastic, etc)
• Can handle as many columns as you want

Cons:

• A little more difficult to understand at first
• Requires additional and non-semantic container divs

Overall this is the most foolproof method and the one guaranteed to work for any use case. I’d encourage you to play around with this one to really understand it and read through Matthew’s article a few times.

Matthew’s article walks through a 3 column layout and he has demos for both 4 and 5 columns as well. I chose to present a 2 column layout in the hopes it would make the concepts easier to understand.

Additional Resources

By no means are these the only methods for creating equal height columns. Chris Coyier shared a several other methods on CSS Tricks a few months back that you may prefer over those presented here.

• Fluid Width Equal Height Columns

There are also plenty of other methods you can find with a little searching. Between this article and Chris’ I think most of the more common methods are covered.

Summary

Equal height columns are a desirable design trait, but they haven’t always been easy to create with css layouts. Ideally we’d be able to use something like height: 100% and be done with it, but for now we can use any of the methods mentioned above.

Faux columns are easy to set up, but they require an extra http request for the image and any change to the layout requires a new image.

Pseudo columns are even easier, but have a limited use case where the relative heights of both columns are known and consistent across pages.

Borders and negative margins are relatively easy to work with, require no foreknowledge of column heights and better adapt to multiple columns. They require one column be fixed width.

Offset columns and containers work across the most cases. They require no foreknowledge of column heights and can work with as many columns as you want. The method is a little more complex than the other methods.

In time I expect a much simpler standard css solution, but until then these 4 methods should suffice for your project.

Do you design equal height css column layouts often? What method for creating the columns to use when you do?

Go to Source

Details : magazine layout, 2 right sidebars, clean design, widget ready, central top quote / announcement section, 4 column footer.

Get the stock images and vectors you need for your designs on Stutterstock

Want to advertise here ? Contact us

Go to Source

There will be some new concepts when we try to move the columns around for which I’ll offer a more detailed explanation.

For those who prefer to skip the explanation here’s a demo of what we’ll be building and you can view the source for the code.

The HTML

As with the 2 column layout, the html for a 3 column layout is rather simple. In fact the only real difference is one additional div for our third column.

<div id="container">
        <div id="header">
		<p>Header</p>
	</div>
	<div id="primary">
		<p>Primary Sidebar</p>
	</div>
	<div id="content">
		<p>Main content</p>
	</div>
	<div id="secondary">
		<p>Secondary Sidebar</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>

Instead of using sidebar-1 and sidebar-2 I’m calling the sidebars primary and secondary. You’re free to call them whatever works best for you.

One point to make about the html is the order of the divs. If you remember last week we moved the columns simply by changing the direction of floated divs. We’ll do the same here, but that alone won’t allow us to reorder the columns in all possible ways.

I’ll get to the details in a bit, but with 3 columns there are 6 potential ways to order those columns. We can achieve 4 of those 6 ways just by changing the direction of the floats. For the last 2 we’ll need to use some relative and absolute positioning.

The CSS

Once again the css is rather simple and should be familiar if you read the previous post. And just as with the 2 column demo I’ve stripped away css that’s only there to make the demo more presentable. Here’s the css we need for this layout

#container {
	width: 960px;
	margin: 0 auto;
}
#primary {
	float: left;
	width: 240px;
}
#content {
	float: left;
	width: 480px;
}
#secondary {
	float: left;
	width: 240px;
}
#footer {
	clear: both;
}

There really isn’t anything new here when compared to the 2 column layout. We’ve used our container div to center everything on the page and floated our columns to the left. Lastly we cleared the footer.

If you need explanation about what’s going on please see that explanation in the 2 column layout post.

While I’ve floated all 3 divs to the left, you could also float the rightmost column to the right. In this case that would our #secondary div.

I typically float all columns in the same direction, though I think it’s more common to float the rightmost div to the right. Like I mentioned last week, I’m unaware of either being better or worse.

Floating everything in one direction made it easier for me to understand when I first started working with floats and now it’s become habit.

Rearranging the Columns

The first way to rearrange columns is to reorder their divs in the html. When first developing a site you’ll likely structure your html how you want the columns to display on the page.

There will be times though when you want to move the columns around after the site is live or because you want to the columns to have different orders on different pages without having to change the html.

Fortunately we can rearrange the columns through css alone and doing so will hopefully make for a good learning experience.

I mentioned above there were 6 possible ways we could order the 3 columns.

• primary, content, secondary
• secondary, content, primary
• content, secondary, primary
• primary, secondary, content
• secondary, primary, content
• content, primary, secondary

Not the most logical order to list them I admit, but there’s a reason why I’ve listed them this way.

The first order above (primary, content, secondary) we’ve already coded. The next 3 on the list we can get to by changing float directions. For the last two we’ll need to mix in some positioning.

Secondary, Content, Primary

When we float all 3 columns in the same direction they will always display in the same order they appear in the html. That will be true regardless of whether we float all 3 to the left (as we’ve done above) or to the right.

If we float all 3 divs to the right we’ll get the reverse order of how they appear in the html, which is all we need to achieve this column order.

The easiest way then to have all 3 columns display in the same sequential order as they appear in the html is to float all 3 in the same direction either left or right.

Primary, Secondary, Content

To get the next two layouts on the list we’ll change the direction of a single float so it’s in the opposite direction of the other two.

When we float any 2 of the 3 columns in one direction and float the third in the opposite direction, the one floated opposite will sit at the outermost edge in the direction it’s floated.

If we want to move our main content div to the right we’ll float our main content to the right and keep primary and secondary floated to the left.

As you might expect the two sidebars display to the left of the content in the order they appear in the html. In our case the primary column will be leftmost and the secondary column will appear to it’s right.

Content, Secondary, Primary

Similarly if we want our primary column to be the rightmost column we float it to the right and float the other 2 columns to the left.

Again if 2 columns are floated in one direction and the third is floated opposite the opposite will display at the far end of the same direction it’s floated and the other 2 columns will display in the order seen in the html.

Secondary, Primary, Content

Unfortunately we need to do more than change float directions to get the last 2 orders.

Let’s think for a moment about how we might go about setting up this column order. Since we want the main content column to be rightmost let’s start by floating it to the right.

One of our 3 columns is now where want. We’re left needing to swap the order of the primary and secondary columns.

Your first instinct might be to float the primary column to the right, but that will place it to the right of the main content. What we need to do is add some positioning. Fortunately we don’t need to add a lot.

I won’t be able to offer a full explanation for how positioning works here so I’ll direct you to my post on understanding css positioning if you need a more detailed explanation for why the following works.

First we’ll add relative positioning to our container div

#container {position: relative}

This won’t affect our #container div at all, but it will allow us to position columns relative to the container div. If we skip this we’ll be positioning columns relative to the body of our html.

Next we’ll remove the float and add absolute positioning to the primary sidebar.

#primary {position: absolute}

If we stop here something strange happens. Our primary column hasn’t moved, but our secondary column seems to have vanished.

By default our primary column will have a value of 0 for it’s left property, which keeps it right where it was. However by changing from a float to position the primary column no longer holds the secondary column to its right.

Our secondary column is now hiding behind our primary column. Understanding why is a matter of understanding the css stack and the z-index property.

We need to move the primary column further to the right, which will also reveal the secondary column. We do so by increasing the value of left to be equal to the width of the secondary column

#primary {left: 240px}

And now all 3 columns are displaying exactly where we want.

Content, Primary, Secondary

To get our last layout we need to reverse the order of the columns we just set up above.

Here we want the content on the left and the secondary column on the right so let’s switch the direction of the floats for both.

Not bad. We’re almost there. In fact the only problem at this point is the primary div isn’t far enough to the right. We just need to alter it’s left value to match the width of the content.

#primary {left: 480px}

and we’re done.

We used the same basic concept in both of the above orders.

The column we wanted to be furthest left we float left. The column we wanted to be furthest to the right we float right. For the column we want in between we used absolute positioning and gave it a left value equal to the width of the leftmost column.

We also made sure to add relative positioning to the container div.

Note: Like our 2 column layout this won’t create columns of equal height as it appears in the demo. The columns have equal height because I set their heights to the same value. Creating equal height columns is something for another time, though I promise to write a post about how before too long if you’re interested.

Summary

Setting up the css for a 3 column layout isn’t really any harder than setting up the css for a 2 column layout. The same principle of floating all the columns in the same direction applies.

If you’ve understood this and the last post you should now be able to create 4 and 5 column layouts as well.

What’s a little trickier is rearranging the columns. We changed the float direction of columns to achieve several column layouts and used positioning to get to a couple more.

If you’ve been following along you now have several different methods for setting up multi-column css layouts regardless of how many columns and regardless of the order those columns appear in your html.

I’d encourage you to play around. Change floats and position different columns. Try adding a 4th column and see how you can reorganize all of them.

In this and the last post I’ve given you some instructions for moving blocks around on a web page. Spend some time moving those blocks around. The more you experiment on your own, the greater you’ll understand how and why this all works.

Next week I’ll continue with fully fluid layouts. The principles will be very much the same as they are here with one key difference.

Go to Source

There will be some new concepts when we try to move the columns around for which I’ll offer a more detailed explanation.

For those who prefer to skip the explanation here’s a demo of what we’ll be building and you can view the source for the code.

The HTML

As with the 2 column layout, the html for a 3 column layout is rather simple. In fact the only real difference is one additional div for our third column.

<div id="container">
        <div id="header">
		<p>Header</p>
	</div>
	<div id="primary">
		<p>Primary Sidebar</p>
	</div>
	<div id="content">
		<p>Main content</p>
	</div>
	<div id="secondary">
		<p>Secondary Sidebar</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>

Instead of using sidebar-1 and sidebar-2 I’m calling the sidebars primary and secondary. You’re free to call them whatever works best for you.

One point to make about the html is the order of the divs. If you remember last week we moved the columns simply by changing the direction of floated divs. We’ll do the same here, but that alone won’t allow us to reorder the columns in all possible ways.

I’ll get to the details in a bit, but with 3 columns there are 6 potential ways to order those columns. We can achieve 4 of those 6 ways just by changing the direction of the floats. For the last 2 we’ll need to use some relative and absolute positioning.

The CSS

Once again the css is rather simple and should be familiar if you read the previous post. And just as with the 2 column demo I’ve stripped away css that’s only there to make the demo more presentable. Here’s the css we need for this layout

#container {
	width: 960px;
	margin: 0 auto;
}
#primary {
	float: left;
	width: 240px;
}
#content {
	float: left;
	width: 480px;
}
#secondary {
	float: left;
	width: 240px;
}
#footer {
	clear: both;
}

There really isn’t anything new here when compared to the 2 column layout. We’ve used our container div to center everything on the page and floated our columns to the left. Lastly we cleared the footer.

If you need explanation about what’s going on please see that explanation in the 2 column layout post.

While I’ve floated all 3 divs to the left, you could also float the rightmost column to the right. In this case that would our #secondary div.

I typically float all columns in the same direction, though I think it’s more common to float the rightmost div to the right. Like I mentioned last week, I’m unaware of either being better or worse.

Floating everything in one direction made it easier for me to understand when I first started working with floats and now it’s become habit.

Rearranging the Columns

The first way to rearrange columns is to reorder their divs in the html. When first developing a site you’ll likely structure your html how you want the columns to display on the page.

There will be times though when you want to move the columns around after the site is live or because you want to the columns to have different orders on different pages without having to change the html.

Fortunately we can rearrange the columns through css alone and doing so will hopefully make for a good learning experience.

I mentioned above there were 6 possible ways we could order the 3 columns.

• primary, content, secondary
• secondary, content, primary
• content, secondary, primary
• primary, secondary, content
• secondary, primary, content
• content, primary, secondary

Not the most logical order to list them I admit, but there’s a reason why I’ve listed them this way.

The first order above (primary, content, secondary) we’ve already coded. The next 3 on the list we can get to by changing float directions. For the last two we’ll need to mix in some positioning.

Secondary, Content, Primary

When we float all 3 columns in the same direction they will always display in the same order they appear in the html. That will be true regardless of whether we float all 3 to the left (as we’ve done above) or to the right.

If we float all 3 divs to the right we’ll get the reverse order of how they appear in the html, which is all we need to achieve this column order.

The easiest way then to have all 3 columns display in the same sequential order as they appear in the html is to float all 3 in the same direction either left or right.

Primary, Secondary, Content

To get the next two layouts on the list we’ll change the direction of a single float so it’s in the opposite direction of the other two.

When we float any 2 of the 3 columns in one direction and float the third in the opposite direction, the one floated opposite will sit at the outermost edge in the direction it’s floated.

If we want to move our main content div to the right we’ll float our main content to the right and keep primary and secondary floated to the left.

As you might expect the two sidebars display to the left of the content in the order they appear in the html. In our case the primary column will be leftmost and the secondary column will appear to it’s right.

Content, Secondary, Primary

Similarly if we want our primary column to be the rightmost column we float it to the right and float the other 2 columns to the left.

Again if 2 columns are floated in one direction and the third is floated opposite the opposite will display at the far end of the same direction it’s floated and the other 2 columns will display in the order seen in the html.

Secondary, Primary, Content

Unfortunately we need to do more than change float directions to get the last 2 orders.

Let’s think for a moment about how we might go about setting up this column order. Since we want the main content column to be rightmost let’s start by floating it to the right.

One of our 3 columns is now where want. We’re left needing to swap the order of the primary and secondary columns.

Your first instinct might be to float the primary column to the right, but that will place it to the right of the main content. What we need to do is add some positioning. Fortunately we don’t need to add a lot.

I won’t be able to offer a full explanation for how positioning works here so I’ll direct you to my post on understanding css positioning if you need a more detailed explanation for why the following works.

First we’ll add relative positioning to our container div

#container {position: relative}

This won’t affect our #container div at all, but it will allow us to position columns relative to the container div. If we skip this we’ll be positioning columns relative to the body of our html.

Next we’ll remove the float and add absolute positioning to the primary sidebar.

#primary {position: absolute}

If we stop here something strange happens. Our primary column hasn’t moved, but our secondary column seems to have vanished.

By default our primary column will have a value of 0 for it’s left property, which keeps it right where it was. However by changing from a float to position the primary column no longer holds the secondary column to its right.

Our secondary column is now hiding behind our primary column. Understanding why is a matter of understanding the css stack and the z-index property.

We need to move the primary column further to the right, which will also reveal the secondary column. We do so by increasing the value of left to be equal to the width of the secondary column

#primary {left: 240px}

And now all 3 columns are displaying exactly where we want.

Content, Primary, Secondary

To get our last layout we need to reverse the order of the columns we just set up above.

Here we want the content on the left and the secondary column on the right so let’s switch the direction of the floats for both.

Not bad. We’re almost there. In fact the only problem at this point is the primary div isn’t far enough to the right. We just need to alter it’s left value to match the width of the content.

#primary {left: 480px}

and we’re done.

We used the same basic concept in both of the above orders.

The column we wanted to be furthest left we float left. The column we wanted to be furthest to the right we float right. For the column we want in between we used absolute positioning and gave it a left value equal to the width of the leftmost column.

We also made sure to add relative positioning to the container div.

Note: Like our 2 column layout this won’t create columns of equal height as it appears in the demo. The columns have equal height because I set their heights to the same value. Creating equal height columns is something for another time, though I promise to write a post about how before too long if you’re interested.

Summary

Setting up the css for a 3 column layout isn’t really any harder than setting up the css for a 2 column layout. The same principle of floating all the columns in the same direction applies.

If you’ve understood this and the last post you should now be able to create 4 and 5 column layouts as well.

What’s a little trickier is rearranging the columns. We changed the float direction of columns to achieve several column layouts and used positioning to get to a couple more.

If you’ve been following along you now have several different methods for setting up multi-column css layouts regardless of how many columns and regardless of the order those columns appear in your html.

I’d encourage you to play around. Change floats and position different columns. Try adding a 4th column and see how you can reorganize all of them.

In this and the last post I’ve given you some instructions for moving blocks around on a web page. Spend some time moving those blocks around. The more you experiment on your own, the greater you’ll understand how and why this all works.

Next week I’ll continue with fully fluid layouts. The principles will be very much the same as they are here with one key difference.

Go to Source

You should also take a look at other Useful Forms Plugins / Resources we have mentioned on WebAppers some time ago. Of course, they are all free.

Requirements: Javascript Enabled Browser
Demo: http://www.maratz.com/blog/archives/2006/06/11/fancy…
License: License Free

Sponsors

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

There are a lot of settings which allow you to control the characteristics of the text. Even the smallest tweak to the settings can result in a very different output. Beware that using very large amounts of text will cause heavy browser lag. Textify has only been tested and confirmed to work in Chrome and Firefox 4.

Requirements: Chrome or Firefox 4
Demo: http://textify.it/
License: License Free

Sponsors

Using What Font is you can identify the font you are looking for!

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don’t need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.

Requirements: jQuery Framework
Demo: http://webdesignerwall.com/tutorials/animated-scroll-to-top
License: License Free

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2. All you have to do is import it, specify the container to which the group of items resides.

Requirements: jQuery Framework
Demo: http://jonobr1.github.com/diagonalFade/
License: License Free

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

We’ve just released a Master Class on how to build an HTML5 Mobile Web app, with geolocation, localStorage, jQuery Mobile and Backbone.js.

You can see a demo of the app here.

The Master Class is available to all Gold Members of Think Vitamin Membership. Hope you check it out!

Go to Source

However, jRumble is currently a little buggy in Internet Explorer. A rumbleSpeed of 0 seems to break the rumble. Also, there is currently no rotation on any objects in IE. This plugin is free to use!

Requirements: jQuery Framework
Demo: http://jackrugile.com/jrumble/
License: MIT License

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

On Monday, we set up a custom post type in WordPress for listing events. We also added Event Tags to them, and created a template for showing off the individual events.

Today, we want to look at the overall Events page. We’re going to list events by the date they occur, and work back in our tags so users can get a list of only the events that apply to them.

In the demo, we’ll be listing some WordPress classes, and sorting them into Beginner, Intermediate and Advanced.

(We’re starting on blank files here, so if you just want to learn more about templates for taxonomies and post types, then read on! If you want to set this up on your site though, you’ll need to have done the steps in Events List with Custom Post Types first.)

1 – New Files for your Theme

We will be creating the archive page for showing all of our event posts together, and a similar page for showing the same list but with only the events that have our event tag on them.

That means we’ll need two new files in our theme folder, named in this format:

• archive-post_type.php – In our case, this means archive-events.php.
• taxonomy-tax_name.php – In our case, that will be taxonomy-event_tags.php.

However, our two templates are going to be extremely similar. Instead of duplicating our content between the two, let’s make it more efficient by using just the one file.

Create the taxonomy-event_tags.php file, and paste this into it:

1

<?php include_once 'archive-events.php'; ?>

Now when WordPress loads our event tag pages, it will use the template we’re about to make for the events list. Simple.

2 – The Barebones Template

The first thing to do with the archive-events.php file is make it match the rest of your theme.

The best way to do this is to make a copy of your theme’s index.php file, and then strip out everything from to . You’ll then add our code in exactly the place where all of that code used to be.

With the default 2010 theme, that leaves us with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php get_header(); ?>
 
<div id="container">
	<div id="content" role="main">
 
	<h1 class="page-title">
		Events
	</h1>
 
	<!-- OUR NEW CODE WILL GO HERE -->
 
	</div><!-- #content -->
</div><!-- #container -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

It may take a little fiddling to get this just right with your theme, but it’s important to get those
in there to make sure your page layouts stay the same.

3 – List Our Event Tags

If you look at the screenshot, you’ll see a box at the top of the page that lists the event tags. And if the user is already filtering by a tag, it adds in a link back to the full events list.

Paste the following into your file and we’ll take a look at what it’s doing right after.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
/**
 * List the Event Tags.
 */
 $tags = get_terms('event_tags', array(
 	'number' => 10,
 	'orderby' => 'name'
 ));
 
 // Build a comma-separated list of the tags.
 foreach($tags as $tag) :
 	$link = get_term_link($tag->slug, $tag->taxonomy);
 	$tagsText .= '<a href="'. $link .'">'. $tag->name .'</a>' . ', ';
 endforeach;
 
 // Strip out the ending ', '
 $tagsText = trim($tagsText, ', ');
?>

In this code, we get the tags dynamically (So no matter what tags you’re using, you can copy and paste the code above). If you had a huge number of event tags, you’d want to adjust the get_terms() line to get only the ones you’d like to display.

get_terms() gives us an array of tag objects. The foreach…endforeach; section loops through each one and adds it to a string (This is one of the times when our WordPress object cheat sheet comes in handy). The end result is a string like this:

Tag 1, Tag 2, Tag 3,

We then use PHP’s trim() function to take out that closing ‘, ‘.

So now we have all of our tags in a sentence in PHP. The next step is to output it.

1
2
3
4

<p class="events-info">
	Sort events by type: <?php echo $tagsText; ?>.
	<?php if(is_tax('event_tags') ) { echo ' Or <a href="'. get_bloginfo('url') .'/events/">view all</a>.'; } ?>
</p>

As you can see, we’re putting this all in a paragraph with the class “events-info” so that we can style it later on. Line 2 then prints out our list of tags from above.

The important part is line 3. We use a conditional tag to check if we are on an event tag page, and if we are, we add the simple link back to the main events page.

Still with me? Cool. Because the PHP is the easy part. Time to query the database now.

4 – The New Database Query

This query will be quite long, so let’s just work out what we want it to do in plain English first.

1. Is this a taxonomy page? (i.e. being sorted by a tag)
2. If it is, grab all of WordPress’ taxonomy tables too. Then make sure our results have the tag in them.
3. Now carry on to grab only published Event posts with a Date field, and order them by that.

Here goes!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<?php
/**
 * Do we need to filter by event tag?
 */
if(is_tax('event_tags') ) :
	$tag = strip_tags( get_query_var('event_tags') );
 
	$querystr = "
	    SELECT wposts.*
	    FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta, $wpdb->terms wterms, $wpdb->term_taxonomy wtax, $wpdb->term_relationships wrels
	    WHERE wposts.ID = wpostmeta.post_id
	    AND wterms.term_id = wtax.term_id
	    AND wtax.term_taxonomy_id = wrels.term_taxonomy_id
	    AND wrels.object_id = wposts.ID
	    AND wterms.slug = '$tag'
	    ";
 
else:
	$querystr = "
	    SELECT wposts.*
	    FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
	    WHERE wposts.ID = wpostmeta.post_id";
endif;
 
// Build the rest of the query, i.e. only get events with dates, and order newest first.
$querystr .= "
    AND wpostmeta.meta_key = 'Date'
    AND STR_TO_DATE(wpostmeta.meta_value,'%m/%d/%Y') >= CURDATE()
    AND wposts.post_status = 'publish'
    AND wposts.post_type = 'events'
    ORDER BY STR_TO_DATE(wpostmeta.meta_value,'%m/%d/%Y') ASC
    LIMIT 20
    ";

Told you it was long.

What we are doing here is building up our query as a PHP string. We start out by checking if this is a tag page (Exactly the same as in step 3, by using the is_tax() function).

If it is, then line 6 will get the tag’s slug (Similar to its name) and save it in the $tag variable.

Lines 8-15 start out our query, grab the 5 tables we need, and tell the database how to match them up. Line 15 then uses the event tag with all of that.

Lines 18-22 are for when we aren’t filtering by a tag, so they’re much shorter.

The rest (25-33) are the same for both queries, and take care of ordering the events by the date of the event (Not the date the post was written). For a full explanation, check out the original post in this series.

5 – (Last Step!) Listing Events

Onto the final stretch! We now have our query ready, so all we still need to do is run it and print the results.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$events = $wpdb->get_results($querystr, OBJECT);
 
if ($events):
	echo '<ul>';
 	foreach ($events as $post):
 		global $post;
 		setup_postdata($post);
 
 		// Get a friendlier version of the date.
 		$date = get_post_meta($post->ID, 'Date', true);
 		$date = date_create($date);
 		$date = date_format($date, 'jS F, Y');
 		?>
 
	 	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> - <?php echo $date; ?></li>
 	<?php endforeach;
 	echo '</ul>';
endif; ?>

Line 1 runs the query. If we get a result, we then start creating a list (Line 4). The foreach loop will run through each post brought back and create a list item for it (the setup_postdata() line let’s us use all of the template tags we’re used to working with).

Lines 9-12 are the same as we used in the last post to display the date in a more friendly format. Line 15 is where we eventually send the whole thing to the screen.

And that’s it all done! Well done if you made it this far. You should now have a fairly robust event listing that you can take and tweak to your own needs.

I’d love to hear your thoughts on the series so far. The next post is going to be about adding custom meta boxes to the admin panel (So you won’t need to use custom fields directly anymore here). Let me know if there’s anything else you’d like to see though!

Galerie + Portfolio Scott Bass.

Previously on Fubiz

• Ladder Sport – Parkour
• Inverted Pyramid Museum
• Screwdrivers Vehicle

Copyright Fubiz™ – Suivez nous sur Twitter et Facebook

Go to Source

Go to Source

AppDemoStore.com is the place where you can show your software online. From the most comprehensive enterprise solution to the latest mobile app, your customers need to understand what you sell.

With AppDemoStore you can:

• create interactive demos of your applications to help your customers better understand what you sell
• create guided tutorials for your applications to offer better support to your customers
• publish your demos on the web to spread the word about your business and drive traffic to your website

While you can demo any kind of software on AppDemoStore, it is particularly easy to create demos for mobile apps: just upload your app screenshots, select a mobile phone skin and generate your demo – you’re done in less than one minute.

And if you don’t have an app to show yet, you can still use AppDemoStore to view lots of cool clickable demos of the iPad, iPhone, Android, Kindle, and may more!

view more

Go to Source

WebKit demo simulating the behavior of the Segmented Control in Mac OS X 10.7 (Lion).

Go to Source

Originally posted at News – Digital Media

Go to Source

Originally posted at News – Digital Media

Go to Source

(more…)

© TFTS – Technology, Gadgets & Curiosities, 2011. | Permalink | No comment |
Add to del.icio.us

Go to Source

(more…)

© TFTS – Technology, Gadgets & Curiosities, 2011. | Permalink | No comment |
Add to del.icio.us

Go to Source

Although I rarely choose to convert other theme formats to Blogger, every so often a design comes along which I’d love to be available for my favourite platform.

The Minimal Swiss Design theme by Marios Lublinski (released by Smashing Magazine) is just one of those templates. Ideally suited to artists and designers, this simple and beautiful theme instantly inspired me to create a Blogger conversion (including additional theme options for customizing the design).

I’m releasing this Blogger template for free under the GPLv2 License, which means you can use them for all your projects for free and without any
restrictions.

Take a look at the live demo site to see this theme in action.

Read more »

Although I rarely choose to convert other theme formats to Blogger, every so often a design comes along which I’d love to be available for my favourite platform.

The Minimal Swiss Design theme by Marios Lublinski (released by Smashing Magazine) is just one of those templates. Ideally suited to artists and designers, this simple and beautiful theme instantly inspired me to create a Blogger conversion (including additional theme options for customizing the design).

I’m releasing this Blogger template for free under the GPLv2 License, which means you can use them for all your projects for free and without any
restrictions.

Take a look at the live demo site to see this theme in action.

Read more »

Although I rarely choose to convert other theme formats to Blogger, every so often a design comes along which I’d love to be available for my favourite platform.

The Minimal Swiss Design theme by Marios Lublinski (released by Smashing Magazine) is just one of those templates. Ideally suited to artists and designers, this simple and beautiful theme instantly inspired me to create a Blogger conversion (including additional theme options for customizing the design).

I’m releasing this Blogger template for free under the GPLv2 License, which means you can use them for all your projects for free and without any
restrictions.

Take a look at the live demo site to see this theme in action.

Read more »

As much as we don’t like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…

View Demo IE Specific

Go to Source

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

View Demo Clear Floats

Go to Source

The Apture Site Bar is a new way to give readers more information without leaving the page. this is what Apture authors says about the toolbar, but i’ll try to describe what is this toolbar can do for you,
once your visitor scroll down on your blog, this bar will appear loaded with some great features.

• Share on facebook button with a counter.
• Tweet this for twitter button with a counter.
• Share on email
• Search box with jquery, and this mean that your visitor don’t have to leave the page when he search for another content.
• When your visitor can select any part of your posts text small button will appear that says Search
• You can customize it with your own logo.

How To Add It To Your Blog.

You can add it in a very easy way, please visit www.apture.com,
and click Design a bar now
and on the next page, please fill the following info.

• Your website address:
• Your email:
• Upload a Logo or Set Title

you can upload your blog logo from your computer ( don’t forget to click upload ) , or just type your blog title.

• Pick your bar color

and now click Get my bar. please wait till the site finish loading and i’ll give you a code titled, Apture Magic Javascript
Copy the code and now go to your blogger account,
navigate to Layout >> Edit html and now find the following code.

</body>

and paste your toolbar code before it.
Now Click Save Template
That’s it, and you are now done and your blog ready to show the bar to see a demo for the toolbar please click here.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That’s why I wanted to take it just a little step further and let the billboard show three images.

Take note this demo only works in Safari (tested on a Mac) and Safari for iOS (tested on a iPhone). I’ve made a reference video that you can see below in case you don’t have those browsers.

  

I know the animation isn’t fully perfect, and I’m not really sure if it’s my piece of code, or the Webkit engine doesn’t properly animate I expect it to. Anyhow, let’s take a look under the hood and see how it works!

Read more…

Go to Source

(more…)

© TFTS – Technology, Gadgets & Curiosities, 2011. | Permalink | No comment |
Add to del.icio.us

Go to Source

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify’s partner) for the jQuery and Javascript code.

View Demo HTML5 Grayscale

Go to Source

Requirements: OAuth
Demo: http://net.tutsplus.com/tutorials/php/creating-a-twitter-oauth-application/
License: License Free

Sponsors

Esyndicat – A Powerful PHP Web Directory Software

Go to Source

Look what multiple text shadows in this CSS3 demo can do…

Go to Source

See what HTML5 is really capable of with a demo a day the past 24 days.

Go to Source

Go to Source