Tag: Behaviors
DropInBox In Dreamweaver
by admin on May.29, 2009, under Dreamweaver, DropInBox In Dreamweaver
Few minutes before I tried something new with Dreamweaver CS3, and I found it little interesting. As for the same thing I have to do lot of coding in JavaScript but now same things has been done in a single click. I am talking about the “Slider” or some says “DropInBox”. Practically I will try to slide anything like image, text, table, DIV etc on the page. It will work similar to the marquee tag but will be done in different way and with the help of Dreamweaver’s Behavior.
First of all create a DIV element give it an ID “myslide”. This DIV will work as in container for the other HTML elements placed inside, it’s on you what else you need to put. I have inserted a table inside the DIV container “myslide”. Code will look like this:
<div id=”myslide” style=”width:400px;” >
<table width=”354″ border=”1″>
<tr>
<td><p>Content for New Div Tag Goes Here</p></td>
</tr>
</table>
</div>
Ummm….We’re done with coding now. Let’s work with “Behavior” You will find “behavior” under “Window” menu or press Shift + F4. Click on (+) for drop down, select effects>Slide.
On Clicking you will find another popup window, like below
Give value to the “target element–> div ’slide’”. Others option like
- “effect duration” is for the time that box will take from one position to other;
- “effect” is to tell slide whether object slide upside or downside;
- “slide up” is for upper-y position of page;
- “slide down” is for down-y position of page;
Press OK to finalize it.
Now you will see, it has added code similar to below one on the header
<script src=”SpryAssets/SpryEffects.js” type=”text/javascript”></script>
<script type=”text/javascript”>
<!–
function MM_effectSlide(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//–></script>
“SpryEffects.js” is JavaScript file which has the real coding.
In your code you will find some modifications done by the software:
<div id=”slide” style=”width:400px;” onClick=”MM_effectSlide(’slide’, 1000, ‘0′, ‘200px’, false)”>
Just move the “MM_effectSlide(’slide’, 1000, ‘0′, ‘200px’, false)” from DIV element to Body?s onload, like given below:
<body onload=”MM_effectSlide(’slide’, 1000, ‘0′, ‘200px’, false)”>
Enjoy the Dreamweaver’s DropInBox or slider in my language ;o)
