For a simple version use the download button to grab it. This is the snazzy version.


I was tooling around mint.com the other day and noticed that after a certain amount of time a notice appeared at the top of the screen to inform me that I was about to be logged out. Then after the time ran out I was returned to the login screen.
A few weeks ago, a coworker was asking if there was a better way to deal with being logged out on a backend system I put together. Once I saw the mint.com system I knew I had to try to build something like it. So I did, it’s not exactly the same because of the system I’m using but it works just as well and looks good doing it – I also wanted it to be a simple addition.
Getting started;
Have some idea of how to use jQuery, I don’t think what I’ve done here is hard – but at least understand some basic concepts like the $(document).ready() function,.fadeIn(),.click(),etc. For PHP, have an idea of $_GET variables, and header locations. Then some knowledge of Javascript itself, and an understanding of loops and counting.
In my mind, I can hear the them to Picture Pages playing in the background – because I want to remind you that in my quest to be a better web developer (and share with the world) I started this “toolbox” so I could keep a cataloged stockpile of simple easy to use tricks to make my life easier – plus I wanted to share…
This is documented somewhere on TinyMCE’s site, but it’s may not be easy to find. It’s simple little trick that I use as a helper to a simple image manager to go along with TinyMCE (since you have to pay for an image manager).
In my day to day life, it seems like I need a backend to every site I build, no one wants simple pages anymore. So I end up with a lot of forms, which have a lot of textareas in them. I like using TinyMCE as the wysiwyg editor for those textareas. This also calls for adding images and TinyMCE charges for the built in feature above using a url for an image. This presented me with a problem, I have end users who aren’t savvy enough to upload images (FTP) and then get the url to add the image to the editor, but they want images.
It’s no secret – well if you’ve been listening to me for the past few days, that I’ve been upset with GoDaddy’s free web hosting. I have a side project for a client, and it needed an admin back end done – something to edit the pages, nothing crazy or too difficult and since I love JQuery, I add in some eye candy because it makes it easier to use.
Well as I’m cruising along, certain things that I’m use to doing a certain way just aren’t working. I narrowed down what I thought the problem was and it points right to the stupid ad banner that GoDaddy uses – well more to the point the mechanism they employ to add it to the pages.
It goes as far as attaching to an AJAX request reponse. So when you send your request and you get back a nice little JSON object back, it has some iframe crap stuck to the end of it. It really through me for a loop for awhile. Luckily Scott (and old coworker and friend of mine) got me pointed in the right direction.
In one of my projects, I thought it would be cool to have a drop down select box trigger a slide down for the results, then slide up and slide back down when a new choice was selected. Seemed pretty easy, but when I got into it, it wasn’t as easy as I thought at first. But in all reality it turned out to be super easy.
I did some digging around to figure out how to tell if my div container (the one that would hold all the results) was visible or not, maybe I should just read the entire JQuery documentation – HA! Instead I turned to google and found that you can check for :hidden.
$("#div-id").is(":hidden");
So I can base my logic on that, if it’s hidden do this or if it’s not do this…
That was perfect, now it was just a matter of having it do exactly what I wanted. So if the div wasn’t hidden, I needed to hide then show it again with the new results. Or if it was hidden, show the results. Continue Reading »
I’m the middle of building a new company website, something that will bring them into the 21st century. With that thought in mind, I need to develop a back end for employees to log in and update their own information. This is of course centered around their log in credentials.
So in the their “dashboard” they can update their password. But if they are like me, sometimes they type faster then they realize and might have hit different keys by mistake, so I thought I would give them the ability to show their password in readable characters if they wanted to. This allows them to check over what they have typed and verify they have what they want. I think it’s easier then using a double password field that just takes more time to fill in – but that’s just me.