NO PROGRAMMING SKILLS REQUIRED

jQuery Tiles Gallery arranges your images inside a random-generated grid, it’s much more than a simple multiple column layout, it’s a beautiful and fancy way to present your showcases, galleries, photos… and so on. The subject of the photos will always be focused, since you can choose the better alignment for each photo.. If you don’t know where to start just copy/paste the script in the demo file bundled with the script.

NO GRAPHIC SKILLS REQUIRED

This script preloads and resizes images to fit them inside each “cell”, so you don’t need to make images of same size or proportions! Be just sure the weight of your photos is good for web (that could mean from few Kb up to 100Kb depending on desired quality).

CAPTIONS

It’s also possible to add captions simply adding them as ALT attribute of each image. The captions can be static or shown on rollover.

CALLBACK

If you know a bit of javascript you can easiliy add any further functionality to the gallery, simply passing your function as callback.

CUSTOM ALIGNMENT, BEST FRAMING

You can set a default horizontal and vertical alignment for all the pictures, but you can also overwrite the default alignment simply using the “data” attributes on the IMG tag.

And now it ‘s FREE here 

The post WordPress jQuery Tiles Gallery Free appeared first on WP2X.

There are 2 ways to solve this issue

1. Javascript to make Full width 100% iframe/embed

Simple add this jQuery code

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

Now, reload the page and see the magic.

2. CSS to make Full width 100% iframe/embed

Much more simple, you can apply this css tips and the result will be the same.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed,  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Remember add class videoWrapper out of your video then the video inside this class will be display 100%.

Now, enjoy the result and welcome any comment.

The post Full width 100% for youtube video iframe appeared first on WP2X.

But if we resize the windows, the popup display well again, that ‘s why I show you here to get the solution to make the popup show beautiful even though user don’t resize the windows. Here is the tips:

$("#your-popup").trigger('updatelayout');

And to make sure you call this line

$(document).resize();

Then everything should work well again :).

The post jQuery Mobile update popup layout after content change appeared first on WP2X.

∞

Ok, this character is special html tags what is not easy to remember :). You can display this in html by this code:

HTML entity ∞ or ∞

It ‘s simple to display infinity symbol in html, ha?! Hope it help you too. Thanks

The post How to display Infinity symbol in HTML appeared first on WP2X.

The easy answer is that it’s the latest version of HTML. But that doesn’t tell us much. Specifically, HTML5:

With HTML5, we can now embed audio and video natively within HTML documents. We can use inline SVG (Scalable Vector Graphics) markup.We can build more robust form experiences, complete with native error checking.We can create games, charts, and animations using the canvas element. Documents can communicate with each other using cross-document messaging. In other words, HTML5 is much more of an application platform, not just a markup language.

DOM-ination change in HTML5 world

interface turned each element of an HTML page into an object that could be created, moved, modified, or deleted using a scripting language. Now we could add animation or interactivity to our web pages, even if we had to wait ages for them to download over our super-slow, 14.4Kbps modems.

The DOM was such a brilliant addition to the web that other browsers quickly followed suit. But not every browser implemented the DOM in quite the same way. Netscape Navigator, for example, used document.layers objects to reference the entire collection of HTML nodes. Microsoft Internet Explorer went with document. all. And web developers everywhere spent years struggling to reconcile the two. Opera andWebKit, for what it’s worth, followed Internet Explorer’s lead. Both browsers adopted document.all.

Eventually “DOM0” went from being a standard-through-implementation to a standard-through-specification with the Document Object Model (DOM) Level 1 Specification7. Rather than document.layers and document.all, we could use document.getElementById and document.getElementsByTagName. Today, all browsers support the DOM.

HTML5 Applets and Plugins

In the midst of all of this—the growth of HTML, the rise of the DOM, and the shift to XHTML—applets and browser plugins joined the party. To their credit, applets and plugins added functionality missing from HTML. For example, RealPlayer and Apple’s QuickTime brought audio and video to the web. With Java applets, you could run a spreadsheet program in your browser. Macromedia (now Adobe) Flash and Shockwave let us add all of the above, plus animations.

Applets and plugins, however, suffered from three major problems:

1. Users who don’t have the plugin (or the applet environment) can’t see the content.

2. Applets and plugins expanded the surface for internet-based security breaches.

3. They were commercial products, and required developers to pay a license fee.

What’s more, plugins and applets sometimes caused their host environment—the browser—to slow or crash.

So what we had on the web was a scenario in which:

• Browsers didn’t parse HTML according to the same rules.
• New markup languages offered few clear advantages over HTML but added overhead to implement.
• Plugins and applets offered additional functionality, but created security and stability issues for browsers and licensing costs for developers.

These are the problems that HTML5 solves:

• It incorporates features and grammars introduced by XHTML and XForms.
• It almost eliminates the need for plugins and the stability and security issues they may introduce.

The post What is HTML5? appeared first on WP2X.