Develop Reference

Measures for the code that prevents iFrame execution

I want to implement iFrames, but this pagination code gets in the way.
If I don't comment out this pagination code, iFrame will not be executed.
pagination code ( pagination.js ):
////////// this part or ↓
function tpl(data) {
var html = '';
$.each(data, function(index,item) {
html += '<section class="item">' + item + '</section>';
});
return html;
}
//////////
$(function() {
var len = $('.item').length;
$('#no-p').pagination({
dataSource: function(done) {
var result = [];
for (var i = 0; i < len; i++) {
var $item = $('.item').get(i);
if ($item) result.push($item.innerHTML);
}
done(result);
},
pageSize: 8,
showPageNumbers: false,
showNavigator: true,
autoHidePrevious: true,
autoHideNext: true,
////////// iFrame will not be executed unless this part is deleted ↓
callback: function(data,pagination) {
var html = tpl(data);
$('#items').html(html);
}
//////////
});
});
iFrame code ( iziModal.js ):
$(document).on('click', '.item1', function (event) {
$(".item1").click(function (event) {
event.preventDefault();
$('#iframe').iziModal('open');
$('#modal').iziModal('open', {
iframeURL: $(this).data('href')
});
});
$("#modal").iziModal({
iframe: true,
width: '98%',
iframeHeight: 650,
zindex: '110',
iframeURL: "data.html",
group: 'works',
overlayColor: 'rgba(0,0,0,0.1)'
});
$(".item1").off('click');
});
However, I need both iFrame and pagination.
How can I implement both?

Infinite scroll with photoswipe

I use infinite scroll with imagesloaded and isotope and photoswipe for a photo gallery. When I click on my button "More photos" it loads next photos. But I don't know how to declare those new photos to photoswipe cause the way I do it, when I click on a photo (of the new ones), it open another one.
I got a function to declare photos to photoswipe and this function is executed twice : the first time at the dom load, the second time when I load next photos :
// Photoswipe declaration
new_photos_lightbox();
function new_photos_lightbox() {
$('.gal-photos>ul').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
var $pswp = $('.pswp')[0];
$pic.on('click','li',function(event){
event.preventDefault();
var $index = $(this).index();
console.log($(this));
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true
}
// Initialisation PhotoSwipe
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
return false;
});
});
}
And later I manage isotope :
/*
* Isotope
*/
var len = $('script[src*="js/isotope.pkgd.min.js"]').length;
if (len != 0) {
var $loaderAjax = $('.loader-ajax');
var $container = $('.grid');
$loaderAjax.show();
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.grid-item',
masonry: {
columnWidth: 200,
isAnimated: true,
isFitWidth: true,
gutter: 20
}
});
$container.infinitescroll({
navSelector : '#ms-gallery-nav',
nextSelector : '#ms-gallery-nav a',
itemSelector : '.grid-item',
loading: {
msgText: 'loading photos...',
finishedMsg: 'No more photos',
img: '../img/aj-loader.gif'
}
},
function( newElements ) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.isotope('appended', $newElems, true);
});
new_photos_lightbox();
}
);
// Deactivation infinite scroll the benefit of More button
$container.infinitescroll('unbind');
$('#next-page-button').on('click', function(e) {
e.preventDefault();
$container.infinitescroll('retrieve');
$(this).blur();
});
$("ul.grid li").css({'display': 'list-item'});
$("div.filter-button-group").animate({'opacity':'1'},500);
$loaderAjax.hide();
});
}

Very easy
$pic.find('figure').each(function(e,i) {
$(i).on('click', 'a', function (e) {
var $pswp = $('.pswp')[0];
....
});
});

How to hide items in the correct sequence? , Using waypoint, TweenMax, jquery

I'm collapsando the header when I scroll the browser window, I'm using waypoints to trigger a function when passing a certain limit.
My problem is how to do that, for example, when I scroll down first disappear content (form inputs) and then change the height of the header, and then when I scroll up first increase height and then display the contents (form inputs) .
How do you could do?
I have a example here: fiddle
JS:
$(document).ready(init);
function init(){
var header, pageContainer, pageContent, brandImage;
header = $('header');
pageContainer = $('#page-container');
pageContent = $('#page-content');
brandImage = $('.brand img');
//functions
collapseHaeder();
function collapseHaeder(){
if(pageContainer.hasClass('collapse-header')){
var waypoint = new Waypoint({
element: document.getElementById('page-content'),
handler: function(direction) {
var elementsToResize = $('header, .brand-holder, .header-content');
var hideElms = $('.hide-element');
if(direction == 'up'){
hideElements(hideElms);
resizeHeader(elementsToResize);
}else {
resizeHeader(elementsToResize);
hideElements(hideElms);
}
}
});
}
}
function resizeHeader(elemts){
var newHeight = 45;
var brandHeight = newHeight - 10;
var easingEffect = 'Quart.easeInOut';
if(!elemts.hasClass('resized')){
elemts.addClass('resized');
}else {
elemts.removeClass('resized');
newHeight = 140;
brandHeight = newHeight / 2;
}
//header elements containers
TweenMax.to(elemts, 1, {height:newHeight, ease: easingEffect});
//page container padding
TweenMax.to(pageContainer, 1, {paddingTop:newHeight, ease: easingEffect});
//brand image
TweenMax.to(brandImage, 1, {height:brandHeight, ease: easingEffect});
}
function hideElements(hiddenElement){
var classHidded = 'has-hided';
if(!hiddenElement.hasClass(classHidded)){
hiddenElement.addClass(classHidded);
hiddenElement.fadeOut(800);
}else {
hiddenElement.fadeIn(500);
hiddenElement.removeClass(classHidded);
}
}
}

There is no need to use jQuery's fadeIn and fadeOut when you are already using GSAP. Take a look at this jsFiddle that I have created, code of which is as follows:
/*global TweenMax,TimelineMax*/
$(document).ready(init);
function init() {
var header, pageContainer, pageContent, brandImage, brandHolder, headerContent, hideElement;
var duration = .8,
ease = 'Power4.easeInOut',
stagger = duration * .2;
var minHeight = 45;
var brandHeight = minHeight - 10;
var classNameResized = 'resized';
var classNameHidden = 'has-hided';
var fadeTween = null,
heightTween = null,
paddingTween = null,
imageTween = null;
header = $('header');
pageContainer = $('#page-container');
pageContent = $('#page-content');
brandImage = $('.brand img');
brandHolder = $('.brand-holder');
headerContent = $('.header-content');
hideElement = $('.hide-element');
//functions
initTweens();
collapseHaeder();
function initTweens() {
fadeTween = TweenMax.to(hideElement, duration, {
autoAlpha: 0,
display: 'none',
ease: ease,
paused: true
});
heightTween = TweenMax.to([header, brandHolder, headerContent], duration, {
height: minHeight,
ease: ease,
paused: true,
delay: stagger
});
paddingTween = TweenMax.to(pageContainer, duration, {
paddingTop: minHeight,
ease: ease,
paused: true,
delay: stagger
});
imageTween = TweenMax.to(brandImage, duration, {
height: brandHeight,
ease: ease,
paused: true,
delay: stagger
});
}
function addClasses() {
if (!header.hasClass(classNameResized)) {
header.addClass(classNameResized);
brandHolder.addClass(classNameResized);
headerContent.addClass(classNameResized);
}
if (!hideElement.hasClass(classNameHidden)) {
hideElement.addClass(classNameHidden);
}
}
function removeClasses() {
if (header.hasClass(classNameResized)) {
header.removeClass(classNameResized);
brandHolder.removeClass(classNameResized);
headerContent.removeClass(classNameResized);
}
if (hideElement.hasClass(classNameHidden)) {
hideElement.removeClass(classNameHidden);
}
}
function collapseHaeder() {
if (pageContainer.hasClass('collapse-header')) {
var waypoint = new Waypoint({
element: pageContent,
handler: function (direction) {
if (direction == 'up') {
fadeTween.reverse();
heightTween.reverse();
paddingTween.reverse();
imageTween.reverse();
removeClasses();
} else {
fadeTween.play();
heightTween.play();
paddingTween.play();
imageTween.play();
addClasses();
}
}
});
}
}
}
There are many things that can be improved here in terms of code structure, animation style etc e.g. animating translateY instead of height for a more smooth animation (Link & Link) but I have tried to keep the structure / approach of the code untouched.
Hope it helps.
P.S. I would strongly recommend to take a look at TimelineMax as well for all your sequencing needs in animations. I have also forked another version using TimelineMax.
T

JqvMap onRegionClick (bootstrap) PopOver fires only clicking twice

I am using JqvMap and I want to click on a region and this shall prompt a (bootstrap) popover with the name of the country as title, and the content should be some html links. This is my code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: 'true',
onRegionClick: function(element, code, region) {
$(".popover-title").html(region);
jQuery('.jvectormap-region').popover({
placement: 'top',
container: '#vmap',
content: 'page 1</br>page 2</br>page 3</br>page 4</br>',
trigger: 'click',
html: 'true',
title: ' '
});
},
onRegionOver: function (event, code, region) {
document.body.style.cursor = "pointer";
},
onRegionOut: function (element, code, region) {
document.body.style.cursor = "default";
$('.jvectormap-region').popover('destroy');
// $('#vmap').vectorMap('deselect', code);
}
});
});
</script>
My problem at the moment is that I need to click twice on the map to make popover show up. I read it may be due to the fact that it is not initialized, but I can't seem to initialize it (where? how?)!
Can someone help me with these issues? I can't seem to figure out what the problem is..

So I kinda fixed it (probably in a nasty way but it does the trick).
Hope it will help someone else.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: true,
});
runPopOver();
});
</script>
<script type="text/javascript">
function runPopOver() {
var currentRegion;
jQuery('#vmap').bind('regionMouseOver.jqvmap',
function(event, code, region) {
document.body.style.cursor = "pointer";
currentRegion = region;
}
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
function(event, code, region) {
document.body.style.cursor = "default";
}
);
jQuery('#vmap').bind('regionClick.jqvmap',
function(event, code, region) {
if ($('#vmap [id^="popover"]').length > 1) {
$('#vmap [id^="popover"]').first().remove();
}
var snapshot_url = "http://www.business-anti-corruption.com/country-profiles/europe-central-asia/" + region + "/snapshot.aspx";
$(".popover-title").html(region);
$(".popover-content").html('Snapshot</br>page 2</br>page 3</br>page 4</br>');
}
);
jQuery('.jvectormap-region').popover({
placement: 'left',
container: '#vmap',
html: 'true',
title: ' '
});
}
</script>
So basically when I click on a region if there is more than 1 popover (even to be opened) I get a list of all the popover (2), take the first and remove it from the DOM (.first().remove()).

Here's a more permanent fix:
in the jquery.vmap.js find this bit of code:
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e) {
if (!params.multiSelectRegion) {
for (var key in mapData.pathes) {
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
map.countries[key].setFill(map.countries[key].getOriginalFill());
}
}
var path = e.target;
var code = e.target.id.split('_').pop();
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
if (!regionClickEvent.isDefaultPrevented()) {
if (map.selectedRegions.indexOf(code) !== -1) {
map.deselect(code, path);
} else {
map.select(code, path);
}
}
//console.log(selectedRegions);
});
Replace it with this:
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mousedown mouseup', function (e) {
var PageCoords;
if (e.type == 'mousedown') {
pageCoords = event.pageX + "." + event.pageY;
}
if (e.type == 'mouseup') {
var pageCoords2 = event.pageX + "." + event.pageY;
if (pageCoords == pageCoords2) {
//we have a click. Do the ClickEvent
if (!params.multiSelectRegion) {
for (var key in mapData.pathes) {
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
map.countries[key].setFill(map.countries[key].getOriginalFill());
}
}
var path = e.target;
var code = e.target.id.split('_').pop();
regionClickEvent = $.Event('regionClick.jqvmap');
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
if (!regionClickEvent.isDefaultPrevented()) {
if (map.selectedRegions.indexOf(code) !== -1) {
map.deselect(code, path);
} else {
map.select(code, path);
}
}
}
}
Instead of triggering a click immediately, the script now checks if it's a click or a drag. If it's a click, it fires the code you put in our onRegionClick.

How to create multiple jQuery dialogs in a loop

I am trying to generate multiple jQuery Dialogs within a loop. Funny thing is, if I hardcode the dialogs in the function(), like #dialog1.dialog({...}) and #dialog2.dialog({...}) and so on it works!
But if I generate these functions in a loop it doesn't work!!!
Here is an exemplary code:
<div id=object><div>
<script type="text/javascript">
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for(var i = 0; i < 7 ; i++) {
$( "#dialog"+array[i]).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
$( "#opener"+array[i]).click(function() {
$( "#dialog"+array[i]).dialog( "open" );
});
}
});
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
};
</script> `
It would be very kind if someone could help me!

Include the below code in document ready function
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
}

You need to swap your loops over. At the moment you are trying to access #dialogX elements before they exist in the DOM. In fact, you can combine both loops into one, which creates the button and dialog elements and then instatiates the dialog.
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for (var i = 0; i < array.length; i++) {
var $dialog = $('<div />', {
class: 'dialog',
id: 'dialog' + array[i],
title: 'Details'
}).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
var $button = $('<button />', {
id: 'opener' + array[i],
text: 'Details'
}).click(function () {
$("#dialog" + array[i]).dialog("open");
});
$("#object").append($button, $dialog);
}
});