DailyJS

DailyJS

The JavaScript blog.


Tagiframes
Featured

jquery plugins css3 internationalization languages iframes

jQuery Roundup: jQuery.emphasis.js, Tipue Search

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

jQuery.emphasis.js

jQuery.emphasis.js (GitHub: zmmbreeze / jquery.emphasis, License: MIT, jQuery: emphasis) by "mzhou" is a CSS3 text-emphasis fallback.

The author says it's useful for East Asian languages because it adds symbols above or below characters to improve the clarity of emphasised sections. The equivalent CSS currently only works in WebKit with a vendor prefix, so this plugin will be useful to those working with these languages.

The source is quite interesting -- it's based on the CSS3 specification, which involves determining if a character is suitable for emphasis, then the insertion of fairly complex styles to simulate the emphasis marks.

Tipue Search

Tipue image search

Tipue Search (License: MIT) is a site search plugin. It can search static JSON content, or pages on the same origin using Ajax. It also supports an image search mode, which looks for matches in JSON content that points to image URLs.

Given an index, like this:

var tipuesearch = {"pages": [  
  {"title": "Tipue Search, a site search engine jQuery plugin", "text": "Tipue Search is a site search engine jQuery plugin. Tipue Search is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue Search is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/search"},
  {"title": "Tipue drop, a search suggestion box jQuery plugin", "text": "Tipue drop is a search suggestion box jQuery plugin. Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue drop is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/drop"},
  {"title": "About Tipue", "text": "Tipue is a small web development studio based in North London. We've been around for over a decade. We like minimalism with the occasional hint of retro.", "tags": "", "loc": "http://www.tipue.com/about"}
]};

Tipue can be enabled using $('#tipue_search_input').tipuesearch(); on a suitable input element.

Auto Iframe Height Plugin Update

Ilker Guller updated his Auto Iframe Height Plugin (GitHub: Sly777 / Iframe-Height-Jquery-Plugin, License: MIT, GPL) to automatically check the iframe height when the contents change.

To enable automatic resizing, you can use the watcher option passed to $.iframeHeight. It also supports several other options, including: defaultHeight, minimumHeight, and watcherTime.

Featured

jquery plugins graphs iframes

jQuery Roundup: jQuery 1.8: Beta 1, AttC, DPB, Iframe Height

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.8: Beta 1

jQuery 1.8: Beta 1 is out, and there's going to be more jQuery news to follow over the coming weeks:

There will be even more exciting jQuery news at the jQuery Conference in San Francisco later this month, with blog posts to follow.

Custom jQuery builds are now supported through Grunt. That means the ajax, css, dimensions, effects, and offset modules can be safely removed, and even replaced with another library.

In addition, the animation code has been cleaned up, and CSS transitions are supported. Interestingly, by jQuery 1.9 $.browser will be dropped:

Ever since jQuery 1.4, we've been evangelizing that browser detection via the user agent string is a bad idea. Yet we've been an enabler of bad practice by continuing to offer $.browser. As of jQuery 1.9 we'll remove it entirely and you'll need to use the 1.9 compat plugin.

As usual there's a full list of changes in the blog post: jQuery 1.8: Beta 1.

AttC

AttC (License: Apache 2.0) is a jQuery plugin that converts HTML tables to graphs using the Google Visualization API.

The jQuery part is a simple method call, $(selector).attc(), but configuration is performed through the corresponding HTML using data attributes. The authors have written a guide to basic usage for AttC.

DPB

DPB (License: GPL) by Dannie Hansen is a dynamic popup plugin that supports iframes and modal popups. An overlay can be displayed that dims the page, and there are callbacks for the open and close events:

$(selector).DPB({
  animation: 'topSlide'
, type: 'inline'
, width: 200
, height: 100
, top: 20
, selector: $('.inlineElement')
});

Iframe Height

Iframe Height Jquery Plugin by Ilker Guller sets the height of an iframe based on the content, and includes a fix for cross-domain iframe resizing. The plugin is invoked with $('#autoIframe').iframeHeight, and the options available are as follows:

$(selector).iframeHeight({
  resizeMaxTry: 2
, resizeWaitTime: 300
, minimumHeight: 100
, defaultHeight: 500
, heightOffset: 90
, exceptPages: ''
, debugMode: false
, visibilitybeforeload: true
, blockCrossDomain: true
});