Archive

Archive for the ‘javascript’ Category

Escape CSS Selector

March 26th, 2012 No comments

Frequently, I am composing css selectors for jQuery dynamicly and need to escape special characters.  Especialy in CakePHP when you are trying to get all inputs with a name like “data[Contact][firstName]”.

Karl Varga has a solution – http://kjvarga.blogspot.com/2009/06/jquery-plugin-to-escape-css-selector.html

Thanks Karl!

Categories: css, javascript Tags:

How to obtain a users time zone via Javascript

January 2nd, 2012 No comments

This approach isn’t perfect, but for US users, it should be correct 100% of the time.

This blog author describes how he has created a function that uses the Javascript Date objects getTimeZoneOffset method to test various dates and determine what timezone the users computer is likely set to.

Here is the post: http://blog.redfin.com/devblog/2007/08/getting_the_time_zone_from_a_web_browser.html

Categories: javascript Tags:

Using Google CDN jQuery and jQuery ui.

July 28th, 2011 No comments

I add these to almost every page I create. Next time you want to include jQuery and jQuery ui in a page, just copy these three tags and drop them in your head. Viola! jQuery, courtesy of Google! And if everybody did this, the web would be faster…




Categories: javascript, jquery Tags:

Escaping Strings for use in Javascript from PHP

June 20th, 2011 No comments

I ran into a problem today on an application where building some inline javascript (which btw I NEVER recommend, I inherited this from someone else…   Write javascript that takes an object as a param and use json_encode instead…)…  And some data in our database had carriage returns…  Which was breaking our javascript.  I wanted to escape the string before putting it in the javascript but I didn’t want to write my own function.  After doing some searching, I discovered that json_encode will return a valid javascript string if you pass it a string instead of an array!!!

Note:  json_encode will put double quotes on the end of your string, so to fix this, you need to strip them… Use preg_replace:


function javascript_encode($toEncode){
  return preg_replace("/^\"(.*)\"$/", "$1", json_encode($toEncode));
}

Cheers!

Joey

Categories: javascript, php Tags:

Printing From Javascript

June 17th, 2011 No comments

This one is easy…


window.print();

Categories: javascript Tags:

Page refresh with JavaScript

June 16th, 2011 No comments

The easiest way is to do a: window.location.reload();

It is important though that you use the “POST/Redirect/Get” pattern on your pages, otherwise a window.location.reload() will cause the browser to resend any post data it sent on the last request. 

Categories: code snippets, javascript Tags:

nicEdit Firefox center and right align bug patch.

July 28th, 2010 2 comments

If you are using nicEdit on content editable areas instead of the iFrame method, then you may have run across the FireFox bug that prevents you from changing the text alignment on the first line of a content editable element. 

As a work around, change the nicCommand method in nicEdit.js (Line 610 or so), to the below. This code catches the error that firefox throws, inserts a temporary div immediately before the selection, repeats the call that failed (the bug only causes the alignment to fail when it is the very first element in the content editable), and then removes the temporary div.

nicCommand : function(cmd, args) {
        if ((cmd == 'justifyright') || (cmd == 'justifyleft') || (cmd ==
        'justifycenter') || (cmd == 'justifyfull')) {
              try {
                 document.execCommand(cmd, false, null);
              }
              catch (e) {
                 //special case for Mozilla Bug #442186
                 if (e && e.result == 2147500037) {
                    //probably firefox bug 442186 - workaround
                    var range = window.getSelection().getRangeAt(0);
                    var dummy = document.createElement('div');

                     //To restore the range after collapsing for triple click bug...
                     var restoreSelection = false;                     
                    dummy.style.height="1px;";

                    //find node with contentEditable


                    //Triple Click selection Problem in mozilla, the selection contains the content editable div, which creates a problem for some reason, so we collapse the selection to the end, and then re-select everything...
                    if(range.startContainer.contentEditable == 'true'){
                        window.getSelection().collapseToEnd();
                        restoreSelection = true;
                    }

                    var ceNode = window.getSelection().getRangeAt(0).startContainer;

                    while (ceNode && ceNode.contentEditable != 'true')
                       ceNode = ceNode.parentNode;

                    if (!ceNode) throw 'Selected node is not editable!';

                    ceNode.insertBefore(dummy, ceNode.childNodes[0]);                    
                    document.execCommand(cmd, false, null);
                    dummy.parentNode.removeChild(dummy);

                     //RestoreSelection if we changed it...
                     if(restoreSelection){                        
                        window.getSelection().addRange(range);
                     }
                 } else if (console && console.log) console.log(e);
              }
           } else {
              document.execCommand(cmd, false, args);
      }
    }

JavaScript Primer

September 10th, 2009 No comments

So you want to learn JavaScript huh? Way to go! SOA powered by JavaScript is the future of the web. (Trust me).

What is JavaScript? It’s a scripting language that all modern web browsers run that allows you to manipulate web pages and do sweet stuff.

To get started, first, you need an easy way to run JavaScript. While you could write javascript in an html page and run it, it’s generally easier to be able to run scirpts without making an html page. To do this, install Firebug, and use it’s console. (Just install firebug, click on the little cock-roach icon in the lower left of Firefox, and click the console tab, now reload your window.).

Once you have the firebug console working, type the following into the console, and you should get a popup.

alert('Hello World!');

Here’s a video that shows how to install and use Firebug:

If you want to learn more, head over to w3schools’ JavaScript tutorial.

Categories: html, javascript Tags: