Reputation: 951
Current Slim.html:
#fullpage
=render partial: 'section_one'
=render partial: 'section_two'
=render partial: 'section_three'
=render partial: 'section_four'
=render partial: 'section_five'
The issue I'm having is that I don't want to render partial: 'section_four' is this is being viewed on mobile.
I tried this:
#fullpage
=render partial: 'section_one'
=render partial: 'section_two'
=render partial: 'section_three'
- if $(window).width() >= 700
=render partial: 'section_four'
=render partial: 'section_five'
But it doesn't work. Any ideas?
Upvotes: 3
Views: 4830
Reputation: 9173
$(window).width() >= 700
is a javascript code and you can't do it like this. Apart from using request.user_agent you can use css media-queries to selectively show or hide content inside your partial. Lets suppose your partial section_four has content like this:
#some_id
.your_content
now you can target #some_id by css and show or hide it according to your device width
@media all and (max-width: 699px) {
#some_id {
display: none;
}
}
For details check css media queries
Upvotes: 1
Reputation: 9747
Try to use request.user_agent
to recognize mobile device. Also you should use inline if
condition while checking for mobile device:
= render partial: 'section_four' if request.user_agent =~ /Mobile|webOS/
There can be some cases where request.user_agent =~ /Mobile|webOS/
will fail to return expected results due to browser's custom user_agent.
So, I recommend Mobile-Fu to work with it in better way.
Upvotes: 5