A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:
Download this tutorial 
Live preview
HTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:
Copy and paste this code in your page:
JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:
Now, copy and paste this simple unobtrusive code:
Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:
You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:
...and CSS code could be something like this:
That's all! Try it and download the source code ready to use in your porject.
Download this tutorial Live preview
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:
Download this tutorial 
Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:
Copy and paste this code in your page:
<div id="draggables">
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:
<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this simple unobtrusive code:
<script type="text/javascript">
window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
</script>$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:
$('#draggables div').each(function(drag)
You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:
<div id="draggables">
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
...and CSS code could be something like this:
.drag{
border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
...
}background:#FFF;
width:200px;
height:150px;
...
That's all! Try it and download the source code ready to use in your porject.
Download this tutorial Live preview
In the past weeks I received some messages from my readers which asked to me to dedicate a post about horizontal website layout. So in this tutorial I want to illustrate some useful tips to design this kind of layouts using CSS and HTML code, also adding a nice animated scrolling effect using JavaScript.
A little introduction: Normally websites have a vertical structure with a fixed width and a variable height which depends from the lenght of the content you have within the main layer:
The structure of an horizontal layout is a little bit different respect the previous one: it has a fixed height and a variable (or fixed) width, for example:
How you can do that? It's very simple: create a container layer like this:
...and define its layout using CSS code in the following way (choosing an appropriate width and height):
Now, within the layer #container, create some sections to add the content. You can use a simple <ul> list with some <li> elements like these:
HTML code could be something like the following code:
You can add other sections simply adding a new <li> element into the list. The related CSS code is:
But if you use position:fixed your background will remain in the same position on the browser window:
CSS code is something like this:
Animated scrolling: If you want to use an horizontal layout for your website you can add this nice feature to scroll automatically in horizontal your page in a specific position (take a look at this example). How you can see in the previous example, each link send the user to a specific section with a nice animated effect.
To implement this effect I suggest you to try Marco Rosella's Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to do is to add this script in the <head> tag of your page:
...and anchor tags into each <li> element:
HTML code could be something like the following:
Now add this layer with scroll buttons:
...and use this CSS code to fix its position on the browser windows:
Add the following links to scroll the page to a specific position:
That's all! Download the source code ready to use in your web projects and take a look at this essential live preview:
Download this tutorial Live preview
- shn.me - Innovation make creativity
- hasrimy.com - A professional web designer
- Dean Oakley - Freelance web designer
A little introduction: Normally websites have a vertical structure with a fixed width and a variable height which depends from the lenght of the content you have within the main layer:
The structure of an horizontal layout is a little bit different respect the previous one: it has a fixed height and a variable (or fixed) width, for example:
How you can do that? It's very simple: create a container layer like this:
<div id="container">...</div>
...and define its layout using CSS code in the following way (choosing an appropriate width and height):
#container{
width:3000px;
height:400px;
}height:400px;
Now, within the layer #container, create some sections to add the content. You can use a simple <ul> list with some <li> elements like these:
HTML code could be something like the following code:
<div id="container">
<ul id="maincontent">
</div>
<ul id="maincontent">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>
</ul><li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>
</div>
You can add other sections simply adding a new <li> element into the list. The related CSS code is:
#maincontent{
Background with fixed position: If you want to add a background picture which doesn't scroll with the main content remember to use a fixed position attribute in your CSS code. For example, if you don't use position:fixed the result, scrolling horizontally the page, will be like this:border:0;
margin:0;
padding:0;
}margin:0;
padding:0;
#maincontent li{
line-style:none;
width:240px;
height:380px;
padding:10px;
float:left;
}
width:240px;
height:380px;
padding:10px;
float:left;
}
But if you use position:fixed your background will remain in the same position on the browser window:
body{
background:url(mybg.jpg) no-repeat fixed;
}Animated scrolling: If you want to use an horizontal layout for your website you can add this nice feature to scroll automatically in horizontal your page in a specific position (take a look at this example). How you can see in the previous example, each link send the user to a specific section with a nice animated effect.
To implement this effect I suggest you to try Marco Rosella's Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to do is to add this script in the <head> tag of your page:
<script type="text/javascript" src="thw.js"></script>
...and anchor tags into each <li> element:
HTML code could be something like the following:
<div id="container">
<ul id="maincontent">
</div>
<ul id="maincontent">
<li >
<a name="p1" id="p1"></a>
Starting Box
</li>
<li >
<a name="p2" id="p2"></a>
Box 2
</li>
<!-- Add all boxes you want-->
<li >...</li>
<li >
<a name="p10" id="p10"></a>
Ending Box
</li>
</ul><a name="p1" id="p1"></a>
Starting Box
</li>
<li >
<a name="p2" id="p2"></a>
Box 2
</li>
<!-- Add all boxes you want-->
<li >...</li>
<li >
<a name="p10" id="p10"></a>
Ending Box
</li>
</div>
Now add this layer with scroll buttons:
<div id="scroll-buttons"></div>
...and use this CSS code to fix its position on the browser windows:
#scroll-buttons{position:fixed;}
Add the following links to scroll the page to a specific position:
<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a> |
...
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a> |
...
That's all! Download the source code ready to use in your web projects and take a look at this essential live preview:
Download this tutorial Live previewHorizontal scrolling websites Showcase
Take a look at these horizontal scrolling websites to take inspiration:- shn.me - Innovation make creativity
- hasrimy.com - A professional web designer
- Dean Oakley - Freelance web designer
This week my friend Greg from Submit CSS proposes a new list of beauty websites for your inspiration. If you love the clean design of Apple website take a look at this collection of 10 stunning Mac software websites.
1. Checkout App (http://www.checkoutapp.com/)Checkout is a powerful, easy to use point of sale system for the Mac. You can use Checkout to take orders, make sales, print invoices and accept payments.
2. Versions (http://www.versionsapp.com/)Versions prides itself as being the first easy to use Mac OS X Subversion client
3. Billings App (http://www.billingsapp.com/)Billings is an application for the mac which allows "professional time billing for anyone."
4. Pixelmator (http://www.pixelmator.com/)Pixelmator is a beautifully designed, easy-to-use, fast and powerful image editor for Mac OS X which claims to have everything you need to create, edit and enhance your images.
5. Delicious Library (http://www.delicious-monster.com/)The Delicious Library Application allows you to catalog your books, movies, music, software, toys, tools, electronics, & video games.
6. Realmac Software (http://www.realmacsoftware.com/)Realmac Software was founded in 2002 and remains focused on developing exceptionally useful and easy to use software for Mac OS X.
7. Silverback (http://silverbackapp.com/)Silverback has "spontaneous, unobtrusive usability testing software for designers and developers."
8. Css Edit (http://www.macrabbit.com/cssedit/)With Css Edit, you can design beautiful, innovative and fast-loading web sites… with a beautiful, innovative and fast app.
9. Panic's Coda (http://www.panic.com/coda/)Panic's Coda prides itself on being a "one window development" app. You can do numerous web development tasks all in this one application.
10. Cultured Code (http://culturedcode.com/)Cultured Code is a software company who has released such products as Things, Things for iPhone, and Xyle Scope.
If you are looking for new ideas for the design of your next web project, follow the suggestions of my friend Greg from Submit CSS that this week proposes a collection of 10 stunning websites which can help you to find the right inspiration!1. Carbonica (http://www.carbonica.org/)Carbonica helps you combat climate change by reducing your carbon footprint.
2. Matt (http://www.themattinator.com)The Carsonified team built Matt to see if it was possible to launch a simple web app in four days - everything from design, to development to marketing.
3. Satsu Design (http://www.satsu.co.uk/)Satsu is a multi-disciplinary design agency based offshore on the Isle of Man.
4. Sawyer Hollenshead (http://sawyerhollenshead.com/)Here you can find all of his most recent work, which includes web design and photography.
5. We Are Not Freelancers (http://www.wearenotfreelancers.co.za/)All things web design through the eyes of David and Marc Perel.
6. BootB (http://www.bootb.com/en/)BootB is an online way to find the best marketing concepts and strategies, graphic design solutions or ideas for advertising campaigns by addressing the unlimited number of creative talents from all over the Planet.
7. Pointless Ramblings (http://pointlessramblings.com/)Pointless Ramblings is run by Nick Barrett who works as a freelance web design/developer and is also a student.
8. Mel Kadel (http://www.melkadel.com/)The online professional portfolio of Mel Kadel.
9. Edgepoint Church (http://edgepointchurch.com/)EdgePoint Church presents themself as an "awesomely different" kind of church in Powell, Tennessee.
10. Jason Julien (http://www.jasonjulien.com/)Jason Julien is an award winning web designer and interactive creative director who has worked for "small businesses and big businesses and the middlemen in between."