I am noticing that my masonry page is creating overlap and unequal spacing. This isn't consistent and seems to happen sometimes, while at other times it works fine. In every scenario if I resize my window slightly, the mason() function kicks in and fixes it. I originally thought that it was an issue with having to wait for the images to load (around 30 at a time are loading), but I have already implemented imagesLoaded and see no difference. Can anyone point out my mistake?
<script>
function mason() {
var $container = $('#dealcontainer').masonry({
itemSelector: '.outerdeal',
columnWidth: '.outerdeal'
});
$container.imagesLoaded(function(){
$container.masonry();
});
}
function colorize()
{
$('.dealfilterli').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('li').addClass("colorize");
} else {
$(this).closest('li').removeClass("colorize");
}
});
});
}
function InitInfiniteScroll(){
$('#dealcontainer').infinitescroll({
navSelector : "div.pagination",
nextSelector : "div.pagination li a",
itemSelector : "#deals div.outerdeal",
loading:{
finishedMsg: '',
img: 'http://www.example.com/img/icons/site/spinner.gif',
msgText: '',
speed: 'fast',
},
},function(newElements) {
var $newElems = $( newElements );
$('#dealcontainer').masonry( 'appended', $newElems );
mason();
});
}
$( document ).ready(function() {
InitInfiniteScroll();
colorize();
});
$(window).resize(function() {
InitInfiniteScroll();
mason();
}).resize();
</script>
I was having the exact same issue despite using imagesLoaded, and after a lot of trial and error I found that the problem can be solved with a setTimeout function. Here is an example from my project:
setTimeout(function() {
masonryContainer.imagesLoaded(function() {
masonryContainer.prepend(newPost);
masonryContainer.masonry('prepended', newPost);
});
}, 500);
The 500ms timeout is arbitrary, so I would play around with that on your page to find the lowest possible value that still fixes your issue. Hope that helps!
Cheers,
Jake
You should use:
$container.masonry('reloadItems');
on mason() function and everything will be replaced in the correct position.
Related
I have an element in my HTML and it has some HTML inside it. I am converting that to noUISlider at the click of a button (Start Slider). There is another button to hide the slider (Hide Slider). I want to hide the slider but keep the and also the HTML inside it. I am trying the slider.nouislider.destroy(); but it deletes the element completely.
Any help on this is appreciated.
Thank you.
Suhas
Okay, this is what I did and it worked for me. Hopefully, it could be helpful to someone or if there is a better way to do this, please let me know.
My HTML is
<div class="sliderContainer" id="slider">some HTML code</div>
And My JS code is
var sliderActive = false;
function createSlider() {
if (!sliderActive) {
sliderActive = true;
noUiSlider.create(slider, {
start: [360, 1080],
connect: true,
step: 15,
behaviour: 'drag',
tooltips: [
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
],
range: {
'min': 0,
'max': 1440,
}
});
}
}
function destroySlider() {
sliderActive = false;
$('.sliderContainer').attr('class', 'sliderContainer');
$('.noUi-base').remove();
delete slider.noUiSlider;
slider = document.getElementById('slider');
}
Thank you.
I have this code below where I am trying to use Instafeed and Masonry together. Everything works fine until I click the "Load more" button. Then the Masonry layout breaks. It's probably because something is loading before the other or vice versa. I'm new to this so all help would be greatly appreciated.
I got the tip to use imagesLoaded instead of window.load and also to use appended method. But I don't understand how to incorporate that in to my code.
My code is in a script.js doc and outputs in the footer of the page after instafeed.js and masonry.
$(function () {
var loadButton = document.getElementById('load-more');
if(loadButton !== null) {
var userFeed = new Instafeed({
get: 'user',
userId: xxxxxxxxx,
accessToken: 'xxxxxxxxx',
limit: 6,
resolution: 'standard_resolution',
template: '<div class="col30 grid image-top-fill instapic"><img src="{{image}}" alt="Instagram" /> <p class="nomargin">{{caption}}</p></div>',
after: function() {
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
Masonry.start();
}
}
});
loadButton.addEventListener('click', function() {
userFeed.next();
});
userFeed.run();
}
});
$(window).load(function(){
var container = document.querySelector('#instafeed');
var msnry = new Masonry( container, {
itemSelector : '.instapic',
isAnimated : true,
isFitWidth : false
});
});
Thanks in advance for your help! Let me know if there is anything more you need from me.
Cheers / Jeppe
You're correct in that Masonry is trying to work with elements before they're loaded. You can put .masonry('appended', $items) in the after event of Instafeed. Instafeed's developer posted this fix:
https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003
My main.js file looks like this:
require.config({
paths: {
"jquery": "3rd_party/jquery-2.0.3.min",
"bootstrap": "3rd_party/bootstrap.min",
"handlebars":"3rd_party/handlebars",
"html5shiv":"3rd_party/html5shiv",
"modernizr":"3rd_party/modernizr",
"respond":"3rd_party/respond.min",
"jquery-ui":"3rd_party/jquery-ui-1.10.3.custom.min",
'fancybox':'3rd_party/jquery.fancybox.pack'
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
"jquery-ui": {
deps: ["jquery"]
},
"fancybox": {
deps: ["jquery"]
}
}
})
requirejs(["jquery", "fancybox","controllers/" + controller,'modules/login','bootstrap','handlebars','html5shiv','modernizr','respond', 'jquery-ui'],function($,fancybox,controller,handleLogin) {
$(document).ready(function() {
if ($(window).width()>991) {
$(".sidebar").height($(".maincontent").height());
}
$(".searchresults .greencol").height($(".searchresults .article").first().height()-100);
$('.login').click(function() {
handleLogin();
return false;
})
$('.fancybox-inline').fancybox({
maxWidth : 800,
maxHeight : 600
});
$('.fancybox-document').fancybox({
width: 660,
height: 440
});
$('.fancybox-close-button').click(function() {
$.fancybox.close();
return false;
})
});
controller.init();
})
Now with everything happening, it actually takes some time to execute this bit:
if ($(window).width()>991) {
$(".sidebar").height($(".maincontent").height());
}
And the page results in a little flicker.
My only idea is to include jQuery separately in index.html and put this bit in <script>tags. But then my RequireJS setup broke.
Do you have any suggestions how to achieve this?
So you want the resizing to happen as early as possible. It's not completely clear to me how you tried to do it earlier but doing this is the way to make it happen as early as possible, and not break or bypass RequireJS:
Take the following out of your current requirejs callback:
if ($(window).width()>991) {
$(".sidebar").height($(".maincontent").height());
}
Add the following call to requirejs in front of your current call:
requirejs(["jquery"], function($) {
$(document).ready(function() {
if ($(window).width()>991) {
$(".sidebar").height($(".maincontent").height());
}
});
});
By the way, this does not need to be in a different <script> element. You can just put the new call to requirejs right in front of the one you already have. Done this way, the resizing will happen as soon as jQuery is loaded.
So I'm trying to add animations/transitions using YUI and I'm wondering why on earth it uses fixed heights?
http://yuilibrary.com/yui/docs/transition/transition-basic.html
What's the deal with that?
The examples you mean? They do not have to, they are just poor examples. YUI Transition can use all possible values, it even support completely dynamic animations like so:
// Will create a slideDown effect on #thing
Y.one('#thing').transition({
height: function(node) {
return node.get('scrollHeight') + 'px';
},
duration: 0.1,
easing: 'ease-out',
on: {
start: function() {
var overflow = this.getStyle('overflow');
if (overflow !== 'hidden') { // enable scrollHeight/Width
this.setStyle('overflow', 'hidden');
this._transitionOverflow = overflow;
}
},
end: function() {
if (this._transitionOverflow) { // revert overridden value
this.setStyle('overflow', this._transitionOverflow);
delete this._transitionOverflow;
}
}
}
});
This example will expand an element that was previously 0px high to its expected height.
I am using select2 plugin inside a jquery dialog but in does not work. When dropping down, the focus moves to the input control but immediately get out from it,not allowing me to type anything.
This is the HTML:
<div id="asignar_servicio" title="Asignar servicios a usuarios">
<input type="hidden" class="bigdrop" id="a_per_id" />
</div>
And this is the javascript code:
$( "#asignar_servicio" ).dialog({
autoOpen: false,
height: 500,
width: 450,
modal: true,
buttons: {
"Cancelar": function () {
$('#asignar_servicio').dialog('close');
}
}
});
$("#a_per_id").select2({
placeholder: "Busque un funcionario",
width: 400,
minimumInputLength: 4,
ajax: {
url: "#Url.Action("Search", "Personal")",
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10,
};
},
results: function (data, page) {
return { results: data.results };
}
}
}).on("change", function (e) {
var texto = $('lista_personal_text').val().replace(/ /g, '');
if (texto != '')
texto += ',';
texto += e.added.text;
var ids = $('lista_personal_id').val().replace(/ /g, '');
if (ids != '')
ids += ',';
ids += e.added.id;
});
I have this same code in other page and it works.
Any help will be appreciated,
thanks
Jaime
jstuardo's link is good, but there's a lot to sift through on that page. Here's the code you need:
$.ui.dialog.prototype._allowInteraction = function(e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};
Just add it next to wherever you are setting the select2 drop down.
An easy way:
$.ui.dialog.prototype._allowInteraction = function (e) {
return true;
};
add this after whereever you set select2
Or try this from:
Select2 doesn't work when embedded in a bootstrap modal
Remove tabindex="-1" from the modal div
I have found this workaround. https://github.com/ivaynberg/select2/issues/1246
Cheers
Jame
There's a new version of the fix for select2 4.0 from the github issue thread about this problem:
if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}
Just run this before any modal dialogs that will have select2 in them are created.
JSFiddle of this fix in action
The best solution I found was just making the dialog not be a modal dialog by removing modal:true. Once you do this the page will function as desired.
After a while of battling with this I found another option that allows you to keep the dialog as a modal. If you modify the css for select2 to something like the following:
.select2-drop {
z-index: 1013;
}
.select2-results {
z-index: 999;
}
.select2-result {
z-index: 1010;
}
keep in mind that this works however if you open a lot of dialogs on the same page it will eventually exceed the z-index specified, however in my use case these numbers got the job done.
Not enough reputation to comment on a previous post, but I wanted to add this bit of code:
$('#dialogDiv').dialog({
title: "Create Dialog",
height: 410,
width: 530,
resizable: false,
draggable: false,
closeOnEscape: false,
//in order for select2 search to work "modal: true" cannot be present.
//modal: true,
position: "center",
open: function () { },
close: function () { $(this).dialog("distroy").remove(); }
});
$("#displaySelectTwo")select2();
Updating to the newer version of JQuery and Select2 is not an option in our application at this time. (using JQueryUI v1.8 and Select2 v1)
Add this after your select2() declaration.
$.ui.dialog.prototype._allowInteraction = function (e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};
I've used the following fix with success:
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
}
I could fix this by removing the option: 'modal: true' from the dialog options.
It worked fine.
For anyone stumpling upon this with Select2 v4.0.12
I was using the Select2 option dropdownParent
i set the dropDownParent value, and still had the issue.
dropdownParent: $("#ReportFilterDialog")
What fixed it for me, was setting the value to, to select the outer layer of the modal dialog:
dropdownParent: $("#ReportFilterDialog").parent()