Friday, November 27, 2009

using jquery's wrapinner to wrap contents of links with spans to provide rounded corner button graphics

of course the easiest way to make buttons is to just use the cs3 rounded corners and let the ie6 users suffer with *gasp* right angles. But occasionally you find yourself in a situation where you need a liquid width graphical button. (my client has an affinity for reflections). I thought this technique would be as well documented as using jquery for sliding doors, but i couldn't find it anywhere so here you go.

in the CSS you can display your 3 graphics of the same height. a small left background graphic to apply to the span.lt, a long middle graphic for the span.mid, and the reverse of the left graphic for the span.rt.

Jquery:



$(document).ready(function(){
$("a.button_lnk").wrapInner("< span class='mid' >< /span >");
$("span.mid").before("< span class='lt' />");
$("span.mid").after("< span class='rt' />");
});


HTML before js



< div id="usernav" >
< a href="/login" class="button_lnk">login< /a >
< a href="/signup" class="button_lnk">signup< /a >
< /div >


HTML after js



< div id="usernav" >
< a class="button_lnk" href="/login" >
< span class="lt"/ >
< span class="mid" >login< /span >
< span class="rt"/ >
< /a >
< a class="button_lnk" href="/signup" >
< span class="lt"/ >
< span class="mid" >signup< /span >
< span class="rt"/ >
< /a >
< /div >

Tuesday, November 24, 2009

A service I couldn't live without as a freelancer

Combining Simply Invoices with the tick OSX widget is awesome. I just hit F12 and start my clock, then when I'm finished the data is printed to an invoice. Okay, so there's one step inbetween, but really it's simple. and best of all, it's free! If you want to manage multiple accounts you can a bit pay for an upgrade.

http://www.simplyinvoices.com
http://tickspot.com

Jquery Testimonial Rotator Script mod based on quotator

Here's some code for anyone who wants it. It's not yet cross-browser tested, at your own risk. I'll update this post in production.

quotator.js

// JavaScript Document
(function($){
$.fn.quotator = function(options){
var container = this;
var defaults =
{
speed : 11000,
json : "untitled.js"
}

var options = $.extend(defaults, options);

var quotes_json = options.json;
var quotes;

$.getJSON(quotes_json, function(data){
var quotesobject = eval(data.quotes);
var index = 0;


setInterval(changeQuote, options.speed);



container.html("
  • 'Fyera
    " + quotesobject[index].quote + "

    -- " + quotesobject[index].author + "

  • ");


    function changeQuote(){
    container.fadeOut(function(){
    container.html("
  • 'Fyera
    " + quotesobject[index].quote + "

    -- " + quotesobject[index].author + "

  • ").fadeIn();


    });

    if(index == quotesobject.length - 1){
    index = 0;
    } else{
    index++;
    }
    }

    });
    return container;
    }
    })(jQuery);

    ----------
    untitled.js
    --
    ({"quotes":
    [
    {
    "quote" : "The trouble with being in the public eye as a person known for inspiring and empowering others is, where do you go when you need inspiration and advice? Sheva taught me how to access the wisdom of my own heart for that. When you've graduated from personal growth training and want to find the real power in yourself, go to Sheva. She was there through the most difficult relationship challenge of my life, guiding me to a place of self respect where I am now receiving the love I truly deserve. She is without a doubt a leader to leaders, a coach to coaches, and an inspiration to all! I am so grateful to have met you Sheva, and to continue to work with you and to watch your magic unfold in the world!",
    "author" : "Bonnie St. John, Olympic Medalist, Author, Speaker Named by NBC as one of the five most inspiring women in the nation",
    "picture" : "http://fyera.goodbarry.com/Images/member_photos/bonnie_stjohn.jpg"
    },

    {
    "quote" : "The morning HeartStart calls are my “daily workout” that keep my heart skills sharp by applying and re-applying them as my week unfolds. The value of the important lessons I have gotten from Fyera and HearthMath are magnified 10 times through daily application. Better than any multi-vitamin and now that I have started it, I miss it dearly even if I skip one day.",
    "author" : "Malcolm Casselle, Entrepreneur with Successful Businesses in Asia and the United States",
    "picture" : "http://fyera.goodbarry.com/Images/member_photos/malcolm_casselle.jpg"
    },
    {
    "quote" : "HeartStart offers me a reliable daily structure that boosts and supports measurable physiological synchronization of my three brains – the head, heart and enteric brains - refreshing my commitment to my deepest heart-focused intensions and goals. Sheva offers inspiring, skillful presentations through Fyera’s HeartMastery’s year-long program, a plethora of consistently well-researched cutting edge materials that never fail to be enlivened by her brilliance, her extraordinary vitality, and her heart-focused wisdom and care. ",
    "author" : "Kiara Bahn, HeartMastery Member",
    "picture" : ""
    },
    {
    "quote" : "You, my dear Sheva, are a remarkable person who I\’m so glad to know, and look forward to knowing better and better, as I get better and better. You’ve taken me from the doldrums to believing, once again, life is an exciting adventure which I can hardly wait to take a bite of.",
    "author" : "Pat, Fyera HeartMastery Member",
    "picture" : ""
    },
    {
    "quote" : "In the short time I have been working with the Heart Math tools, I can say with all honesty- I have been profoundly changed. The changes are significant and deeply satisfying. Placing attention on my heart has been an elegant adventure into the realm of potential. I have touched undreamt of possibilities. Heart Math tools and distinctions have been instrumental in helping me cut through a lifetime of self imposed limitations- blockages to the realization and manifestation of all that lay waiting in latent potentiality. There are moments when my heart yields to exquisite joy. Sheva, you have been a perfect conduit of information and inspiration. Ah Fyera, ah- Today, as a result of the Heart Start exercise, I stepped into two of my deepest aspirations- to be a lover and a healer. From the deepest core of my heart, I say thank you, and thank you again.",
    "author" : "Eileen, HeartMastery Member",
    "picture" : "http://fyera.goodbarry.com/Images/member_photos/eileen_gold.jpg"
    },
    {
    "quote" : "If you've tried everything, Fyera! is not one more thing. It is THE thing that will make everything else you've tried work. ",
    "author" : " G.G., Filmmaker and Writer, Los Angeles",
    "picture" : ""
    },
    {
    "quote" : "I myself have witnessed the magic of Sheva\'s teaching... Millions of people from all walks of life are sure to benefit from the power of their hearts thanks to Sheva and Fyera! I am honored to be one of them. ",
    "author" : "Anne Marie Howard, Actress",
    "picture" : "http://www.annemariehoward.com/graphics/Anne_Marie_Howard_6006.jpg"
    }

    ]
    })



    ---------
    index.html
    ---





    Praise for and Faces of Fyera!





    ---


    A link to a demo, instructions, and downloadable files to follow. Please leave comments with questions and i will answer.