EeepZork!» Code

using NOT abusing the CSS text-shadow property.

Mikael C. Fritts — Thu, 12 Mar 2009 17:03:40 +0000

some browsers are currently supporting the CSS text-shadow property, although the others are slowly coming around. even though this property is technically part of the CSS level 3 library, more and more people are using it (and even more abusing it) everyday. here’s something that i find interesting that doesn’t abuse the property, but can add more life to your page.

we’re going to use jQuery to add a the ability to make your elements glow on mouseover. any browser that doesn’t fully support the text-shadow property will still show the glow, but you won’t be able to add the “halo” effect.

so let’s get down to brass tacks shall we? all of the .js files you can download here in a nice .rar file. there are a total of of three files you’ll need to call to make this bad boy work.

basic example
$(document).ready(function() { $('.glow-me').addGlow(); });

advanced example
$(document).ready(function() { $('.glow-me').addGlow({ radius: 20, textColor: '#ff0', haloColor: '#ffa', duration: 200 }); });

you’ll want to customize your options in the jquery-glowing.js file. here’s the basic rundown:

textColor: color the text should glow.

haloColor: halo color (for browsers that support it).

radius: controls the halo size (for browsers that support it).

duration: speed of the glowing effect.

Online demo is right here.

finally, i actually deliver what i said i would.

Mikael C. Fritts — Tue, 10 Mar 2009 01:34:33 +0000

this script is pretty straight forward. some people may have uses for it, others may not. i created this for a specific request and i’m still making improvements to it.

so here it is. a news scroll for your site! w00t! this is straight up JavaScript, so no plug-in’s or anything like that needed. works in IE 5+ and FF 1+. it’s very simple to insert into your site. view the demo HERE. you can modify the look and feel all you want. more <3 for CSS. let us get started shall we?

here be the JavaScript!!!

//newsticker.js TICKER_CONTENT = document.getElementById("TICKER").innerHTML;


TICKER_RIGHTTOLEFT = false;

TICKER_SPEED = 2;

TICKER_STYLE = "font-family:Arial; font-size:12px; color:#FFFFFF";

TICKER_PAUSED = false;
ticker_start();
function ticker_start() {

	var tickerSupported = false;

	TICKER_WIDTH = document.getElementById("TICKER").style.width;

	var img = "";
	// Firefox

	if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {

		document.getElementById("TICKER").innerHTML = "



"+img+" "+img+"


";

		tickerSupported = true;

	}

	// IE

	if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {

		document.getElementById("TICKER").innerHTML = "
"+img+""+img+"
";

		tickerSupported = true;

	}

	if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {

		document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;

		document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;

		document.getElementById("TICKER").style.display="block";

		TICKER_tick();

	}

}

function TICKER_tick() { if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1); if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft < = 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth; if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0; window.setTimeout("TICKER_tick()", 30); }

to call the ticker to your page, the .JS DOES NOT go in the HEAD section of your document. it trails right below the actual content in the body.

EXAMPLE:



 This is news. As is this. And This. This is what will display in the actual ticker. And this as well. DO NOT USE

make sure that the JS is being called correctly (absolute path would be nice). in this example, i have it set to pause when someone mouses over a headline, and un-pause on mouseout. now let us edit some variable in the actual .JS to make it more “yours”.

TICKER_RIGHTTOLEFT

pretty self-explanatory. do you want it scrolling left to right or right to left?

TICKER_SPEED

set the speed of the scroll. 1 = slowest, 10 = fastest

TICKER_STYLE

set your styles here. font-family, color, all the fun stuff.

TICKER_PAUSED

when this variable is set to true, the scrolling ticker is paused. this value can be changed at runtime, for example when the mouse is over the ticker.

what i really use this for is to announce site news, via an RSS or XML feed. this is really easy to set-up.

instead of hard-coded text, we’re going to use a php include (you can use whatever suits your purpose). so in-between the DIV tags i put this:

< ? include "newsfeed.php" ?> //you can call this whatever you want

that file is just a php file that parses the data from an RSS or XML feed and converts it into plain HTML, thus letting the ticker read the new info. i find this to work the best, but that’s just me.

i’m not going into how to do this at this time, if you’re really lost, feel free to comment. the best solution would be using something like MagpieRSS to help you with your parsing needs.

and with that, i’m going to go cry in my beer now.

until next time….

a little “Web 2.0″ on this chilly monday.

Mikael C. Fritts — Mon, 16 Feb 2009 20:25:41 +0000

Seeing as I tout myself as a UI Web Designer/Developer I decided to actually post something that is relevant to my “field”. I don’t really use this script that much myself, not because it’s not functional, just that I haven’t really had any projects that could benefit from it.

So what is it already?

It’s a simple tool tip script written in JavaScript (or DHTML if you will). Basically when your user mouses over a specified link a tool top will be displayed. You’ve seen this kind of script before, it’s actually pretty hard NOT to see it in use in today’s web world. I got tired of the regular “box” look and made it a bit more “Web 2.0″. Anyways, here comes the code.

All files are available in .rar format here and are free to download. Below I will explain the different aspects of the code and how to implement it.

The meat & potato’s: The JavaScript.

function showToolTip(e,text){ if(document.all)e = event; var obj = document.getElementById('bubble_tooltip'); var obj2 = document.getElementById('bubble_tooltip_content'); obj2.innerHTML = text; obj.style.display = 'block'; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; var leftPos = e.clientX - 100; if(leftPos<0)leftPos = 0; obj.style.left = leftPos + 'px'; obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px'; } function hideToolTip() { document.getElementById('bubble_tooltip').style.display = 'none'; }
There really aren’t customizable variables in there, and I wouldn’t recommend changing anything unless you have a working knowledge of JavaScript. Make sure you include the JS file in the of your document!

The customizable part: CSS.

#bubble_tooltip{ width: 147px; position: absolute; display: none; } #bubble_tooltip .bubble_top{ background-image: url('../images/bubble_top.gif'); /*DEFINE THIS PATH!!! */ background-repeat: no-repeat; height: 16px; } #bubble_tooltip .bubble_middle{ background-image: url('../images/bubble_middle.gif'); /*DEFINE THIS PATH!!! */ background-position: bottom left; padding-left: 7px; padding-right: 7px; } #bubble_tooltip .bubble_middle span{ position: relative; top: -8px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size: 11px; } #bubble_tooltip .bubble_bottom{ background-image: url('../images/bubble_bottom.gif'); /*DEFINE THIS PATH!!! */ background-repeat: no-repeat; background-repeat: no-repeat; height: 44px; position: relative; top: -6px; }
Add the above CSS into your pre-existing CSS file. Modify the colors, font face, font size, etc… Make SURE you upload the image files to a specified directory and make sure your CSS reflects that.

Now implement the tool tip in your page. This can be used in an anchor tag or a span tag. I’ve included examples of both.

Using it with an anchor tag:
Focus Word

Using it with a span:
Focus Word

There you have it.

In the works…

Mikael C. Fritts — Sat, 14 Feb 2009 03:16:28 +0000

So I spent most of today in the breadline, looking for a job. Apparently in this market there is no room for Front End UI Developers/Designers. Go USA!

So I’m working on a script that takes advantage of the (that sounds so very, very wrong) MooTools JavaScript framework to create an application like the Lightbox JavaScript app, only much more powerful.

Why? Well, why not? Also, and by no means do I mean to discredit Lokesh Dhakar’s (he wrote Lightbox) awesome code, I just vision it doing more powerful things, not just show pictures. As I was researching, I found that someone else has already jumped ahead of me with this same vision. That person would be John Einselen from iaian7.com. He’s already done some amazing work and I’ll be standing on his shoulders as I modify and tweak code, and of course will give him credit where credit is very much do.

So what is this app going to be? Imagine having the same “lightbox effect” only instead of applying just to images, it would be used for pretty much anything you can imagine. Here’s just a small sample list of what I’ve got in mind:
Flash
Video (almost all formats)
Images (dur)
Web Pages
Audio

PLUS!!!

The ability to read you Flickr stream, Google and YouTube Video, MySpace, Facebook, Veoh, MetaCafe, and others. All you’ll have to do is modify your link, embedded or not. Just one simple statement and there ya go!

ACTUALLY…

It’s not going to be THAT easy, but it will be easy enough. Just a couple of scripts that need to be uploaded to you server, a few lines of code added to your HEAD section, and you’ll be done.

RELEASE…

I’m planning on working on it this weekend, and will hopefully have it up early next week. Until then, if you just CANNOT WAIT, check out iaian7’s app on his page listed above.

Time for beer and hockey.

Cheers!

password strength script, yet another one.

Mikael C. Fritts — Fri, 13 Feb 2009 20:02:17 +0000

As a freelancer I get all kinds of requests for all kinds of scripts, most involving security of some sort, but what amazes me is that most of these people never ask for a password strength script. Maybe they have their own solution, maybe they’re just not thinking about it or don’t see the necessity.

In today’s day and age, I think it should be mandatory to keep your data as secure as possible, yes I’m pointing out the obvious over here. No matter what kind of security you implement on your side, your user can be the biggest threat to you in the end. How many people are using “password” or “suzan” as their password. You can limit this kind of behavior and also bring to your users attention the fact that, yes a familiar password is easy to remember, but it is just as easy to crack.

So here is a simple script that implements AJAX and jQuery to display a nice password strength meter for user when signing up. Geek out continues below.

> This is a very small plugin for jQuery.
> Naturally, jQuery is required to run it. You can download jQuery HERE and of course it’s free.

Now let’s get into the meat of this already, shall we?

First up, you’re going to need the JavaScript files from HERE. Unpack the files and upload to the proper directory on your server. Eeezzee peezzzyyy!

Now you need to insert the following code anywhere BEFORE the password field on your page.
// make sure you adjust your path!

Insert the class “password” into the dialogue box so we know it’s identified as a password box. Example:

Now for the last step, adding new tags to your existing CSS file. Something like this should do the trick, but you can change as you see fit.
.password { font-size : 12px; border : 1px solid #000000; width : 200px; font-family : Verdana, Arial, Helvetica, sans-serif; } .pstrength-minchar { font-size : 10px; }

And there you have it! All done. You can change a few settings inside jquery.pstrength-min.1.2.js, such as messages, length/height of the bar, etc… just make sure you know what you’re playing with!!!
EXAMPLE: Password:

Ed. Note: Try using common passwords like “pass” “password” “love” “sex” “1234″, etc.. and see what happens. Common phrases like these can be included in the jquery.pstrength-min.1.2 JavaScript file.