EeepZork!» jQuery http://labs.elektrikcoma.com/blog The unofficial offical comaLABS blog. Fri, 06 Nov 2009 07:24:34 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 using NOT abusing the CSS text-shadow property. http://labs.elektrikcoma.com/blog/code/using-not-abusing-the-css-text-shadow-property/ http://labs.elektrikcoma.com/blog/code/using-not-abusing-the-css-text-shadow-property/#comments Thu, 12 Mar 2009 17:03:40 +0000 Mikael C. Fritts http://labs.elektrikcoma.com/blog/?p=74 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.

    • ]]>     http://labs.elektrikcoma.com/blog/code/using-not-abusing-the-css-text-shadow-property/feed/ 0     a little “Web 2.0″ on this chilly monday. http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/ http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/#comments Mon, 16 Feb 2009 20:25:41 +0000 Mikael C. Fritts http://labs.elektrikcoma.com/blog/?p=36 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.

    ]]>     http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/feed/ 0     password strength script, yet another one. http://labs.elektrikcoma.com/blog/code/password-strength-script-yet-another-one/ http://labs.elektrikcoma.com/blog/code/password-strength-script-yet-another-one/#comments Fri, 13 Feb 2009 20:02:17 +0000 Mikael C. Fritts http://labs.elektrikcoma.com/blog/?p=13 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.

    <script type="text/javascript" src="js/jquery.js"></script> // make sure you adjust your path!
    <script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
    </script>
    <script type="text/javascript">
    $(function() {
    $('.password').pstrength();
    });
    </script>

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

    <INPUT class="password" type=password name="Password">

    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.

    ]]>     http://labs.elektrikcoma.com/blog/code/password-strength-script-yet-another-one/feed/ 0