Building jqLSAdmin – Part 1

I then realized that I was going to need to put this inside of something on the page so that it could even be seen. So, a CSS-only lightbox was the only option that I wanted to face. I’ve abandoned all other lightboxes besides CSS-only ones anyway, so it’s a technique with which I am very familiar. Basic premise of a CSS-only lightbox is that you have two div’s, one contained in the other. The parent div is solid black, and set with an opacity so that you can see through it. The container div is fully visible, and your content goes in there.

At this point, I’ve got a lightbox, I’ve got a fieldset, I’ve got my controls defined. How am I going to do all this construction? I could do it with raw JS, and that might be an option, but I also know that jQuery is somewhat known and noted for being a powerful manipulator of the DOM. Plus, I happen to know it really well and am most comfortable working in it. Go with what you know, right?

However, jQuery may or may not be on every page that this could get used on, so I will have to figure out a way to add jQuery dynamically to the page. I want to have jQuery and I want a relatively recent copy of it. So, the following code is an easy check to see if jQuery is present and of sufficient lineage:

if (window.jQuery && 1 > jQuery.fn.jquery) {
    alert("jQuery in da hizzouse, fool!");
}

Ultimately, loading jQuery in is as easy as defining a new script element, setting the src to be the CDN of jQuery’s latest incarnation, and adding that script element to the head of the page. I took care of that with the following code:

script=document.createElement('script');
script.src='http://code.jquery.com/jquery-latest.min.js';
var head=document.getElementsByTagName('head')[0];
head.appendChild(script);

The other thing which I was very aware that I was going to need to do was check to see if localStorage was even supported in the browser which was being used. If localStorage isn’t supported, it sorta makes this whole exercise very irrelevant. From my research, two things became very evident. The first was that there were two conditions which had to be checked. One was whether localStorage was supported, and the second was whether it was possible to add a value to the localStorage due to browser-imposed quotas.

After a fair bit of research around the interwebz, the following pair of tests seemed to do the trick:

if (typeof(localStorage) == 'undefined' ) {
        alert('Your browser does not support HTML5 localStorage. Try upgrading.');
        return false;
} else {
    try {
        localStorage.setItem('vk', 'Vankoder');  //Try setting something
    } catch (e) {
         if (e == QUOTA_EXCEEDED_ERR) {
            alert('Quota exceeded!'); //data not saved due to quota exceed so throw an error
            return false;
        }
    }
    localStorage.removeItem('vkname'); //Get rid of dummy value
}

In short, this code tests to see if localStorage is recognized, and if it is, tries to add a test value to it. Now between this and including jQuery, we have the foundation where we can begin to actually build the rest of the tool. I’ll cover that in the next post.