Question

I am playing around with jQuery and thought I would build a little css generator.

Currently you can see that when you make a change it just appends the change, I would like it so it in a sense updates the css output instead of adding to it. so instead of..

textarea{
font-size: 18px;

}textarea{
color: green;

}

it would be:

textarea{
font-size: 18px;
color: green;
}

http://jsfiddle.net/MSSJQ/3/

This is what I have rocking so far.

Answer 1

UPDATED

just a proof of concept, but you can get the idea…

• DEMO: https://so.lucafilosofi.com/jquery-css-generator-update-css-output

$(function() {
    $('#textarea').updateStyle();
});

(function($){  
$.fn.updateStyle = function(options) {
    var defaults = {
        controls: '#controls p a',
        codewrapper: '#code'
    };
    var options = $.extend(defaults, options);
    return this.each(function() {
        $elm = $(this);
        var element = $elm.attr('type');
        $(options.controls).click(function(e) {
            e.preventDefault();
            var control_class = $(this).attr("class");
            var property_value = $(this).text();
            var css_property = control_class + ': ' + property_value + '; ';
            var property_wrapper = '.' + control_class;
            var html = '<span class="' + control_class + '">' + css_property + '<span>';
            var $outer = $('#' + element + '-outer');
            var $inner = $('#' + element + '-inner');
            if ($outer.length) {
                if ($outer.find(property_wrapper).length) {
                    $outer.find(property_wrapper).html(css_property);
                } else {
                    $inner.append(html);
                }
            } else {
                $(options.codewrapper).append('<div id="' + element + '-outer">' + 
                  element + ' {' + '<div id="' + element + '-inner">' + html + 
                  '</div> }</div>');
            }
            $elm.attr('style', $inner.text());
        });
    });
};
})(jQuery);