Grow your CSS skills. Land your dream job.

Can’t get this simple script to work.

  • # December 31, 2012 at 6:37 pm

    I decided to format my code to a more “standard” and friendly version so I could create options the could be called up at anytime within the HTML documents.

    Check this JS Fiddle document. You’ll see it won’t work, but for the effort of my life, can’t figure out why.

    Depending on jQuery only.

    Working before hand using just Variables:
    http://jsfiddle.net/FxKFG/21/

    Re-written but not working:
    http://jsfiddle.net/FxKFG/1/

    Many thanks if anyone can clear this up. Totally lost in the code right now.

    Also, how would I manage the script with settings through the “Script” HTML tags; for example using


    $('.mn_bar').pluginName({
    animSpeed: 500,
    theme: 'blue'
    });

    Happy new year to everyone too!
    Regards.

    # December 31, 2012 at 9:31 pm

    Whoops. Edited link in case anyone noticed the “Working” version wasn’t actually working! Ha!

    # January 1, 2013 at 2:09 am

    Press the JSLint button :)

    # January 1, 2013 at 8:15 am

    Still not working, but thanks for that! It helped a lot!

    http://jsfiddle.net/FxKFG/21/

    # January 2, 2013 at 5:58 am

    Still not working, but there are some `thing` that I `think` could be noticed: [http://jsfiddle.net/tovic/FxKFG/23/](http://jsfiddle.net/tovic/FxKFG/23/ “http://jsfiddle.net/tovic/FxKFG/23/”)

    Here’s a veeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyy simple JQuery plugin pattern, I often use this pattern when creating a plugin:

    (function($) {

    $.fn.pluginName = function(options) {

    // Default options...
    options = $.extend({
    a: '#ff0',
    b: '<button>Aye!</button>'
    }, options);

    return this.each(function() {
    // do something with `$(this)`
    $(this).css('background-color', options.a);
    $(this).html(options.b);
    });

    };

    })(jQuery);

    Usage:

    $('#elem').pluginName({
    bgColor: '#080',
    html: '<button>Another Aye!</button>'
    });

    Demo: [http://jsfiddle.net/tovic/FxKFG/24/](http://jsfiddle.net/tovic/FxKFG/24/ “http://jsfiddle.net/tovic/FxKFG/24/”)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".