Web Design

markitup

markitup is an interesting script that allows you to change a textarea html element and turn it into a markup editor. You can use it to edit Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system.

The script is built on the jQuery library and does a good job of using the library. In case you are unfamiliar with the library you can learn more about it here.

You can see quite a few examples of markitup here. Also, you can read the documentation for the script here. Click here to go to the markitup web page where you can download the script.

This script would be very useful if you are creating a CMS, Forum or any system where your users would need to edit markup.

ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</div>
			

Than you can initialize ProtoFlow like:

Event.observe(window, 'load', function(evnt)
{
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false	//Add reflection to your images. Please 
				//note that this will slow down rendering.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

Quick Ajax Loading Icons

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

jQuery Tutorials for Designers

jQuery is a great library for animation and Ajax calls. As with any JavaScript library there are different objects and name spaces to learn. Well, over at Web Designer Wall they have put together a good tutorial about using jQuery. The tutorial is written from a designers stand point, but even an experienced hard-core web programmer can find this tutorial useful.

Below is an excerpt from the post:

How jQuery works?

First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

how jquery works

How to get the element?

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.

  • $("#header") = get the element with id="header"
  • $("h3") = get all <h3> element
  • $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
  • $("ul li") = get all <li> element nested in all <ul>
  • $("ul li:first") = get only the first <li> element of the <ul>

1. Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

sample

When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. The .active class will toggle the background position of the arrow image (by CSS).

$(document).ready(function(){

	$(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});

});

2. Simple disappearing effect

This sample will show you how to make something disappear when an image button is clicked. (view demo)

sample

When the <img class="delete"> is clicked, it will find its parent element <div class="pane"> and animate its opacity=hide with slow speed.

$(document).ready(function(){

	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});

});

3 Chain-able transition effects

Now let’s see the power of jQuery’s chainability. With just several lines of code, I can make the box fly around with scaling and fading transition. (view demo)

sample

Line 1: when the <a class="run"> is clicked

Line 2: animate the <div id="box"> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Line 4: then opacity=1, left=0, height=100, width=100, with speed "slow"

Line 5: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 6: then top=0, with speed "fast"
Line 7: then slideUp (default speed = "normal")
Line 8: then slideDown, with speed "slow"

Line 9: return false will prevent the browser jump to the link anchor

$(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;

	});

});

4a. Accordion #1

Here is a sample of accordion. (view demo)

sample

The first line will add a CSS class "active" to the first <H3> element within the <div class="accordion"> (the "active" class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div class="accordion">.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the class="active".

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");

	});

});

4b. Accordion #2

This example is very similar to accordion#1, but it will let you specify which panel to open as default. (view demo)

In the CSS stylesheet, set .accordion p to display:none. Now suppose you want to open the third panel as default. You can write as $(".accordion2 p").eq(2).show(); (eq = equal). Note that the indexing starts at zero.

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});

You can read the full post here.
You can also view the demo here or download the demo code here.

jQuery is one library that I really recommend using. The library is very well written and is pretty easy to learn fairly quickly. If you haven't used the library before this is a good tutorial to start with.

Navigation Menus: Trends and Examples

Tagged:  

Over at Smashing Magazine they have posted a good article on navigation menu trends. The post does a good job of covering quite a few styles of navigation menus. I recommend this post if you are making a website or web application and are working on the navigation.

Below is an excerpt from the article.

Experimental solutions

Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.

DesignForFun uses icons to help visitors to filter the content they’re looking for. Depending on the clicked icon the background of corresponding links changes. However, the selection of icons may be not the best one as it’s unclear hat icons stand for. Fortunately, title attribute is in use.

Screenshot

Screenshot

Interesting concept: the hover-effect on jBunti depends on the selected month of the year. Warm months are associated with reddish colors, cold months with blueish colors. 12 hover-colors in use.

Screenshot

Playground Blues tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.

Screenshot

Steven Holl is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.

Screenshot

Polkdesign uses a calender as the central navigation element. Flash.

Screenshot

Hopkingdesign offers not a tabbed-navigation; it’s a vertical navigation placed at the top of the page. Looks at least unusual.

Screenshot

No, Adipintilie.eu has navigation options also placed at the top; however, these are only external links.

Screenshot

Flash-based 3D-effect used on Gol.com.pl. The menu can also be expanded.

Screenshot

The navigation on Wards-Exchange.co.uk fits to the brochure design. Or the other way around.

Screenshot

On Kriesi.at the hovered navigation option is dynamically expanded and shows the icons which illustrate what to expect in the section of the site. The effect is in this case not necessary.

Screenshot

Not really new, but still beautiful. Folietto.at uses the free area effectively and sparingly. You may notice an interesting visual effect when hovering the links.

Screenshot

inBloom has a menu with animation. The beetle doesn’t care what option you choose, it crawls its long path through the navigation tree anyway. This is an example of how animation can be unobtrusive.

Screenshot

Cobahair.co.uk uses only BIG typography…

Screenshot

…and HelloColor.com uses small typography with rainbow colors.

Screenshot

Carbonstudio.co.uk delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.

Screenshot

Maxandlous.com provides hover-effects with visual hints. It looks nice and unusual.

Screenshot

Scrollomania in all possible directions on Letters-Numbers.com.

Screenshot

OK, how can you come up with this one? Nickad’s Flash-based construct becomes visible only if the mouse is clicked and remains being clicked.

Screenshot

Nike offers a kind of remote control. To navigate you need to click and drag. While dragging, move the mouse up to move forward, down to move backward, and left/right to turn.

You can read the full post here.

I think it is always good to see what trends are going on in the web as it can give you good ideas for your own development. If you use any of the techniques in this post I would love to hear about them, you can either leave them in the comments or write a full blog post about them on this blog with your free Ajaxonomy account.

Create Resizing Thumbnails

Tagged:  

Have you ever been designing a web page or web application that displayed quite a few thumbnails? Perhaps at times it would be nice to have larger thumbnails, but the page design didn't allow for it. Well over at cssglobe.com they have an interesting post about resizing thumbnails so you can enlarge the thumbnails when the mouse is over the thumbnail.

Below is an excerpt from the post.

The Concept

The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the container's overflow to visible, and reveal entire image.

overflow thumbnails

The Code

This trick can be used for thumbnail lists or single thumbnails, as shown on the demo page. For markup we use standard tags

<a href="#"><img src="image.jpg"  alt="my image" /></a>

Definition of the default state for thumbnails would be something like this:


	ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;		
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}

<a> tag has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.

 	
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}
	ul#thumbs li#image1 a img{
		top:-28px;
		left:-55px;	
	}	
	ul#thumbs li#image2 a img{
		top:-18px;
		left:-48px;	
	}	
	ul#thumbs li#image3 a img{
		top:-21px;
		left:-30px;	
	}	
	.
	.
	.		

Now, when user mouse-overs it we set the overflow to visible:

		ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}

Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.

You can read the full post here.

You can view the demo here and you can download the code here.

If you use this on any sites or applications, I'd love to hear about them. You can post them in the comments or you can write a post on this blog once you sign-up for a free account.

Easy Server Side Caching in PHP

Tagged:  

When developing dynamic web applications there may be many times that data is not updated for a certain amount of time. In PHP it is fairly simple to have a page cached, so that there is not much load on the server.

To create this caching you would put some code like the following on the top of your PHP page.

$cachefile = 'caching_folder/cachedpage.html';
$cachetime = 30;
// Serve from the cache if it is younger than $cachetime
if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
    include($cachefile);
    exit;
}
ob_start(); // Start the output buffer

The things that you would change in the above code is the setting of the $cachfile variable to the name of the static file that the cache will be saving on the server (you will need to set permissions on the folder where you want to save the cached file). You will also want to change the $cachetime variable to the number of seconds between each caching.

Now you would put all of your standard PHP code to create the page after the above code. Once you have all of your standard PHP code you would put the below code to actually save the cache file.

// Cache the output to a file
$fp = fopen($cachefile, 'w');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush(); // Send the output to the browser

This script is very handy and a version of it is used in the del.icio.us Spy application to avoid too many calls to the del.icio.us servers.

Easy No Table Design Using the YUI CSS Grid Builder

Tagged:  

In designing a web page most of us know that it is better to stay away from using tables in our design and instead use full CSS. This is great in theory, but in practice it can be quite a bit more complicated.

Well, Yahoo! has felt our pain and has built a visual tool to make page layout much easier. The tool is the Yahoo! User Interface CSS Grid Builder.

The tool is very easy to use, you simply click the various option to create the page layout that you would like. Once you have the page how you would like it, you simply click on the "Show Code" button and then copy and paste the code. Now you can start scripting and adding content to your page.

If you aren't already using this tool you should at least check it out (click here to go to the application).

Web-based PDF Viewer

Have you ever wanted to make a PDF available by embedding it into a web page? Well now you can with Vuzit.

Below is how the makers of the application describe it.

Vuzit is a web-based universal office document viewer you can embed in any web page to help maintain consistent branding and site navigation. It provides document security and increases revenue by improving accessibility and user experience.

One of the biggest advantages is the protection of stolen data. It makes it more difficult to steal content as it can't be downloaded.

The below code is an example of how you would code a basic viewer.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="http://vuzit.com/stylesheets/Vuzit-2.1.css" rel="Stylesheet" type="text/css" />
    <script src="http://vuzit.com/javascripts/Vuzit-2.1.js" type="text/javascript"></script>

    <script type="text/javascript">
      // Called when the page is loaded.  
      function initialize()  {
        
        vuzit.Base.apiKeySet("ApiKey");
        var viewer = new vuzit.Viewer(document.getElementById("vuzit_viewer"));
        viewer.setUrl("http://www.welcomingcenter.org/documents/PMP.pdf", { zoom: 1, page: 2 });
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="vuzit_viewer" style="width: 650px; height: 500px;"></div>
  </body>

Currently the API only supports PDF files, but more formats will be added in the near future.

You can get more information and get more code samples at vuzit.com

Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

Syndicate content