Thread

Hi all, this probably belongs in a javascript forum but maybe somebody has the solution I’m after. I have a responsive site that behaves very well. At mobile sizes however I want to knock off one of my {exp:entry} tags that is running amongst other things I don’t want to set to ‘hidden’ in the css.

I’m looking to write a conditional in javascript or php that will detect the screen size and return/write a different item each time.

So far I have tried:

(script type="text/javascript")
if (screen.availWidth<=920)
document .write ('small');
else
document .write ('<a href="http://{channel_url}single/{url_title}">{title}</a>
  {categories backspace="2"}<a href="http://{channel_url}category{category_name}/">{category_name}</a>, {/categories}');
(/script)

I’ve also tried giving the elements an id and passing them a new class name. This doesn’t seem to work either.

(script type="text/javascript")
 if (screen.availWidth<=920)
   document .getElementById ("conditional") .className = "mobile-hidden";
 else
   document .getElementById ("conditional") .className = "three column entry";
(/script)

I’ve also run a very simple javascript conditional that does what it’s told at different mobile sizes so it does seem to be detecting it.

(script type="text/javascript")
  if (screen.availWidth<=920)
  document. write('small');
  else
   document. write('big');
(/script)

Any help on this would be hugely appreciated, I can pass on the whole page of code if it’s pertinent.

Paddy

Wouldn’t using Media queries be a better way to go, that way you could modify style declarations based on viewport size.

Thanks for the response bluedreamer and happy new year to you.
I’ve used a media query to alter the style, I’m currently using the skeleton frame work but my issue is I also need to remove a style from the parent container for screen sizes of 480px.

The element I want to change has a style that is used elsewhere in the site, it’s a very small background image of a diagonal rule that sits in the bottom left corner of the entries so I was hoping I could just change this instance of it rather than creating a new style. The css route is probably the most simplistic way of solving this – I guess it just became a battle of trying to get it to work.

Thanks for your help,

Paddy