Posted on Leave a comment

I am glad for Finalizing: YUI AutoGrids WordPress Theme

AUtogrids Yahoo! UI Theme based on Hybrid Theme by Justin Tadlock

Yes, call it with “domain text: autogrids“, but the complete name for it is “YUI AutoGrids WordPress Theme”, another WordPress theme that I build based upon Hybrid Core Theme by Justin Tadlock

This WordPress.com theme that utilizes the elegant, comprehensive and tidy YUI library is now being presented with more modifications on both sides of the blog.

Sidebars

On the left side of viewer (right side of the screen) is a dynamic extra sidebar” and on your right side or (left side of the screen) is a static one. The static is using sidebar navigation breadcrumbs, the function calls get_template_part(‘loop-nav-sidebar’);

Whereas the dynamic one uses “header sidebar utility”, so it calls a sidebar file. (get_sidebar(‘header-sidebar’);

According to Hybrid Theme do_atomic_rules, I am calling both of them “after_header”. Other themes use “before_primary” hook, but this one uses “after_header” hook because these two extra sidebars need not to be affected by disappearing sidebars in single and home pages.

Nothing will appear when you do not put anything on “header-sidebar” widget space on “wp-admin/widgets.php” section. But on the static sidebar you will see there is no “widgets” available but it is manually done. This is why I call it semi-automatic. It is automatic because sidebar-breadcrumbs will show some information on the current page/ content appearing on the screen. If a category is called, then category descriptions with subcategories and total posts on the category are displayed on sidebar-breadcrumb.

Front Page Layout

It comes with the possibility of utilizing “page-font-page.php” template if one wants to have a Front Page with specific categories and display.

AutoGrids YUI Theme based on Hybrid Theme with Front page
AutoGrids YUI Theme based on Hybrid Theme with Front page

Theme Demo

The Live Demo of the theme can be found at www.melanesia.one. General Themes Demonstration will be available at http://themes.wpyui.com, however, I am still doing the work so will be coming not long time from now.

Invitation

Now I invite anybody who wants to join me in this project, I am open to it. Please email me at info@wpyui.com

Posted on Leave a comment

Three Types of WPYUI Themes

Hybrid Child Theme, extended functionalities by WPYUI.com

WordPress.com themes based on Yahoo! UI Library is initiated by Yikwanak Kole and right now being updated after a few months by two other people interested in the work initiated some 10 years ago.

All WPYUI Themes are build based on the Rock-Solid Hybrid Theme Framework by Justin Tadlock.

I know that Justin already developed a new Theme Framework that he calls “Stargazer”, for Yikwanak Kole, the original Hybrid Theme framework is still the best and most logical as well as most expandable theme framework for basic wordpress learners.

WPYUI Themes appear in three major types. The first one is more simple and pure form of YUI WP Themes. Please visit http://yikwanak.com/kole/ to see this simple theme, as well as http:// melanesia.one and http:// papua.one

THis is “SImple YUI” Theme

Another one is primarily based on the YUI Bubbling LIbrary by Caidy Patino some years back. The colour is milky one. Please refer to http:// melanesia.net for this type.

WordPress Bubbling Library Theme
WordPress Bubbling Library Theme

The third one is as can be seen here http://yikwanak.com and http://wpyui.com. This is simple but also based on YUI Bubbling LIbrary, but utilizing YUI.2.2 library.

Wordpress Post Tag on the Top Right of Header by Jhon Kwano www.wpyui.com
WordPress Post Tag on the Top Right of Header by Jhon Kwano www.wpyui.com
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

Create Rich Interfaces With the YUI Library

THE LINE BETWEEN web and desktop applications is fading. Users now expect a richer experience. JavaScript can help provide interfaces and interactions that mimic the desktop. In this tutorial, I’ll introduce you to the JavaScript-based Yahoo User Interface Library. We’ll use it to convert normal HTML into more interactive controls.

Best of all, Yahoo’s library is open-source and has been released under a BSD license, so it’s free for all users.

WHAT YOU’LL NEED

  • Basic knowledge of HTML and CSS
  • Some experience with JavaScript

ADD YUI TO YOUR PAGE

Like other JavaScript frameworks and toolkits, you candownload YUI so that you’ll have all the files. The examples in this tutorial will instead use special versions containing only the code you’ll need.

Yahoo also has a file configurator to determine the YUI JavaScript and CSS files you need to access.

There are a couple upsides to going the hosted route:

1. Yahoo hosts the files for you. Save your bandwidth.

2. The files are minimized and combined into a single file. That means faster load times for your users.

If you want one a single call to YUI that will work for all the examples in this tutorial, select the following in theconfigurator:

  • Filter: -min
  • Options: Combine Files, Allow Rollup
  • YUI CSS Packages: Fonts CSS Package
  • YUI User Interface Widgets: Calendar Control, Carousel Control

The tool produces a single JavaScript reference and one CSS reference. Add these two lines, output from the tool, to the<head> section of your HTML file:

<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>

Before we move on to using YUI, you need to do one more thing to make Yahoo’s CSS works for styling the controls we’ll be using in this tutorial. Add the appropriate class to your page, like so:

<body class="yui-skin-sam">

OK, now we’re ready!

GO ‘ROUND WITH THE CAROUSEL CONTROL

The rotating content pane is a common sight on information-heavy pages. For example, Yahoo’s homepage has a version that cycles through the top stories of the moment. In YUI, this is called a carousel and implementing one is easy.

You can grab the code for this entire example in Webmonkey’s Code Library, saving it as an HTML file, or simply follow along with each portion below.

Start With an Ordered List

One of the nice things about YUI Library is that it makes it easy to write code that degrades gracefully. The controls all start with basic HTML used as hooks for the JavaScript. In this case, our carousel is simply an ordered list. If the YUI code is somehow unable to load, the content will still show up in list form. It will look a little funky, but that’s better than making the page explode or showing nothing at all.

Here’s the HTML to get ready for our carousel:

<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>

The outer div is used as a hook for the entire object. Within it, I included a simple ordered list. Each list item is a Carousel panel. You can include anything within the >li<tag. Here I’m just using a div, then adding some style. Go ahead and copy this into your stylesheet or between<style> tags in your header:

ol#carousel li div { width: 400px; padding: 50px 0; font-size: 40px; }

Transform List Into a Carousel

Now it’s time to apply the code used to make our ordinary ordered list into a beautiful carousel. Inside the <head>HTML tags, place these few lines of JavaScript:

<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>

There are two pieces to the above code. First, theinit_carousel function that has the three lines necessary to transform the ordered list into the carousel. Then, the final line tells YUI to wait for the Document Object Model (DOM) to load in the browser before calling theinit_carousel function.

Let’s see how it works. Save the file and load it in a browser and you should see something like this:

Make it Loop Infitely

Normally programmers try to avoid infinite loops, but this is a different kind of loop. Here we want to tell the carousel that when the next button is hit on the final panel, it can go back to the first panel. Even better, let’s have it move to the next panel automatically.

Each of these features is part of the Carousel control from YUI. With just a few keystrokes, we can add them to our current carousel.

Find the first line of init_carousel and replace it with this line to create the carousel object with the features we want:

var carousel = new YAHOO.widget.Carousel("carouselcontainer", { numVisible: 1, isCircular: true, autoPlay: 2000 }); // Create the carousel object, with auto looping

This adds two more options to the call that creates our carousel:

  1. /isCircular/ tells the final panel to go to the first panel next, to make it loop.
  2. /autoPlay/ tells how many milliseconds to wait before going to the next panel. I set this one to 2000, which is two seconds.

If you load up this new version, you’ll notice that the panels do go ’round and ’round when you click. They don’t advance on their own, despite adding autoPlay to our options. That’s because the carousel also needs us to start the autoplaying.

On the final line of init_carousel (right after the .show()line), give it the go-ahead:

carousel.startAutoPlay();

Now your carousel should loop infinitely, all on its own!

GET A DATE WITH THE CALENDAR CONTROL

The Carousel example in the previous section shows how YUI Library can help you present content in a nicer way. In this section, we’ll see an interface tool that’s even more functional. The Calendar control accepts a date from a user and adds the result into a text field, which means you get to decide the format.

You can download this entire example from Webmonkey’s Code Library or follow along with each portion below.

Start With an Input Field

Like the Carousel example, the Calendar object starts as normal HTML. In this case, we need a standard text box and an empty div, which provides the hooks necessary for YUI to build the calendar.

Add this HTML to a file that already references the JavaScript and CSS files:

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

That’s it. Now let’s write the JavaScript.

Attach a Calendar

Now we can apply the code used to make that little empty div nubbin into an interactive calendar. Inside the <head>HTML tags, place these few lines of JavaScript:

<script type="text/javascript"> function init_calendar() { var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } ); cal.render(); } YAHOO.util.Event.onDOMReady(init_calendar); </script>

Just two lines to initialize the calendar! One creates the object and the other draws it to the screen. Then one final line calls the init_calendar function when the DOM is ready.

Save and load your file and you’ll see something like this:

You may notice that two promised pieces of the calendar are so far missing:

  1. The calendar should only appear when the user clicks in the date field
  2. The calendar should add the date when the user selects one

Adding events will help us add these two features.

Add Some Events

Our calendar looks good, but it sure acts weird. In this section we’ll add two events to make the calendar behave normally.

Add these lines inside the init_calendar function:

cal.hide(); // Show Calendar when text field gets focusYAHOO.util.Event.addListener("datefieldocus", cal.show, cal, true); // Save calendar value inside text field cal.selectEvent.subscribe(addDateText, cal, true);

There are only three lines here, though it looks like more because of empty lines and those that are commented out (the ones that start with //).

The first line hides the calendar when it loads. We don’t want to show it until the user clicks.

The second line creates a new event. Whenever the text box (with id=”datefield”) receives “focus,” the cal.showfunction will be called. That one line is enough to make the calendar appear whenever the user clicks into the date field.

The third line creates yet another event. It’s a special, calendar-specific event for when the user selects a date. It calls the addDateText function, which we need to create. Go ahead and add the following code above the init_calendar function:

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(); }

The parameters (/type/, /args/, /obj/) are decided by the Calendar control and automatically passed to our function. The /args/ variable contains our date data, which I extracted into three new variables: /year/, /month/, and /day/.

Then I create the text for the text box by concatenating them together. The format I used is MM/DD/YYYY, but you could manipulate the JavaScript to change it to whatever you want.

Finally, the last thing I do is to hide the calendar (passed as the /obj/ variable), because we don’t need the calendar displayed once the user has selected a date.

And that’s it. You’ve used YUI and a little bit of custom JavaScript to create a text field that lets a user choose a date from a calendar.

WHERE TO GO FROM HERE

You’ve seen only a small piece of what’s possible with YUI Library. Here are some ideas to consider for your first unassisted foray into building something cool with YUI:

Source: https://www.wired.com/

Posted on Leave a comment

Beginning AJAX using the YUI Library

Preparation Step:
Create a text file and save it at include.html. Include some basic html in this page.

<h1>Hello World</h1>
<p>This is my first AJAX call</p>

Now, let’s set up our first AJAX web page using the YUI library. Our page will simply include the content from include.html when a button is pressed. Let’s begin….

Step 1: Start a new XHTML document with a typical template:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Ajax using the YUI Library</title>
</head>
<body>
</body>
</html>

Step 2: Adding script calls to include the YUI library components we will be using.

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" 
   type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" 
   type="text/javascript"></script> 

Notes:

  • As we discussed in the earlier blog entry “Including Javascript in XHTML , you must include the type attribute, but do not include the language attribute.
  • While in production you should put these calls at the end of your body, for this exercise, go ahead and put these in your header (after the meta character type and the title).
  • These scripts include minimized versions of the YUI library. Minimized means that the code base was minimized, with extra characters, comments and spacing removed. This makes the file smaller so the bandwidth is less, but it makes it human un-readable. The full version can be downloaded from The YUI distribution library.

Step 3: Create a <div> with an id in the body of your page and a link that will call the AJAX function. The div will be filled with the response from our AJAX call. Include an onclick event handler in the link. There will be another tutorial soon on using the YUI event utility to dynamically include event handers (separating presentation from the content). Make sure that the link’s href leads to a real page. Web standards and accessibility guidelines state that all links should really be links!

<div id="mydiv>
</div>  
<p><a href="/include.html" onclick="callAJAX(); return false;">
    My first AJAX</a></p>

Step 4: Add a script tag to your page. This is where we are going to put all the javascript AJAX functionality

<script type="text/javascript">
  //<![CDATA[  		

  //]]> 
</script>

This is what we have thus far:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Ajax using the YUI Library</title>
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">
</div>
<p><a href="/include.html" onclick="">My first AJAX</a></p>

<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</body>
</html>

Save your file as myfirstajax.html. The script we write will be added between the CDATAopen and closing tag. For more on why we use CDATA, refer to the entry on how toInclude Javascript in XHTML. If you prefer, you can make a single external javascript call and add everything to that external file. If you open it up in a browser all you should see in one link that reads “My first Ajax”. The page should validate.

Step 5: Add the YUI Connection Manager utility line of code that initiates an asynchronous transaction. Put this line of code in your javascript:

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);

Explanation:

  • The YAHOO.util.Connect.asyncRequest method starts an XMLHttpRequest. It returns a transaction object that has properties that you can use, including status, responseText, responseXML and tId.
  • The first argument is the HTTP method. We will cover POST and GET. The YUI connection manager also supports other HTTP methods, but POST and GET are the most common. Think of the XMLHttpRequest as a form submission: choose the HTTP method the same way you would choose a form submission method.
  • The second argument is the URL to which you are submitting the XMLHttpRequest. Think of it as a form action. It is the response page we are requesting.
  • callback, the third argument, is a series of functions that we will define to handle the server response.
  • The fourth argument is only used if the first method is 'POST'. Since we are using 'GET', we can set it to null or omit it. If we were using POST, the fourth argument would accomodate our POST message.

Step 6: Define the second parameter: the URL.  The second parameter needs to be set to the URL of the file we want to interact with asynchronously.  In this case we are simply going to include our static page — include.html — created in the preperation step before step 1.

var sUrl = "include.html";

Step 7: Define the third argument: the callback. We’ll add alerts so you can test at this point to see if it works. We’ll replace the success function after we test to see if everything is working thus far. success is the handler code that executes when the XMLHttpRequest is successful. failure is the handler code that executes if the XMLHttpRequest is unsuccessful.

var callback = { success: function(o) { alert(“AJAX Works”); //SUCCESS }, failure: function(o) { alert(“AJAX doesn’t work”); //FAILURE } }

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>My First Ajax using the YUI Library</title>
 <script src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" type="text/javascript"></script>
 <script src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" type="text/javascript"></script>
 <script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
 </head>
 <body>
 <div id="mydiv">
 </div>
 <p><a href="/include.html" onclick="callAJAX(); return false;">My first AJAX</a></p>

<script type="text/javascript">
 //<![CDATA[

var sUrl = "include.html";
 var callback = {
 success: function(o) {
 alert("AJAX Works"); //SUCCESS
 },
 failure: function(o) {
 alert("AJAX doesn’t work"); //FAILURE
 }
 }

var transaction = YAHOO.util.Connect.asyncRequest(‘GET’, sUrl, callback, null);

//]]>
 </script>
 </body>
 </html>

Step 8: Save everything and upload both include.html and myfirstajax.html into the same directory on your server. Open http://www.yourserver.com/yourfolder/myfirstajax.html in a browser. If you have an error in your code or didn’t load include.html and myfirstajax.htmlinto the same directory, you’ll get the “”AJAX doesn’t work” alert. If you copy the code in the box above, and uploaded both files correctly into the same directory on your server, you will get the “AJAX Works” alert. If all is good, continue.

Step 9: Our goal for this project is to make the content from your external file
include.html appear on your page. We’ve created a connection to our file. We created a place holder div in step 3 with <div id="mydiv>
</div>
. We are going to target this div, and insert the content from include.html into the div with innerHTML.

Replace

 success: function(o) {
	alert("AJAX Works"); //SUCCESS 
    },

with

 success: function(o) {
    	document.getElementById('mydiv').innerHTML =  o.responseText;
    },

The left hand side of the above statement uses the DOM to target the content of mydiv.  The function takes the responseText value of the transaction and replaces mydiv’s innerHTML with the content retrieved by the XMLHttpRequest. Save, upload and test again!

Step 10: The power of AJAX is being able to make a XMLHttpRequest and altering the content of the page once the page is already loaded. Let’s change our code so that instead of loading include.html while we load the page, we load it dynamically when we click on our link. We included the onclick event handler in the link in step 3.  In a future tutorial we will use the YUI event library to dynamically attach an event handler to our link, thereby seperating content from presentation.

Encapsulate the javascript into a function.  Our onclick event handler in step 3 reads <a href="/include.html" onclick="callAJAX(); return false;">, so we will call our functioncallAJAX().

function callAJAX(){
	var sUrl = "include.html";
	var callback = { 
		success: function(o) {
			document.getElementById('mydiv').innerHTML =  o.responseText;
			}, 
		failure: function(o) {
			alert("AJAX doesn't work"); //FAILURE
			}
		} 

	var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}

 

The return is included in the eventhandler, so we don’t need to add it to the function. You could also have written the event handler as:

<a href="/include.html" onclick="return callAJAX();">

and added the return to the callAJAX function right before the function close:

 var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); 
	return false; 
	}