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.

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

The code expects the entire contents of your page to live inside a div just inside the body element. It rotates that div 90 degrees in landscape mode – back to portrait.

Left as an exercise to the reader: the div rotates around its centerpoint, so its position will probably need to be adjusted unless it’s perfectly square.

Also, there’s an unappealing visual problem. When you change orientation, Safari rotates slowly, then the top-level div snaps to 90degrees different. For even more fun, add

body > div { -webkit-transition: all 1s ease-in-out; }

to your CSS. When the device rotates, then Safari does, then the content of your page does. Beguiling!

Reference: stackoverflow.com

The post Lock orientation to portrait layout in mobile web by js 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.

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.