We Keep Coding

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.

$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck

I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

synchronize css animation with page load

I know there is a bunch of questions like this but none really answering my question.
I had make a preloader with css animation and I want to be synchronised with page load. I can trigger the animation on page load but I want to manage the time that animation last somehow so to follow exactly the page load (even if it's too fast).
An example : http://jsfiddle.net/RgPU7/
I want the 'filling' effect to follow page load time.
Right now I just apply a delay and a fadeout effect to the modal that wraps the css animation.
jQuery(window).load(function(){
$(".modal").delay(3000).fadeOut(1000);
});
Any suggestions would be great. Thanks!

You can always delay a function like this
setTimeout(function() { your_func(); }, 5000);
or you can do something like this
$(this).fadeOut(500, function(){
//Do something
$(this).fadeIn(700);
});
I hope this helps.

how to set display time of ToastMessage?

setTimeout(function () { showToastMessage("Guest added successfully test2").fadeOut(4000);});
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me

You can customise the JQuery toaster as you want, it to be.
Not just the time but the look and feel as well, by passing toaster settings as below
$.toaster({ settings : {...} });
For example to set the timeout property you can pass below argument,
$.toaster({ settings : {'timeout': 5000} });
This setting just need to be done only once.You can change the settings at any moment.
Or you can clear all custom changes and revert to the default settings as below
$.toaster.reset();
For other settings options you can visit this link.

I don't know how work showToastMessage function, but it's looks like this function return jQuery object, so you can use .delay method
showToastMessage("Guest added successfully test2")
.delay(5000)
.fadeOut(4000);
or without jQuery magic you can save jQuery toast object and call fadeOut after timeout
var $toast = showToastMessage("Guest added successfully test2");
setTimeout(function(){
$toast.fadeOut(4000);
}, 5000);

Make DIV appear immediately without fadein effect

I'm using the JavaScript setinterval method, but the DIV appears slowly. Could someone please tell me how to remove the fadein effect? I need for it to appear immediately.
Here is my code:
<script>
setInterval(
function()
{
$('#lista').show().load('pagination.php').fadeIn('slow');}, 0);
</script>

Wow that is a simple question, and one that you could have learned quickly by reading a bit of jQuery documentation. But no matter.
$('#lista').show().load('pagination.php');
You see, you're already showing the element with id lista and then loading some html into it. No need to have the fadeIn on the end.
A possibly better way to achieve the same thing, however only showing the element once the data is loaded, is to pass a callback to the load method:
$('#lista').load('pagination.php', function(){ $(this).show();} );

one function not running with jQuery infinite carousel build

so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!

jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
​
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/

Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!