JavaScript

by

Auto Resize IFRAME Cross Origin

Browser security policies prevent frames from interacting with each other if they are not from the same origin (like domain but even more specific).

However, frames can pass messages to each other.   Here is how you can implement cross-origin iframe auto-resizing based on window.postMessage.

Lets assume we have a parent page that looks like this:

<html>
  <head>
    <title>Parent Page</title>
  </head>
  <body>
     ...
     [iframe id="frame1" src="https://otherdomain.com/frame1.html"]
  </body>
</html>

(assume [] is <> above, sorry about over protective content escaping in wordpress.com)

To enable auto-resizing on this page, add some script to the end of the <head></head> section (or just before </body> if that is where you put them).

This listens for a “message” event and will check to see if it has an action of “resize”.  If so it will update the specified id’s height.

<script>
  window.addEventListener("message",function(e){
    if(e.data.action=='resize') {
      document.getElementById(e.data.id).style.height = e.data.height+'px';
    }
  },
  false
  );
</script>

On the embedded frame source, you need an onload event to send a message:

window.onload = function() { 
  window.parent.postMessage({action:'resize',id:'frame1',height:document.body.scrollHeight+20},'*');
};

Note that we need to pass “frame1” which is the ID of the frame on the parent page.

Then the frames should auto-size to their content.

by

JavaScript console.table()

This is a gem….

Displays tabular data as a table.

This function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns.

In Chrome Developer Tools

console.table([{name: 'jason', age: 36}, {name: 'abid', age: 37}])

IMG_13122017_160135_0

Read more here:

https://developer.mozilla.org/en-US/docs/Web/API/Console/table

by

AES 256 Encryption/Decryption tool released

http://www.appcove.com/passtool/

AppCove developed a very simple user interface to the excellent gibberish-aes encryption library.  This tool allows you to enter a passphrase, some text to encrypt, and encrypt it right in your browser.

No data is sent to the server — AppCove is never aware of the passphrase, plain text, or cipertext.

We use this tool to encrypt passwords and other information so that it can be stored in should-be-secure locations (like Google Sites or gmail).  

Enjoy!

by

Yahoo! Web Player causing YouTube Videos to Restart?

Working on a project recently where we were using an embedded youtube video iframe, as well as the Yahoo! Web Player.  Autoplay was enabled on the youtube video.

If the Web Player was minimized, then the first time the user would click on a media link on the screen — the youtube video would restart!!!

If the Yahoo! Web Player was displayed to start with, then this did not happen.

As it turns out, this is controlled by the wmodeoverride option to the Yahoo! Web Player.  If it is set to false, then the youtube-reload-issue does not happen.

 

http://webplayer.yahoo.com/docs/how-to-set-up/#customize

 

parameter: wmodeoverride

To prevent itself from appearing behind embedded YouTube videos, the Yahoo! WebPlayer changes the wmode setting of these embedded videos. The wmodeoverride parameter allows you to turn this feature on or off. Set wmodeoverride to ‘true’ to turn this feature on and set the parameter to ‘false’ to turn it off. The default setting is ‘true’.

<script type="text/javascript">
    var YWPParams = 
    {
        wmodeoverride: false
    };
</script>

 

 

by

How to Author a *simple* jQuery plugin

I use jQuery as the JavaScript library for most projects. It’s terribly convenient for selecting elements and processing them.

However, jQuery is not JavaScript, and there is a lot of things it cannot do. Rather than writing a separate set of functionality outside of jQuery, why not simply extend it on an application-per-application basis? It really is that easy. Perhaps if you get some functionality that is good enough, you will want to convert them into a formal plugin and post it to http://plugins.jquery.com/…

Here is the document that explains, in depth, how to author plugins.
http://docs.jquery.com/Plugins/Authoring

Here is an example at a very simple plugin that I whipped together while learning about plugins… It’s designed to accept an object of data, and apply it to any of the elements whose name attribute match the key of the data.

jQuery.fn.populate = function(Data) {
   this.each(function() {
      if (this.name in Data)
      {
         switch(this.type)
         {
            case 'text': this.value = Data[this.name]; break;
            case 'checkbox': this.checked = Data[this.name]; break
         }
      }
   });
   return this;
};

To call it… Select all input elements of the #Login form, and populate them with the passed data.

$('#Login :input').populate({ FirstName: 'sammy', LastName: 'jones' });

The .fn attribute of the jQuery object is where you attach new methods. The this member of those functions is set to the current jQuery object. The function must return the current jQuery object (self) unless explicitly stated otherwise.

Iterating through the elements of the current jQuery object should be done with this.each(…).

All in all, it’s very simple, and very powerful to be able to nest custom functionality into the jQuery object within a given application.

Read more at:

by

jQuery mouseout vs. mouseleave

Hello!

jQuery has a mouseout and a mouseleave event. The main difference is in how they handle child elements. Mouseout fires when the pointer moves into or out from child element, while mouseleave doesn’t.

This was causing a slight problem of having some menu’s close when the mouse encountered a link or other child element within the menu, it was triggering the mouseout event of the menu.

The fix, was to convert to mouseleave.

   $("#Nav1_Content > p").mouseleave(CloseTopMenuArea);

http://docs.jquery.com/Events/mouseout