xperiments.es » Javascript http://xperiments.es/blog Desarrollo web freelance | Expertos en flash | Barcelona Perpignan Sun, 22 Jan 2012 00:14:52 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 i5hare project launched. http://xperiments.es/blog/en/i5hare-project-launched/ http://xperiments.es/blog/en/i5hare-project-launched/#comments Sun, 22 Jan 2012 00:13:00 +0000 xperiments http://xperiments.es/blog/?p=483

i5hare Main Screen capturei5hare Capture

i5hare Main Screen capture

i5hare lets you share links instantly between any device.

  • No download or installation required
  • Share links between 2 computers
  • Share links from your phone to your desktop
  • Share links from your desktop to your phone
  • Share links phone-to-phone
  • Messages are Securely Encrypted
  • No more manually copying links!!!
]]> http://xperiments.es/blog/en/i5hare-project-launched/feed/ 0 StageWebViewBridge. Updated. Automatic cache creation. http://xperiments.es/blog/en/stagewebviewbridge-updated-automatic-cache-creation/ http://xperiments.es/blog/en/stagewebviewbridge-updated-automatic-cache-creation/#comments Wed, 06 Apr 2011 01:42:30 +0000 admin http://xperiments.es/blog/?p=452

StageWebViewBridge class was upgraded with new features for managing files in the cache.

With the new system it is possible to forget if a cached file is updated, the system does everything for us and finally we get 2 output directories. These 2 directories are the directories we must include in our final package release.

The new methods and properties:

1
2
// sets Debug mode on/off
StageWebViewBridge.DEBUGMODE = true/false;
1
2
3
4
5
6
// sets the default dir to 'htmlFiles'
StageWebViewBridge.setRootFolder('htmlFiles');

// this will create 2 new dirs
app:/htmlFilesCache
app:/htmlFilesSource
1
2
3
4
5
// Change the extensions of the files to parse.
// Default extensions are ["html","htm","css","js"]

// now limit the files to be html or js, and left intact the css and htm files
StageWebViewBridge.setSourceFileExtensions(['html','js']);

More info in the official project page: stagewebviewbridge

]]> http://xperiments.es/blog/en/stagewebviewbridge-updated-automatic-cache-creation/feed/ 0 StageWebView StageWebViewBridge Communicating between actionscript and javascript and vice versa http://xperiments.es/blog/en/stagewebviewbridge-comunicacion-entre-actionscript-y-javascript-y-viceversa/ http://xperiments.es/blog/en/stagewebviewbridge-comunicacion-entre-actionscript-y-javascript-y-viceversa/#comments Sat, 26 Mar 2011 19:56:49 +0000 admin http://xperiments.es/blog/?p=444

I have made an extended StageWebView Class that lets you:

* Communicate Actionscript with Javascript.
* Communicate Javascript with Actionscript.
* Load local files and resources in a easy way.
* Extend loadString method with AS3 – JS communication.

By example you can call javascript from as3

1
2
// call javascript with callack function
webView.bridge.call('someFunctionToCall', callBackFunction, ...arguments );

// reference local resources in a easy way

1
<img src="appfile:/image.png">

You can find it at:

http://code.google.com/p/stagewebviewbridge/

I will post a tutorial here…

]]> http://xperiments.es/blog/en/stagewebviewbridge-comunicacion-entre-actionscript-y-javascript-y-viceversa/feed/ 0 Injecting inline formated xml in javascript http://xperiments.es/blog/en/inyectando-xml-con-formato-dentro-de-javascript/ http://xperiments.es/blog/en/inyectando-xml-con-formato-dentro-de-javascript/#comments Wed, 26 Jan 2011 15:16:04 +0000 admin http://xperiments.es/blog/?p=425

Sometimes is good tho have some code like this:

1
2
3
4
var html =
<form>
    <input type="text">
</form>;

But for now is not posible to do until E4X is adopted by all the browsers…

A tricky way to do it is to use the javascript /*! comments */ inside a function definition, to store the real formated xml.

How to define a variable in comments:

1
2
3
4
5
6
7
    /*!
    {"embed":{ "id":"form" } }
    <form>
        <input type="text" name="user"/>
        <input type="text" name="password"/>
    </form>
    */

First line begins with a normal multiline comment /* and the ! simbol, ATTENTION, that way, starting width /*! we tell some javascripts mimimizers that this is a special comment and they must left the comments as is in the source code.
Second line tells the parser the variable asignation name of the content.
The declaration must end width the close comment tag */ in a new line.

Full example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var data = function()
{
    /*!
    {"embed":{ "id":"form" } }
    <form>
        <input type="text" name="user"/>
        <input type="text" name="password"/>
    </form>
    */

    /*!
    {"embed":{ "id":"button"} }
        <button value="Send">
    */                 
}
var parsedData = window.parseEmbeds(data);
alert( parsedData.form )
alert( parsedData.button );

The main parseEmbeds function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
(function(window)
{
    window.parseEmbeds = function( fn, opt )
    {  
        var dataObj = {}
        var regex_comments = /\*(.|[\r\n])*?\*/gi;
        var code = fn.toString().match( regex_comments );
        var comment;
        var lines;
        var outputString;
        var trim11 =function(str){str = str.replace(/^\s+/, '');for (var i = str.length - 1; i >= 0; i--) {if (/\S/.test(str.charAt(i))) {str = str.substring(0, i + 1);break;}}return str;};
        for( var i=0; i<code.length; i++ )
        {  
            comment = code[ i ];
            if( comment.indexOf('{"embed":')!=-1 )
            {
                lines = comment.split('\n');
                outputString = "";
                for( var e=2; e
    <lines.length-1; e++ )
                {
                   outputString+=trim11(lines[e]);
                }
                dataObj[ JSON.parse( lines[ 1 ] ).embed.id ] = outputString;
            }
        }
        return dataObj;
    }
})(window);
]]> http://xperiments.es/blog/en/inyectando-xml-con-formato-dentro-de-javascript/feed/ 0 jsPDF An javascript utility library for generate PDF’s http://xperiments.es/blog/en/jspdf-utilidad-javascript-para-generar-pdfs/ http://xperiments.es/blog/en/jspdf-utilidad-javascript-para-generar-pdfs/#comments Mon, 10 May 2010 15:36:04 +0000 admin http://xperiments.es/blog/?p=384

jsPDF is a javascript utility library for generate PDF’s
With only 5.8kb it let us to generate PDF’S dynamically.
Is compatible with Safari, Firefox 3.5 y iPhone Safari.

1
2
3
4
5
6
7
8
9
10
11
jsPDF.init();
jsPDF.addPage();
jsPDF.text(20, 20, 'Hello world!');
jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
jsPDF.addPage();
jsPDF.text(20, 20, 'Do you like that?');

// Making Data URI
var out = jsPDF.output();
var url = 'data:application/pdf;base64,' + Base64.encode(out);
document.location.href = url;
]]> http://xperiments.es/blog/en/jspdf-utilidad-javascript-para-generar-pdfs/feed/ 0 iPhone & iPod Detection http://xperiments.es/blog/en/detectando-iphone-ipad-ipod/ http://xperiments.es/blog/en/detectando-iphone-ipad-ipod/#comments Thu, 06 May 2010 20:23:04 +0000 admin http://xperiments.es/blog/?p=378

For detecting iPhone / iPod / iPad users and redirecting them to their iPhone-compatible website you can use this simple code snippets:

PHP

1
2
3
4
5
6
7
8
9
if(
    strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
    strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ||
    strstr($_SERVER['HTTP_USER_AGENT'],'iPad')
)
{
    header('Location: http://yoursite.com/iphone');
    exit();
}

Javascript

1
2
3
4
5
6
7
8
if(
    (navigator.userAgent.match(/iPhone/i)) ||
    (navigator.userAgent.match(/iPod/i)) ||
    (navigator.userAgent.match(/iPad/i))
)
{
    //Your redirection code here
}

.htaccess

1
2
3
4
5
6
7
8
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
]]> http://xperiments.es/blog/en/detectando-iphone-ipad-ipod/feed/ 0 Ultra-light jQuery calendar http://xperiments.es/blog/en/ultra-light-jquery-calendar/ http://xperiments.es/blog/en/ultra-light-jquery-calendar/#comments Thu, 29 Apr 2010 21:35:42 +0000 admin http://xperiments.es/blog/?p=371

New concept for date selection jquery calendar.

Autor Blog: http://roberto.open-lab.com/2010/04/06/ultra-light-jquery-calendar/
Download page: http://bugsvoice.com/applications/bugsVoice/site/test/calendarPickerDemo.jsp
Download: Ultra-light jQuery calendar

]]> http://xperiments.es/blog/en/ultra-light-jquery-calendar/feed/ 0 Bookmarklet to save selected photos from a page. http://xperiments.es/blog/en/bookmarklet-para-guardar-las-imagenes-que-seleccionemos-de-una-pagina-web/ http://xperiments.es/blog/en/bookmarklet-para-guardar-las-imagenes-que-seleccionemos-de-una-pagina-web/#comments Sun, 07 Mar 2010 21:03:49 +0000 admin http://xperiments.es/blog/?p=306

Imagine you need to copy a lot of images from a page, but not all.

Bookmarklet to the rescue!!

Drag to the toolbar
GetPageImages
SavePageImages

Usage
First of all whe need a page with some images…
In this page, press the GetPageImages link in your toolbar to get a listing of all the images in the page.
Select the desired images by clicking in it.
Press the SavePageImages link in your toolbar

Save your page with “save as” command and you will get the images in a folder…

]]> http://xperiments.es/blog/en/bookmarklet-para-guardar-las-imagenes-que-seleccionemos-de-una-pagina-web/feed/ 0 2 Textile javascript editors for use in your projects http://xperiments.es/blog/en/2-editores-javascript-textile-para-usar-en-tus-proyectos/ http://xperiments.es/blog/en/2-editores-javascript-textile-para-usar-en-tus-proyectos/#comments Sun, 07 Mar 2010 00:45:09 +0000 admin http://xperiments.es/blog/?p=292

2 Textile javascript editors for use in your projects:

Textile Editor Helper


Sitio web:Textile Editor Helper
Download:Textile_Editor_Helper

Sanskrit


Sitio web:Sanskrit
Download:sanskrit

]]> http://xperiments.es/blog/en/2-editores-javascript-textile-para-usar-en-tus-proyectos/feed/ 0 innerHTML removes attribute quotes in Internet Explorer http://xperiments.es/blog/en/innerhtml-borra-las-comillas-de-los-atributos-en-internet-explorer/ http://xperiments.es/blog/en/innerhtml-borra-las-comillas-de-los-atributos-en-internet-explorer/#comments Sat, 20 Feb 2010 01:38:57 +0000 admin http://xperiments.es/blog/?p=269

After losing 2 hours for an unknown XML parsing error, I have discovered that the results of innerHTML in Internet Explorer are wrong.

1
2
3
4
5
6
7
8
// Original Source code of document
<div id="container">container</div>
// Result of innerHTML in document.getElementById('content')

//Firefox
<div id="container">container</div>
//Internet Explorer
<DIV id=container>container</DIV>

The solution: innerXHTML

1
2
var container = document.getElementById('container');
var code = innerXHTML(container);

Download innerxhtml

]]> http://xperiments.es/blog/en/innerhtml-borra-las-comillas-de-los-atributos-en-internet-explorer/feed/ 0