EeepZork!

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:

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;

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:

<div id="ticker" style="overflow:hidden; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
This is news. As is this. And This. This is what will display in the actual ticker. And this as well. DO NOT USE <br /&gt tags as it will cause all kinds of crazy, unless that's what you're looking for. Feel free to add any HTML markup to seperate your "news" or what not.
</div>
<script type="text/javascript" src="newsticker.js" language="javascript"></script>


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

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 <head> 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:

<a href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</a>


Using it with a span:

<span class="tooltip_text" href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</span>


There you have it.

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!