I am working on a website for a shelter that uses petango to display an IFrame. My shortcode looks like this:
[advanced_iframe securitykey="xxxxxxxxxxxxxxxxxx" use_shortcode_attributes_only="true" src="http://ws.petango.com/webservices/adoptablesearch/wsLostFoundAnimals.aspx?LostFound=StrayOnly&species=All&gender=A&agegroup=All&
colnum=3&orderby=ID&authkey="xxxxxxxxxxxxxxxxx" width="100%" height="600" id="advanced_iframe" enable_responsive_iframe="true" ]
I would like to be able to detect the size of the screen and set the number of columns to 1 or 3 - ie a mobile device with small screen. Mind you I am new to javascript and web programming in general, but I thought something like this in a custom html block would work:
Code:
<script type="text/javascript">
var cols = 0;
if($(window).width() < 400)
{
cols = 1;
}
else
{
cols = 3;
}
return ([advanced_iframe securitykey="xxxxxxxxxxxxxxx" use_shortcode_attributes_only="true" src="http://ws.petango.com/webservices/adoptablesearch/wsLostFoundAnimals.aspx?LostFound=StrayOnly&species=All&gender=A&agegroup=All&colnum="+cols.toString()+"&orderby=ID&authkey=xxxxxxxxxxxxxxxxxxxxxxxxx" width="100%" height="600" id="advanced_iframe" enable_responsive_iframe="true" ]);
</script>
but it doesn't. Any idea how I would go about this in WordPress?
Login
FAQ
Search
