EMail Us! SMS:+62(0)81286101000!  Hello Guest! Not Registered or logged in?  Log in or   Register
  • About
    • Bubbling YUI wP WP Theme
    • Hybrid YUI Grids
    • Sandbox YUI
    • YUI and Word Press
  • Hybrid YUI
    • Why YUI-fy Hybrid Child Theme
    • Why YUI Bubbling Library?
    • About Me
  • Archives
  • About Me
    • Contact Me
  • Shop
    • Papua Coffee
    • Melanesia Specialty Products

WPYUI.com

Yahoo! UI WordPress Themes

You are Very Welcome Guest!
 | Page 7
  • Lessons
    • YUI-fy WP Theme
    • Ajax Hacks
  • wP WP Themes
  • Saturday February 16th, 2019

Notice Board

WordPress YUI or WPYUI.com is my personal blog, serving my personal interest and passion on Yahoo! UI CSS Grids Layout, Yahoo! JS Library and particularly Yahoo! Bubbling Library by Cairidy Patino, in addition to my previous interest on the way http://justintadlock.com/ developed his http://themehybrid.com WordPress Theme.

My job is to help ALL Melanesians tribes from West Papua to Walis - Futuna Islands to own at least One Domain Name and One blog for each tribe, clan, familiy names, villages, valleys, islands, custom names, and so on so that all Melanesians, even though we are spread across very vast land and sea areas, we are still connected as one human race,, shareing this one planet called "the Earth".

I also promote einvironmental protection, based on Custom Knowledges and Custom Practices across Melanesia.

For more information and support, contact me: info@wpyui.com

Navigation

  • Shop
    • Papua Coffee
    • Melanesia Specialty Products

Recent Cats

  • RSS  Ajax Hacks  ( 3 )
  • RSS  Hybrid Child Theme  ( 10 )
  • RSS  Lessons  ( 8 )
  • RSS  Uncategorized  ( 6 )
  • RSS  WordPress Plugins  ( 3 )
  • RSS  wP WP Themes  ( 10 )
  • RSS  YUI-fy WP Theme  ( 12 )

All Updates RSS

Recent Tags

  • RSS  Vanuatu Child Theme  ( 1 )
  • RSS  Hybrid Base  ( 1 )
  • RSS  HC Child Theme  ( 1 )
  • RSS  Hybrid Core  ( 2 )
  • RSS  Google Search  ( 2 )
  • RSS  google.com  ( 2 )
  • RSS  Plugin  ( 2 )

All Updates RSS

Browse: Page 7

Create Rich Interfaces With the YUI Library

- Small Lesson on What YUI Library Can Do for Our Websites

@ Published on 📅 August 05, 2010 by worpressyui [17  entries]  ± Views 2 § Leave a comment

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:

  • Add a rich text editor to give users more control over how their content looks.
  • Rather than ask for numbers, use a slider to get numeric input.
  • Similar to the Carousel, use the TabView to segment content into panels to be viewed on a single page.
  • Read the YUI team’s article on skinning YUI, which lets you decide exactly how the widgets are displayed.

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

¶ post    ¶ Lessons (8) ‡ YUI Library (4) Length: [2424] words., and modified on: August 5th, 2017.

YUI CSS Grid WordPress Theme

@ Published on 📅 December 30, 2009 by melanesianews [23  entries]  ± Views 12 § Leave a comment

YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme. This is my first WordPress Theme based on YUI CSS Grids. It comes with 8 selectable color schemes, 5 different page widths and 6 combinations of page layout.

Color Schemes:

  • dark blue
  • facebook
  • green
  • greenish
  • orange
  • purple
  • red
  • tan blue

Page Widths:

  • 750px Centered
  • 950px Centered
  • 974px Centered
  • 100% Fluid

Page Layout

  • Left Sidebar, 160px
  • Left Sidebar, 180px
  • Left Sidebar, 300px
  • Right Sidebar, 180px
  • Right Sidebar, 240px
  • Right Sidebar, 300px

Download YUI CSS Grid WordPress Theme.

Customize your theme using the WordPress Dashboard menu Themes > Customize Theme after installing this theme.

Related articles
  • YUI Based and Multicoloured "raindrops" WordPress Theme (papuawp.wordpress.com)
  • Bintang Kejora WordPress Theme: Blue-Red-White based on YUI Grids and Hybrid Theme Framework (papuawp.wordpress.com)
  • Introducing the Grid Builder (yuiblog.com)
  • Twordder WordPress Theme: Fully YUI and Twitter Based Theme (papuawp.wordpress.com)

¶ post    ¶ YUI-fy WP Theme (12) ‡ CSS Grids (3), YUI Grids CSS (12) Length: [314] words.

WordPress – Creating Tab Menus with Yahoo! YUI Tab View

@ Published on 📅 December 30, 2008 by melanesianews [23  entries]  ± Views 22 § Leave a comment

The Yahoo! User Interface Library (YUI) is a set of JavaScript utilities and controls, for building interactive web applications. The YUI Tab View is part of that vast library – - it help you to quickly create and design Tab Menus.
The advantage of Tab Views is that they allow you add more content to your web page whilst occupying less space. If well done they won’t slow down website-browsing.

If you’re using the Ndomche Summary Theme – II Columns for WordPress or Blogger, then the best place to insert this tabbed menu is the header — like on this blog. Don’t bother to contact me for more info.

The Steps, please go Here

¶ post    ¶ YUI-fy WP Theme (12) ‡ tab menu, wordpress (5), yui examples (4), YUI Tabview Length: [210] words.

A YUI Grids-based WordPress Theme — YUI Autogrid Minimal

@ Published on 📅 July 02, 2008 by melanesianews [23  entries]  ± Views 8 § Leave a comment

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.

Related articles
  • Bintang Kejora WordPress Theme: Blue-Red-White based on YUI Grids and Hybrid Theme Framework (papuawp.wordpress.com)
  • Zeitgeist Creative WordPress Theme (photographythemes.wordpress.com)

¶ post    ¶ YUI-fy WP Theme (12) ‡ wordpress themes (5), YUI Grids CSS (12), yui hacks (9) Length: [453] words.

Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

@ Published on 📅 April 30, 2008 by melanesianews [23  entries]  ± Views 21 § Leave a comment

Sancta Simplicitas

Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

Sancta Simplicitas is a WordPress theme that uses YUI CSS utilities: reset, base, fonts, grids. It's very minimalistic in a sense that it's pretty much all white and simple. Hence the name. The theme is probably not usable by itself, but it's a base on top of which you can create your own themes.

When creating a new WordPress theme, people usually take the default Kubrick theme but I personally find Kubrick too much. So Sancta Simplicitas has a very minimal stylesheet and is based on the WordPress classic theme.

The fact that it uses YUI grids makes it trivial to tweak: fixed size vs full width, width of the sidebar, position of the sidebar. Basically right after the there's this:
<div id="doc3" class="yui-t5">

Changing the id doc3 to doc, doc2, doc4 or doc5 will give you different widths of the content. The default doc3 is full width. Then changing the class name yui-t5 will give you different position and width of the sidebar. yui-t1, yui-t2 and yui-t3 put the sidebar on the left hand side, yui-t4, yui-t5 and yui-t6 place it to the right. You can go even crazier from here, nesting grids to get a two-column sidebar and so on, it's really easy with YUI grids and the docs are here.
Download Sancta Simplicitas

» sansim.zip

Related articles
  • Bintang Kejora WordPress Theme: Blue-Red-White based on YUI Grids and Hybrid Theme Framework (papuawp.wordpress.com)
  • Introducing the Grid Builder (yuiblog.com)
  • Future of YUI CSS (tilomitra.com)

¶ post    ¶ YUI-fy WP Theme (12) ‡ grid builder, technology, wordpress (5), YUI Grids CSS (12) Length: [389] words.

Beginning AJAX using the YUI Library

@ Published on 📅 March 19, 2007 by worpressyui [17  entries]  ± Views 10 § Leave a comment

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

¶ post    ¶ Lessons (8) ‡ ajax, ajaxify, YUI (5), yui examples (4), YUI Library (4) Length: [1902] words., and modified on: August 5th, 2017.

« Previous 1 … 6 7
Welcome!, Wa Wa!, Salam!: Page 7
SiteLogo
Welcome! This is
WPYUI.com
Yahoo! UI WordPress Themes
Site Stats:
  1. Number of Posts:42
  2. Number of Comments:14
  3. Number of Categories:7
  4. Number of Tags:102
  5. Number of Pages:13
  6. Number of Links:0
  7. Number of Registered Users:4
  8. Number of Links Categories:0
  9. Number of Trackback:8
  10. Number of Pingbacks:8
« Previous 1 … 6 7

Calendar

February 2019
MonTueWedThuFriSatSun
« Nov  
 123
45678910
11121314151617
18192021222324
25262728 

Most

  • View
  • Comment
  • Category
  • Tag
[+] Most Viewed Posts
  • Google.com Custom Search in my WordPres.com Blog Without Plugin (349)
  • How I Call YUI CSS Grids in My Hybrid WordPress Theme (345)
  • Hello world! I am Yahoo! Addict, and Hybrid Theme Lover (339)
[+] Most Commented News
  • Twordder WordPress Theme: Fully YUI and Twitter Based Theme (0)
  • YUI GRIDS is Applied into the Robust Hybrid Word Press Theme Framework (0)
  • To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme (2)
[+] Most Popular Categories
  • YUI-fy WP Theme (12)
  • wP WP Themes (10)
  • Hybrid Child Theme (10)
  • Lessons (8)
  • Uncategorized (6)
  • Ajax Hacks (3)
  • WordPress Plugins (3)
[+] Most Popular Topics

    » YUI Grids CSS

  • How I Call YUI CSS Grids in My Hybrid WordPress Theme
  • Hello world! This is WordPress Yahoo! User Iinterface
  • Yes, Yahoo! YUI and WordPress can Get Along
  • YUI Based and Multicoloured “raindrops” WordPress Theme
  • Twordder WordPress Theme: Fully YUI and Twitter Based Theme

    » yui hacks

  • How I Call YUI CSS Grids in My Hybrid WordPress Theme
  • YUI Based and Multicoloured “raindrops” WordPress Theme
  • PHP Ease YUI Class Based WordPress Theme
  • Build a Simple Ticker in YUI
  • YUI3 Example: StumbleUpon List

    » hybrid theme

  • Add Action Hack to Register Sidebars, Menus and Widgets
  • West Papua Launches New WordPress Themes

    » Justin Tadlock

  • Hybrid Byline and Hybrid Entry Meta in Jhon Kwano’s Hybrid Child Themes
  • A quick interview with Justin Tadlock (Theme Hybrid)
  • Yes, Yahoo! YUI and WordPress can Get Along
  • YUI GRIDS is Applied into the Robust Hybrid Word Press Theme Framework

    » Jhon Yonathan Kwano

  • Hybrid Byline and Hybrid Entry Meta in Jhon Kwano’s Hybrid Child Themes
  • ScreenShots of Hybrid Child Theme So far
  • Hello world! I am Yahoo! Addict, and Hybrid Theme Lover

    » css stylesheet

  • To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme
  • Today I have learned One Thing: A Grand Child Theme as a Plugin, and more…
  • How I Call YUI CSS Grids in My Hybrid WordPress Theme
  • CSS Stylesheet Layout Gala
  • Crash Course: YUI Grids CSS

    » Hybrid WordPress Theme

  • Yes, Yahoo! YUI and WordPress can Get Along

    » wordpress

  • Multi-Column Grid-Style Posts in WordPress
  • PHP Ease YUI Class Based WordPress Theme
  • West Papua Launches New WordPress Themes
  • WordPress – Creating Tab Menus with Yahoo! YUI Tab View
  • Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

    » wordpress themes

  • ScreenShots of Hybrid Child Theme So far
  • West Papua Launches New WordPress Themes
  • A YUI Grids-based WordPress Theme — YUI Autogrid Minimal

    » YUI

  • Build a Simple Ticker in YUI
  • YUI Calendar HTML Script
  • Beginning AJAX using the YUI Library

Recent Comments

  • worpressyui on To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme
  • worpressyui on About Me
  • Andykaufmantony on To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme
  • Alex Nordeen on About Me
  • Hybrid Byline and Hybrid Entry Meta in Jhon Kwano’s Hybrid Child Themes on I Made some modifications on Hybrid Theme Byline and Entry Meta

About

WPYUI stands for WordPress and Yahoo! User Interface (YUI), i.e. wordpress.com theme developed utilising the Yahoo! UI, with the Hybrid WordPress.com Theme as the rock-solid, and logically comprehensive wordpress theme that I found so far.

Image Stream

"Vanuatu" Hybrid Child Theme @yikwanaka.comHybrid Child Theme @PAPUA.churchHybrid WordPress Theme Subtitler DisplayGoogle.com Custom Search, Search Results from This SiteSearch from "The Web" Search Results from Google.com Custom Search

Archives

  • November 2018 (3)
  • October 2018 (1)
  • August 2017 (3)
  • July 2017 (5)
  • June 2017 (1)
  • January 2017 (1)
  • October 2014 (1)
  • August 2014 (1)
  • December 2013 (2)
  • May 2013 (1)

Pages

  • About
    • Another Hybrid Child Theme?
    • Why YUI Bubbling Library?
    • Why YUI-fy Hybrid Child Theme
  • About Me
  • Archives
  • Google Search
  • Hybrid YUI
    • Bubbling YUI wP WP Theme
    • Hybrid YUI Grids
  • Sandbox YUI
  • West Papua WordPress
  • YUI and Word Press

RSS Recent Updates

  • Hybrid Child and Vanuatu Child Themes, Based on One Theme, Displayed in Two Different CSS Styles November 25, 2018 worpressyui
  • “SubTitle” for all My YUI-CSS Grids and Hybrid Based WordPress Themes November 16, 2018 worpressyui
  • Google.com Custom Search in my WordPres.com Blog Without Plugin November 8, 2018 worpressyui
  • To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme October 27, 2018 worpressyui
  • Adding Tag to Page or Making Page Taggable is a Good Idea for Browsing Contents August 6, 2017 worpressyui
  • Hybrid Byline and Hybrid Entry Meta in Jhon Kwano’s Hybrid Child Themes August 1, 2017 worpressyui
  • I Made some modifications on Hybrid Theme Byline and Entry Meta August 1, 2017 worpressyui
Subscribe to WordPress Yahoo! UI by Email

Newsletter

 Subscribe in a reader

Copyright © 2007-2018 WPYUI.com.

Powered by WordPress and Yahoo! WP Hybrid.

  • YUIWP
  • PAPUAWP
  • WPYUI
Google the web    In This Site
the web In This Site