Posted on Leave a comment

YUI Calendar HTML Script

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>

I know that YUI Library is depreciated, but I will look into the further development of YUI in order to do similar things.

Posted on Leave a comment

A YUI Grids-based WordPress Theme — YUI Autogrid Minimal

Original Article at YUI Official Blog By Christian Heilmann, July 2nd, 2008.

Here what Christian Heilmann says:

As I had to upgrade my personal blog to the newest WordPress version (and my old theme had been hacked to death), I chose to start from scratch with a WordPress theme.

[You can download the new theme here.]

As I am a lazy person and I think blogging is first and foremost about content and availability, I wanted to re-use as much as possible the good stuff other people have done and then tweak it a bit to fit my needs.

Voilå! YUI autogrid minimal, a WordPress theme based heavily on YUI’s Grids CSS and Base CSS with a few changes to fit the HTML that WordPress creates for you.

To work around the issue of YUI Grids being optimized for a certain resolution, I used the autogrids trick blogged here previously.

This is what this WordPress theme gives you:

  • clean, simple markup
  • a grids layout that changes with the available browser space
  • a fixed right side menu for easy access of the search and pages
  • an hCard in the footer to download to Outlook or Mail
  • Nice, easy-to-read typography without any fancy distractions

What it does not give you (as I hadn’t had time to look into these):

  • Ajax that nobody really needs
  • the new WordPress enhancements like the dynamic sidebar
  • pop-up comments (come on, this is 2008!)

You can see a few messier, older versions of this theme at work on my personal blog and on Scripting Enabled, the event I am organising about accessibility hacking later this year.