Ajax Updates » Enhancement http://www.ajaxupdates.com Latest Ajax Scripts, Examples, News and other Ajax related stuff Fri, 12 Feb 2010 12:46:54 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Ajax Suggestions Script http://www.ajaxupdates.com/ajax-suggestions-script/ http://www.ajaxupdates.com/ajax-suggestions-script/#comments Sat, 27 Jun 2009 14:37:37 +0000 alyaspk http://www.ajaxupdates.com/?p=1967
  • Fancy Apple.com Style Search Suggestion Apple is known to create beautiful products (next to the...
  • Twitter like Search with jQuery and Ajax Learn how to display twitter like search results with jQuery...
    • ]]>     JAX Suggestions is pretty much what you might have seen with Google Suggest. The basic idea is, through AJAX, to give the user an immediate response to what they’re typing and displaying the search results their input would generate. AJAX Suggestions is an unobtrusive JavaScript to add that progressive enhancement to your web page, by the usage of two CSS class names to the desired 
    input

    elements.

    It could also be used, for instance, in an online e-mail application where you would want to check a name in a global address book and return the related matches, with the possibility to then adding them to the field element.

    AJAX Suggestions is available either as stand-alone, or in conjunction with the DOMAssistant library.

    AJAX Suggestions is released under a Creative Commons Deed license. Basically, it means that it’s free to use and improve, and that the JavaScript files keep their reference to its creator. Like this:

    <strong>Copyright:</strong>
/*
	AJAX Suggestions is developed by Robert Nyman, http://www.robertnyman.com, and it is released according to the
	Creative Commons Deed license (http://creativecommons.org/licenses/GPL/2.0/)
	For more information, please see http://www.robertnyman.com/ajax-suggestions
*/

    Usage:
    What you need to do is to first include the JavaScript file; ajaxSuggestions.js for a stand-alone version, or ajaxSuggestions-DOMAssistant.js together with the other DOMAssistant modules (Note: remember to call the init() method of the ajaxSuggestions object, with the approach you find suitable, when using the DOMAssistant version).

    Then, just add two CSS classes to the input elements you want to add the AJAX Suggestions functionality to, ajax-suggestion and url-the-actual-URL, where you should replace the-actual-URL with your desired URL. The HTML code will look something like this:

    <input type="text" class="ajax-suggestion url-ajax-demo.php"/>

    It is also recommended to have the HTML code for the elements that will present the suggestions in your original HTML code. For example:

    <div id="search-result-suggestions">
	<h4>Top 5 results</h4>
	<div id="search-results"></div>
</div>

    Please note that AJAX Suggestions supports multiple elements in the same web page, who can also use different URLs for their AJAX calls. The same element is used for presenting the results, so it will only show you the results/suggestions for the latest search.
    An example reply can look any way you want; only your imagination will hold you back! Below is just a simple code example of a list with suggestions:

    <ul>
	<li><a href="1" class="item">Suggestion #1</a></li>
	<li><a href="2" class="item">Suggestion #2</a></li>
	<li><a href="3" class="item">Suggestion #3</a></li>
	<li><a href="4" class="item">Suggestion #4</a></li>
	<li><a href="5" class="item">Suggestion #5</a></li>
</ul>
<p><a href="/" class="item"><b>Search for all items</b></a></p>

    Settings

    AJAX Suggestions gives you a number of settings for you to get the most out of your usage. The different settings, available at the top of the ajaxSuggestions JavaScript file, are described below. Here are the default settings:
    Default settings

    elmIdToPresentResultsIn : "search-results",
elmIdResultsContainer : "search-result-suggestions",
charactersBeforeSearch : 2,
timeBeforeSuggest : 200, // In milliseconds
sameWidthAsInputElm : false,
offsetLeft: 0,
offsetTop : 0,
urlExt : "search=",
addSearchTermToQueryString : true,
addKeyNavigationEvents : true,
hideResultsOnDocumentClick : true,
itemClassName : "item",
itemSelectedClassName : "selected",
itemInsertValueIntoInputClassName : "choose-value",
itemInsertValueSetFocusToInput : true,
hideResultsWhenInsertValueIsSelected : true,
itemSeparator : ";",
turnAutoCompleteOff : true,

    Demo: http://www.robertnyman.com/ajax-suggestions/demo.htm
    Download: http://www.robertnyman.com/ajax-suggestions/AJAX-Suggestions-demo.zip
    Source: http://www.robertnyman.com/ajax-suggestions/implementation.htm

    Related Listings:

    1. Fancy Apple.com Style Search Suggestion Apple is known to create beautiful products (next to the...
    2. Twitter like Search with jQuery and Ajax Learn how to display twitter like search results with jQuery...

    ]]>     http://www.ajaxupdates.com/ajax-suggestions-script/feed/ 1     Image Gallery using Spry http://www.ajaxupdates.com/image-gallery-using-spry/ http://www.ajaxupdates.com/image-gallery-using-spry/#comments Wed, 06 May 2009 13:46:33 +0000 alyaspk http://www.ajaxupdates.com/?p=1533
  • Dynamic Image Gallery with Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...
    • ]]>     These versions use various coding techniques like, from inline Spry attributes to progressive enhancement for graceful degradation. DIfferent coders have different goals and these sample show various ways to accomplish the same end product..

    Gallery Demo

    Source code:

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Gallery</title>
<link href="../css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>
<script type="text/javascript" src="../../includes/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");
var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");
</script>
<script src="gallery.js"  type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1></noscript>
<div id="wrap">
	<h1 id="albumName" spry:region="dsGallery">{sitename} <span class="return"><a href="../index.html">Back to Demos</a></span> <span class="source"><a href="source.html">View Source </a></span></h1>
	<div id="previews">
		<div id="galleries" spry:region="dsGalleries">
		<label for="gallerySelect">View:</label>
			<select spry:repeatchildren="dsGalleries" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
				<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
				<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}">{sitename}</option>
			</select>
		</div>
		<div id="controls">
			<ul id="transport">
				<li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="Previous">Previous</a></li>
				<li class="pausebtn"><a href="#" onclick="if (gSlideShowOn) StopSlideShow(); else StartSlideShow();" title="Play/Pause" id="playLabel">Play</a></li>
				<li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="Next">Next</a></li>
			</ul>
		</div>
		<div id="thumbnails" spry:region="dsPhotos dsGalleries dsGallery">
			<div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');" onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');" onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
				<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}" src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}" width="24" height="24" style="left: 0px; right: 0px;" />
			</div>
			<p class="ClearAll"></p>
		</div>
	</div>
	<div id="picture">
		<div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" /></div>
	</div>
	<p class="clear"></p>
</div>
</body>
</html>

    Demo: http://labs.adobe.com/technologies/spry/demos/gallery/index.html

    Source: http://labs.adobe.com/technologies/spry/demos/pe_gallery.html

    Related Listings:

    1. Dynamic Image Gallery with Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...

    ]]>     http://www.ajaxupdates.com/image-gallery-using-spry/feed/ 0