2 Options to Show All JavaScript on Page

Here are 2 options to quickly view all the JavaScript used on a web page. Could come in handy when trying to find event handlers or specific code without searching through individual files. Option 1: Bookmarklet – A bookmarklet (drag it to your bookmarks) by Ichiro Hiroshi to see all JavaScript’s used on the web [...]

Read more

Dynamically Load jQuery Library Using Plain JavaScript

This is how you can load the jQuery library using plain JavaScript. As the load takes place asynchronously so i’ve included a callback version too so you know when the script inserted has completed and you can start using jQuery! I previously posted about inserting scripts into secure pages so there are more options for [...]

Read more

10 jQuery Plugins that Cost Money

The jQuery Slider can play a very important role when it comes to grabbing attention, displaying images & saving space on your website. It enhances the website UI by providing a convenient way to display images/videos/media and important information which the user can slide through. Today we are sharing you our collection of 10 jQuery [...]

Read more

10 Funny and Entertaining JavaScript Effects

It’s Friday! Let’s have some fun, shall we? In this post, we have collected some funny and entertaining things that JavaScript can do. With JavaScript, you can find some little joys and make many funny things that you may not have realized. So check this out. Enjoy lol!

Related posts:

• 10 Cool jQuery Developed Games
• 10 Extreme Fun jQuery Plugins

Make pictures flying like snake around your mouse pointer just copy and paste the JavaScript code into the address bar of any browser then press Enter.

Source

Make funny things with this simple JavaScript, such as; faking the screen capture of some proof, faking some hot news for April Fool’s Day and more, quickly.

Source

Give your lover the link of this effect, then ask her to answer the question “Do you love (marry) me?” and see if she can say no! (I tried the demo more than 10x and couldn’t help myself from laughing!)

demo
Source

Like the above funny JavaScript but this script uses the picture to make the choices; maybe from the idea of this joke plus some different pictures, you can make more funny jokes.

Source

No need to say more about it, let try it out by yourself.

Source

This funny script made to prove that you’re too trusting of people. Don’t believe me? Just check it by yourself.

demo
Source

Your mind should be ready before run this script, maybe it will not be funny; and you have to enable popup for this darn script! (I got a little headache on this one, and I thought I wouldn’t spare you)

demo
Source

While chatting with friends do you Buzz them or get a Buzz. It will shake your screen. In this article we are going to shake browsers window.

Source

Now you can check the love compatibility between two people with the help of this small JavaScript. (I and this script are not responsible for any broken relationship you tried. lol)

demo
Source

This so simple. All you have to do is to copy and paste the given JavaScript code into website of choice. Don`t forget to change the text!

Source

Read more

Using jQuery .exec() and .compile() Regex

If your working with JavaScript regular expressions a lot (like me) this is worth knowing. For those of you that don’t know the exec() method simply tests for a match in a string and returns the matched text if it finds a match, otherwise it returns null.

/* match just the href of js includes */
var jsSrcRegex = /src=\"(.+?)\"/igm; 

/* html for js include */
var html = '<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>';

console.log(jsSrcRegex.exec(html));

console.log(html);
console.log(jsSrcRegex);

console.log(jsSrcRegex.exec(html));

No results eh?! Interesting enough if we then add an extra console.log and… results are back! hmm…

regex.compile() fixes the problem

Now, if you use .compile() on the regex it works!

/* match just the href of js includes */
var jsSrcRegex = /src=\"(.+?)\"/igm; 

/* html for js include */
var html = '<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>';

console.log(jsSrcRegex.exec(html));

/* recompile the regex */
jsSrcRegex.compile(jsSrcRegex);

console.log(html);
console.log(jsSrcRegex);

console.log(jsSrcRegex.exec(html));

As you can see the array of results is found once we recompiled.

It basically compiles/recompiles the regex during code execution, so generally if you change the regex you should run .compile(). This also applies to using .exec() inside a loop just include .compile() before it. Useful to know.

Read more

10 Great 3D Effects using jQuery

3D is now a commodity with 3D TV’s being all the rage and the latest cinema flicks are nearly always in 3D. With this in mind we can use jQuery to bring amazing 3D effects to our websites! From galleries to menus & text, 3D can take the user experience to the next level. Here are 10 jQuery 3D effects/plugins. (8. and 10. are pretty good!) Enjoy!

Related posts:

• 10 Magicial jQuery Text Effect Plugins
• 10 IE CSS3 and HTML5 Modern Browser Mimics

A JavaScript class which will draw and animate a HTML5 canvas based tag cloud. In general tag clouds use the font size of the tag links to highlight their frequency or popularity, so TagCanvas uses the size of the tag text to determine the weight of each tag.

Source

A jQuery plugin that applies highlight and shadow effects to text in a control so as to create a 3d effect.

Source

Allows creating awesome 3D text effect with jQuery. Enjoy 3D effect in all your text with this easy to use plugin. It comes with the following options to customize the 3D Effect: Depth, Wrapper, Shade_Color, Gradient.

Source

A plugin for the jQuery JavaScript Framework, which converts text into 3D text that can be viewed with simple red/blue 3D glasses. The plugin uses CSS3, with a fall-back for older browsers to create the 3D effect.

Source

Ever wanted your tag cloud to resemble a ball? Of course you did. This tutorial will walk you through how to create a Sphere in jQuery.

Demo
Source

This plugin provides a lot of options to customize the behavior. It provides a set of interesting effects that can be used to design interactive websites. Use them on site headers to create appealing websites.

Source

This jQuery libraray helps you create attractive and lovely 3D shapes. Change the perspective, tilt, rotate and play with the shapes using the jQuery 3D ObjectVR plugin.

Source

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. This is cool!

Source

A 3d animated tag cloud generated from an array. You can easily customize it by tweaking the eide range of options provided by this plugin.

Source

This is a jQuery plugin to create a 3d tag cloud from an unordered list. Create tags that rotate with a 3d effect usig jQuery. This plugin provides a lot of options to customize the looks of the amazing jQuery 3d tag cloud. Scroll in and out with the mouse wheel!

Source

Read more

10 JavaScript Dialog Box/Window Tutorials

We all know that JavaScript adds functionality to web pages, performs useful tasks, validate data and much more. Well you should also know that JavaScript and jQuery can be used to create some awesome dialog windows. Ditch the alert windows … here are some tutorials to get you started! Enjoy!

Here are some previous posts about dialog boxes:

• 14 jQuery Modal Dialog Boxes
• 10 jQuery Alert Windows and Prompts
• Mobile Dialog Boxes

Learn how to control your windows using JavaScript.

Source

This tutorial shows you how to load two frames with one link using JavaScript.

Source

Creates an opacity animation with a control on your website. At the end of the tutorial you will be able to dim a control in and out of view using JavaScript.

Source

This article discusses different ways to launch new windows with HTML and JavaScript.

Source

A small snippet that allows you to keep a window ‘on top’ of all others until closed.

Source

Creating a popup window is maybe one of the most often used JavaScript use case. However a traditional popup window is not the best choice nowadays as it is almost always blocked by browsers. In this tutorial I will learn how to create a layer based popup window with JavaScript.

Source

Learn how to create your own LightWindow from scratch.

Source

In this tutorial it is present the mode to get and modify content in an IFRAME, from the main page, using JavaScript.

Source

JavaScript Bouncing Marquee text scroll at Status Bar of web browser With the help of JavaScript we can add our favorite message with Bouncing Marquee text scroll effect.

Source

These two handy functions are useful when you are trying to keep a dynamic element in view or find if the user has scrolled the page by returning the number of pixels the page has been scrolled.

Source

Read more

10 Awesome CSS/JS Plugins and Coding Techniques

You can create some impressive websites with very little CSS and JavaScript. In this post, we’ve collected 10 among hundreds (more to come on the next post) of awesome CSS and JavaScript plugins and coding techniques that should definitely be in your toolbox. Enjoy!

In this tutorial, you will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Source

Learn how to create a movable object using JavaScript.

Source

Gradient border, going form from a lighter to darker as you go from top to bottom are the trick with these overlays. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Source

To create a drop-shadow with RGBa (a color model that allows an optimized contrast with any kind of background), we will use box-shadow. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Source

Learn to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Source

Learn how to create a coverflow effect that actually flows and animates in real-time, without using canvas or pre rendered graphics.

Source

You will learn how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Source

To create a sliding vinyl effect for showing off the music you love, we take a standard album cover, a little HTML, and some CSS3 transitions and transforms.

Source

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Source

Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

Source

Read more

10 IE CSS3 and HTML5 Modern Browser Mimics

Let face it, some people are stuck using Internet Explorer as their web browser. It could be that work had locked thier machines and they can’t install a decent browser. At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it’s not surprising that IE can’t handle them correctly. Fortunately, a few tricks has been around floating that can make your life easier. Have a look at this post.

Ages ago, the web has been dominated by a few fonts (Arial, Verdana, Courier and most notably Times New Roman). Almost all computers have these fonts installed apparently because these are labeled “web safe”. (Not installed on GNU/Linux though because they’re not free).

But not so long ago, font embedding has become a very interesting and loved technique because it allows you embed a particular font in your design and among other techniques, the @font-face method is probably the most clean and believe it or not, IE has been supporting font embedding since version 4.

@font-face {
	  font-family: yourFontName ;
	  src: url( /location/of/font/FontFileName.ttf ) format("truetype");
	}  

	/* Then use it like you would any other font */
	.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
	}
}

Source

The “a” in RGBa stands for alpha. This new feature allows developers to specify an opacity value for a color, which is extremely useful when coding a website.

.color-block {
   width: 50%;
   background-color: rgba(0, 0, 255, 0.2); /* Modern Browsers */
}

As usual, Internet Explorer shows its lack of innovation and its inferiority to other browsers with no RGBa support at all. Fortunately, filter can achieve a quite similar effect to RGBa:

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Source

Rotating elements is possible with CSS3, using the transform property.

transform: rotate(240deg);
-webkit-tranform: rotate(240deg);
-moz-transform: rotate(240deg);

Internet Explorer will simply ignore all of the 3 declarations above. But hey, IE users got filter, don’t they? Sure, this property isn’t W3C valid, but since it is Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:

<!-- When loaded, the onfilterchange event is fired as the filter makes
its initial settings.  This starts the animation.-->
<DIV ID="oDiv" STYLE="position:absolute;
	filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
		onfilterchange="fnSpin(this)" >
	<DIV STYLE=" background-color: lightblue; padding:5;">
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	</DIV>
</DIV>

Source

Opacity is another CSS3 that IE can’t render. It’s such a pity because being allowed to interact on the opacity of a particular element is very interesting in terms of web design.

Again, the crappy filter property can help us to achieve a satisfying result on IE. The example below shows how to use filter to make an element transparent.

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Source

CSS3 introduces lots of extremely useful selectors. Among others, the :nth-child() pseudo-class targets an element that has a certain number of siblings before itself in the document tree, as shown below:

p:nth-child(3) {
	color:#069;
}

As you can guess, these kinds of things are way too advanced for IE. To overcome this problem, Keith Clark created a very useful script named ie-css3.js. (Using it is easy: Download Robert Nyman’s DOMAssistant, Keith’s ie-css3.js and link them in your HTML document header.)

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

Source

CSS3 allows you to automatically display some content in columns. This is a great thing as it give designers a lot more possibilities to create awesome layouts.

The following CSS will work on Firefox and Safari. It will automatically add columns to a div element.

.column {
	-moz-column-width: 13em,
	-webkit-column-width: 13em,
	-moz-column-gap: 1em,
	-webkit-column-gap: 1em
}

Unfortunately, there’s no way to do something similar on Internet Explorer. But jQuery and its columnize plugin are here to help! The following example shows how easy it is to create columns using jQuery and columnize:

$('#mydiv').columnize();
$('#mydiv').columnize({ width:200 });
$('#mydiv').columnize({ columns:2 });

Source

They are so popular with their “Web 2.0? look and feel. The CSS3 specification understood it, and created a property, named border-radius, which is designed to easily create rounded corners without using a single image.
For those who don’t know, here’s how to use border-radius:

.round {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Fortunately, there’s several ways to create IE-compliant rounded corners without using images. My favorite is DD roundies, a small piece of JavaScript that can round any kind of HTML element.
The following example will create rounded corners on any HTML element with the roundify class.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
	DD_roundies_addRule('.roundify', '10px');
</script>

Source

This has been one of the coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. But, don’t ask if Internet Explorer can handle box-shadow. It can’t.
Once again, to imitate the box-shadow CSS property, we’ll have to use the filter proprietary property, as shown in the following example:

.shadowed {
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696;
}

.shadowed {
	background-color: #fff;
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

Source

Today, most modern browsers can render this property pretty well, but once again, IE ignores it. Happily, the proprietary, IE-only filter property can imitate text-shadow quite well.

p.shadowed {
	text-shadow: #0000ff 0px 0px 30px; /* Modern Browsers */
	filter: glow(color=#0000ff,strength=3); /* IE */
}

Source

Most modern browser can already handle, at least partially, the new HTML5 recommendations. But as Internet Explorer isn’t well known for its sense of innovation, it will simply ignore the markup.

The html5.js is a very interesting project which aims to make Internet Explorer HTML5 compatible. The only thing you have to do is to embed the html5.js script in your html document header. You can hotlink the script, as shown in the example below:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Source

Read more

jQuery Removing Bad Charaters in HTML

I previously wrote about using jQuery to Strip All HTML Tags From a Div. Now if you want to remove all bad character from a HTML string (which may have been provided by a $.getScript() call or such).

This is how you can easily clean up your html and remove bad characters, it could be useful when you get the html from somewhere and you want to .match() for strings but the .match() throws an error because of bad characters. We can do this using regex and still retain our HTML tags like so:

//clean up string/HTML (remove bad chars but keep html tags)
rawData =  rawData.replace(/[<>^a-zA-Z 0-9]+/g,'');

If we wanted to be extra specific we could also remove other common characters which are not needed:

///clean up HTML ready to be used with match() statement
rawData =  rawData.replace(/[^\/\\\"_+-<>=a-zA-Z 0-9]+/g,'');

cleanHTML() Function

I wrote this little function to help with the process of cleaning up the HMTL ready for using regex on it.

/* clean up HTML for use with .match() statement or regex */
var JQUERY4U = {};
JQUERY4U.UTIL =
{
	cleanUpHTML: function(html) {
		html = html.replace("'",'"');
		html = html.replace(/[^\/\\\"_+-\?!<>\[\]{}()=\*\.|a-zA-Z 0-9]+/g,'');
		return html;
	}
}
//usage:
var cleanedHTML = JQUERY4U.UTIL.cleanUpHTML(htmlString);

More Copy and Paste Regex Examples

Read more

10 Useful Tools for JavaScript Developers

JavaScript has proven that it has to be taken seriously because it can really enhance the web! People are starting to see it’s value is not to provide cheap effects but real web solutions. In this article, I’ve compiled 10 useful tools for all JavaScript developers.

FitText is a very interesting tool, which allows the automatic resizing of a text regarding the size of its parent element. Just have a look to the website and resize your browser: The text will fit. Another very interesting tool for modern websites and applications!

Source

Unsurprisingly, a script that adds pretty ligatures to any kind of text. A must-have for all typography lovers out here!

Source

An asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.

Source

Is a script that helps older browsers to work almost as good as newest ones, so you can build modern applications that will work on IE6 and 7. Your clients will love it, that’s guaranteed.

Source

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

Source

Is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. The heatmaps are fully customizable – you’re welcome to choose your own color gradient, change its opacity, datapoint radius and many more.

Source

Is a website which provides the jQuery documentation in a more user-friendly way, so it is now my reference site when I need any jQuery help.

Source

As you can guess, this tool is a bookmarklet generator: Simply paste your regular JavaScript code, press the button and you’ll get a bookmarklet – ready to be installed on your browser bar.

Source

Is a JavaScript frontend for viewing documents, designed to work with digital libraries to present multi-page documents as a single, continuous item. It is designed to work with a IIPImage server and will be an awesome tool for those working on library or bookstore websites.

Source

Is a brand new site which aims to provide JavaScript code snippet for most common tasks: Ajax, JSON, DOM, Object-Oriented JavaScript, and more. A true gold mine to have in your bookmarks!

Source

Read more

10 jQuery/JavaScript Documentation Resources

JavaScript libraries new and old grow and mature just like web browsers and server-side platforms. As a JavaScript developer, you’ll have to keep up with the latest news and learn new skills because staying at the top of your game is important. Here, we’ve collected a list of 10 JavaScript documentation resources to help you save time. Have fun!

To Do (What is still on the list.)
> Fix links to other pages.
> Make a page for the different return types and fix the links.
> Auto scroll the navigation when keys are used.

Source

The API browser will work in Safari, Firefox 3 and IE7.

Source

Adds more elements, matched by the given expression, to the set of matched elements.

Source

Source

Source

The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike. The MDN also has a thorough DOM reference, which we highly recommend checking out as well.

Source

Here’s to bring you fourteen consecutive days of new releases to celebrate the release of jQuery 1.4.

Source

It offers a great collection of articles on NodeJS development since not all JavaScript development takes place in the browser. NodeJS is one of the web’s most popular server-side JavaScript frameworks, whether you’re a seasoned Node developer or someone who’s looking to add server-side JavaScript to his repertoire.

Source

An undisputed expert in JavaScript, Douglas Crockford is Yahoo’s JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language. The videos and transcripts on the YUI blog derive from a series of talks given by Mr. Crockford about the history of JavaScript, its future and its use today.

Source

Source

Read more

Use CSS to Hide Content when JavaScript is Turned Off

Use CSS to Hide Content when JavaScript is Turned Off

This is a tip first seen by Karl Swedberg in one of this jQuery books where you can add a JS class to your HTML attribute when jQuery has loaded like so:

$('HTML').addClass('JS');

Then by using CSS to initially hide the elements, like this:

.JS #myDiv{display:none;}

They will only appear when JavaScript is enabled.

It is also worthy to note that altough JS can be turned off you will still be able to see the HTML markup(and search engine spiders also see this!). But nevertheless, a nifty little trick!

Read more