DZone Snippets: jquery code

jquery using asp server page to create xml file

excalibur (C Richards) — Tue, 15 Jul 2008 20:42:23 GMT

// jquery using asp server page to create xml file



labels.htm

   "http://www.w3.org/TR/html4/strict.dtd">;

 

   

     

     Address book

     

     

   

   

     

       


         Click here to load addresses

         

       

     

   

 



labels.asp

<%

Response.contenttype = "application/vnd.xml" 

Response.AddHeader "Content-Disposition", "filename=labels.xml" 

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write("The name"&vbcrlf)

response.write(""&vbcrlf)

response.write("45 Bryn Lane"&vbcrlf)

response.write("Hailey"&vbcrlf)

response.write("ID"&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write("Thomas Eliot"&vbcrlf)

response.write(""&vbcrlf)

response.write("3 Prufrock Lane"&vbcrlf)

response.write("Stamford"&vbcrlf)

response.write("CT"&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write("Langston Hughes"&vbcrlf)

response.write(""&vbcrlf)

response.write("10 Bridge Tunnel"&vbcrlf)

response.write("Harlem"&vbcrlf)

response.write("NY"&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write("Christopher Okigbo"&vbcrlf)

response.write(""&vbcrlf)

response.write("7 Heaven's Gate"&vbcrlf)

response.write("Idoto"&vbcrlf)

response.write("Anambra"&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

response.write(""&vbcrlf)

%>

Preloading Images with jQuery

demods () — Thu, 10 Jul 2008 08:29:39 GMT

Taken from http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery



jQuery.preloadImages = function() {

	for (var i = 0; i < arguments.length; i++) {

		jQuery("").attr("src", arguments[i]);

	}

}

jquery validation not clearing errors example

joshjdevl (Josh) — Thu, 26 Jun 2008 16:38:17 GMT

// jquery validation example not clearing error messages







  





    

  





  



   
























        
                          
                    
        Email Address


                
        
    

        Password


                
        

    
        Re-enter password

Creating Tabs with Forms in JQuery

rtperson (Roger Turnau) — Wed, 18 Jun 2008 13:39:53 GMT

// An example of a tabbed form in JQuery UI, based on the example file
// Requires the following files to run: jquery-1.2.6.js, ui.core.js,
// ui.tabs.js, flora.tabs.css, flora.css, i/tabs.png



                    "http://www.w3.org/TR/html4/loose.dtd">



   

      Using JQuery Tabs



      

      

      

      

      





               media="screen" title="Flora Tabs">

      

      

      

      

   

   



      

         



            

               The first thing 

            

            

               Second Thing 

            

            

               Thing Three 

            

         

         

            

















               
                  

                     Address 1

                  
                  

                                             tabindex="1" size="45">

                  
               
               
                  

                     Address 2

                  
                  

                                             size="45">

                  
               
               
                  

                     City

                  
                  

                     

                  
                  

                     State

                  
                  

                     

                  
                  

                     Zip Code

                  
                  

                                             tabindex="5">

                  
               
            





         

         

            







               
                  

                     

                        Notification Type

                  
                  

                                             tabindex="6">

                  
                  

                     Notificaton Date

                  
                  

                                             name="notificationDate" tabindex="7">

                  
               
            



         

         

            







               
                  

                     Test

                        Select

                  
                  

                     

                  
                  

                     Test Input

                  
                  

                                             tabindex="9">

Problem with jquery-ui

dtalas (Daniel Talas) — Sun, 08 Jun 2008 15:52:32 GMT

Untitled Page

Generating Taconite command documents

desfrenes (desfrenes) — Thu, 08 May 2008 02:50:20 GMT

// description of your code here
Hello,

This is a port of a php class used to generate XML taconite command documents, useful for (very) easy and powerful ajaxy stuff, if you don't know what that is just check it there in french : http://www.desfrenes.com/playground/taconite/ or there in english : http://www.malsup.com/jquery/taconite/.

Basically what it does is generate an XML document that is later processed by a javascript plugin which executes a serie of DOM modifications.

About the code, I'm a Django beginner as well as a Python beginner so kind advices are welcome.

Cheers.



# usage:

#

# t = Taconite()

#

# t.append("#toto","test")

# t.remove("#tutu")

# t.js('alert("hello world");')

# t.toggleClass('blue','body')

# t.css("body","background-color","white")

# [...]

# print t.toprettyxml()



import xml.dom.minidom as dom



class Taconite(dom.Document):

    def __init__(self):

        dom.Document.__init__(self)

        taconite = self.createElement("taconite")

        self.appendChild(taconite)



    def __str__(self):

        return self.toxml(encoding="utf-8")

    

    def camelizeCssProperty(self,property):

        words = property.split('-')

        camelized = words[0].lower()

        for word in words[1:] :

            camelized = camelized + word[0].upper() + word[1:]

        return camelized

    

    def js(self,script):

        command = self.createElement("eval")

        js = self.createTextNode(script)

        command.appendChild(js)

        self.childNodes[0].appendChild(command)

    

    def changeContentCommand(self,method,selector,content):

        html_dom = dom.parseString(content)

        command = self.createElement(method)

        command.setAttribute("select",selector)

        command.appendChild(html_dom.childNodes[0])

        self.childNodes[0].appendChild(command)

    

    def changeStateCommand(self,action,selector):

        command = self.createElement(action)

        command.setAttribute("select",selector)

        self.childNodes[0].appendChild(command)

    

    def CssCommand(self,action,css_class,selector):

        command1 = self.createElement(action)

        command1.setAttribute("select",selector)

        command1.setAttribute("arg1",css_class)

        command2 = self.createElement(action)

        command2.setAttribute("select",selector)

        command2.setAttribute("value",css_class)

        self.childNodes[0].appendChild(command1)

        self.childNodes[0].appendChild(command2)

    

    def addClass(self,css_class,selector):

        self.CssCommand("addClass",css_class,selector)



    def removeClass(self,css_class,selector):

        self.CssCommand("remove",css_class,selector)



    def toggleClass(self,css_class,selector):

        self.CssCommand("toggleClass",css_class,selector)

    

    def append(self,selector,content):

        self.changeContentCommand("append",selector,content)

    

    def prepend(self,selector,content):

        self.changeContentCommand("prepend",selector,content)

        

    

    def before(self,selector,content):

        self.changeContentCommand("before",selector,content)

        

    

    def after(self,selector,content):

        self.changeContentCommand("after",selector,content)

    

    def wrap(self,selector,content):

        self.changeContentCommand("wrap",selector,content)

    

    def replace(self,selector,content):

        self.changeContentCommand("replace",selector,content)

    

    def replaceContent(self,selector,content):

        self.changeContentCommand("replaceContent",selector,content)

    

    def remove(self,selector):

        self.changeStateCommand("remove",selector)

    

    def show(self,selector):

        self.changeStateCommand("show",selector)

    

    def hide(self,selector):

        self.changeStateCommand("hide",selector)

    

    def removeContent(self,selector):

        self.changeStateCommand("empty",selector)

    

    def css(self,selector,property,value):

        command = self.createElement("css")

        command.setAttribute("select",selector)

        command.setAttribute("name",self.camelizeCssProperty(property))

        command.setAttribute("value",value)

        self.childNodes[0].appendChild(command)

jQuery Maps Interface - Easily create Google or Yahoo maps

digitalspaghetti (Tane Piper) — Fri, 27 Jul 2007 11:52:21 GMT

/* jQuery Maps (jmaps) - A jQuery plugin for Google Maps API
* Author: Tane Piper (digitalspaghetti@gmail.com)
* With special thanks Dave Cardwell (who helped on getting the first version of this plugin to work).
* Website: http://code.google.com/p/gmapp/
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
* This plugin is not affiliated with Google or Yahoo.
* For Google Maps API and T&C see http://www.google.com/apis/maps/
* For Yahoo! Maps API and T&C see http://developer.yahoo.com/maps/
*
* === Changelog ===
* Version 1.3
* Added support for creating Yahoo! Maps, can create Map, Satallite or Hybrid. Check out available options below
* Added support for creating points on Yahoo! maps.
* Added support for creating Polylines on Yahoo! maps.
* Added support for GeoRSS files on both Yahoo! and Google maps, as well as existing KML support for Google, method
* name was changed from .addKml to .addRss
* Moved directions search out of main namespace, now function that is called from within plugin by providing fields
*
* Version 1.2 (25/07/2007)
* Moved GClientGeocoder into searchAddress method
* Fixed bug in searchAddress method regarding getPoint().
*
* Version 1.1 (16/07/2007)
* Changed name to remove Google from main name - namespace now .jmap.
* Added additional options:
* + Add map dragging enable/disable.
* + Add scroll wheel zooming.
* + Add smooth continuous zooming (on certain browsers).
* + Added clean unloading of Google objects.
* Added .addPoly method. Allows the creation of polylines on the map.
* Added .addKml support for rendering KML Files.
* Added .directions Driving Direction support.
*
* Version 1.0 (13/07/2007)
* Initial version.
* Creates Google Map.
* Add points to map.
* Takes address or postcode, Geocodes and centers map. Also creates a draggable marker.
*/





(function($) {

	/* function searchAddress(jmap, address, settings)

	 * This function is an internal plugin method that returns a GLatLng that can be passed

	 * to a Google map.

	 */

	function searchAddress(jmap, address, settings) {

		

		if (jmap._mapType) {

			alert('Yahoo Maps Geocoding not yet supported');

		}

		

		if (jmap.i.Au) {

			GGeocoder = new GClientGeocoder();

			GGeocoder.getLatLng(address, function(point){

				if (!point) {

					alert(address + " not found");

				} else {

					jmap.setCenter(point,settings.zoom);

					var marker = new GMarker(point, {draggable: true});

					jmap.addOverlay(marker);

					pointlocation = marker.getPoint();

					marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "
Longitude: " + pointlocation.lng());

					GEvent.addListener(marker, "dragend", function(){

						mylocation = marker.getPoint();

						marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "
Longitude: " + pointlocation.lng());			

					});

				}

			});

		}	

	}

	

	/* directions: function(map,query, panel)

	 * Takes a Direction query and returns directions for map.  Optional panel for text information

	 */

	function searchDirections(jmap,query,panel) {

		// Yahoo Maps

		if (jmap._mapType) {

			alert('Yahoo Directions support not yet added')	;

		}

		

		// Google Maps

		if (jmap.i.Au) {

			var dirpanel = document.getElementById(panel);

			directions = new GDirections(jmap, dirpanel);

			directions.load(query);

		}

	}



	$.fn.extend({

	/* jmap: function(settings)

	 * The constructor method

	 * Example: $().jmap();

	 */

	jmap: function(settings) {

		var version = "1.3";

		/* Default Settings*/	

		var settings = jQuery.extend({

			provider: "google",		// can be "google" or "yahoo"

			maptype: "hybrid",		// can be "map", "sat" or "hybrid"

			center: [55.958858,-3.162302],	// G + Y

			zoom: 12,				// G + Y

			controlsize: "small",	// G + Y

			showtype: true,			// G + Y

			showzoom: true,			// Y

			showpan: true,			// Y

			showoverview: true,		// G

			showscale: true,		// Y

			dragging: true,			// G + Y

			scrollzoom: true,		// G + Y

			smoothzoom: true,		// G

			searchfield: "#Address",

			searchbutton: "#findaddress",

			directionsto: "#to",

			directionsfrom: "#from",

			directionsfind: "#getDirections",

			directionspanel: "myDirections"

		},settings);

		

		return this.each(function(){

			switch(settings.provider)

			{

				case "yahoo":

					var jmap = this.jMap = new YMap(this);

					switch(settings.maptype) {

						case "map":

							var loadmap = YAHOO_MAP_REG;

							break;

						case "sat":

							var loadmap = YAHOO_MAP_SAT;

							break;

						default:

							var loadmap = YAHOO_MAP_HYB;

							break;

					}

					jmap.setMapType(loadmap);

					jmap.drawZoomAndCenter(new YGeoPoint(settings.center[0],settings.center[1]), settings.zoom);

					if (settings.showtype == true){

						jmap.addTypeControl();	// Type of map Control

					}

					if (settings.showzoom == true && settings.controlsize == "small" ){

						jmap.addZoomShort();	// Small zoom control

					}

					if (settings.showzoom == true && settings.controlsize == "large" ){

						jmap.addZoomLong();		// Large zoom control

					}

					if (settings.showpan == true) {

						jmap.addPanControl();	// Pan control

					}

					if (settings.showscale == false) {

						/* On by default */

						jmap.removeZoomScale();	// Show scale bars

					}

					if (settings.dragging == false) {

						/* On by default */

						jmap.disableDragMap();	// Is map draggable?

					}

					if (settings.scrollzoom == false) {

						/* On by default */

						jmap.disableKeyControls(); // Mousewheel and Keyboard control

					}

					break;

					

				case "mslive":

					alert('Microsoft Live Maps are currently not supported but planned for version 1.4')

					break;

					

				default:	

					var jmap = this.jMap = new GMap2(this);

					switch(settings.maptype) {

						case "map":

							var loadmap = G_NORMAL_MAP;

							break;

						case "sat":

							var loadmap = G_SATELLITE_MAP;

							break;

						default:

							var loadmap = G_HYBRID_MAP;

							break;

					}

					jmap.setCenter(new GLatLng(settings.center[0],settings.center[1]),settings.zoom,loadmap);

					switch(settings.controlsize)

					{

						case "small":

							jmap.addControl(new GSmallMapControl());

							break;

						case "large":

							jmap.addControl(new GLargeMapControl());

							break;

						case "none":

							break;

						default:

							jmap.addControl(new GSmallMapControl());

					}

					if (settings.showtype == true){

						jmap.addControl(new GMapTypeControl());

					}

					if (settings.showoverview == true){

						jmap.addControl(new GOverviewMapControl());

					}

					if (settings.scrollzoom == true) {

						/* Off by default */

						jmap.enableScrollWheelZoom();

					}

					if (settings.smoothzoom == true) {

						/* Off by default*/

						jmap.enableContinuousZoom();

					}

					if (settings.dragging == false) {

						/* On by default */

						jmap.disableDragging();

					}

			}	

			/* Seach for the lat & lng of our address*/

			jQuery(settings.searchbutton).bind('click', function(){

				searchAddress(jmap, jQuery(settings.searchfield).attr('value'), settings);

			});

			/* Search for Directions */

			jQuery(settings.directionsfind).bind("click", function(){

				var from = $(settings.directionsfrom).attr('value');

				var to = $(settings.directionsto).attr('value');

				searchDirections(jmap, "from: " + from + " to: " + to, settings.directionspanel);	

				$(settings.directionsfrom).attr('value', to);

				$(settings.directionsto).attr('value', '');

				return false;

			});

			/* On document unload, clean unload Google API*/

			jQuery(document).unload(function(){ GUnload(); });

		});

		},

	/* myMap: function()

	 * Returns a map object from the API, so it's available to the user

	 * Example: $().myMap().setCenter(...) for Google;

	 * Example: $().myMap().drawZoomAndCenter(...) for Yahoo;

	 */

	myMap: function() {

		return this[0].jMap;	

	},

	/* addPoint: function()

	 * Returns a marker to be overlayed on the Google map

	 * Example: $().addPoint(...);

	 */

	addPoint: function(pointlat, pointlng, pointhtml, isdraggable, removable) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {			

			var marker = new YMarker(new YGeoPoint(pointlat, pointlng));	// Create the Yahoo marker type

			YEvent.Capture(marker, EventsList.MouseClick, function(){		// Add mouseclick to open HTML

				marker.openSmartWindow(pointhtml);

			});

			// Below code does not work as expected

			/*if (removable == true) {

				YEvent.Capture(marker, EventsList.MouseDoubleClick, function(){

					jmap.removeOverlay(marker);

				});

			}*/

			jmap.addOverlay(marker);	// Add marker to map

		}

		

		// Google Maps	

		if (jmap.i.Au) {

			var marker = new GMarker(new GLatLng(pointlat,pointlng), { draggable: isdraggable } );

			GEvent.addListener(marker, "click", function(){

				marker.openInfoWindowHtml(pointhtml);

			});

			if (removable == true) {

				GEvent.addListener(marker, "dblclick", function(){

					return jmap.removeOverlay(marker);

				});

			}

			return jmap.addOverlay(marker);

		}

	},

	/* addPoly: function(poly)

	 * Takes an array of GLatLng points, converts it to a vector Polyline to display on the map

	 * Example: $().addPoly(...);

	 */

	addPoly: function (poly, colour, width, alpha) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {

			return	jmap.addOverlay(poly, colour, width, alpha);

		}

		// Google Maps

		if (jmap.i.Au) {

			return jmap.addOverlay(poly);

		}

	},

	/* addRss: function()

	 * Takes a KML file and renders it to the map.

	 * Example: $().addPoint(...);

	 */

	addRss: function (rssfile) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {

			var geoXml = new YGeoRSS(rssfile);

			return jmap.addOverlay(geoXml);

		}

		// Google Maps

		if (jmap.i.Au) {

			var geoXml = new GGeoXml(rssfile);

			return jmap.addOverlay(geoXml);

		}

		

	}

});

})(jQuery);

Dom created - cant attach event

iogan18tm (Iogan) — Sun, 25 Mar 2007 11:41:12 GMT

// description of your code here





function yearAdd(){

    $.log("add");

}





dayDel = function dayDel(t){

    $.log(this);

    $.log(t.target);

    $.log('del');

}





$(document).ready(function(){

    var b = $("x").click(dayDel);

    $("div.day").append(b);

//   b = $("+").click(yearAdd)

//    $("div.year center").append(b);

});

jQuery onLoad alternative

nathancarnes (Nathan Carnes) — Mon, 12 Mar 2007 19:05:40 GMT

// faster jQuery-based document.onLoad alternative



$(document).ready(function() {

   // put all your jQuery goodness in here.

   });

Encoding trouble with JQuery #1

SoftExpert (Marian) — Tue, 06 Mar 2007 10:06:59 GMT

// description of your code here



[["li01_tx_cl_c3l1_1","Salaire fixe brut mensuel hors primes : "],["li01_tx_cl_c3l1_2"," "],["li01_is_c3is1","Se calcule sur la base suivante: Salaire mensuel brut négocié divisé par 1.01"],["li02_tx_cl_c3l1_1","Prime de vacances: "],["li02_tx_cl_c3l1_2"," "],["li02_is_c3is2","Correspond à 1% du Salaire fixe brut mensuel hors primes"],["es_cl_c3l1","default_list"]]

Address 1	tabindex="1" size="45">
Address 2	size="45">
City		State	Zip Code	tabindex="5">