Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

Share

YUI Widget: imSliderMenu

Friday, October 16th, 2009

I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.

Setting up the imSliderMenu widget is fairly easy. First, we set up the CSS for the menu items.

?View Code CSS
.pages {
	float:left;
	width:400px;
	height:18px;
	margin-bottom:21px;
	background-color:#B4A766;
}
.pages ul {
	margin-top:2px;
	margin-left:60px;
}
.pages li, .pages a {
	display:inline;
	margin-right:20px;
	margin-top:0;
	text-decoration:none;
	font-weight:bold;
}
.pages a.selected {
	color:red;
}

Very simple – nothing extraordinary. The ‘.pages’ class selector is a horizontal menu container. The ‘display:inline’ attribute (.pages li) creates a horizontal list.

Next we style the content container:

?View Code CSS
.pDetail {
	float:left;
	width:400px;
	margin-bottom:21px;
	background-color:#D59E5C;
	overflow:hidden;
	padding:0;
}
.pDetail p {
	color:#000;
	margin-left:10px;
	width:390px;
}

Now we add the html to the page.

?View Code HTML
< div id='pages' class="pages" >< /div >
 
< div id="about" class="pDetail" >About Content< /div >
< div id="link" class="pDetail" >Link Content< /div >
< div id="freeStuff" class="pDetail" >FreeStuff Content< /div >

The most important item in the html above is the ‘id’ that is set on each content container. This id will be used in setting up the imSliderMenu widget.

Setting up the Widget

To set up the widget, I am going to use the YUI Loader Utility. I discussed the use of the YUI Loader Utility in a previous post.

?View Code JAVASCRIPT
(function(){
	var loader = new YAHOO.util.YUILoader();
	loader.addModule ({
		name: 'INTRIG.imSliderMenu',
		type: 'js',
		fullpath: 'lib/intrig/slidermenu/slidermenu.js',
		varName: 'imSliderMenu'
	});
	loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "yuiloader", "INTRIG.imSliderMenu");
	filter: "MIN";
	loader.insert({
		base: "",
		loadOptional: true,
		onSuccess: function() {
			var Event = YAHOO.util.Event,
			Selector = YAHOO.util.Selector,
			Dom = YAHOO.util.Dom;
			Event.onDOMReady(function(){
				var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
				menu_container: 'pages',
				active_menu_class: 'selected',
				labels: [{
					caption: "About",
					id: "about"
				}, {
					caption: "Links",
					id: "links"
				}, {
					caption: "Free Stuff",
					id: "freeStuff"
				}],
				anim_options: {
					attributes: 'height',
					duration: 1,
					outMethod: YAHOO.util.Easing.backOut,
					inMethod: YAHOO.util.Easing.backIn
				}
			});
		});
          }
     });
})();

The YUI widget is called onSuccess of the YUI Loader Utility. If you are not using the Loader Utility, you can still wrap the call in an anonymous function.

?View Code JAVASCRIPT
(function(){
     var Event = YAHOO.util.Event,
     var Selector = YAHOO.util.Selector,
     Dom = YAHOO.util.Dom;
     Event.onDOMReady(function(){
     var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
          menu_container: 'pages',
	  active_menu_class: 'selected',
	  labels: [{
	        caption: "About",
	        id: "about"
	  }, {
		caption: "Links",
		id: "links"
	  }, {
		caption: "Free Stuff",
		id: "freeStuff"
	  }],
	  anim_options: {
		attributes: 'height',
		duration: 1,
		outMethod: YAHOO.util.Easing.backOut,
		inMethod: YAHOO.util.Easing.backIn
	}
     });
})();

The first option is menu_container. This container holds the dynamically created menu items. Next we have the active_menu_class.  This is how the menu item will appear when selected ( the active tab). In this instance, we are only turning the font color to red:

?View Code CSS
.pages a.selected {
	color:red;
}

The labels option There will be a label for every menu item that you want to display. In the example above, The caption option is the text that is displayed on each button. The id option is the id for the content container that is to open (or close) when the menu item is clicked.

Next comes the animation option (anim_options). These options control how your content will be displayed.

attribute: Can be ‘height’ or ‘width’. The default is ‘height.

duration: the duration of the animation (defaults to 1 second).

outMethod: Content is hidden by default. This is the method in which the content will appear. It must be an YUI Easing Method.

inMethod: The method in which the content will be hidden from the page.

That’s about it. I think it is easy enough to use. Click to view a demo of the imSliderMenu widget. The widget can be downloaded from Google Code.

Share

Categories: yui-widgets
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

CommentLuv badge

Home Business Ads




Categories

  • Ajax (52)
  • API's (3)
  • CakePHP (16)
  • Codeigniter (14)
  • Cool Sites (4)
  • CSS (11)
  • Dojo (13)
  • Drupal (4)
  • Flash (19)
  • Geek Humor (1)
  • Google Closure (1)
  • Google Maps (5)
  • IDE (3)
  • Javascript (12)
  • Joomla (3)
  • JQuery (28)
  • mac (3)
  • MySQL (2)
  • Pebblet (21)
  • Photoshop (3)
  • PHP (5)
  • Poetry (1)
  • Ubuntu (8)
  • Wordpress (1)
  • YUI (18)

    • Archives

    Tags

    -->

    Comments

    • Heather Cash: Hi, Thanks so much, which email address should I use? I tried sending to lesgreen@grasshopperpebbles...
    • Macca: Would you please send me an email and also the website or websites that you want to work on this so that I...
    • Heather Cash: Really? I don’t see any images. I am just embedding your images, could that be why? Do you have...
    • annie: How do I tell if “the git directory was appended to the PATH”? I don’t see git as part of...
    • Macca: Would you create a Joomla! extension of this page flip program. If you do then it would be great if you could...
    • Joe: When you set the initial value how do you handle line breaks and apostrophes?
    • Heather Cash: Hi, thanks so much for the super cool plugin. I’m trying to make just a very simple version of it...
    • Rohit: Thanks for this post. has helped me to solve a big problem on load for iframe
    • niko: If you are already in the terminal mode, there is 2 commands to do the job without using nautilus ;) To create...
    • Kelly: Awesome hack. Well done!

    Blogroll