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.

First of all, you can download and install here: https://wordpress.org/plugins/crayon-syntax-highlighter/

A Syntax Highlighter built in PHP and jQuery that supports customizable languages and themes. It can highlight from a URL, a local file or WordPress post text. Crayon makes it easy to manage Language files and define custom language elements with regular expressions. It also supports some neat features like:

• Integrated Theme Editor!
• Tag Editor in both Visual & HTML editors
• Toggled plain code
• Toggled line numbers
• Copy/paste code
• Open code in a new window (popup)
• Line wrapping
• Code expanding
• Minimizing
• bbPress 2 support
• Converting legacy code in blog posts/comments to <pre>
• Remote request caching
• Mixed Language Highlighting in a single Crayon
• Mini Tags like [php][/php]
• Inline Tags floating in sentences
• Crayons in comments
• `Backquotes` become code
• pre tag support, option to use setting-value in the class attribute
• Valid HTML 5 markup
• Visual & HTML editor compatible
• Mobile/touchscreen device detection
• Mouse event interaction (showing plain code on double click, toolbar on mouseover)
• Tab sizes
• Code title
• Toggled toolbar
• Retina buttons
• Striped lines
• Line marking (for important lines)
• Line ranges (showing only parts of the code)
• Starting line number (default is 1)
• Local directory to search for local files
• File extension detection
• Live Preview in settings
• Dimensions, margins, alignment, font-size, line-height, float
• Extensive error logging

The code highlight is very easy to use in back end with the toobar icon and window

And the highlight code will be display in front end like this

The post Crayon Syntax Highlighter WordPress plugin 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.

The key and the magic to show background of a css layer in 100% scale is background-size. Just use it like this

#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

To preserve the aspect ratio of the image you should use “background-size: cover;” or “background-size: contain;”.

Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.

Use this html:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

with the following CSS:

#background {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: 0;

}
.stretch {
width:100%;
height:100%;
}

and you should be done!

In order to scale the image to be “full bleed” and maintain the aspect ratio, you can do this instead:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Reference: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background

The post Background Stretch and scale in CSS 100% appeared first on WP2X.

It ‘s quite easy, just following this code

var currentPageUrl = "";
if (typeof this.href === "undefined") {
currentPageUrl = document.location.toString().toLowerCase();
}
else {
currentPageUrl = this.href.toString().toLowerCase();
}

You may want to get it as a stand-alone function to put it in your javascript library, then let ‘s define it as blow:

function getCurrentURL(){
var currentPageUrl = "";
if (typeof this.href === "undefined") {
currentPageUrl = document.location.toString().toLowerCase();
}
else {
currentPageUrl = this.href.toString().toLowerCase();
}
return currentPageUrl;
}

Now every time you want to get current URL, you just need to call getCurrentURL(). It ‘s quite easy to get current URL in javascritp! :).

Thanks for your visit and welcome your comment!

The post How to get Current URL in Javascript? 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.