Bootstrap text alignment classes

Bootstrap center text

In this tutorial, I am going to show you live demos of aligning text center, right and left. I will also show you using the floating text center or right by using helper float classes.

Airport Terminal like text animation using jQuery: TextShuffle.js

jQuery text animation terminal

Create text animation like airport terminal The TextShuffle.js is a simple jQuery based solution for creating the text animation like displayed in the airport terminals. Demo1 Demo2 The available options allow you to set the speed of animating the text shuffling, bind event (click, mouseover, mouseleave etc.) and characters to be used for shuffling the … Read more

3 Demos of Text Animation by jQuery: textbanner

jQuery text animation growth

Create text animation in web pages The textbanner is a simple to use plug-in for creating text animation on your web pages. You only need to specify the div or paragraph that needs to be animated in the jQuery code. Just a single line of code will create the animation with default settings while you … Read more

3 Demos of jQuery/JavaScript keyword highlighting plug-in: mark.js

jQuery keyword highlight

Highlighting the keywords in web pages The mark.js is a pure JavaScript and jQuery solution for highlighting the keywords entered in the search field. If you have long text paragraphs in your web pages and need to facilitate the users highlighting the specified text then mark.js is a solution for you. Not only text paragraphs, … Read more

A jQuery news ticker/text slider plug-in: simpleTicker.js with 3 Demos

jQuery ticker fade

Creating news ticker/text slider in web pages The simpleTicker.js is a jQuery based simple plug-in for creating the ticker or text sliding with different patterns. The supported patterns are fade, roll, and slide which you may set by using the JavaScript options. Developer’s page Download plug-in Setting up the jquery.simpleTicker.js plugin All you need is … Read more

Fit text into HTML element by jQuery: 2 Demos

jQuery fix text attributes

Fixing text in HTML elements by jQuery The textfit plug-in fits the text in one line according to the width of the element that contains it. It adjusts the font-size of text with respect to the width of the element. The plug-in size is just 1K that you may place before the body closing tag. … Read more

2 Demos of Creating animated text shadows by jQuery

jQuery text shadow

The txtshadow plug-in The txtshadow jQuery plug-in enables creating the animated and dynamic text shadows that move with the mouse pointer. So, as the mouse is moved over or around the specified text the shadow will move accordingly. You may specify the blur and color of shadow in the options provided by the plug-in. Demo1 … Read more

Convert hash tags (#) and @mentions into colorful text by jQuery autotag

jQuery auto tag

The jquery-autotag plug-in The autotag plug-in converts any text typed in the contentEditable=”true” elements of the DOM with @ or # into colorful and distinguishable text. Since social media, the usage of mentions (@) and hashtags (#) has incredibly increased, so it is worthwhile to make it prominent if your web pages has content editable … Read more

Create Animated Typing Effect in HTML elements by jQuery coolType

jQuery cool typing

The jQuery coolType plug-in The coolType plug-in adds character by character of a given string in HTML elements with a cool typing effect. The animated effect is like the fast command line typing that you may use for displaying news items or customer reviews, announcements, etc. that a visitor’s eye can catch easily. The development … Read more

Inline editing in paragraphs, div, span etc. by jQuery: InlineEdit

jQuery inline edit span

Create editable elements in webpages The InlineEdit plug-in allows creating the elements in your web pages that are editable upon double clicking. You may make editable paragraphs, span or text in the div tag that can be saved on the server without refreshing the website. The edited text is sent to the server by AJAX … Read more

jQuery text loop for blockquote/cite with fade and delay effects

jQuery fade text

What does jQuery text fade delay plug-in? The fade-delay plug-in is used to display the blockquotes and cite in web pages with the transition. The blockquotes element will fade away and then cite elements display in a delayed manner. The plug-in can be good for displaying quotes, customer reviews etc. one by one in a … Read more

jQuery Print plug-in for Printing Specific Section of a Webpage

jquery print

The jQuery plug-in for printing a specific part Printing a complete web page is not an issue since it is a feature that is provided by browsers. However, in some scenarios, you may need to provide a facility to a visitor for printing only a section of a web page rather than the complete web page. For … Read more

Bootstrap News Ticker with jQuery: 3 Demos

bootstrap news ticker icons

The Bootstrap news ticker by using jQuery In this article, I am going to share a nice jQuery plug-in for running news ticker vertically on your web pages. The plug-in is implemented on the Bootstrap 3 framework. The news ticker is auto-play as well as supports up/down manual movement. You may scroll any content in … Read more

Bootstrap 3 Panels: Simple and Collapsible 5 Examples

bootstrap panel contextual

The panel component in Bootstrap The panel, which is a built-in component in Bootstrap, can be used to present content in a box. You may specify different styles for panels by using various built-in classes. The panel may contain the heading for a content box while you may add content below it within that panel. … Read more

CSS Vertical Alignment of Text and Images in a Div: 3 Demonstrations

CSS vertical align

The vertical-align property in CSS The vertical-align CSS property aligns the specified element vertically. However, if you need to align the content vertically you may use a different technique like using the transform property with a rotate value; I will show you how in this tutorial. First, let us have a look at the vertical-align … Read more