The Dev Shack

Nifty jQuery Plugin to Notify Users They Are Leaving Your Site

mfleming — Thu, 15 Mar 2012 11:11:38 +0000

I am sure at some point in your development you have worked with a client that is required to notify users they are clicking a link and leaving their site. Yesterday I needed to provide this functionality and quickly searched for a jQuery solution. I came across a plugin named LeaveNotice that does the job quite nicely. After moving over the required CSS and JavaScript files, all you need to do is add a rel attribute to your HREF tag and that activates the notice. One thing I really liked about this method is it does not force the user to click through from the notice to continue to the external link. It displays the message and if the user does not click to continue after a set number of seconds, it automatically takes you to the external link. If you have the need for something like this, I would recommned giving this a try.

Check out LeaveNotice.

Adobe Air Notification Demo

mfleming — Wed, 29 Sep 2010 23:54:42 +0000

To go along with my previous post I have put together a demo so that you can download the source and see how the notifications work. As I was starting to zip up the source code I saw a comment on my previous post from Ray that made me think about a possible issue. Running a test using task manager, I quickly saw that every time I clicked the button to display the notification the memory used by AIR rose a little. With every click it rose higher and higher and never went back down. The problem was the main app window spawned a new window for the notification but never closed that window. I was able to solve this by using air.Timer. It sets up a timer that runs a function once it reaches the limit you provide. So setting this number a second or so after the notification fades out, allows it to close the notification window via nativeWindow.close();

The source code is below. If you are using Aptana Studio, you should be able to promote it to a project and then run it. I am open to suggestions on how to streamline this if possible.

Download Source Code: Notification-Demo.zip

Growl Type Notifications in Adobe AIR

mfleming — Wed, 29 Sep 2010 18:24:42 +0000

The past week or so I have been able to work on my first Adobe AIR app using HTML/JavaScript. So far I have been very impressed with what you can build in AIR. The application I have been working on pings a web service via jQuery and needs to pop up an alert to the user that new content is available for viewing. The most difficult piece for me so far has been building the notification functionality. My requirements called for notifications that were similar to those of some of the AIR based Twitter apps. In the lower right corner of the screen a notification should display then auto hide after a given time frame. I was able to get this working, but I was not happy with the display portion of the notification. It just appeared clunky to me.

On my quest to find another way to accomplish this I joined the newly created Google Group for AIR with HTML and JavaScript. I had mentioned in a post there that I had struggled a bit with the notifications. Andy Matthews replied back and made me aware of jQuery plugin named BlockUI that allowed you to create Growl type notifications. That is exactly what I was looking for. I was able to modify some of the code I already had and implement the new plugin. The results were great and were exactly what I needed. The plugin also allows you to easily change the opacity, fade in and fade out times, etc…

There are two parts of code here that makes this work. The first bit of code lives in my main HTML file for my application. This code creates a new window that will essentially be the holder of the notification itself. The last two lines of this code tell it to spawn my window and load the results of an HTML file into it.

function displayNotification()
{
	var options = new air.NativeWindowInitOptions();

	options.type = air.NativeWindowType.LIGHTWEIGHT;
	options.transparent = true;
	options.systemChrome = air.NativeWindowSystemChrome.NONE;

	var bounds = null;
	var screen = air.Screen.mainScreen.visibleBounds;
	var windowHeight = 150;
	var windowWidth = 400;

	bounds = new air.Rectangle(
		screen.width - windowWidth - 40,
		screen.height - windowHeight - 50,
		windowWidth,
		windowHeight
	);

	var notification = air.HTMLLoader.createRootWindow(
		true,
		options,
		false,
		bounds
	);

	notification.paintsDefaultBackground = false;
	notification.stage.nativeWindow.alwaysInFront = true;
	notification.navigateInSystemBrowser = true;

	var NOTIFY_SOURCE = "growl.html";
	notification.load( new air.URLRequest( NOTIFY_SOURCE ) );
}

So now that we have our window fired off, we need to create the associated HTML page that contains the notification itself. This is where the plugin comes into play. You can see from the code below that all the HTML page does is fire off the jQuery function to create our notification. The plugin will then handle the display of the message, which is simple HTML code wrapped into a DIV. I did create a stylesheet that I use for the notifications that is included as well.



	Notify

	

	
 	
	




    New Items Available
    New articles have been posted

The result is a nice looking notification that displays, then fades out after a few seconds.

Again, thanks to Andy for pointing me over to the jQuery BlockUI plugin.

Twitter.com Security Issue

mfleming — Tue, 21 Sep 2010 12:41:29 +0000

Twitter.com is currently being exploited via an onmouseover security issue. You can read more about this via Graham Cluley’s blog. I would highly avoid Twitter.com until this get’s resolved, and would stick to using a desktop app like TweetDeck or Seesmic, etc…

Finally Giving The Rackspace Cloud a Try

mfleming — Fri, 17 Sep 2010 13:03:20 +0000

I have been keeping an eye on the cloud offering from Rackspace for awhile now. Earlier this week I finally created an account and setup my first server. Many of my blogs utilize WordPress and sit on a shared hosting platform. Most of my systems administration knowledge lies in the Windows world, so I have always relied on shared hosting for any LAMP based setups. So this gave me a chance to learn some new things in this process: Using the Rackspace cloud and learning more about systems administration tasks on a Linux based server.

As of this morning I have successfully moved over three sites from my shared hosting platform over to a Ubuntu Server I setup via the Rackspace cloud. So far the experience on the Rackspace side of things has been great. After setting up my account I was able to spin up a new server in a couple of minutes. I also created a second one to test some things out on, and once done I just deleted that server from my account. It’s really great to be able to spin up a server and delete it at will. You can choose from a variety of Linux setups (I chose a 64-bit version of Ubuntu 10.04) and a variety of Windows setups. The Windows option was recently added in the last couple of months.

From a systems administration side I had a lot to learn about some of the tasks involved in setting up and moving the sites over. The Ubuntu community is very large and very helpful when questions arise. I was able to get things working a lot quicker than I had anticipated in the beginning. IIS on Windows is a much different world than Apache! I learn more tricks everyday, but while frustrating at times it’s good to be gaining this additional knowledge.

If anyone is interested in seeing some screenshots of the Rackspace cloud server setup leave a note in the comments and I will post some. Not sure if this worthwhile to post those or not.

My Favorite Android Apps – #1 Touiteur

mfleming — Wed, 14 Jul 2010 14:30:06 +0000

#1 – Touiteur

I am a huge fan of Twitter. I mostly use it for keeping up with news and sports and for a few aggregators I run. In looking for a Twitter app there is one requirement that is a must for me: merged timelines. I have multiple accounts and enjoy having them in a merged view. Many of the Twitter apps support multiple accounts, but not merged timelines. My first Twitter app I used on my Droid was the popular Twidroid application. It had the features I used the most so I purchased the pro version of it and have used it for quite a period of time. I used Twidroid until 3 weeks ago, when I came across Touiteur. Touiteur is now my main Twitter app on my Droid.

Touiteur has most of the same features as Twidroid does, but the user interface is much nicer in my opinion. It also does a much better job of remembering where you last left off when viewing your timeline. Twidroid would frequently forget where I left off viewing and would assume I had read all of the tweets. Touiteur not only merges the main timeline, but also merges the replies and direct messages from all the accounts.

Some of the other features I take advantage of:

Bit.ly URL shortening with the option of using your own API key
Support for multiple photo services with Tweetphoto, Twitpic and YFrog
Support for Twitter lists
Search
Trends
Favorites

The market contains many difference choices of apps for use with Twitter, but this one has worked the best for me given some of my needs. Touiteur is also available via a pro version which unlocks a few more features.

My Favorite Android Apps – #2 SlingPlayer

mfleming — Tue, 13 Jul 2010 16:16:44 +0000

This is the third post in the series about my favorite Android apps.

#2 – SlingPlayer

I have been an avid SlingBox user for many, many years. In fact I would bet I have one of the first devices they made, and it still works like a champ. When I first picked up my Droid, I was bummed to see there was no SlingPlayer app at the time. Previously I was a BlackBerry user and there was an available app for that device. Finally a few weeks ago the SlingPlayer app went live on the market. I quickly hit the market and found the app. To my chagrin I noticed the message that stated the app would only work with the newer models of the SlingBox. As much as that sucked I didn’t believe it, as the SlingBox just streams via HTTP. Browsing around the net for a few minutes I found many folks who said it did work with their older device just fine. So I bit the bullet and purchased the app. I was able to quickly confirm it did work perfect with my older SlingBox.

If you are not familiar with the SlingBox, it allows you to watch and control your TV remotely. You have full control via a virtual remote control for viewing, including controlling your DVR, etc… The SlingPlayer is currently available for the PC and many cellular operating systems, including the iPhone and Android.

The Android app streams awesome for me. Do note, that part of this will be due to the upload speed on your home network as well as the download speed you currently have on your phone. I have the maxed out U-Verse connection at home so I have a great deal of upload stream to use. Very rarely do I have issues with streaming, and normally when I do it’s due to the lack of a cell signal. In fact, over the weekend I had to make a run to Lowe’s for some supplies, and watched the Tour de France the entire time I was in Lowe’s with no issues. I also use it from home, with my Droid connected via my wireless network. This works extremely well also.

The one big drawback to this app is the price. It’s $29.99 which is very pricy for a mobile application, although in my opinion it is worth the price.

Google Releases App Inventor for Android

mfleming — Mon, 12 Jul 2010 16:13:02 +0000

Google has released their App Inventor for Android. I have not had a chance yet to play around with this, but on the surface it appears slick. Google claims you do not need to be a programmer to create the apps. So it sort of sounds like a WYSIWYG application for creating apps. From the site they state:

“To use App Inventor, you do not need to be a developer. App Inventor requires NO programming knowledge. This is because instead of writing code, you visually design the way the app looks and use blocks to specify the app’s behavior.”

You can read all about the App Inventor from the site. Has anyone had a chance to use this yet? If so, drop a comment with your experiences.

My Favorite Android Apps – #3 MLB At Bat ’10

mfleming — Fri, 09 Jul 2010 14:00:30 +0000

This is the second post in the series about my favorite Android apps.

#3 – MLB At Bat ‘10

MLB At Bat is a baseball fan’s dream app. If you are not a fan of baseball, you can probably skip this review, although some of the technology itself is so cool you may want to hear about it or try it out for yourself.

One of the great things about this app for me, is it allows me to easily keep up with my favorite couple of teams. Both of the teams I follow closely are out of market for me, so without something like this I cannot catch live coverage of their games. So what exactly does MLB At Bat provide?

The coolest feature of this app is live game audio from EVERY MLB game. To take that a step further, for each game you can also select the radio broadcast from either the home or away team. The streaming piece works very well, as I will often dock my Droid in the car if there is a game being played on my drive home from work.

Another cool feature of MLB At Bat is the live pitch by pitch coverage. It displays each pitch and lets you know what happens. It also displays the pitch type (fastball, slider, etc…) and the pitch speed. This comes in handy if you are trying to catch up with the game quickly.

Video highlights are also included in the app. During the live games you catch video replays of the important plays a few minutes after they happen, and you can also catch the recaps of the games. The app also provides the normal news and standings around baseball.

The app does lack one feature that would send it over the edge: live game video. The iPhone version of the app has this feature, so my guess is this should be added in the future.

My Favorite Android Apps – #4 AppAware

mfleming — Tue, 06 Jul 2010 14:18:33 +0000

This is the second post in the series about my favorite Android apps.

#4 – AppAware

I stumbled across AppAware about three months ago. At first I really did not get the point of what it was all about. It markets itself as the social market for Android. So in a nutshell what does this app do? It helps you find apps.

When you install AppAware it hooks into your installed applications. So it is aware of what you have installed, which apps you update and which apps you delete. Using this data from users around the globe it will then compile a list of the top apps. You can view the top installs in the last hour, the last day or the last week. So it lets you easily see the most popular apps.

To take it a step further, once you click on an individual app to view the details it shows you a list of installs and uninstalls. Using that data you can get a feel for how worthwhile the app is. If it has 100 installs, and then 75 uninstalls it probably means folks downloaded it, tried it out, and decided it wasn’t worth keeping. On the flip side if there were few uninstalls it probably means it’s a worthwhile app, and thus worth checking out. If you want to check it out AppAware provides a direct link to the Android Market where you can install the app.

The main screen of AppAware also provides a little neat interface that displays in real time app installs and uninstalls. So it allows you to see these in a refreshing timeline view.

AppAware has some other features that are optional that I do not use. One of these features allows you to share via your Twitter account which apps you are installing. You can also enable the GPS location which will allow you to track the data mentioned above based on your location, so you can see the popular apps within a certain radius of your GPS point.

The reason I dig this app is the ease at which I can find new and popular apps. I have stumbled across some of my favorite ones using AppAware.