Found this code why I was poking around on the net... So I had a little fun with it:

Labels: css, funny, html

posted by Tim Avery at 7:53 PM  -  0 Comments ©

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!

Labels: css, css3, jQuery, jShare-it, plugin

posted by Tim Avery at 9:13 PM  -  0 Comments ©

The Reset stylesheet is used to reduce browser inconsistencies in things like default line-heights, margins, padding, font-sizes, etc. These styles are intentionally very generic and are based off the "CSS Tools reset.css" and the "Yahoo YUI reset.css" files, which can be found below:

CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/

Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css

Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.


Download a copy without having to copy and paste by clicking below:
my combined version of reset.css

Labels: css, download

posted by Tim Avery at 12:14 AM  -  0 Comments ©