4

Been tinkering with MixItUp in Bootstrap.

I have it all working in the col structure adding classes to the lists but I can't get it to load randomly every time the page is refreshed! I've used the following 

$(function(){
    $('#Grid').mixitup({
        load: {
            sort: 'random'
        }
    });
});

I’ve had it working on the mixitup code pen but once I distribute it into columns within bootstrap it doesn't want to play ball!

Is there a work around for this?

Allan Pereira
  • 2,572
  • 4
  • 21
  • 28
batas
  • 65
  • 1
  • 7
  • Or.... Is there any decent plugins like mixitup you can recommend that will allow this feature..? – batas Oct 23 '14 at 19:55
  • Can you provide a [jsfiddle](http://jsfiddle.net) for this problem? – Max Leske Oct 23 '14 at 19:56
  • Well I've put the code snippets in here http://jsfiddle.net/9818ohak/ – batas Oct 23 '14 at 20:19
  • I've updated your fiddle with the required libraries and some images from the web (http://jsfiddle.net/9818ohak/6/). Works like charm... – Max Leske Oct 23 '14 at 21:01
  • Thanks Max, it seems to work on the fiddle but I can't get it to work on my site. It loads in the same order every time. I have a separate js file with the following in `$(function() { $('#Grid').mixitup({ load: { sort: 'random } }); });` and I am loading my scripts at the bottom of the body ` ` I have made a new fiddle http://jsfiddle.net/jc3t26wo/ – batas Oct 24 '14 at 15:49

1 Answers1

3

If that separate file is referenced in the head it will be loaded before bootstrap or jQuery. Also, you should load jQuery before bootstrap. My advice: put both bootstrap and jQuery in the header, then call your function in document.ready():

<head>
...
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mixitup/1.5.6/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#Grid').mixItUp({
                load: {
                    sort: 'random'
                }
            });
        });
     </script>
</head>

Update

I might have found your problem. You've linked to version 1.5.6 of the MixItUp plugin, while what I copied into the fiddle is version 2.1.7. When I switch versions in any of the fiddles, the new version works while the old one doesn't.

Max Leske
  • 5,007
  • 6
  • 42
  • 54
  • Sorry I've been away. Still doesn't work in fact if I use the script in the head it fails to load entirely. It loads when called via $(function() { $('#Grid').mixitup({ load: { sort: "random" } }); });

    I still can;t figure out what is going on. In the fiddle http://jsfiddle.net/jc3t26wo/ it seems to work but will only load in one column.

     – batas Nov 06 '14 at 16:14
  • I've added a line of CSS which should fix the "one column" problem: http://jsfiddle.net/jc3t26wo/1/. If the function doesn't execute in the head then you either have unresolved dependencies or problems with scripts influencing each other. Do you see any script errors in the development console of the browser? Can you post the ` – Max Leske Nov 07 '14 at 10:24
  • I have uploaded what I am working with to [here](http://beta.tsharchitects.co.uk) – batas Nov 11 '14 at 14:39
  • As I've pointed out, you are using version 1.5.4 (even older than in your fiddle). You should try using version 2.1.7. – Max Leske Nov 11 '14 at 19:42
  • Sorry, uploaded the wrong version as you pointed out. With the current Mixitup js uploaded the whole thing no longer works... – batas Nov 12 '14 at 11:09
  • You're using `mixitup` instead of `mixItUp`. Javascript function signatures are case sensitive. `#Grid .mix` has the rules `opacity: 0` and `display: none`. That hides all images from view, remove those for testing. Your CSS isn't valid, you need to fix those errors. I think that should pretty much fix it. – Max Leske Nov 12 '14 at 12:58