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

YUI Calendar - Highlight Date

YUI Calendar

By Yahoo

Spry DataSet

By Adobe

Once you have a YUI Calendar hooked up to a Spry DataSet and have events on the calendar, you can highlight those dates. In order to do so, you must tell the calendar to highlight certain dates. This can be done so by the following:

1) Find yuicalendar1.render(); and insert the following code directly before it:

var cald = '12/25/2009';

yuicalendar1.addRenderer(cald, yuicalendar1.renderCellStyleHighlight1);

In this example, the calendar would highlight December 25, 2009.

For multiple dates:

var cald = '12/25/2009, 12/27/2009';

For ranges of dates:

var cald = '12/25/2009-12/27/2009';

For multiple dates/ranges of dates:

var cald = '12/5-12/7/2009, 12/25/2009';

Thanks to Phil_W on the Adobe Forums for this information.

Shadowbox3b - Tutorial (Part 2)

Shadowbox3b

By ITLogic

Tutorial (Part 2) - Displaying Other Web Pages

Displaying web pages uses the <iframe> HTML tag. Just use this tag in the content area.

// BeginWebWidget Shadowbox3b


function shadowbox3b_1(){
Shadowbox.open({
content: '<div id="welcome-msg"><iframe src="http://site.com/page.html" width="99%" height="99%"></iframe></div>',

player: "iframe",

title: "Welcome",
height: 350,
width: 350,
gallery: ""
});
};



// EndWebWidget Shadowbox3b

In the example above, the shadow box will display the page http://site.com/page.html which takes up 99% of the height and 99% of the width of the shadowbox, which is set at 350 by 350. If you use 100%, then it will cause there to be a scrollbar on the side.

Shadowbox3b - Tutorial (Part 1)

Shadowbox3b
By ITLogic

Tutorial (Part 1) - Displaying Images


Displaying images is very easy. In the content area, just use the img tag.


// BeginWebWidget Shadowbox3b


function shadowbox3b_1(){
Shadowbox.open({
content: '<div id="welcome-msg"><img src="image.jpg" alt="hello" /></div>',
player: "html",
title: "Welcome",
height: 350,
width: 350,
gallery: ""
});
};



// EndWebWidget Shadowbox3b


Replace image.jpg with the name of your image. If it is in a folder, you can have something like images/image.jpg, of course with whatever your folder is named. The shadowbox will display the following image types:

- jpeg
- jpg
- png
- gif
- bmp

Remember to make the size (height and width) of your shadowbox equal or slightly larger than the size of your image for best results.

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.