Rails 4 passing javascript variable in erb

Question

I want to dynamically display a list of items, but the number of items by row depends on the width of the screen. the number inside each_slice depends on the screen size... if large screen:

<% @posts.each_slice(3) do |s| %>
  <div class="row">
    <% s.each do |p| %>  
     <div class="small-12 medium-6 large-4 columns">

if medium screen:

<% @posts.each_slice(2) do |s| %>
  <div class="row">
    <% s.each do |p| %>  
      <div class="small-12 medium-6 large-4 columns">

Anyone knows how to have a js variable in

each_slice("javascript vairable")

Thank you

Chleo · Accepted Answer · 2014-04-15 13:55:10Z

2

I found a way. I used Jquery to check the size of the window with: (coffee script)

n=2
if $('body').width() > 1025
  n = 3
if $('body').width() > 640
  $(".break:nth-child("+n+"n").addClass "row"

the html.erb looks like this:

<div class="row">
  <% @posts.each do |p| %>
    <div class="break">
      <div class="small-12 medium-6 large-4 columns">

and then with jquery I select the nth div and add a class row. It is not prefect but it works.

answered Apr 15, 2014 at 13:55

Chleo

9352 gold badges8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Peters · Accepted Answer · 2014-04-15 12:28:10Z

0

It's not possible for JavaScript to interact with your ERB the way you're describing. The server doesn't know or care what the screen size of the client is.

You're using ZURB Foundation markup, right? If you REALLY want the server to be changing the markup based on screen size, consider using Foundation's Interchange functionality.

You'd need to reference a separate URL for each screen size that you're targeting. (Either via a URL parameter or create a separate action for each size.) Rails would output different markup depending on the URL that Interchange calls.

answered Apr 15, 2014 at 12:28

Chris Peters

18.2k6 gold badges52 silver badges65 bronze badges

3 Comments

Chleo Over a year ago

What about with gon ?

Chris Peters Over a year ago

I have never used gon. This is the approach that I know.

Chris Peters Over a year ago

Interchange is also nice in this scenario because it handles the event where the window size CHANGES after the server request (i.e., user changes orientation of their mobile device or resizes their browser window).

Greg Burghardt · Accepted Answer · 2014-04-15 13:10:33Z

0

This really sounds like a job for CSS media queries. Judging by the CSS class names you are already using some sort of grid system.

<% @posts.each do |s| %>
  <div class="small-12 medium-6 large-4 columns">

Then in CSS:

@media (screen and max-width: 800px) {
  .medium-6 {
    width: 200px;
  }
}

@media (screen and max-width: 1000px) {
  .large-4 {
    width: 400px;
  }
}

You'll have to fiddle with the width values to get the desired effect.

answered Apr 15, 2014 at 13:10

Greg Burghardt

19.2k10 gold badges58 silver badges105 bronze badges

1 Comment

Chris Peters Over a year ago

I have experience working with this sort of problem. Your suggestion falls apart because of those .row containers. You'd end up with columns that are the correct width but then get pushed down to new rows at inopportune times. But without the .row containers, you may be on to something.

Collectives™ on Stack Overflow

Rails 4 passing javascript variable in erb

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related