Newest Webmonkey Articles

CodeLibrary:YUI Calendar

Fri, 14 Nov 2008 19:42:55 -0500 (EST)

This example code is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to.

Follow along with the tutorial to learn how to use it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI: Calendar example</title>
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/fonts/fonts-min.css&2.6.0/build/calendar/assets/skins/sam/calendar.css&2.6.0/build/carousel/assets/skins/sam/carousel.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript"> 

function addDateText(type,args,obj)
{
  var datedata = args[0][0];
  var year = datedata[0];
  var month = datedata[1];
  var day = datedata[2];
  
  document.forms[0].datefield.value = month+'/'+day+'/'+year;
  obj.hide();
}

function init_calendar()
{
	var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } );
	cal.render();
	cal.hide();
	
	// Show Calendar when text field gets focus
	YAHOO.util.Event.addListener("datefield", "focus", cal.show, cal, true);

	// Save calendar value inside text field
	cal.selectEvent.subscribe(addDateText, cal, true);
}
YAHOO.util.Event.onDOMReady(init_calendar);

</script> 
</head>
<body class="yui-skin-sam">

<form>
    Date: <input type="text" id="datefield" />
    <div id="cal"></div>
</form>

</body>
</html>

]]>

CodeLibrary:YUI Carousel

Fri, 14 Nov 2008 19:42:55 -0500 (EST)

This is an example file used in our YUI JavaScript Library tutorial. It produces a window with rotating content, as seen on Yahoo.com's current frontdoor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI: Carousel example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/fonts/fonts-min.css&2.6.0/build/calendar/assets/skins/sam/calendar.css&2.6.0/build/carousel/assets/skins/sam/carousel.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript"> 
function init_carousel()
{
            var carousel = new YAHOO.widget.Carousel("carouselcontainer", { numVisible: 1 }); // Create the carousel object
            carousel.render(); // Let YUI set up its styles
            carousel.show();   // Finally, show the carousel
}
YAHOO.util.Event.onDOMReady(init_carousel);
</script> 
<style>
	ol#carousel li div
	{
		width: 400px;
		padding: 50px 0;
		font-size: 40px;
	}
</style>
</head>
<body class="yui-skin-sam">

    <div id="carouselcontainer">
        <ol id="carousel">
            <li>
            	<div>Monkey</div>
            </li>
            <li>
		<div>Likes</div>
            </li>
            <li>
            	<div>Riding</div>
            </li>
            <li>
            	<div>The</div>
            </li>
            <li>
            	<div>Carousel</div>
            </li>
        </ol>
    </div>


</body>
</html>

]]>

CodeLibrary:Mercedes

Fri, 14 Nov 2008 19:42:55 -0500 (EST)

Introduction

This 1992 300E Mercedes is excellent condition. The color of the Mercedes is champagne with tan interior. The interior also has wood grain. The windows are tinted.

]]>