YUI Calendar

YUI Calendar

By Yahoo

Spry

By Adobe

Download the YUI Calendar from the Adobe Exchange:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1695041

Create a Spry DataSet:

1) Open Dreamweaver.

2) Create a new HTML document.

3) Create a table.

4) Fill out the table with one column named "Date".

Format dates as follows: 12/30/2009

5) Go to code view.

6) Give the table an id.

7) Save the page in the folder for your site.

Make sure you are working inside of a site in Dreamweaver.

8) Create a new HTML document.

9) Save it in the same site folder.

10) Go to the bindings tab. (Window >> Bindings)

11) Create a new Spry Data Set. (click the plus sign)

12) Leave the name of the Data Set "ds1" for this example.

13) Click browse and find the first HTML document you made.

14) Click on the yellow arrow on your table.

15) Click next.

16) Click next.

17) Select "Do not insert HTML" and click done.

Create a Spry Region:

1) Insert a Spry Region. (Insert >> Spry >> Spry Region)

2) Select "DIV", "Detail Region", "ds1", and click OK.

3) Replace "Content for Spry Detail Region Goes Here" with a table.

4) Format the table to fit the data you would like.

5) Drag bindings from the Bindings tab into your table.

6) Save the file.

Create and Connect a YUI Calendar:

1) Go to code view.

2) Select right before the Spry Detail Region start div tag.

3) Insert a YUI Calendar. (Insert >> YUI >> YUI Calendar)

4) Find selectHandler(event, data).

5) Inside the brackets, place the following code:

var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

var r = ds1.findRowsWithColumnValues({"Date": formattedDateString }, true);

var region = Spry.Data.getRegion("eventDetail");

if(r){

ds1.setCurrentRow(r.ds_RowID);

region.setState("showEvent", true);

} else {

region.setState("ready", true);

}

6) Find spry:detailregion and add an id "eventDetail".

7) Wrap the following DIV tag around the table:

8) Directly below that DIV tag, add the following DIV tag:

There are no events on this date. Please select another date.

Your YUI Calendar should be up and running now. Just go to Live View to see it. For a more detailed explanation of this process, see the article by Roman Villarreal:

http://www.adobe.com/devnet/dreamweaver/articles/using_yui_widgets.html

Shadowbox3b

Adobe Dreamweaver Exchange

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1880023

Shadowbox3b

By ITLogic

Shadowbox3b is a freeware that can be downloaded from the Adobe Exchange. This is a simple walkthrough of how to use it.

Installing Shadowbox3b in Dreamweaver CS4:

1) Click on download. If you are not logged in to Adobe, you will need to do so now.

2) Open Adobe Extension Manager CS4.

3) Click Install.

4) Select the file Shadowbox3b.mxp.

5) Open Dreamweaver CS4. If it was already open, you will need to quit and reopen it.

Using Shadowbox3b in Dreamweaver CS4:

1) Click on Shadowbox3b in the Insert Menu (ITLogic > Shadowbox3b).

2) Go to the source code of the HTML document. Find the following code:

<a id="shadowbox3b_1" onclick="shadowbox3b_1();" href="#">Link object that opens shadowbox goes here</a>

The only thing you should change in the code is "link object that opens shadowbox goes here"

4) Go back to the source code of the HTML document. Find the following code:

// BeginWebWidget Shadowbox3b

function shadowbox3b_1(){

Shadowbox.open({

content: '<div id="welcome-msg">Welcome to my website!</div>',

player: "html",

title: "Welcome",

height: 350,

width: 350,

gallery: ""

});

};

// EndWebWidget Shadowbox3b

5) This code is the base of the shadowbox action. The content can be any of the following:

- text

- image

- video

- flash

- web pages

- and some others which will be explained in later posts

The player can be:

- "swf"

- "flv"

- "wmp"

- "iframe"

- "html"

- "qt"

- "img"

- and again, some others which will be explained later

The title will be displayed in the top left corner of the shadowbox. The height and width are the size dimensions of the shadowbox (in pixels or percent).

6) Change what you want to change, then save the document.

Congratulations, you've just created your first shadowbox. When uploading to a server, make sure you include the scripts folder. Please realize that I am in no way stating that I have created this code. I am just further explaining how it can be used.