getResources &limit based on responsive site

141 Posts

Glyn Reply #1, 13 years, 11 months ago

I am looking for a way to change the &limit property of getResources based on the current browser width within a responsive site.

So when the browser width is the more or more

1236px I want [[!getResources? &limit=`10` ...]]
986px I want [[!getResources? &limit=`5` ...]]
720px I want [[!getResources? &limit=`2` ...]]

I know that there are add-ons for mobile browser testing but are there any for browser width testing.

I guess this is something that could potentialy be done using a snippet of some sort.

I am using Revolution 2.2.5-pl and the SimpleGrid framework

Thanks in advance for any advice or help.

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.

☆ A M B ☆
79 Posts

matdave Reply #2, 13 years, 11 months ago

Why not use jQuery :nth-child to hide the extra items? Otherwise you will need to do it with Ajax, remaking the getResources call each time the page is resized.

Mat Dave Jones

141 Posts

Glyn Reply #3, 13 years, 11 months ago

Thanks for the tip matdave. You have put me on a path. Looking around a bit more I found that this may work using jquery slice :

var windwidth = $(window).width();

switch (windwidth)
{	case (windwidth >= 1236):
		$('#menulist ul li').slice(10).css('visible','hidden');
		break;
	case (windwidth >= 986):
		$('#menulist ul li').slice(5).css('visible','hidden');
		break;
	case (windwidth >= 720):
		$('#menulist ul li').slice(2).css('visible','hidden');
		break;
	default:
		$('#menulist ul li').slice(1).css('visible','hidden');
}

I can not test it just at the moment but will hopefully by the end of the day and post here the result.

Not sure how to implement a ajax solution.

I would still prefer a modx solution because the page will still load the extra items that will be removed with the jquery.

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.

390 Posts

odeclas Reply #4, 13 years, 11 months ago

Doing it server-side means the site won't be responsive - it won't reflow to fetch extra items if you increase screen size.

You could always wrap the getResources call in another snippet that has the screen width from the client, but that would need a default setting in order to work for all scenarios.

Writer > E-consultant > MODx developer || Salesforce || modx 2.x || PHP 5.2.13 || MySQL client 5.0.86

☆ A M B ☆
250 Posts

Graeme Leighfield Reply #5, 13 years, 11 months ago

The best way for you to do it would be to style the effected items with a display:none, then on $(document).ready() fire in your code to detect the device width/height then fade them in accordingly. Could get some nice transitional fade in's going on there too!

GEL STUDIOS
MODX Professional | MODX Ambassador

Website | Email | Twitter | Facebook

141 Posts

Glyn Reply #6, 13 years, 10 months ago

I finally cracked this one by approaching it from a slightly different angle by using a php mobile detection script and then outputting via runSnippet:

Below is my snippet

<?php
$agent = $_SERVER['HTTP_USER_AGENT'];

if(preg_match('/iPhone|Android|Blackberry/i', $agent)){  
   	$output = $modx->runSnippet('getResources', array(
		'parents'=>'1',
		'showHidden'=>'true',
		'includeTVs'=>'1',
		'processTVs'=>'1',
		'tvPrefix'=>'',
		'tpl'=>'qFlipTpl',
		'limit'=>'4',
		'sortby'=>"RAND()"
	));  
}  
else
{
   	$output = $modx->runSnippet('getResources', array(
		'parents'=>'1',
		'showHidden'=>'true',
		'includeTVs'=>'1',
		'processTVs'=>'1',
		'tvPrefix'=>'',
		'tpl'=>'qFlipTpl',
		'limit'=>'15',
		'sortby'=>"RAND()"
	));  
}

return $output;

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.