Dreamweaver MX Snippets

Creating a Snippet

I like this script and I believe it can be used in a lot of projects. So lets convert this into a reusable snippet.

Lets take a close look at the script.

<style> body{ overflow-x:hidden; overflow-y:scroll; } </style> <script language="JavaScript1.2"> /* Scrollable Menu Links- By Dynamicdrive.com For full source, TOS, and 100s DTHML scripts Visit http://www.dynamicdrive.com */ //configure path for left and right arrows var goleftimage='pointer2.gif' var gorightimage='pointer.gif' //configure menu width var menuwidth=300 //configure menu height var menuheight=25 //configure scroll speed (1-10), where larger is faster var scrollspeed=6 //specify menu content var menucontents='<nobr><a href="http://www.dynamicdrive.com" target="_blank">Dynamic Drive</a> | <a href="http://javascriptkit.com" target="_blank">JavaScript Kit</a> | <a href="http://www.codearena.com" target="_blank">CodeArena.com</a> | <a href="http://www.builder.com" target="_blank">Builder.com</a> | <a href="http://freewarejava.com" target="_blank">Freewarejava.com</a></nobr>' ////NO NEED TO EDIT BELOW THIS LINE//////////// var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>') var actualwidth='' var cross_scroll, ns_scroll var loadedyes=0 function fillup(){ if (iedom){ cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2 cross_scroll.innerHTML=menucontents actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2 ns_scroll.document.write(menucontents) ns_scroll.document.close() actualwidth=ns_scroll.document.width } loadedyes=1 } window.onload=fillup function moveleft(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){ cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed } else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth)) ns_scroll.left-=scrollspeed } lefttime=setTimeout("moveleft()",50) } function moveright(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)<0) cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed else if (document.layers&&ns_scroll.left<0) ns_scroll.left+=scrollspeed } righttime=setTimeout("moveright()",50) } if (iedom||document.layers){ with (document){ write('<table border="0" cellspacing="0" cellpadding="0">') write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>') write('<td valign="top">') if (iedom){ write('<div style="position:relative;width:'+menuwidth+';">') write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">') write('<div id="test2" style="position:absolute;left:0;top:0">') write('</div></div></div>') } else if (document.layers){ write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">') write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>') } write('</td>') write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">') write('<img src="'+gorightimage+'"border=0></a>') write('</td></table>') } } </script>

Hmm... Looks good! However I don't like the idea that my snippet will depend on 2 navigation images, that will have to be copied to my site directory every time I use the snippet. Lets change that into text link "<<" and ">>". Here is the modified code

<style> body{ overflow-x:hidden; overflow-y:scroll; } </style> <script language="JavaScript1.2"> /* Scrollable Menu Links- By Dynamicdrive.com For full source, TOS, and 100s DTHML scripts Visit http://www.dynamicdrive.com Modified by Ranjan to get rid of navigation images */ //configure path for left and right arrows //var goleftimage='pointer2.gif' //var gorightimage='pointer.gif' //configure menu width var menuwidth=300 //configure menu height var menuheight=25 //configure scroll speed (1-10), where larger is faster var scrollspeed=6 //specify menu content var menucontents='<nobr><a href="http://www.dynamicdrive.com" target="_blank">Dynamic Drive</a> | <a href="http://javascriptkit.com" target="_blank">JavaScript Kit</a> | <a href="http://www.codearena.com" target="_blank">CodeArena.com</a> | <a href="http://www.builder.com" target="_blank">Builder.com</a> | <a href="http://freewarejava.com" target="_blank">Freewarejava.com</a></nobr>' ////NO NEED TO EDIT BELOW THIS LINE//////////// var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>') var actualwidth='' var cross_scroll, ns_scroll var loadedyes=0 function fillup(){ if (iedom){ cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2 cross_scroll.innerHTML=menucontents actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2 ns_scroll.document.write(menucontents) ns_scroll.document.close() actualwidth=ns_scroll.document.width } loadedyes=1 } window.onload=fillup function moveleft(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){ cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed } else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth)) ns_scroll.left-=scrollspeed } lefttime=setTimeout("moveleft()",50) } function moveright(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)<0) cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed else if (document.layers&&ns_scroll.left<0) ns_scroll.left+=scrollspeed } righttime=setTimeout("moveright()",50) } if (iedom||document.layers){ with (document){ write('<table border="0" cellspacing="0" cellpadding="0">') write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><<</a> </td>') write('<td valign="top">') if (iedom){ write('<div style="position:relative;width:'+menuwidth+';">') write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">') write('<div id="test2" style="position:absolute;left:0;top:0">') write('</div></div></div>') } else if (document.layers){ write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">') write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>') } write('</td>') write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">') write('>></a>') write('</td></table>') } } </script>

Since we made a few changes. Its a good idea to test the script, before we use it to create a snippet. Insert the script in a new document and test it in your browser. If everything is ok, Its time to begin making the snippet.

Lets first determine the script type. Its a javascript and its a navigation script.

Select the javascript directory and click add folder icon (1st icon .) Name your directory as "Navigation"

Select Navigation sub folder and click add snippet icon (2nd icon ).

Name your Snippet, Give it a brief description, Make sure "Insert Block" and "Code" are selected for Snippet Type and Preview Type respectively. Paste you modified code in Insert Code Text Area and click OK.

Lets learn a little more about Snippet Type and Preview Type

Preview Type: Selecting Design will show you how your snippet actually look in the preview area of your snippets panel. Selecting Design will show you the code in the preview area. Generally as a rule of thumb, use Design for HTML code snippets and Code for Javascript, PHP, ASP, etc.

Snippet Type: When the script needs to be inserted at the cursor point (insertion point of your document), you should use insert block like we did in the above example. If your code is in 2 parts one to be placed before a selection and one after the selcetion, you should use wrap selection as your snippet type. eg. a link with insert before code as <a href='something"> and insert after code as </a> can be wrapped around text or an image. Ideal for wrap selection type snippet.

Your snippet is now ready. Test it again by inserting the snippet.

Next