jQuery jShare-it Plugin Preview
Jan 31, 2010
I was planning on releasing an updated 2.0 version of my original "j-ShareIt" plugin tonight. The new version "jShare-it" came out of the box at about 1/2 the size of the original in a slick new interface, with a nice combination of jQuery and CSS to make the widget highly customizable. The app is basically a version of the AddThis sharing widget, but cuts out their analytics and calls to 3rd party servers. The best part however, is the ability to make it look however you want. The out of the box version comes as a drop-down with large 64 pixel icons and 12 popular social media outlets. Take a look:

With a simple find and replace in the CSS the color scheme can be changed in a second:

The CSS is CSS3 but does degrade smoothly in IE6 and IE7 (mostly removing rounded corners). The actual script works in everything: IE6+, Firefox 3+, Chrome, 4+ and Safari 3+.
Using jQuery, when a user clicks on an icon for a social media outlet, the script attaches the post URL for the specific outlet, and then grabs the URL and title from the specific page the user is trying to share (using the encodeURIComponent variable).
Just like AddThis it populates title and URL fields in the posting section of the said outlets. It's quite simple but there really aren't any good jQuery based widgets out there. Everything is sign up and go. With this free standing widget you have the control to do what you want with the code.
In the near future I will be adding more outlets, probably the top 25 or 30 in all, and develop a more compact version with small icons and text as opposed to the larger version. The big thing would be URL shortening integrated with bit.ly. I don't think it's out of the question, just a matter of coming up with a JSON call to bit.ly that returns the URL variable back to the script. We'll see what I can do.

In any event, like I said at the start, I was planning on releasing tonight, but the script I integrated for a smooth dropdown, had some issues, namely it conflicted with jquery.cycle in testing, which is a problem. There is no reason that it should interfere with any scripts. This week I am going to rework the script to something more standard and highly tested. I guess the actual release will have to wait a week!

With a simple find and replace in the CSS the color scheme can be changed in a second:

The CSS is CSS3 but does degrade smoothly in IE6 and IE7 (mostly removing rounded corners). The actual script works in everything: IE6+, Firefox 3+, Chrome, 4+ and Safari 3+.
Using jQuery, when a user clicks on an icon for a social media outlet, the script attaches the post URL for the specific outlet, and then grabs the URL and title from the specific page the user is trying to share (using the encodeURIComponent variable).
var url = encodeURIComponent(self.location.href);
var title = encodeURIComponent($("title:first").html());Just like AddThis it populates title and URL fields in the posting section of the said outlets. It's quite simple but there really aren't any good jQuery based widgets out there. Everything is sign up and go. With this free standing widget you have the control to do what you want with the code.
In the near future I will be adding more outlets, probably the top 25 or 30 in all, and develop a more compact version with small icons and text as opposed to the larger version. The big thing would be URL shortening integrated with bit.ly. I don't think it's out of the question, just a matter of coming up with a JSON call to bit.ly that returns the URL variable back to the script. We'll see what I can do.

In any event, like I said at the start, I was planning on releasing tonight, but the script I integrated for a smooth dropdown, had some issues, namely it conflicted with jquery.cycle in testing, which is a problem. There is no reason that it should interfere with any scripts. This week I am going to rework the script to something more standard and highly tested. I guess the actual release will have to wait a week!
Labels: css, css3, jQuery, jShare-it, plugin
posted by Tim Avery at
9:13 PM
-
0 Comments
©
jQuery 1.4 Released Today
Jan 14, 2010
Today the jQuery team released the latest and greatest version of the most versatile javascript library on the planet. Cutting to the cahse, you can read about it here:http://jquery14.com/day-01/jquery-14
There were a number of changes and upgrades, including the inclusion of sizzle.js into the new version (I'll talk about sizzle in a later post). I heard someone today complaining about jQuery saying it was "lazy" to use a library and not write your own .js from scratch (a "flash" guy... I think he is afraid jQuery is more useful than Flash--well it is..). Yes good idea, let me sit down and write something as good as jQuery form scratch to use for my projects or any. Let's be honest, the gusy who created jQuery are some of if not the best. If you think you can do better than them than go for it. You will be at it for weeks, if not months and years, and by the time you think you have something, they will be continuing moving forward with their kick-ass library.
Using a library like jQuery has NOTHING to do with laziness, and everything to do with being efficient and productive. Somebody else has done the ground work, created a code base, and made it publicly available to use. This is a god-sent in this industry and I applaud and thank the guys at jQuery for the work they have done. So to the point here it is, the latest minified version
http://code.jquery.com/jquery-1.4.min.js
Additionally, Google has provided a copy of jQuery hosted on their servers. This copy of jQuery is automatically minified and gzipped – and served from Google’s fast edge cache servers.
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
Include the above URL directly into your site and you will get the full performance benefits of a quickly-loading jQuery.
That's it for today. Grab the latest copy of jQuery and make some amazing stuff happen on the web.
Labels: jQuery
posted by Tim Avery at
3:21 PM
-
0 Comments
©
AP Site Redesigned
Sep 7, 2009
Spent Labor Day weekend working on re-skinning the Aerial Perspective site. I am going away from the business version of the site, and moving towards more of an informational site. The center piece being the blog, and a minimalistic look and feel. I got rid of most of the links at the top of the page and have went with a tabbed version, so for the most part, the entire site is hosted on one page. The tabs are simple: Blog, Portfolio, About and Contact. I haven't really figured out what I am going to put in them yet, but it should come shortly.
The site was built with a pretty basic system. I used a modified 960 gridder layout, along with jQuery, a modified version of jQuery Tabs, and of course the base HTML and CSS. I stuck with a green color, but it much brighter than the old site, and I incorporated more of a black and white color scheme than before.
More to come in the next couple weeks.
The site was built with a pretty basic system. I used a modified 960 gridder layout, along with jQuery, a modified version of jQuery Tabs, and of course the base HTML and CSS. I stuck with a green color, but it much brighter than the old site, and I incorporated more of a black and white color scheme than before.
More to come in the next couple weeks.
Labels: 960 Gridder, jQuery, Tabs
posted by Tim Avery at
4:27 PM
-
1 Comments
©
Our very own "Share This" like the AddThis Widget - Preview
May 13, 2009
We are currently developing our own "Share This" widget like the popular Add This Widget that you find all over the web. We were asked to develop this because the "Add This" widget pulls analytic information to addthis.com. With our widget the analytics information is yours and yours only! This is highly customizable and works in all the testing we have done for it. We are still working out how the final skin will look and what the "Share This" button will look like, but otherwise, it's pretty much there!
Here is a sneak peak:
As you can see the widget is powered via jquery--a script library that is seemingly endless. I put this together using a tutorial and information provided by Mark S. Kolich from http://mark.kolich.com. (That links to the actual post about the widget). We have styled even our basic design up just a little from his, but the programming side and info he provided was the key to making this work! So thank you Mark for the work you did--in the end it helped us develop a cool tool!
Our final version with code for a free download will be made available in the coming weeks, so keep your eyes peeled for it!
Here is a sneak peak:
As you can see the widget is powered via jquery--a script library that is seemingly endless. I put this together using a tutorial and information provided by Mark S. Kolich from http://mark.kolich.com. (That links to the actual post about the widget). We have styled even our basic design up just a little from his, but the programming side and info he provided was the key to making this work! So thank you Mark for the work you did--in the end it helped us develop a cool tool!
Our final version with code for a free download will be made available in the coming weeks, so keep your eyes peeled for it!
Labels: download, jQuery, jShare-it
posted by Tim Avery at
11:39 AM
-
0 Comments
©
About Aerial Perspective
