CODEWITHSUNDEEP
jquerycssruby-on-rails
darkginger
darkginger

Reputation: 690

Place a div next to a specific, dynamic Rails element after jQuery toggles it in

In my Rails app (that, I should note, is using Bootstrap's grid system), I have a blog post displayed in a left column. On the right column, I am using a jQuery toggle effect to open a quick form (like where a user could leave a comment).

To activate this form, I am using my jQuery to toggle it in when a paragraph tag is clicked, and that is now working. However, the form, with an id of #exampleToggle will post to the very top of the column.

Question: What if I want to have the form/exampleToggle not only toggle in but toggle in next to the paragraph tag that was clicked? 

<div class="col-md-8">
    <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <p id="category"><%= post.category %></p>
            <div id="text"><%= markdown(post.content) %></div>    
    <% end %>
</div> 

<div class="col-md-4">
<div class="exampleToggle">
    <%= form_for :cements do |f| %>
        <div class="form-group">
        <div class="field">
        <%= f.label :username %><br>
        <%= f.text_field :username, class: "form-control" %>
            </div>
            </div>

        <div class="form-group">
        <div class="field">
        <%= f.label :post %><br>
        <%= f.text_area :post, class: "form-control" %>
      </div>
      </div>

<div class="actions">
    <%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>

<script>

    $(document).ready(function(){
        $( ".exampleToggle" ).hide();

        $("p").click(function(){
            $(".exampleToggle").toggle();
            });
    });

</script>

Of course, if my page was static, this would be reasonably easy. Let's say I had three paragraph tags: I could just create "rows" using the grid system and have the form post in that row when the right id selector is clicked.

Since this is dynamic content, there could be any number of paragaphs from the Rails loop, that solution did not work.

Additionally, I am perfectly fine not using the Bootstrap grid if there is a smarter way to do this. My reasoning now is that I am creating a column space on the right side for the form to be placed -- I just need to find some way to effectively place the exampleToggle next to the associated paragraph tag when clicked.

Is that possible?

Upvotes: 0

Views: 169

Answers (1)

Toby
Toby

Reputation: 13415

Obviously this is heavily dependent upon how you plan to populate these pop out boxes, but the following is an example of how to append using jQuery, and position based on the clicked element via CSS.

$(document).ready(function(){
  $("p").click(function(){
    $(this).append("<div class='pop-out'>populate this dynamically</div>");
  });
});

Then:

p {
  position: relative;
}

.pop-out {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
}

If you can create a sample JSFiddle, I can help with any issues from there.

Upvotes: 1

Related Questions