Ajax Updates |
- Javascript Sorted Table
- Advanced RSS Ticker
- TjpZoom Magnifier JavaScript
- Show Simple Password Fields
- Conditionally-Colored Flex Charts
- Ajax Page Fetcher
| Posted: 07 Nov 2009 11:22 AM PST Javascript Sorted Table In this Sorted Table user can sort the table rows by clicking the columns. Tables can be sorted automatically or manually by moving rows. * have a valid XHTML document, Download: http://www.ajaxlady.com/text-processing-ajax-scripts/184-javascript-sorted-table.html/attachment/sorted-table  Related Listings:
| |||||
| Posted: 07 Nov 2009 11:17 AM PST Advanced RSS Ticker RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from CNN. Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! Related Listings:
| |||||
| Posted: 07 Nov 2009 11:10 AM PST The JavaScript image magnifier script. As you may have realized, this is an image magnifier. It's a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM Download: http://www.ajaxlady.com/zoom/336-tjpzoom-magnifier.html/attachment/tjpzoom Related Listings:
| |||||
| Posted: 07 Nov 2009 10:08 AM PST A simple Javascript bookmarklet shows password field values. In form fields where a password is entered, it is usually obscured by asterisks or bullets to prevent someone from seeing what you type. This is a great feature but where a long password is being typed or a remembered password is filled in by the browser, you might want to actually see the actual password itself. Here is a bookmarklet (a snippet of Javascript that can be pasted into the address bar of your web browser), that will show any passwords on a page that contain password form fields. javascript: (function() { var s="", F=document.forms,j,f,i; for(j=0; j<f .length; ++j) { f = F[j]; for (i=0; i< f.length; ++i) { if(f[i].type && f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Password fields:\n\n" + s); else alert("No password fields on this page."); } )(); Just paste the above javascript into the address bar of your browser and press Enter, or create a bookmarklet link with the javascript as the URL. On this page you'll see the password for the mock sign on form below. This is nothing new. This or similar javascript has been around for a while. This particular one was on raymond.cc (via etc.), but it needed to be fixed for some forms where fields have a null type property (an example is the sign on form for LinkedIn). The fix was adding f[i].type && to the if statement inside the inner for loop. If you're interested in what is happening to make this work the formatted code is below. Essentially, the variable F is set to the collection of forms on the page, which is looped through, examining every input field in each form testing if it's of type "password." If it is a "password" field, its value is appended to the string variable s. Once all the input fields in all the forms on the page have been sniffed, the string value is displayed in an alert. javascript: (function() { var s="", F=document.forms,j,f,i; for(j=0; j</f><f .length; ++j) { f = F[j]; for (i=0; i< f.length; ++i) { if(f[i].type && f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Password fields:\n\n" + s); else alert("No password fields on this page."); } )(); But Firefox already… And yes, we know Firefox will show you passwords in the clear with Tools/Options/Security/Show Passwords. This javascript, however, is easier to access if you have created a bookmarklet for it, plus it works in other browsers. Related Listings:
| |||||
| Conditionally-Colored Flex Charts Posted: 07 Nov 2009 09:56 AM PST The charting in Flex is a pretty good tool, but there are a few small features that it would be really nice if it had. One of these would be the ability to have a chart series that changed colors depending on it's value. Conditionally colored charts are something that a lot of us (and our customers) have grown accustomed to and we shouldn't have to give it up with Flex. If you are like me you have probably been "googling" every variation of "flex colored charts" that you can think of. I couldn't find an answer anywhere, but hopefully your search will end right here. I wanted the ability to color charts based on their value, giving them red/yellow/green colors based on if they were lower/equal to/higher than a given value. The ability to use gradients instead of solid colors was also a requirement. I basically wanted to do something like this: The columns below the line are red, on the line are yellow, and above the line are green. The need might arise to do more colors than this, so the code should be flexible But almost as important as the final look of the graph itself was the ability to re-use the code without having to rewrite parts of it for each implementation. And I wanted to be able to use it in a flex application using only mxml, but still be able to use it in ActionScript if needed. In the end I wanted to be able to define the threshold or goal as part of the data that the graph used and the code would color the columns based on that data (if it was greater than/less than/equal to). So the code to use the "coloring object" would look something like this (where we define High/Mid/Low colors): <mx :series> </mx><mx :ColumnSeries xField="Month" yField="Income" displayName="Income2"> </mx><mx :itemRenderer> </mx><mx :Component> <utils :ColoredSeriesItemRenderer valueField="Income" thresholdField="Goal"> </utils><utils :thresholdGradients> <mx :Object> </mx><mx :High><mx :Object gradient="[0x55dd55,0x005500]" /></mx> <mx :Mid><mx :Object gradient="[0xdddd55,0x555500]" /></mx> <mx :Low><mx :Object gradient="[0xdd5555,0x550000]" /></mx> </utils></mx> <mx :LineSeries xField="Month" yField="Goal" displayName="Goal"/> But to be flexible I also wanted to be able to define the goal in the code, where I could give it as many ranges with associated colors as I wanted. This code would look something like this: <mx :series> </mx><mx :ColumnSeries xField="Month" yField="Income" displayName="Income1"> </mx><mx :itemRenderer> </mx><mx :Component> <utils :ColoredSeriesItemRenderer valueField="Income"> </utils><utils :ranges> <mx :Array> <mx :Object lowerLimit="280" color="0xFF0000" /> <mx :Object lowerLimit="240" upperLimit="280" gradient="[0xFFFF00,0x55FF55]" /> <mx :Object lowerLimit="220" upperLimit="240" gradient="[0x5555FF,0x000099]" /> <mx :Object lowerLimit="200" upperLimit="220" gradient="[0x0000FF,0x00FF00,0xFF0000]" /> <mx :Object upperLimit="200" color="0xFFFF00" /> </mx> </utils> </mx> Creating a custom item renderer allowed me (and now you too) to change the colors of the columns as they were being created. This works so much better than other solutions I saw (laying a filter on top of the columns) because it automatically changes when the column changes. I created a new object out of it so you can just drop it in the directory where you keep your other library files (and change the package name if needed) and start using it. I have included it along with some sample files in a handy zip file for you… I hope this saves you all the time it could have saved me (if I would have found something similar). Related Listings:
| |||||
| Posted: 07 Nov 2009 09:44 AM PST This Ajax script lets you fetch another page’s content (both needs to be from the same site) and display it on demand within the current page. You can further specify any external .js or .css files that should be loaded at the same time as the external page, as Ajax fetched pages often will be not load these files correctly as they appear within the page’s source. Directions: Step 1: Insert the below into the section of your page:<script type="text/javascript" src="ajaxpagefetcher.js"> /*********************************************** * Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script> Step 2: Then to fetch/ display a page from your domain using Ajax, just call the below function: ajaxpagefetcher.load("container_id", "pageurl_or_path", bustcacheBool, [array_of_js_files], [array_of_css_files]) The parameters in that order are: * The ID attribute of the DIV or some other container on the page that the Ajax page should load inside Ok, with everything said and done, here are a couple of examples: <body> <div id="joe"></div> <script type="text/javascript"> // Fetch and display "content.htm" inside a DIV automatically as the page loads: ajaxpagefetcher.load("joe", "content.htm", true) </script> <div id="bob"></div> <script type="text/javascript"> <!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file--> <a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a> </script> </body> Related Listings:
|
. If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it.
| 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.