JavaScript
Article

10 Ways to Effectively Blend HTML with jQuery

By Sam Deering

10 ways to effectively blend html using jQuery! HTML is an amazing scripting language. Blending HTML with jQuery lets one make the most out of HTML. Extend the limitations of HTML by blending it with jQuery. So here is a collection of amazing tutorials and plugins to blend HTML and jQuery.


1. jHtmlArea – WYSIWYG HTML Editor for jQuery


A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.
jHtmlArea-–-WYSIWYG-HTML-Editor-for-jQuery.jpg
Source


2. FLEX On jQuery: Turning HTML Links into Standard UI Elements


Learn how to turn HTML links into standard UI elements.
FLEX-On-jQuery-Turning-HTML-Links-into-Standard-UI-Elements.jpg
Source


3. Easy HTML Templating with jQuery


Your first step is creating your template; your template is the HTML that gets added to the page. You want it to be hidden; throwing it in a script tag is a good way to do this. You need to give it an ID that can be referenced in your code. You can create multiple templates as well.
Easy-HTML-Templating-with-jQuery.jpg
Source


4. Rotate3Di – Flip HTML content in 3D


The plugins functionality includes setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.
Rotate3Di-–-Flip-HTML-content-in-3D.jpg
Source


5. Default html button submit on enter with jQuery


This was a quick and dirty solution to select an html submit button and make it the default when a user clicks enter from certain or all input elements on the form.
Default-html-button-submit-on-enter-with-jQuery.jpg
Source


6. jQuery HTML Truncator


Truncating like this on the server-side is great in contexts where you do not want to show the full text as well, such as in an index of items. Another common case for truncation is more/less links: you want to show the full text, such as a user’s presentation, but for layout reasons a truncated snippet should be shown first, with a more link to disclose the rest.
jQuery-HTML-Truncator.jpg
Source


7. Get full html string including the selected element itself with jQuery


Get full html string including the selected element itself with jQuery. Sometimes you need to get the selected elements html as well when using .html() function, learn to do this with this simple and easy to follow tutorial.
Get-full-html-string-including-the-selected-element-itself-with-jQuery.jpg
Source


8. Creating a Floating HTML Menu Using jQuery and CSS


For all of us who deal with long web pages and need to scroll to the top for the menu, here is a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it is fully W3C-compliant.
Creating-a-Floating-HTML-Menu-Using-jQuery-and-CSS.jpg
Source


9. Retrieve a Portion of HTML with jQuery


jQuery offers some really powerful functions and methods to utilize AJAX. One that I have discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.
Retrieve-a-Portion-of-HTML-with-jQuery.jpg
Source


10. Cleanup your html with jQuery


Learn here how. The only thing that makes this tricky is that the borders and corners need a shaded shadow and the fact that the box is required to support dynamic width.
Cleanup-your-html-with-jQuery.jpg
Source

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.