We Keep Coding

Masonry - How to shuffle items

I'm using the masonry script for one of my webpages.
This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.
Thank you for every help!

shuffle the items before they are rendered and displayed
Do the items have any JavaScript event listeners assigned to them.
If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:
creating an array that stores the markup of each individual masonry-item as HTML string.
Shuffle the array and
dump the array contents into the 'container'
A crude solution for sure. But, hope this gets the job done.

Can we hide all the data before page load using Accordion page type?

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance

i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.

You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/

SlidesJS hide pagination

I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!

There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});

select box jquery transition not working

I am trying to use this: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
to add a transition by default to my select-box.
This is the bit of JavaScript:
$(document).ready( function() {
$("SELECT").selectBox()
$("SELECT").click( function() {
$("SELECT").selectBox('settings', {
'menuTransition': 'slide',
'menuSpeed' : 'fast'
});
});
});
I can't seem to make it slide by default. What am I doing wrong? I was able to get it to work by including a separate button exactly like in the demo page. But I want it to use the slide animation by default and can't see/figure out what is wrong?

The selectBox plugin looked interesting so I tried it out and I believe your issue is that you are trying to dynamically set the transition type to slide but you want to create the selectBox with different settings than the default ones, try this:
$(document).ready( function() {
$("SELECT").selectBox({
menuTransition : 'slide',
menuSpeed : 'fast'
});
});
Here is a working example of this solution: http://jsfiddle.net/jasper/APzDJ/

Galleria jquery plugin - removing instances

I have a page where i have several links that when clicked, load a gallery of images into Galleria within a Nyromodal lightbox. When the lightbox is closed, i use $("#container").html('') to clear the contents of the lightbox including Galleria.
// open modal
$.nmManual("#container",{
callbacks: {
// loads Galleria after lightbox has finished opening
afterReposition: function(nm) {
$("#container #gallery").galleria({
width:800,height:600
});
},
// clear container with Galleria before closing the Modal
beforeClose: function(nm) {
$("#container").html('');
}
}
})
The next link i open properly opens a Nyromodal lightbox, properly populates Galleria with a new set of images, but using another instance of Galleria. I would like to delete any old instances of Galleria. How do i do this? I don't see anything in the docs that allow me to remove instances manually.
I know that i have created multiple instances of Galleria by using Galleria.get().
This really doesn't have much to do with Nyromodal, but some context is always good :)
same issue here:
http://getsatisfaction.com/galleria/topics/allow_ability_to_remove_galleria_instances
(code does not work for current version)
Thanks!

You can simply reuse existing instance of galleria, something like this
var gal;
if (!gal) { // not created yet
$('#galleria2').galleria({
dataSource: [],
lightbox: true,
some other options....
});
gal = $('#galleria2').data('galleria');
}
gal.load(images);