Theo Stråhlén » jquery http://theodesign.se The blog and portfolio of Theo Stråhlén. Currently a student at Hyper Island. Thu, 27 Jan 2011 21:05:24 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 iPhone simulation http://theodesign.se/iphone-simulation/ http://theodesign.se/iphone-simulation/#comments Mon, 24 Jan 2011 20:59:19 +0000 theo http://theodesign.se/?p=298 Continue reading →]]> iPhone Simulation with CSS3 and jQuery

Almost two months ago I did this little thing. I was looking at some CSS3 animations and I wanted to try something out so I did this iPhone simulation. It’s basically a bunch of icons in a grid just like on the iPhone and you can click and hold and the icons starts wiggle and you can move them around and delete them. This is made with very little jQuery and some CSS3. Works best in Chrome, as always.

http://nyc-kids.com/iphone/

]]> http://theodesign.se/iphone-simulation/feed/ 0 jQuery OSX Looking Dock http://theodesign.se/jquery-osx-looking-dock/ http://theodesign.se/jquery-osx-looking-dock/#comments Tue, 15 Jun 2010 10:55:18 +0000 theo http://theodesign.se/?p=129 Continue reading →]]>

I am very interested of what jQuery can do and the plugins there is keeps impressing me. I saw the world cup site Twitter did and at the top they were using some kind of dock with the flags of the teams. When I and Henrik Porseland were coding whatisxv.com we wanted a dock with students but the time ran out and we forgot about it.

But now I found jqDock! It’s very easy to use and i will show a very simple example here. You can do both horizontal and vertical dock menus and custom the looks of it very very easy. As I said before I wanted a dock menu with all the students in my class.

Take a look a the Demo I did

This is how I did it:
First of all to use this wonderful plugin you need jQuery v1.2.3 or later. And then you can download the plugin here.

Start with link the files in your <head> tag. Link in the jqDock source (full or compressed) after jQuery itself as in the example below:

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

Create a div and put an ID or Class on it. Then fill it with images that you want in your dock menu. In my example:

<div id="dockmenu">
...
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
...
</div>

To convert your HTML into a Dock, simply call the jqDock function.

<script type="text/javascript">
$(document).ready(function($)  {
	$('#dockmenu').jqDock({align:'bottom', size:65, labels:true});
});
</script>

This code will make the menu expand from the bottom and up and every picture will have a label on it. You can see it in my example.

It’s very easy to style your dock menu as well. Here is the CSS for my menu:

div.jqDockWrap{margin:0 auto;}

div.jqDockLabel {color:#fff;background:#000; font-family:Myriad Pro; padding:4px;
font-size:11px;font-weight:normal;margin-top:-25px!important;white-space:nowrap;}

div.jqDockLabel a, a:hover, a:visited{color:#FFF; text-decoration:none;}

#dockmenu{clear:both;display:block;width:100%;position:absolute;text-align:center;
left:0; bottom:0px;}

#dockmenu img{padding:1px;float:left;display:block;}

Good Luck creating your own dock menu with jqDock!

]]> http://theodesign.se/jquery-osx-looking-dock/feed/ 4