Web Development & Stuff » Javascript

CKEditor in iFrame / jQuery UI dialog top offset bug

admin — Fri, 15 Oct 2010 16:37:22 +0000

I had a couple of CKEditors in a jQuery UI dialog box today. The dialog box contained an iFrame with the actual CKEditors inside that.

On the odd occasion when the modal box opened (tested in FireFox 3.6 on the Mac and PC) the vertical scroll position of the iFrame would not be at the top. Instead it was focused on one of the lower CKEditors.

After some Googling and hacking and still no solution I placed this in each CKeditor onReady/instanceReady callback, which did the trick:

1
2
3

CKEditor.on("instanceReady", function(event){

  $(window).scrollTop(0);

});

Stop Javascript event bubbling / propagation with nested html elements using jQuery

admin — Wed, 28 Jul 2010 13:51:29 +0000

You can stop nested elements triggering their parent element event handlers (DOM bubbling) using this handy jQuery method:

http://api.jquery.com/event.stopImmediatePropagation/

I ran into this issue whilst working on a calendar/scheduling app. Where day containing elements needed click events and their child elements needed click events too.

Love the jQuery ;]

Don’t trust the output of innerHTML() or jQuery.html() in Internet Explorer

admin — Sun, 16 May 2010 13:52:30 +0000

Especially if you’re trying to match attributes and their values!

Thankfully Kooilnc, the godsend has a solution:

http://stackoverflow.com/questions/1231770/innerhtml-removes-attribute-quotes-in-internet-explorer

I’ve wrapped that up into a jQuery function here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$.fn.ieInnerHTML = function() { 

  var zz = this.html(),

       z = 

     zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g);

    if (z){

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

        var y, zSaved = z[i];

        z[i] = z[i].replace(/(,

                            function(a){return a.toLowerCase();});

        y = z[i].match(/\=\w+[?\s+|?>]/g);

         if (y){

          for (var j=0;j<y.length;j++){

            z[i] = z[i].replace(y[j],y[j]

                       .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2'));

          }

         }

         zz = zz.replace(zSaved,z[i]);

       }

     }

    return zz;

}

// Usage:

$('#getInnerHtmlOfThis').ieInnerHTML();

Access dynamic jQuery elements that have been added to the DOM after page has loaded

admin — Sun, 08 Nov 2009 10:43:06 +0000

If you wanted to manipulate elements you’d added to a page with jQuery after the DOM had loaded, you used to have to specify event handlers when adding them.

jQuery v1.3 has a handy new ‘live’ method. Which basically allows you to access all elements, whether present at page load or added dynamically afterward with jQuery.

jQuery documentation

Quick click event example:

1
2
3

$("a.deleteRow").live("click", function(){

    # Code to manipulate all matching elements added before or after the DOM has loaded.

}

Submit form with jQuery gotcha

admin — Thu, 29 Oct 2009 15:40:29 +0000

It seems that you can’t submit a form with jQuery using:

1	$('form#myform').submit();

If you have an input in the form with the name attribute set to submit. So this doesn’t work:

1	="submit" name="submit" value="Press to continue" />

Change the name attribute to something else other than submit and it works fine ;]

SWFUpload returns HTTP 401 error after Apache authentication / password protected directory

admin — Thu, 30 Apr 2009 16:38:38 +0000

Uploaded my first site today that uses SWF Upload to handle large file uploads. The admin area of that site had basic Apache HTTP authentication via a .htaccess file.

SWF Upload failed with a 401 error after testing. It seems you can’t use this style of authentication with the current version of SWF Upload. Something to do with a bug/short-fall in Flash.

Anyways, good news as SWF Upload will handle PHP sessions (not looked into RoR sessions yet) therefore you can build your own PHP user system. You need to pass the PHP session variables through, you can use code along the lines of this to pass them:

1
2
3
4
5
6
7

# The post_params variables being the ones of interest.

upload_url : "/media-uploads/upload/",      

post_params: {

  "PHPSESSID" : "",

  "PHPSESSNAME": php echo session_name(); ?>"

},

flash_url : "/flash/swfupload.swf",

HEAD NOSCRIPT CSS validation workaround

admin — Sun, 23 Mar 2008 11:40:22 +0000

I wanted to apply a different set of css styles to a degraded non-javascript version of a page to maintain some accessibility aspects.

I wrestled for a while with the