Ajax Updates |
- Making A Slick Content Slider
- Rating Widget using Ext Core 3.0
- Bumpbox – Images, Html files, Flv Videos, Swf files and PDFs – Lightbox
- Drop Down using CSS and jQuery
- Form Wizard using Jquery Plugin
| Posted: 07 Oct 2009 12:58 PM PDT Introduction Web masters constantly search for ways to optimize the way content is presented on their sites. With the advent of terms like "above the fold" it is ever so important to provide eye-catching and functional user interfaces. In this tutorial we are going to make a slick content slider for a computer shop, with the help of jQuery and the MopSlider plugin. The slider is going to be generated with PHP and we are using a plain txt file as a data source for the notebook configurations. When designing a new feature you have many choices on how to store the needed data. For the purposes of this tutorial, we are putting all the laptop configurations into a single plain txt file. This strategy is perfect for simple read-only web apps, which operate with less than 100 items. The advantages over a regular MySQL data storage is that you need only a text editor to modify the data and add new models, not to mention the greater level of simplicity in the implementation. Below is a sample structure of the text file. Product Model | Product Description | Price | Path To Image | URL Second Product | Description | Price | Path To Image | URL Third Product | Description | Price | Path To Image | URL Every item occupies its own row. The number of rows is the number of items in the content slider. There are several data columns, divided by "|". These are the model, description, price, product image and a URL for more information. You can modify this structure by adding or removing columns, but remember to apply the changes to the demo.php loop, which we will take a look at in a moment. This file is located in the db folder. To prevent our textual database from being typed in and opened in a web browser, we will have to add a special .htaccess file. This is executed by the Apache web server and the rules it contains are applied to the current directory. db/.htaccess # This will prevent opening the db dir in a browser deny from all # Will return a 403 error This line prevents the directory and all its files from being opened in a web browser. Now lets take a look at the XHTML. Step 2 – XHTML The markup of the page is pretty straightforward. <div id="main"> <!-- The main container --> <div class="titles"> <!-- Placeholder for the headings --> <h1>Notebooks</h1> <h2>Fresh on the market</h2> </div> <div class="container"> <!-- Styled and rounded --> <div id="slider"> <!-- Contains the generated products --> < ?=$products?> <!-- PHP var that holds the products --> </div> <div class="clear"></div> <!-- Clearing the floats, the old-fashioned way --> </div> </div> It is pretty much self explanatory. Now lets move to our CSS. Step 3 – CSS It is CSS that made it possible to write such clean and simple XHTML as above. body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* resetting some of the page elements */ margin:0px; padding:0px; } body{ /* styling the body */ color:white; font-size:13px; background: url(img/bg.png); font-family:Arial, Helvetica, sans-serif; } h1{ color:white; font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ font-family:"Arial Narrow",Arial,Helvetica,sans-serif; font-size:10px; font-weight:normal; letter-spacing:1px; padding-left:2px; text-transform:uppercase; white-space:nowrap; } .clear{ /* Clear the floats */ clear:both; } #main{ /* The main container */ width:800px; margin:0 auto; } .container,.titles{ /* These classes share some common rules */ color:white; margin-top:30px; width:100%; /* Hiding everything that overflows off the sides */ overflow:hidden; background:url(img/bg_dark.png) #28313b; padding:20px 10px 10px; /* CSS rounded corners */ -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } .titles{ width:140px; padding:10px 15px; height:55px; } .product{ /* The products class */ width:370px; height:150px; background:url(img/product_bg.png) repeat-x; padding-top:10px; -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } .product .pic{ /* The product image */ float:left; width:128px; height:128px; padding:0 10px 5px; margin-top:-15px; } .product .link,.product .price{ /* Common rules */ font-size:10px; text-transform:uppercase; padding:4px 0; } .product .price{ /* Custom rule */ color:#CCCCCC; } .product .title{ font-size:16px; font-weight:bold; } a, a:visited { /* Styling the hyperlink */ color:#00BBFF; text-decoration:none; outline:none; } a:hover{ /* The hover state */ text-decoration:underline; } Lets proceed with the next step. Step 4 – jQuery Lets see what lays in the script.js file. script.js $(document).ready(function(){ /* After the page has finished loading */ $("#slider").mopSlider({ 'w':800, 'h':150, 'sldW':500, 'btnW':200, 'itemMgn':20, 'indi':"Slide To View More", 'type':'tutorialzine', /* A custom theme */ 'shuffle':0 }); }); You can see that on line 11 we provide "tutorialzine" as a theme. What gives? The plugin comes loaded with two themes – paper, and black. Unfortunately neither of those seem suitable for the current page design. This is why I tweaked the plugin a little bit to enable this custom theme. Unlike the ones built-in, this one hides all the graphics, rounded corners and backgrounds to leave only the sliding bar and the content. This enables us to skin it the way we like and integrate it into any page design, but you'll have to remember to style it properly. In this case we've styled the container div that holds the slider and it works just fine. Lets move on to the PHP code. Step 5 – PHP PHP handles the important task of reading the slider.db.txt and populating the slider div with products. This happens in the beginning of demo.php. demo.php $slides = file('db/slider.db.txt'); /* Read the file with file() - returns an array where */ /* every file row becomes a new array element */ $products=''; foreach($slides as $v) { $data = preg_split('/\s*\|\s*/',$v); /* Split the file row by the vertical lines */ /* Using preg_split to remove unnecessary spaces and tabulations */ $products.=' <div class="product"> <div class="pic"><img src="'.$data[3].'" width="128" height="128" alt="'.htmlspecialchars($data[0]).'" /></div> <div class="title">'.$data[0].'</div> <div class="price">$'.$data[2].'</div> <div class="description">'.$data[1].'</div> <div class="link"><a href="'.$data[4].'" target="blank">Find out more</a></div> <div class="clear"></div> </div>'; /* $data becomes an array with the product's properties */ } If you were to modify slider.db.txt, you would have to change the above loop so you can show the data where needed. With this our content slider is complete! Demo: http://demo.tutorialzine.com/2009/10/slick-content-slider-jquery/demo.php  Related Listings:
| |||||
| Rating Widget using Ext Core 3.0 Posted: 07 Oct 2009 11:28 AM PDT We are very proud to announce the final release of Ext Core under the MIT license. Your feedback was invaluable. Thank you for all the bugs reported and test cases created. For those of you who are new to Ext Core, we suggest you read the previous blog post about the all the features and examples that we released as part of the beta. For this post we will leverage the power of Ext by creating and dissecting a useful star rating example. We hope to share some of the general best practices behind creating unobtrusive, reusable code with Ext Core to liven up your pages. //any of these will work Alternatively, you can use Google AJAX API Loader’s google.load() method: google.load('ext-core', '3'); google.load('ext-core', '3', {uncompressed : true}); Getting Started <div id="rating1"> <input type="radio" name="rating1" value="1" title="Very poor"/> <input type="radio" name="rating1" value="2" title="Not that bad"/> <input type="radio" name="rating1" value="3" title="Average"/> <input type="radio" name="rating1" value="4" title="Good"/> <input type="radio" name="rating1" value="5" title="Perfect"/> This markup allows user to have the ability to rate an item even without the fancy stars and additional functionality that we have in mind. Take notice that this simple markup contains powerful information like the name, value and title for each item which we can reuse with our rating widget. //Keep it simple new Ext.ux.Rating('rating1', { showTitles: true }); Ext.util.Observable Ext.ns('Ext.ux'); Ext.ux.Rating = Ext.extend(Ext.util.Observable, { // Configuration default options showTitles: true, // Our class constructor constructor : function(element, config) { Ext.apply(this, config); Ext.ux.Rating.superclass.constructor.call(this); this.addEvents( 'change'); this.el = Ext.get(element); this.init() } }); For those of you familiar with Ext JS will recognize this pattern. In this piece of code we have created a namespace to put our class into using the Ext.ns() function. Then we create our class using the Ext.extend method with Ext.util.Observable as the base class. We define some configuration options with default values and then set up our constructor method which will be called when we create a new instance of our class. We also define some custom events and wrap the element passed to the constructor with an Ext.Element instance. We use the Ext.get() flexible nature to have support of passing an id string, DOM Element or Ext.Element to our constructor. init : function() { var me = this; // Some arrays we are going to store data in this.values = []; this.titles = []; this.stars = []; // We create a container to put all our stars into this.container = this.el.createChild({ cls: 'ux-rating-container ux-rating-clearfix' }); // We use DomQuery to select the radio buttons // Then we can loop over the CompositeElement using each this.radioBoxes = this.el.select('input[type=radio]'); this.radioBoxes.each(this.initStar, this); // We use DomHelper to create our hidden input this.input = this.el.createChild({ tag: 'input', type: 'hidden', name: this.name, value: this.values[this.defaultSelected] }); // Lets remove all the radio buttons from the DOM this.radioBoxes.remove(); if(this.disabled) { this.disable(); } else { // Enable will set up our event listeners this.enable(); } } Related Listings:
| |||||
| Bumpbox – Images, Html files, Flv Videos, Swf files and PDFs – Lightbox Posted: 07 Oct 2009 10:49 AM PDT Bumpbox – Images, Html files, Flv Videos, Swf files and PDFs – Lightbox Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you’re ready to roll. Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration. Copy the images to your root folder or adapt the image paths in the bumpbox.js according to your folder settings Place the included mootools12.js, the bumpbox.js and – in case you want to use flv files, the flowplayer.min.js as well as the flowplayer.swf and flowplayer.controls.swf into your document root. If your paths differ, adapt the paths inside the bumpbox.js to your directory structure. Open the page you want bumpbox to be used. Now add these lines to the head section of your site: <head> <script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script> <script language="javascript" type="text/ecmascript" src="bumpbox.js"></script> </head> How to modify your links to use bumpbox: <a href="linkToYourContent" class="bumpbox" rel="640x480" title="yourTitle" />Show me Explanation: rel = “” this is used to specify the size of the bumpbox window. class=”bumpbox” tell the script to check which links should use the bumpbox function. Demo: http://www.artviper.net/bumpbox.php Related Listings:
| |||||
| Drop Down using CSS and jQuery Posted: 07 Oct 2009 09:38 AM PDT For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not). Simple structure Let me explain HTML structure that will be used here. In this example we will use a short list of 8 countries. List is created using Definition List (DL) element. Why this element? It is similar to unordered/ordered list – the only difference is that DL consists of two elements: DT (term) and DD (definition). This makes it perfect candidate for Drop Down element. Element DT can be used to show collapsed state with currently selected option while DD can show all the available options in nested UL. Here is the sample structure: <dl class="dropdown"> <dt><a href="#"><span>Please select the country</span></a></dt> <dd> <ul> <li><a href="#">Brazil</a></li> <li><a href="#">France</a></li> <li><a href="#">Germany</a></li> <li><a href="#">India</a></li> <li><a href="#">Japan</a></li> <li><a href="#">Serbia</a></li> <li><a href="#">United Kingdom</a></li> <li><a href="#">United States</a></li> </ul> </dd> </dl> In order to make Drop Down functional we have to add several important CSS styles. First of all we have to reset margins and paddings for DD, DT and UL. DD will be positioned relatively, so that nested UL can be absolutely positioned. As I mentioned earlier, in collapsed state, only DT will be visible. It contains link with span inside it and two elements make sliding doors, a technique that is often used for creating buttons and tabs. Styling UL is simple, it will be positioned 2px below DT and initially hidden. * General dropdown styles */ .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } .dropdown dd { position:relative; } /* DT styles for sliding doors */ .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;} .dropdown dt a span {cursor:pointer; display:block; padding:5px;} /* UL styles */ .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; display:none; list-style:none; padding:5px 0px; position:absolute; left:0px; top:2px; width:auto; min-width:170px;} .dropdown span.value { display:none;} .dropdown dd ul li a { padding:5px; display:block;} After adding some colors, borders and hover effects (check out source code on demo page), the result so far will be something that really looks like Drop Down. Let’s make it work It’s time to involve jQuery. Each click on DT (actually link inside DT) will toggle nested UL. $(".dropdown dt a").click(function() { $(".dropdown dd ul").toggle(); }); This was the simplest part. Now let’s simulate other features of Select element. When you choose an option from the list (UL) it become selected option and is shown inside the link in DT. The function below replaces the HTML of currently selected item with the inner HTML of clicked link. At the end, it hides nested UL. $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); }); This looks more like Drop Down, but there are still some things that need to be done. First, once you reveal nested UL by clicking on Drop Down it remains visible. And that’s a bug. Although there can be better solutions, I’ve came up with this one: $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); The function above checks each click on a page and if click occurred on some elements outside the dropdown it hides nested UL. Now this looks like regular Select element. Although it looks fine it will surely become a headache for developers. Select element has “value” attribute where you can store some data then needs to be sent to the server. This attribute is usually populated by ID’s of records stored in the database. In our example with list of countries, it is more likely that some country ID will be needed for any serious processing on the server. So how to store these values and how to get selected one? <dl class="dropdown"> <dt><a href="#"><span>Please select the country</span></a></dt> <dd> <ul> <li><a href="#">Brazil<span class="value">BR</span></a></li> <li><a href="#">France<span class="value">FR</span></a></li> <li><a href="#">Germany<span class="value">DE</span></a></li> <li><a href="#">India<span class="value">IN</span></a></li> <li><a href="#">Japan<span class="value">JP</span></a></li> <li><a href="#">Serbia<span class="value">CS</span></a></li> <li><a href="#">United Kingdom<span class="value">UK</span></a></li> <li><a href="#">United States<span class="value">US</span></a></li> </ul> </dd> </dl> It would be strange to have codes next to country names in the list, so let’s hide these spans. .dropdown span.value { display:none;} And that is the only change we’ll need to make in order to make this Drop Down fully functional. Take one more look at click handler for links in UL – it replaces inner HTML of link in DT with inner HTML of clicked link. This means tha tlink in DT element will have < span > with value included. var text = $(this).html(); $(".dropdown dt a span").html(text); It’s easy now to get selected value from our Drop Down. You can create a function like the one below to extract selected value. As the matter of fact, the very same function extracts selected value in the demo and shows this value under the Drop Down. function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } The code works in all major browsers: Firefox, Safari, Google Chrome, Opera(9.64), Internet Explorer 7 and 8. It works even in IE6, althoug it needs some polishing Since many of you pointed out the issue with accessiblity (and I agree with that) I made another example that creates DropDown dynamically from SELECT element and binds click event to it. It still doesn’t have up/down key navigation, though. Instead of having hard-coded DL, we will have SELECT element with all the items here: <select id="source"> <option selected="selected" value="BR">Brasil</option> <option value="FR">France</option> <option value="DE">Germany</option> <option value="IN">India</option> <option value="JP">Japan</option> <option value="RS">Serbia</option> <option value="UK">United Kingdom</option> <option value="US">United States</option> </select> We will then use jQuery to dynamically create list from SELECT: function createDropDown(){ var source = $("#source"); var selected = source.find("option[selected]"); // get selected <option> var options = $("option", source); // get all </option><option> elements // create <dl> and <dt> with selected value inside it $("body").append('<dl id="target" class="dropdown"></dl>') $("#target").append('</dt><dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>') $("#target").append('<dd><ul></ul></dd>') // iterate through all the <option> elements and create UL options.each(function(){ $("#target dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'); }); } Let me briefly explain the code here (you can check the entire source code in the second demo). It first reads all the In order to fully bind this DropDown to SELECT element we need to refresh SELECT each time new selection is made in DropDown. We have to modify click event handler for links in UL. It will get the selected item from the DL and assign a value from < span > to SELECT element. $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a").html(text); $(".dropdown dd ul").hide(); var source = $("#source"); source.val($(this).find("span.value").html()) }); Related Listings:
| |||||
| Form Wizard using Jquery Plugin Posted: 07 Oct 2009 08:49 AM PDT The form wizard plugin is a plugin based on jQuery which can be used to simulate wizard like page flows for forms without having to navigate between different pages. The plugin is very unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form depending on the user input. * Divides a single form into different steps to simulate a flow of steps rather than one big form. On the right of this page, a sample form is available as a demo. Create a form on your page and add some spans or divs with the class step around the elements that should be considered a step in the wizard. The form below should create a 5-step wizard which branches at step 2 and submits the form on step 3 and 5. The form also have validation for the bottom input fields in step 3 and 4 just show how easy it is to add validation. Note that all input elements except the submit and reset buttons must be disabled (this need was introduced in version 0.9.4 for adding performance) Note the text in red in the form * step: defines that this div should considered a step in the wizard <form id="theForm" method="post" action="#"> <div class="step"> <h1>step 1 - falls through to step 2 on next</h1> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" /><br /> </div> <div class="step"> <h1>step 2 - branch step</h1> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" /><br /> <select disabled="disabled" class="link" > <option value="" >Choose the step to go to...</option> <option value="step3" >Go to Step3</option> <option value="step4" >Go to Step4</option> </select><br /> </div> <div id="step3" class="step"> <h1>step 3 - submit step</h1> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" class="required"/><br /> <input disabled="disabled" type="hidden" class="link" value="submit_step" /> </div> <div id="step4" class="step"> <h1>step 4</h1> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" name="email" class="required email" /><br /> </div> <div id="step5" class="step"> <h1>step 5 - last step</h1> <input disabled="disabled" type="text" value="" /><br /> <input disabled="disabled" type="text" value="" /><br /> </div> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </form> Step 2: add the following to the head part of your html. <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript" src="./jquery.history.js"></script> <script type="text/javascript" src="./jquery.form.js"></script> <script type="text/javascript" src="./jquery.validate.js"></script> <script type="text/javascript" src="./jquery.form.wizard-0.9.9.js"></script> <script type="text/javascript"> $(function(){ $("#theForm").formwizard({ //form wizard settings historyEnabled : true, formPluginEnabled: true, validationEnabled : true}, { //validation settings }, { // form plugin settings } ); }); </script> and your DONE! To add localized validation on the fields please review the documentation for the validation plugin! See link in the text above. Related Listings:
|
<script type="text/javascript" src=".... http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core-debug.js http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core-debug.js 
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.