Create nice looking blockquote with jquery and css

If you want to create nice looking blockquotes on your web page here is simple plugin.

nice looking blockquote

First basic css

.quote {
    font-size: 2em;
    font-family: Times New Roman, times, serif;
    position: relative;
}
.quote p {
    margin: auto;
    text-align: justify;
}
.quote span {
    font-size: 4em;
}
.quote span.open {
    position:absolute;
    top:-0.35em;
    left:0;
}
.quote span.close {
    position:absolute;
    bottom: -0.8em;
    right: 0;
}

code for the plugin

$.fn.quote = function(params) {
    $(this).addClass('quote');
    var width = params && params.width ? params.width : 400;
    $(this).css('width', width);
    $(this).html('<p>' + $(this).html() + '</p>');
    $(this).find('p').css('width', width - 120);
    $(this).append('<span class="close">&rdquo;</span>');
    $(this).prepend('<span class="open">&ldquo;</span>');
};

create basic html

<blockquote>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nulla sed dolor nisl, in suscipit justo. 
Donec a enim et est porttitor semper at vitae augue.
</blockquote>

And run the plugin

$(document).ready(function() {

    $('blockquote').quote({'width': 500});

});

The default width is 400 px

lt

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: