Tutorial Dog » Javascript Tutorial

Using Ruby on Rails to Create A Twitter-Like Message Form

Devin — Tue, 18 Aug 2009 18:54:51 +0000

This tutorial will show you how to create a twitter message form that counts down the 140 characters and also allows you to input a message within the URL of the webpage as well. What’s cool about Ruby on Rails is instead of writing javascript to recalculate the message length, we’ll use Rails to automatically generate the correct javascript so that each time the field changes, the count is recalculated all through the controller object. Download the project code here.

Firstly, I’ll assume you have ruby on rails installed and have create a new project. You’ll also need a basic knowledge of how Rails works, and how Rails utilizes the principle of Model-View-Controller (MVC). Having said that, create a new project and create a new controller file called message_controller.rb. We’ll first take care of an initial message specified in the URL of the page. Add this code to the file:

class MessageController < ApplicationController

  def index
    if params[:txt]
      @txt = params[:txt]
    else
      @txt = "";
    end
    @count = 140 - @txt.length()
  end

end

The index method first check to see if a message was specified in the URL. If the a message was specified, then it sets the @txt instance variable to the string. If not, then the variable is set to an empty string. The count is also calculated here for the initial web page view.

Now we need to set up the view for the message controller, create a message folder in the views folder and create a new file called index.rhtml in this new folder. Copy this code to the file:

Message

<% form_tag :action => 'stuff' do -%>
	<%= text_field_tag :message_field,value=@txt %>
<% end -%>


	<%= @count %>


<%= observe_field(
	:message_field,
	:url =>{:action =>"update_message_length"},
	:frequency=>1,
	:with => 'message',
	:update=>:count ) -%>

The parts to focus on here are the text_field_tag and the observe_filed method. The div count is where the remaining count will be displayed. Looking at the text_field_tag, :message_field is the id of the tag, and the value is set to the @txt that was declared in the Message Controller. The observe_field method will automatically generate the javascript ajax code that will update the count tag. The parameters follow as such:

:message_field – indicates which field is observed
:url – Decides which action is sent to the message controller. (More on that latter)
:frequency – Every time the field changes, make a AJAX request
:with – this will help us get the text in the field
:update – decides where the contents of the AJAX response goes

At this point we need to go ahead and add the “update_message_length” method in the message controller. This function will be called every time the filed value is change as specified by the observe_field method. Append the following function to the controller:

  def update_message_length
    pop = params[:message]
    count = 140 - pop.length()
    render :text =>  count
  end

This function gets the message include in the message parameter, and sends out the new count. One small, but vital part not to forget is to create a layout file that includes the needed javascript framework so this is included. Create a new file in the view/layouts folder called: message.html.erb. Add this code to the file:





  
  Posts: <%= controller.action_name %>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>



<%= flash[:notice] %>

<%= yield %>

Thats its! Now if you go to the URL http://localhost:3000/message, you’ll get a blank field, or you can include an initial message by http://localhost:3000/message?txt=message+here. Incase you have a flaw in your project, or are lazy, here is a copy of the working project.

Javascript Dock Carousel Using Mootools (Part 2)

Devin — Mon, 21 Jul 2008 12:00:36 +0000

This tutorial is the second part of a tutorial that will build a javascript carousel that imitates the Mac OS X dock. In part one, we build a mock up in Photoshop and exported the nessecary images. In this part, we’ll take those images and build it into a HTML & CSS. Then we’ll use javascript to make if interact.

Demo Files

Step 1: The HTML To keep things organized, we’ll seperate the files into there own folders. So we’ll have a “js” folder to keep all the Javascript files, an “images” folder to hold all the webpage images, and a “icons” folder to hold the icon images. What needs to be in the HTML? Well, the links to move the stage left and right, the stage and all the icons and finally the text image. The “wrapper” class you will see later enables the icons on the next slide to hide. The icons are there own list elements.

Javascript applications run better with specialized Java hosting. It ensures smooth, error free work of Java based websites or any Java script for that matter.


  
  Left
  Right

Now lets set up the header of the HTML document. We wan’t an XHTML tranistional document so that all the javascript is compliant and works. We need to reference the Mootools library, and the javascript that makes the stage work as well as the css file. We’ll deal with getting those files later.

Step 2: The CSS The trickiest part of the CSS is understanding the fact that we’re making the ul extend beyond the ‘div id=”wrapper”‘. The image below explains how the tags appear with the CSS. The ul element extends because the class “items” has a width of 5000px, and the “wrapper” id has an overflow of hidden. The buttons are floated on either side of the stage, and the text is hidden with the text-indent attribute. To get a tag to conform to specified widths and heights, we use the ‘display: block’ attribute.

body{
background:#232323;
color:white;
}
#stage-container{
margin: 50px auto;
width: 420px;
}
#stage-container .text{text-align: center;}
#stage-container a{outline: none;}
/* — STAGE — */
#stage-container #wrapper{
overflow:hidden;
margin: 0px auto;
width:352px;
height:55px;
background: url(images/stage2.jpg);
position: relative;
}
#stage-container #items{
margin:0px;
padding:0px 6px;
list-style:none;
width:5000px;
position: relative;
}
#stage-container #items li{
float:left;
list-style:none;
margin-right:5px;
padding: 6px 6px;
margin-top: 5px;
}
/* — BUTTONS — */
#stage-container #moveleft{
float: left;
background: url(images/left.gif);
}
#stage-container #moveright{
background: url(images/right.gif);
float: right;
}
#stage-container #moveright,#moveleft{
height: 20px;
width: 20px;
display: block;
z-index: 10;
text-indent: -3000em;
margin-top: 18px;
}

Step 3: The Javascript First, we’ll be using the newly released Mootools 1.2 for this javascript. Mootools is a “compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” We’ll be utilizing the scroller class and the Fx classes to achieve the entire effects on the icons. Like almost all mootools scripts, we need to enclose the javascript in a dom ready action. What this does is not let the javascript work until all the javascript is completely loaded by the user.

window.addEvent(’domready’, function() {
// Your code here
});

The first part of javascript just deals with moving the stage left and right. We need to tell the javascript where to slide the stage, if it can slide the stage left or right and how much to slide. When a button is clicked it triggers an event to move the slide left or right depending on which is clicked. The slides must figure out though if it can move left or right. We don’t want to move left if there is no icons to the left of the current slide. These issues are what the variables at the top of the javascript deal with.

The image in step 2 will help illustrated how the javascript is working. The unordered list element (ul id=”items”) is being shifted left and right by the javascript (thats why is larger than the stage). The shift is triggered by a hyperlink tag (’a').

var slides = 2; // CHANGE THIS TO THE NUMBER OF SLIDES
var pos = 0; // default setting, start at the first(0) pixel
var offset = 346; // How many pixels the slider should move to get to the next slide
var currentslide = 1; // first slide is the default slide
var items = $('items'); // items variable for the id 'items' in the html
var fx = items.effects({
duration: 800,
transition: Fx.Transitions.linear
}); // the way the items transition is described here
/* Scroll Object Initialized */
var scroll = new Fx.Scroll('wrapper', {
offset:{'x':0, 'y':0},
transition: Fx.Transitions.Elastic.easeOut
}); // the scroll stage is set up here, and each movement will be 'Elastic'
// other tranistions could be linear, quadratic, ect.
/* Trigger to move the slide left */
//when the #moveleft link is clicked, this tells the scroll to move left
$('moveleft').addEvent('click', function(event) {
event = new Event(event).stop(); // don't go to the actual link described in the href
if(currentslide == 1) return; // can't go more left than the first
currentslide--; // currentslide is one less than before
pos += -(offset); // slide the stage left by the offset's size
/* lower the opactiy, slide, then raise back opacity */
fx.start({
'opacity': .3 // the opacity of the icons will become 30 %
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 }); // bring the icons back to 100% opacity
scroll.start(pos); // move the stage to the new position
});
});
$('moveright').addEvent('click', function(event) {
event = new Event(event).stop();
if(currentslide >= slides) return;
currentslide++;
pos += offset;
fx.start({
'opacity': .3
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 });
scroll.start(pos);
});
});
scroll.toLeft(); // We'll initalize the stage to left most position

The next part of the Javascript strictly deals with what happens when you move the cursor over an icon. We want to make the icon bigger. When the cursor leaves the icon, we need to readjust the icon to different size settings.

$$('.icon').each(function(item){  // for each icon, apply the follow events
item.addEvent('mouseover', function(event) { // when the icon is moused over, enlarge it
var fx2 = item.effects({
duration: 200,
transition: Fx.Transitions.linear
}); // initialize the icon transition properties
fx2.start({
'width': 40,
'height':40,
'margin-top': '-2',
'margin-left': '-5'
});
});
item.addEvent('mouseleave', function(event) { // when the icon is left by the mouse, reset icon
var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear });
fx2.start({
'width': 32,
'height':32,
'margin-top': '0',
'margin-left': '0'
});
});
});

Conclusion Thats all that’s need to create a dock carousel. The icons in the demo are kindly provided by Jonas Rask and Devin Ross. I’ve implemented the dock in the resources section of Tutorial Dog were you can download icons that I’ve created.

Javascript Dock Carousel Using Mootools (Part 1)

Devin — Mon, 14 Jul 2008 12:00:16 +0000

Follow part 2 of this tutorial here. This tutorial will take you through creating the initial mockup in Photoshop, and creating a usable carousel that imitates the Mac OS X Leapard dock. This tutorial we’ll acquiant you well with creating a slick button, and using the shape tools. We want to deal with shape layers instead of pixel because of the non-destructive nature of shapes. Non-desctructive shapes means you can edit and scale without distortion.

Step 1

Create a photoshop and create a new document 540px x 308px. Fill the background with #232323.

Take the Rounded Rectangle Tool, set it to a 5px radius and create an object that is 350px by 50px. Make the color of this shape layer #303030. Make sure you have the tool set to the “Shape Layers” option instead of the paths option. That way, you are creating non-destructive shapes so you can go back and edit & reference them later without compromising distortion. Next, type out “CAROUSEL” (or whatever you like) at the top of the document with the color #080808. Find a good serif font like “Myriad Pro”. Apply the Inner Shadow below layer style to the text.

Step 2: Buttons

Next, we need to create buttons that will move the carousel from left to right. First, create a 20px circle shape with the color #232323 using the ellipse tool. Apply the following Bevel & Emboss and Gradient Overlay layer styles.

Now create a new white layer for the reflection. Start by creating another circle shape, and use Direct Selection Tool to mend the shape into the shape you see below. Move the handles (the line that is asymptotic to the path) of each point to change the curvature of the path. Set this layer to blending mode Overlay, and an opacity of 82%.

Next we need arrows to specify the direction. Take the pencil tool set to a 1px brush, and create a arrow out of pixels ontop of the button. Apply the following Drop Shadow and Inner Shadow to give the look that the arrow is imbedded in the button.

Finally for this step, group these three layers in a group and duplicate the group. Then with the group selected in the layer palette, Edit >> Transform >> Flip Horizontal. Place the buttons on either side of the stage.

Step 3: Stage

Now we’ll recreate a the Leopard dock. Fist we need the Leopard wallpaper. Place the image inside the Photoshop document, and use the shape made in step one to mask of the wallpaper layer. To do this, select the shape, and right click and pick “Make Selection”. Now with the selection, make a mask on the wallpaper layer. Click the little link connecting the mask to the image, to disassociate the mask with the layer, so you can move the image around without moving the mask around with it. Place the wallpaper in the correct place.

The next step is to create the shelf, create a white rectangle shape, and use the Direct Selection Tool to select the corners, and transform the shape to give it the perspective of a shelf. Again, we want to use the path of the original stage layer. This time though copy that path and paste the path into the shelf layer. With both paths selected, click the “Intersect Shapes area” button. Set the opacity of the stage to 51%.

Finally, we need to create a swoosh across the stage. Again, we want to create a shape, this time, use the pen tool to create the shape over the stage. Set the opacity of this layer to 14%.

Step 4: Icons

This step is more for mocking up the final product which we’ll be finished in Part 2, but drag 32px icons onto the dock. Space them appropriately.

When creating the icons for Part 2, we need to make sure that the icons are transparent and that the size of the icons are 40px or greater. To get best looking transparent icon, make sure you use the PNG-24 setting in the Save to Web palette. This will create the best looking transparent icon. If you export with GIF, you tend to get more jagged edges that look bad.

Step 5: Slicing and Exporting for the Web

Next we need to slice up the document to get it ready for the web. There should only be 4 slices in this document: the two buttons, the stage and the text. You can name each slice by taking Slice Selection Tool and double clicking on a slice. A panel will pop up with input to rename the slice, that way when you export, it will automatically name the images.

Now that you’ve sliced the image, go to File >> Save to Web… You can change the export setting for each slice, but for this particular document leave each slice as a gif. For more info on exporting, check out this article that walks through exporting for the web in Photoshop. When you go to save, make sure you change the option “Slice:” from “All Slices” to “All User Slices” so you don’t have unnecessary slices.

Javascript Image Gallery Using Mootools (Part 2)

Devin — Mon, 12 May 2008 15:02:14 +0000

Last time, I provided a reasonably decent solution for creating a HTML friendly Javascript image gallery using mootools. After taking in some of its faults, and learning more about javascript, I’ve rewritten the whole code, and have came up with a new version, a simple, easy to use gallery that everyone can use.

Demo

Download Files

Features

Anybody Can Use It – If Javascript is confusing to you, no worries. This solution doesn’t require any javascript knowledge. The only work require is one variable in the javascript & the actual HTML for the images.
Thumbnails – Unlike the previous version, you can now embed a different/smaller image in the previews.
Preview Slider – Easily slide through dozens of photos.
HTML friendly – Like the last time, this solution doesn’t compromise google bots or people with javascript disabled.
Better Transitions – The large photos ease in & ease out when switching
Image Descriptions – You have the ability to include a caption with every image

HTML To set up the gallery properly, we need to write the necessary HTML to create the large image stage and the thumbnail slides. For the thumbnail slides, we’ll use an unordered list (


	
		
	
	Left
	
		
			
				
					
				
			
			
				
					DESCRIPTION HERE
					
				
			
		
	
	Right

Now you need set up the top part of the web page. For this part, we’ll need to reference the css for the gallery, the javascript for the image gallery and the mootools 1.2 release. Also, it’s always safe to declare the webpage DOCTYPE as XHTML so that it’s javascript compliant.




	Javascript Image Gallery Using Mootools

CSS Now comes the cascading style sheet to create the design for the image gallery. The trickiest parts of the CSS is definitely the slider. For the slider, we create the buttons for moving the slider forward and back, and thumbnail area. The unordered list tag holds the thumbnails, but what makes the slider work is that the width of the unordered list is very large and the parent div of the unordered list (called the #wrapper) is the width of what will actually be displayed. That way the javascript can move the position of the unordered list to show different thumbnails. The key to the #wrapper CSS is the “overflow: hidden” attribute which allows the thumbnails to stretch out horizontally and not be in view.

body{ background:black; color:white; }
#img_gallery{ margin:50px auto; width:500px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}

/* --- IMAGE STAGE */
#fullimg{
	width:500px;
	overflow:hidden;
	height:380px;
}
#fullimg img{ width:500px; }
#fullimg p, #fullimg span{
	position:absolute;
	background:black;
	opacity:.5;
	color:white;
	margin:0px;
	width:500px;
	padding:6px;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* --- SLIDER --- */
#img_gallery #wrapper{
	overflow:hidden;
	padding:4px 2px;
	width: 460px;
	float:left;
	height:50px;
	background-color:#181818;
	position: relative;

}

#items{
	margin:0px 0px;
	padding:0px;
	list-style:none;
	width:50000px;
	position: relative;
	letter-spacing:0em;
}
#items li{
	float:left;
	list-style:none;
	margin-right:2px;
}
#items .thumb{
	width:75px;
	height:50px;
	cursor:pointer;
	margin:0px;
	padding:0px;
}
#items .large{
	display:none;
	position:absolute;
}
#fullimg .loading{
	width: 24px;
	height: 24px;
}
#fullimg .thumb{display:none;}

#items .item  p, #items .item  span{
	display:none;
	text-indent: -2000em;
}
#moveleft, #moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
}
#moveleft{background: url('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }

Javascript The javascript is built for the most recent build of the mootools beta 1.2. I’ve heavily commented the code which you can view here. The only thing that needs to be changed in the javascript is the number of slides in the gallery.

var slides = 2;

License You are NOT allowed to distribute this software without attribution. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Javascript Image Gallery Using Mootools

Devin — Thu, 10 Jan 2008 05:05:57 +0000

Be sure to check out the second iteration of the image gallery.

This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Demo:

Image 1

Image 2

Image 3

Image 4

Image 5

Click A Thumbnail Above

Download Image Gallery

The Javascript image gallery is built from Mootools, an open-source object-oriented Javascript framework. If you’ve seen some cool graphical interactions you wouldn’t expect on a web page, chances are they are Mootools or another similiar framework like jQuery.

The Javascript:

window.addEvent('domready', function() {
	var drop = $('large');
	var dropFx = drop.effect('background-color', {wait: false});
	$$('.item').each(function(item){
		item.addEvent('click', function(e) {
			drop.removeEvents();
			drop.empty();
			var a = item.clone();
			a.inject(drop);
			dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
		});
	});
});

The HTML:


	
		
			
			Image 1
		
		
			
			Image 2
		
		
			
			Image 3
		
		
			
			Image 4
		
		
			
			Image 5
		
	
	
		Click A Thumbnail on the Left

How the Javascript Works

The javascript you see above was the only part I needed to create- the rest is provided by the mootools framework. The first line, “window.addEvent(’domready’, function() {” and the closing brackets at the end is require of all (almost all) mootools scripts. The two variables at the beginning (var drop & var dropFX) govern the element with id=”large” in the html and the background color of that element.

The next part is just a function to get the image from the ‘items’ part of the html to the ‘large’ part of the html. “$$(’.item’).each(function(item){” basically says that for each html element identified under the class ‘item’, apply the following conditions to element. Now there is only one condition which would be “item.addEvent(’click’, function(e) {”. This line of code says that when the item is clicked, apply the follow instructions in the functions brackets. If you wanted to, you could change the word ‘click’ to ‘moueover’ and instead of needing to click on each photo, you would simply need put the mouse over the thumbnail image to get the large image to appear and essential get the function to trigger.

The code inside that ‘click’ function essential clears the items in the ‘large’ element and creates a clone of that ‘item’ class that was clicked and puts (injects) it into the ‘large’ element in the html.

Conclusion

If you’re just looking for a quick yet cool javascript image gallery, then download the included zip file and tweak the css to your liking. If you want to find out more about Mootools and creating really cool web apps, then check out the mootool demos which shows a variety of cool uses and a lot more functionality.