Archives for posts with tag: jquery

My last few days have been spent on a lovely security feature of Internet Explorer, which manifests as an ambiguous “SCRIPT5: Access is denied” message. After some digging, and with some lucky previous experience, I figured out how to get around this.

Cause?

IE sees you take some jQuery (or plain javascript) and do something like $('input:file').click(); and starts to get suspicious. But on the FreshAiR Editor we did this with no nefarious intent; we needed to check some things before file selection and get ready to crop the user’s image once they selected one. When we later called $('form').submit(); everything would load into a same-domain iframe to be ready to send, and then… Access is denied.

Workaround time.

How to solve this? There are Adobe Flash and myriad other uploaders, but I remember implementing an open-source AJAX photo uploader-with-progress-bar in LunchTable a while ago, called qqFileUploader (now, it appears, called Fine Uploader). It was pure HTML/JavaScript/CSS, so I took a peek at how it was done, and came up with this result:

  • Using input buttons with this structure (optionally substituting “Upload Here” for an image):
<div class="button">
    Upload Here
    <input type="file" name="media" />
</div>
  • And styling the transparent file input on top of the text / image to make it clickable:
.button {
    position: relative;
    overflow: hidden;
}
.button input[type=file] {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 118px;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    z-index: 1; /* In case you use an img for input button */
}
/* For effect emphasis... */
.button:hover {
    background-color: blue;
    color: white;
}

You have a customizable, clickable file input that won’t upset Internet Explorer. See the full result on jsFiddle.

$ logout

Advertisements

On the last from-scratch CMS I built (for Radford University’s EMS), I utilized jWYSIWYG for the content editor. It was easy to implement, but had a few bugs (including with the content manager). Before that, I used TinyMCE and its MCFileManager to power Dean J. Baer‘s site, which both worked great, but the file manager required licensing fees. Currently I’m looking at these open source options:

The deciding factor here will mostly be how easy it is to add more robust media features.

I like the idea of on-the-page, limited section editing that Mercury provides, though I’m not a fan of the OS X aesthetic. And I also like what looks to be a simple, clean interface and backend for CLEditor. But this is all conjecture right now, so it’s time to dig in.

$ logout