2013-06-27 45 views
0

所以即时通讯应用程序的工作,并会感激一些帮助的东西。在这个应用程序中,我有一系列的讨论,由用户发布,下面有评论,也有用户发布。在设计方面,我认为如果每个讨论都占用整个屏幕并在其右侧有一个按钮,它会很酷。按下此按钮将导致视图移动并显示另一个讨论。有关我将如何去做这件事的任何建议?继承人讨论部分我目前有。谢谢!Javascript和Ruby Sidescrolling

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'> 


<% content_for :script do %> 
    <%= javascript_include_tag 'hover_content' %> 
    <% end %> 

<% @micropost = Micropost.new %> 
<% @micropost.discussion_id = discussion.id %> 

<li> 
    <div class = "intro-bar"><span class = "intro"><%=discussion.intro %></span></div> 
    <div class = "content-bar"> 
    <span class = "content"><%= discussion.content %></span> 
    </div> 
    <input type='button' id='hideshow' value='hide/show'> 
</li> 

<span class = "timestamp"> 
    Posted <%= time_ago_in_words(discussion.created_at) %> ago. 
    </span> 

      <% if signed_in? %> 
       <div class = "row"> 
        <aside class = "span4"> 
        <section> 
         <%= form_for(@micropost) do |f| %> 
          <%= render 'shared/error_messages', object: f.object %> 
          <div class="field"> 
          <%= f.text_area :content, placeholder: "Post a comment" %> 
          </div> 
          <%= f.hidden_field :discussion_id%> 

          <%= f.submit "Break Up", class: "btn btn-large btn-breakup",:name => "break_up" %> 
          <%= f.submit "Stay Together", class: "btn btn-large btn-staytogether", :name => "stay_together" %> 
           <% end %> 
           </section> 
           </aside> 
           </div> 
          <% end %> 

<div class = "comments"> 
    <% discussion.microposts.each do |micropost| %> 
     <div class = 'comment-box'> 
     <li> 
     <div class = "comment-pic"></div> 
     <div class = "post-comment"><%= micropost.content%></div> 
     </li> 
     </div> 
    <% end %> 
</div> 

回答