Snippets are a new tool that allow you to collect and manage sections of Code. In many ways the Snippets Library is a code library.
In this article you will learn how to use Snippets in Dreamweaver MX and how to create your own Snippets.
Using Dreamweaver MX Snippets
Creating a Snippet
Earlier I mentioned that there are over 80 JavaScript Snippets. This is a lot of code. But, you know what, you will run through this collection very quickly. As you begin to build more complex sites you will incorporate more complex scripted actions. It would be a shame to loose that great code.
Snippets can be easily made. Right click on the JavaScript folder. A pop-up menu gives you a number of choices. Choose -->New Snippet as shown in Figure D.
Figure D
The New Snippet Window
A window opens. You can name your Snippet and give it a description. Name the Snippet -->Bouncing Taskbar Script and give it the description. This script will bounce text across the bottom of the page.
Below this you can choose what type of Snippet this will be. Will the code wrap around an existing HTML Tag or will this be an Insert Block. Select Insert Block.
At the bottom of the screen check Code. Now, in the text area add the following JavaScript:
var jsText="Bouncing JavaScript Code!";
var jsDistance=96;
var jsSpeed=8;
var s="";
var m="";
var lm="";
function jsStatusBarShoot(){
if(m==""){
lm="";
s=" ";
m=jsText+" ";
}
if(s.length!=1){
s=s.substring(jsSpeed,s.length);
}
else{
while(m.substring(0,1)==" "){
lm+=s;
s=m.substring(0,1);
m=m.substring(1,m.length);
}
lm+=s;
s=m.substring(0,1);
m=m.substring(1,m.length);
for(var i=0;i<jsDistance;i++)
s=" "+s;
}
window.status=lm+s;
setTimeout("jsStatusBarShoot()",20);
}
jsStatusBarShoot();
var jsDistance=96;
var jsSpeed=8;
var s="";
var m="";
var lm="";
function jsStatusBarShoot(){
if(m==""){
lm="";
s=" ";
m=jsText+" ";
}
if(s.length!=1){
s=s.substring(jsSpeed,s.length);
}
else{
while(m.substring(0,1)==" "){
lm+=s;
s=m.substring(0,1);
m=m.substring(1,m.length);
}
lm+=s;
s=m.substring(0,1);
m=m.substring(1,m.length);
for(var i=0;i<jsDistance;i++)
s=" "+s;
}
window.status=lm+s;
setTimeout("jsStatusBarShoot()",20);
}
jsStatusBarShoot();
This is a simple Status Bar script. Placed correctly on the page the status bar will have text bounce onto it.
Select OK. Now, in you Snippets Panel you have a new Snippet called Bouncing Taskbar Script that can be dragged on to any document. The Script will not function until you place the script in-between the SCRIPT tags in the Snippets Panel (JavaScript - starter script - starter script). When you have done that, preview the page. Text bounces in the status bar.
Matthew David
Matthew David has been developing Flash based applications for over 6 years (that makes him very old in this business!). Examples of his work can be found at his web site www.matthewdavid.ws, or you can email him directly at mdavid@email.com.
Matthew’s most recent publications include content for Flash 5 Magic, Inside Dreamweaver 4, Flash 5: Visual FX, Web Publishing Bible and The Dreamweaver Bible. You can also see him popping up in many online magazines, such as Sitepoint.com, Windowatch.com, UDzone.com and DevX.com.
Currently, Matthew is working on two books and writing articles for Element K Journal’s Macromedia Solutions magazine. He is a available as a freelance consultant to work on web based projects.
Comments
Be the first to write a comment
You must me logged in to write a comment.