CodeMirror is a versatile text editor implemented in JavaScript

logo
CodeMirror
is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addonsthat implement more advanced editing functionality.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

Features

Original Site URL – CodeMirror

How to use jquery.cookies.js

Without jQuery

If jQuery is not available in your page, the core cookies library is available to you under the jaaulde.utils namespace:

Get a cookie

/**
 * get - get one, several, or all cookies
 *
 * @access public
 * @paramater Mixed cookieName - String:name of single cookie; Array:list of multiple cookie names; Void (no param):if you want all cookies
 * @return Mixed - Value of cookie as set; Null:if only one cookie is requested and is not found; Object:hash of multiple or all cookies (if multiple or all requested);
 */
get = function(cookieName)

Example:

  • jaaulde.utils.cookies.get('myCookie');
    • returns value of myCookie if it is present, null if not
  • jaaulde.utils.cookies.get(['myCookie', 'myOtherCookie']);
    • returns array containing value of each requested cookie if it is present, null if not
  • jaaulde.utils.cookies.get();
    • returns array of all cookies from your site

Get Filtered list of cookies

/**
 * filter - get array of cookies whose names match the provided RegExp
 *
 * @access public
 * @paramater Object RegExp - The regular expression to match against cookie names
 * @return Mixed - Object:hash of cookies whose names match the RegExp
 */
filter = function( cookieNameRegExp )

Example:

  • jaaulde.utils.cookies.filter( /^site/ );
    • returns list of cookies whose names start with “site”

Set a cookie

/**
 * set - set or delete a cookie with desired options
 *
 * @access public
 * @paramater String cookieName - name of cookie to set
 * @paramater Mixed value - Any JS value. If not a string, will be JSON encoded (http://code.google.com/p/cookies/wiki/JSON); NULL to delete
 * @paramater Object options - optional list of cookie options to specify
 * @return void
 */
set = function(cookieName, value, options)

Example:

  • jaaulde.utils.cookies.set('myCookie', 'myValue');
    • sets cookie by the name of ‘myCookie’ to value of ‘myValue’ with default options
  • jaaulde.utils.cookies.set('myCookie', 'myValue', {path: '/somedir'});
    • sets cookie by the name of ‘myCookie’ to value of ‘myValue’ with path of ‘/somedir’
  • See information on options object below

Delete a cookie

/**
 * del - delete a cookie (domain and path options must match those with which the cookie was set; this is really an alias for set() with parameters simplified for this use)
 *
 * @access public
 * @paramater MIxed cookieName - String name of cookie to delete, or Bool true to delete all
 * @paramater Object options - optional list of cookie options to specify ( path, domain )
 * @return void
 */
del = function(cookieName, options)

Example:

  • jaaulde.utils.cookies.del('myCookie');
    • deletes a cookie, ‘myCookie’, with default options
  • jaaulde.utils.cookies.del('myCookie', {path: '/somedir'});
    • deletes a cookie by the name of ‘myCookie’ which had been set with a path of ‘/somedir’
  • jaaulde.utils.cookies.del(true);
    • deletes all cookies
  • A cookie can only be deleted using the same options with which it was set
  • See information on options object below

Test if browser is accepting cookies

/**
 * test - test whether the browser is accepting cookies
 *
 * @access public
 * @return Boolean
 */
test = function()

Example:

  • jaaulde.utils.cookies.test();
    • attempts to set a cookie and returns true or false upon success or failure

Set default options to use when none are specified

/**
 * setOptions - set default options for calls to cookie methods
 *
 * @access public
 * @param Object options - list of cookie options to specify
 * @return void
 */
setOptions = function(options)

Example:

  • jaaulde.utils.cookies.setOptions({path: '/somedir'});
    • all cookies will be set or deleted with the path , ‘/somedir’, unless it is explicitly provided in a passed options object
  • See information on options object below

With jQuery

If jQuery is available, then all of the above methods are available to you under the jQuery.cookies (or $.cookies ) namespace:

  • $.cookies.get()
  • $.cookies.filter()
  • $.cookies.set()
  • $.cookies.del()
  • $.cookies.test()
  • $.cookies.setOptions()

In addition, there are some jQuery function additions for helping automate some cookie tasks:

  • Set the value of a form field or the HTML of an element to a cookie named after the field’s/element’s name or id attribute
    • $('#username').cookify();
      • The value of the field, or HTML of the element, with id “username” is set to a cookie named after the name or id attribute of that field/element. If a radio or checkbox and it’s checked, the value will be set.
  • Fill a field’s value, or an element’s innerHTML with the value of a cookie
    • $('#username').cookieFill();
      • Set the value of the input, or HTML of the element, with id, ‘username’, to the value of a cookie by the same name. If a radio or checkbox and it is checked, the cookie will be set. If not checked, the cookie will be deleted.
  • Bind an input to the cookies library
    • $('#username').cookieBind();
      • Fills the field or element with id, ‘username’, with the cookie named the same and sets the field’s/element’s change event to fire cookify() to update the cookie when the input value changes

Options object

Using the options object, cookies can be set with several options such as the domain and or path for which the cookie should be available, expiration date for the cookie, and whether the cookie should be sent over HTTPS only.

The options object has four properties:

  • domain
    • STRING
    • For which domain should the cookie be available
  • path
    • STRING
    • For which path should the cookie be available
  • hoursToLive (DEPRECATED for expiresAt)
    • NUMBER
    • For how many hours should the cookie be valid? (Passing 0 means to delete the cookie at the end of the browser session–this is default. Negative values will delete the cookie, but you should use the del() method instead.)
  • expiresAt
    • Date OBJECT
    • Date object representing expiration date/time of cookie
  • secure
    • BOOL
    • Should cookie be sent to server via HTTPS only?

The structure of the object is as follows:

  var newOptions = {
    domain: '*.mydomain.com',
    path: '/somedir',
    expiresAt: new Date( 2011, 1, 1 ),
    secure: true
  }

You need only set those options which you desire to override.

The default options when not overridden are:

  • domain
    • no value – will cause current domain of current page to be used
  • path
    • /
  • expiration
    • no value–causes cookie to be deleted at end of browser session
  • secure (send over HTTPS only)
    • false

An options object can be passed with set(), del(), cookify(), and cookieBind() to override the defaults on a case by case basis. You can also pass an options object to setOptions() to override the defaults for all calls.

IMPORTANT NOTE: Cookies must be deleted using the same domain and path options with which they were set. Else the cookie will not delete. This is just how cookies work.

How to dynamically Insert Javascript And CSS

This is a short and sweet little article to show you how to dynamically insert a new Javascript (or style sheet) into your web pages, and explores how you can exploit cross-domain includes in your applications.

As JSON and DHTML start to get pushed more and more to the forefront of web-based applications, the web designer is faced with a new problem: how to dynamically insert a script element into an existing web page. It won’t take long to figure out that ajax loads and innerHTML injections won’t work.

Dynamic Cascading Style Sheets

The usefulness of being able to dynamically load a style sheet is fairly limited, but there is one very good reason to keep this tool handy: it lets you load a specific stylesheet for a specific browser. Instead of having one massive style sheet for every browser which visits your page, you can break out the stylesheets into browser specific Firefox, IE, Safari, Opera, etc styles which accommodate the eccentricities of each browser and let you serve smaller css files to your visitors to boot.

The code for this is just as simple as the javascript.

var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'FireFox.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

We get the <head> tag, then create the link and apply the attributes. When it’s all set up we insert the new cssNode into the head section of our webpage where the various styles are instantly applied.

Dynamic Javascript Insertion

Fortunately, dynamic insertion of CSS or Javascript is relatively painless.

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);

It’s really that simple. headID gets the <head> element of the page. Next we create a new ‘script’ element, assign it a text/javascript type, and then the url of the script (which can be anywhere on the net since it’s basically a javascript include). Finally we append the new element to our head section where it is automatically loaded.

If you’re loading an external javascript and you need to know when the script has loaded you can simply use .onload=yourfunction; to set up the onload handler. Here’s an example.

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload=scriptLoaded;
newScript.src = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=sunset&format=json';
headID.appendChild(newScript);

Now when this script has been loaded the .onload event will call a function named scriptLoaded().

 

 

Bootstrap 3 Examples

A whole bunch of examples demonstrating the various Bootstrap components and its features in real action.

Bootstrap Grid System

Bootstrap Typography

Bootstrap Tables

Bootstrap Lists

Bootstrap Forms

Bootstrap Icons

Bootstrap Navs

Bootstrap Navbar

Bootstrap Breadcrumbs and Pagination

Bootstrap Labels and Badges

Bootstrap Progress Bars

Bootstrap Utility Components and Classes

Bootstrap Buttons

Bootstrap Dropdowns

Bootstrap Tooltips

Bootstrap Popovers

Bootstrap Alerts Messages

Bootstrap Tabs

Bootstrap Modals

Bootstrap Accordion

Bootstrap Carousel

Bootstrap Typeahead

Bootstrap ScrollSpy

Bootstrap Affix

D3.js – JavaScript library (Charts)

Hey there,
It’s been long time, I did not post new technical things. While I was googling, I came accross Nice Data Representation library – D3.js.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

Reference Link – D3.js