Swap chunks conditionally

416 Posts

Terry Reply #1, 12 years, 6 months ago

I'm looking for some advice on how to conditionally include different chunks in a template based on browser width (or container/div).

I have a slideshow that I want to reconfigure for smaller screens. I need to use different html so I can't just restyle using media queries and I don't want to load both and hide one of them. I want to conditionally replace a chunk containing the big slideshow with a chunk containing the small slideshow.

The slideshow is populated using MIGX.

I've looked at http://foundation.zurb.com/docs/components/interchange.html. This does exactly what I want, but it retrieves static html files. I need this to retrieve a chunk that includes the GetImageList call for migx. Placing a modx chunk in one of these static html files does not work.

I would image some small snippet could swap out these chunks based on browser width, but I wouldn't know how write such a thing.

Anyone help me out with this?

109 Posts

clareoconsulting Reply #2, 12 years, 6 months ago

Greetings Terry,

I've done similar dynamic page content loads based on media query (although not using Interchange), and it works quite well.

From a quick look, it appears that Interchange is just looking for different source URLs based on the media query. I don't think it cares how that URL's content is generated.

If I'm reading that right, you could then have multiple ("sub-page partials", if you will) MODX resources that each make their respective getImageList call and output the subset of HTML you want Interchange to pull in for the respective media query / MODX sub-page URL.

As those "sub-page" resource URLs would never be intended for individual access by visitors, you'd want to hide them from MODX menus and search, and probably should put them into an exclusion in robots.txt too.

The "sub-pages" could have their own template, or for that matter, no template at all with all; depends on your HTML needs.

416 Posts

Terry Reply #3, 12 years, 6 months ago

Thank you or the insight!

I hadn't considered making, the pages interchange is looking for, modx generated pages. (seems obvious now...)

I'm tinkering with this. Getting closer, having trouble getting the jquery for the slide show to activate, I should be able to sort that out though.

Just curious what other methods you've used for switching out content like this.

Again Thanks for your help!

109 Posts

clareoconsulting Reply #4, 12 years, 6 months ago

Greetings Terry,

Quote from: terrybarth at Mar 30, 2014, 06:00 PM

obvious now...

Chuckle. Been there, done that - many times. Community (& Google) inspire me on a regular basis.

Quote from: terrybarth at Mar 30, 2014, 06:00 PM

Just curious what other methods you've used for switching out content like this.

Rather a roll-my-own technique, I'd have to say, and it varies from site-to-site based on needs.

It's based on thoughts published a couple of years ago by the Filament Group that they called the "Ajax-Include Pattern" (ref: http://filamentgroup.com/lab/ajax_includes_modular_content/). As a part of the implementation, I use media query entry and exit callbacks fired by enquire.js (http://wicky.nillia.ms/enquire.js/) to do the actions necessary for each MQ.

The place where it gets a bit tricky -- and perhaps Interchange has handled this -- but still managable, is when a device qualifies for two different media queries, such as different widths due to portrait or landscape orientation. You have to plan ahead for MQ entry and exit both the first time load, and once loaded such as when a phone user flips the phone on its side, then back, then back again, etc.

Cheers

416 Posts

Terry Reply #5, 12 years, 6 months ago

I remember seeing that article a while back. I'd forgotten about it. I will take another look at it.

The basic Interchange function seems to be working for now. It is swapping code but I'm stilling getting some unpredictable results with the slideshow working one time then not another time. Still zeroing in what's happening there, but it's not an interchange issue.

26 Posts

xgarb Reply #6, 12 years, 5 months ago

I got this tip from somewhere else but basically you need to give the page a while before calling further javascript in the interchange code

$(window).load(function() {
    setTimeout(function() { //give time for interchange to write the HTML into the doc
        $('#slider').nivoSlider({
            effect: 'slideInLeft',                           
            pauseTime: 8000,                
            directionNav: true,             
            controlNav: false,               
            controlNavThumbs: false,        
            manualAdvance: false,           
            randomStart: false,
        });
    }, 800);
});