Ajax Updates |
- Phoogle Maps v2.03
- Heatmap For Your Website
- GreyBox: An Easy Javascript Popup Box
- Add Reflection with Reflection.js 1.6
- Asynchronous upload – Like AJAX
- Tables with Style CSS
- Displaying Percentages with CSS
- CSSFly – On the Fly Web Online Web Editing
| Posted: 10 Nov 2009 02:47 PM PST With about 5 lines of code you can display a customized Google Map on your website.
CakePHP is a great PHP web application framework for rapid PHP application development. Download: http://www.systemsevendesigns.com/files/phoogle.zip  Related Listings:
| |||||
| Posted: 10 Nov 2009 02:41 PM PST ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones. ClickHeat is an OpenSource software, released under GPL licence, and free of charge. Requirements Features Related Listings:
| |||||
| GreyBox: An Easy Javascript Popup Box Posted: 10 Nov 2009 02:37 PM PST Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: * It does not conflict with pop-up blockers <a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a> It takes very little code to display image galleries: <a href="greybox/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley"> <img src="greybox/night_valley_thumb.jpg" /> </a> <a href="greybox/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile"> <img src="greybox/salt_thumb.gif" /> </a> Installation Append following to your header section. GB_ROOT_DIR is the URL where static files are located: <script type="text/javascript"> var GB_ROOT_DIR = "http://mydomain.com/greybox/"; </script> GB_ROOT_DIR should be absolute. Append also following scripts and one stylesheet: <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> Step 3 You are ready to use GreyBox. Look on the documentation to see details and examples. * Showing external pages What browsers are supported? * Safari Other browsers may also be supported. Related Listings:
| |||||
| Add Reflection with Reflection.js 1.6 Posted: 10 Nov 2009 02:31 PM PST Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB. Reflection.js comes into it’s own with forum avatars; you can apply a reflection effect to every avatar on your forum or blog without any additional server work. Features * Fun and easy to implement! Just add class=”reflect” to your images Related Listings:
| |||||
| Asynchronous upload – Like AJAX Posted: 10 Nov 2009 09:34 AM PST Here a simple function to asynchronous upload using iframe. Dont reload the page. Like AJAX but its not ajax.You dont need to create the iframe, the function do this. Work like Gmail upload and Google pages upload. Tested in Firefox 2.0, Internet Explorer 6.0 e Opera 9.1. If you test in another browsers, please write a comment. 1) Put the code above in a file called micoxUpload.js /* standard small functions */ function $m(quem){ return document.getElementById(quem) } function remove(quem){ quem.parentNode.removeChild(quem); } function addEvent(obj, evType, fn){ // elcio.com.br/crossbrowser if (obj.addEventListener) obj.addEventListener(evType, fn, true) if (obj.attachEvent) obj.attachEvent("on"+evType, fn) } function removeEvent( obj, type, fn ) { if ( obj.detachEvent ) { obj.detachEvent( 'on'+type, fn ); } else { obj.removeEventListener( type, fn, false ); } } /* THE UPLOAD FUNCTION */ function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){ /****** * micoxUpload - Submit a form to hidden iframe. Can be used to upload * Use but dont remove my name. Creative Commons. * Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1 * Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - micoxjcg@yahoo.com.br * Parametros: * form - the form to submit or the ID * url_action - url to submit the form. like action parameter of forms. * id_element - element that will receive return of upload. * html_show_loading - Text (or image) that will be show while loading * html_error_http - Text (or image) that will be show if HTTP error. *******/ //testing if 'form' is a html object or a id string form = typeof(form)=="string"?$m(form):form; var erro=""; if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";} else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";} if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";} if(erro.length>0) { alert("Error in call micoxUpload:\n" + erro); return; } //creating the iframe var iframe = document.createElement("iframe"); iframe.setAttribute("id","micox-temp"); iframe.setAttribute("name","micox-temp"); iframe.setAttribute("width","0"); iframe.setAttribute("height","0"); iframe.setAttribute("border","0"); iframe.setAttribute("style","width: 0; height: 0; border: none;"); //add to document form.parentNode.appendChild(iframe); window.frames['micox-temp'].name="micox-temp"; //ie sucks //add event var carregou = function() { removeEvent( $m('micox-temp'),"load", carregou); var cross = "javascript: "; cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); "; $m(id_element).innerHTML = html_error_http; $m('micox-temp').src = cross; //del the iframe setTimeout(function(){ remove($m('micox-temp'))}, 250); } addEvent( $m('micox-temp'),"load", carregou) //properties of form form.setAttribute("target","micox-temp"); form.setAttribute("action",url_action); form.setAttribute("method","post"); form.setAttribute("enctype","multipart/form-data"); form.setAttribute("encoding","multipart/form-data"); //submit form.submit(); //while loading if(html_show_loading.length > 0){ $m(id_element).innerHTML = html_show_loading; } } 2) Include this file in your HTML <script type="text/javascript" src="micoxUpload.js"></script> 3) Parameters of micoxUpload function: 1. form – the form to submit or the ID of a form . 4) Ok. Now you have a lot of forms to call the Asynchronous upload function. 3 Examples: 4.1) Basic from a button (or input-type-button) in a form: <legend>Basic use</legend> <form> <input type="file" name="name" /> <div id="upload_1" class="recebe"> </div> <button onClick="micoxUpload(this.form,'upa.php','upload_1','Loading...','Error in upload'); return false;" type="button">test</button> </form> 4.2) When input-file lost focus (onblur): <fieldset> <legend>On blur use</legend> <form> <input type="file" name="name" onchange="micoxUpload(this.form,'upa.php','upload_2','Loading...','Error in upload')" /> <div id="upload_2" class="recebe"> </div> </form> </fieldset> 4.3) Making acessible whitout JavaScript : <fieldset> <legend>Unobstrusive</legend> <form action="upa.php" target="_blank"> <input type="file" name="name" onchange="micoxUpload(this.form,'upa.php','upload_3','Loading...','Error in upload')" /> <div id="upload_3" class="recebe"> </div> <button type="submit">Go</button> </form> </fieldset> Related Listings:
| |||||
| Posted: 10 Nov 2009 09:04 AM PST It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn't as exciting. First, if you have some tabular data (you know, like a spreadsheet with rows and columns) that you'd like to spiffy up, pop it into a table — it's rightful place! To add more semantics to your table — and coincidentally to add more hooks for CSS — break up your table into row groups. There are three types of row groups: the header (thead), the body (tbody) and the footer (tfoot). You can only have one header and one footer but you can have as many table bodies as is appropriate. Table Striping To improve scanning information within a table, a common technique is to style alternating rows. Also known as zebra tables. Whether you apply it using a class on every other row or turn to JavaScript to accomplish the task, a handy-dandy trick is to use a semi-transparent PNG as your background image. This is especially useful over patterned backgrounds. tbody tr.odd td { background:transparent url(background.png) repeat top left; } * html tbody tr.odd td { background:#C00; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='background.png', sizingMethod='scale'); } We turn off the default background and apply our PNG hack to have this work in Internet Explorer. Did you know you could style a column? That's right. You can add special column (col) or column group (colgroup) elements. With that you can add border or background styles to the column. <table> <col id="ingredients"> </col><col id="serve12"> </col><col id="serve24"> ... Fun with Backgrounds Pop in a tiled background to give your table some character! Internet Explorer's PNG hack unfortunately only works well when applied to a cell. To figure out which background will appear over another, just remember the hierarchy: The Future is Bright Once browser-makers start implementing CSS3, we'll have more power at our disposal. Just with :first-child and :last-child, you can pull off a scalable version of our previous table with rounded corners and all — unfortunately, only Firefox manages to pull this one off successfully. And the selector the masses are clamouring for, nth-child, will make zebra tables easy as eggnog. |
Related Listings:
- Tables with Style It might not seem like it but styling tabular data...
- Tablecloth : Style your Tables Tablecloth is lightweight, easy to use, unobtrusive way to add...
- New Sort Table Rows with Ajax Simple sort script using Stuart Langridge’s sortabe.js Some days ago...
Displaying Percentages with CSS
Posted: 10 Nov 2009 08:53 AM PST
In turning this part of the design into something flexible on the website I saw two options; clever CSS, or Lots of Images. I decided that Lots of Images was a bad idea
Features:
* If they were generated in PHP you've got that extra overhead
* For each percentage bar you'd need to download another image – extra bandwidth & slower for the user
* Could get difficult for a designer to update (and, it's an image after all)
The Code
Okay, it's not really that clever, it's CSS not rocket science. It does however mean that no matter how many percentage bar's will be displayed on the page the user will only need to wait for two images to be downloaded. I think it's a nice solution that you might be interested in. Here's the XHTML & CSS:
<img src="/images/percentImage.png" alt="9.5%" class="percentImage" style="background-position: -110.315px 0pt;" />
img.percentImage { background: white url(/images/percentImage_back.png) top left no-repeat; padding: 0; margin: 5px 0 0 0; background-position: 1px 0; } If you understand XHTML/CSS, you'll see there's two images involved. The first image is the border for the widget, inside of the border it's transparent:
percentImage.png
The second image is the bar's color, split into two halves. The first 50% is the “full” color, the remaining 50% being the “empty” color:
percentImage_back.png
What's it doing
Notice, the alt attribute of the img tag (I'm with you Roger) is the percentage that the image represents for screen readers etc. – this is important information and we want to make sure it's accessible!
The width of the img tag will always be the same regardless of the width of the background image we set in the CSS, knowing this we can position the background to the top left (as default) and set it not to repeat. The background-position is set to 1px so that the image fits within the border in the first image, however, we could make the image a little large if we wanted to.
The inline style handles what pecentage we want to display in the box by changing the position of the background-image. In our case a PHP script handles all the math for us (which is why it's a little too exact, however I believe browsers will round that to the nearest pixel).
I'll throw a few other thoughts out there for anyone interested in using this method:
* When inline styles become redundant in the XHTML standard
* Page Zoom (IE7) – how would that change the display of this widget
Demo: http://www.barenakedapp.com/the-design/displaying-percentages
Source: http://www.barenakedapp.com/the-design/displaying-percentages
Related Listings:
- Vertical bar graph using php Who wants to use Excel to make a new graph...
- Decoy Fix for IE Duplicate Characters Bug Among the countless IE annoyances, the duplicate character bug is...
- CSS For Bar Graphs Having a working knowledge of XHTML and CSS when developing...
CSSFly – On the Fly Web Online Web Editing
Posted: 10 Nov 2009 08:41 AM PST
CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.
How it works:
CSSFly caches the HTML-Code and the CSS-Files of your demanded Website and opens a frameset with two frames. The one frame contains the code-data and makes it editable using a custom HTML-textarea. The other frame agitates as the display-container for the changed website. Within every change in the HTML- or CSS-Code, the display-container will be refreshed.
But what do I tell you, simply check the code by viewing this website’s source-code 
Demo: http://www.cssfly.net/
Source: http://www.cssfly.net/
No related Listing.
| 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.