background preloader

How to build a web widget (using jQuery) - Alex Marandon

How to build a web widget (using jQuery) - Alex Marandon
Published on 15 June 2010, updated on 10 February 2015, 110 Comments Introduction I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily. The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP. Don’t worry if all this doesn’t make sense to you yet, we’ll see in details what these techniques are used for in the context of building web widgets. That’s really all that a web site owner would need to include our widget on her pages. Can’t it be even simpler?

Related:  jQuery

3 reasons why you should let Google host jQuery for you - Encosia All too often, I find code similar to this when inspecting the source for public websites that use jQuery: If you’re doing this on a public facing website, you are doing it wrong. Instead, I urge you to use the Google Hosted Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching. In this post, I will expand upon those three benefits of Google’s CDN and show you a couple examples of how you can make use of the service.

25 jQuery Tutorials for Creating and Working with Forms - Web De Get the FlatPix UI Kit for only $7 - Learn More or Buy Now A few weeks ago we published a collection of jQuery plugins for working with forms. While those plugins can be very useful, there may be times where you would rather learn how to code the solution yourself rather than simply using a plugin. There are a number of quality tutorials available for working with jQuery and forms, and in this post we will feature 25 of them. jQuery Form Tutorials: Creating a Slide-in jQuery Contact Form 3.jpg

Building JavaScript Widgets Little pieces of JavaScript you embed onto your website are getting more popular. Every major provider of a service on the web also gives you a little widget that you can put on your blog or webpage to promote what you are doing, for example Twitter, Last FM and Digg all provide widgets which are great for you and great for the service. I am going to talk you through the development and pitfalls associated with the design and development of widgets.

BigBlueButton - From BigBlueButton is a web conferencing server that takes advantage of several other open source servers. It is a complex package that I prefer to run on its own Ubuntu server (either on a standalone machine, in a separate partition, or within a virtual machine). Things You Might Not Know About jQuery jQuery provides an alternative to the traditional DOM createElement. You get to just write straight up HTML. $("<li/>"); If you wish to modify the element or bind events to it, just use jQuery methods. $("<li/>") .click(function(){}) .attr("id", "test") .addClass("clickable");

Make Your Own Bookmarklets With jQuery - Smashing Magazine Advertisement Bookmarklets are small JavaScript-powered applications in link form. Often “one-click” tools and functions, they’re typically used to extend the functionality of the browser and to interact with Web services. They can do things like post to your WordPress or Tumblr blog, submit any selected text to Google Search, or modify a current page’s CSS… and many other things! Because they run on JavaScript (a client-side programming language), bookmarklets (sometimes called “favelets”) are supported by all major browsers on all platforms, without any additional plug-ins or software needed. In most instances, the user can just drag the bookmarklet link to their toolbar, and that’s it!

Zoomooz.js Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. The Anatomy of Search Technology: blekko’s NoSQL database This is a guest post (part 2, part 3) by Greg Lindahl, CTO of blekko, the spam free search engine that had over 3.5 million unique visitors in March. Greg Lindahl was Founder and Distinguished Engineer at PathScale, at which he was the architect of the InfiniPath low-latency InfiniBand HCA, used to build tightly-coupled supercomputing clusters. Imagine that you're crazy enough to think about building a search engine.

start jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. jqGrid uses a jQuery Java Script Library and is written as plugin for that package. For more information on jQuery, please refer to the jQuery web site. jqGrid's Home page can be found here.