I have the following HTML Markup:
<div id="site-wrapper" class="show-for-large-only">
<div id="site-canvas">
<%= yield %>
</div>
</div>
For Mobile Devices i want an additional section like:
<div class="show-for-small-only">
<%= yield %>
</div>
<div id="site-wrapper" class="show-for-large-only">
<div id="site-canvas">
<%= yield %>
</div>
</div>
With CSS i can hide the divs depending on the user's viewport.
Is there a way to avoid rendering the content of yield twice i.e. only to render the relevant div?
Server doesn't know about clients screen size and available viewport. Unless you specify it in the query string or separate ajax request I think it is impossible to determine.
In your place, I would make an additional ajax get request for desired mobile content.
EDIT:
In your controller, you can determine user-agent by http headers, using request object. I would write a helper for this. Save the result to an instance variable like #is_mobile_agent and in your view you would need an additional if statement before yield. Something like
yield if #is_mobile_agent
Related
I'm a newb working on my first site. I plan on having each page load via ajax in order to have a music player run constant in the background, but I would like back-button functionality so I'm researching how to do that.
Most of the tutorials I'm finding that relate to ajax and pjax are 5-6 years old; I'm just wondering if pjax and the rack-pjax rails gem is still applicable, thanks
You don't need pjax to do this since turbolinks is already capable of this.
Turbolinks allows you to mark certain elements as permanent. Permanent elements persist across page loads, so that any changes you make to those elements do not need to be reapplied after navigation.
<div id="music-player" data-turbolinks-permanent>...</div>
https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads
Update:
The element that you add data-turbolinks-permanent attribute to, must have an unique ID, otherwise it won't work.
Designate permanent elements by giving them an HTML id and annotating them with data-turbolinks-permanent.
<!-- SEQUENCER MODAL BODY -->
<div class="modal-body" id="music_player_modal" data-turbolinks-permanent>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 nav-index" id="sequencerIndex">
<div id="jp_container_1">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Before each render, Turbolinks matches all permanent elements by id and transfers them from the original page to the new page, preserving their data and event listeners.
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
This is mostly an implementation question for a webapp I'm trying to develop. I'm relatively inexperienced so I want to check if my idea for implementation is decent or if there's a much easier way.
The Problem
I want to create a scrollable sidebar that automatically fills with small containers that hold a user profile photo and their name. The basic idea is that a user is a member of a class and the sidebar should hold all of their classmates. The sidebar should be a fixed size and the user should be able scroll down through their classmates and click on a user if they want visit their page.
My Ideas For Implementing
It seems to me that I will need to use some embedded ruby to direct the filling process. Some psuedocode would be something along the lines of "For every user in this class, create a container with their picture and name". I haven't given a lot of thought as to actually handle this step but I'm mostly concerned with the actual html structure.
My idea is to do something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- for each user in class -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span">
<!-- Load appropriate user data -->
</div> where appropriate...
Is this the "proper" way to go about implenting this? I haven't been able to find much information on the idea and visit an example site's source code isn't all that helpful as the sidebar is already filled...
I would separate your sidebar HTML and logic into a partial, E.g. "app/views/shared/_sidebar.html.erb". From there on, you can accept a collection of data from whatever view you're rendering.
View file
<div class="container-fluid">
<div class="row-fluid">
<%= render "shared/sidebar", collection: #users %>
</div>
</div>
Sidebar partial
<div class="span2">
.....
<% #users.classmates.each do |e| %>
<%= e.name %>
<% end %>
.....
</div>
In rails, I'm used to use the yield/content_for to site mesh. (http://guides.rubyonrails.org/layouts_and_rendering.html#using-content_for)
I can't find in Grails documentation a way to do this... Could you help me?
EDIT
Here is the situation:
I have a layout containing this:
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<g:render template="/layouts/header"/>
</div>
<g:render template="/layouts/menu"/>
<div id="container-homepage">
<g:layoutBody/>
<div id="subfooter">
<div id="content">
<div id="left">
<div id="logo_sub_header"></div>
</div>
<div id="right"></div>
</div>
</div>
</div>
</div>
</div>
</body>
And I want to be able to add a html snippet (search tool bar for example) juste above the container-homepage div. A partial could do the trick.. if this search tool bar was always the same. The thing here is that this search bar depends on the page i'm visiting.
I could also just change the position of the container-homepage div to put it directly into the view, and not the layout, but then i'll have to to it in ALL the views, and that's not DRY.
Any ideas?
Regards,
I think you have two solutions:
the g:render tag is the best option if your content block will not change based on a custom page.
Anyway I would take a look ah this link
http://grails.org/Content+Blocks
because g:pageProperty it is the most elegant and flexible solution.
Perhaps the g:render tag is what you're looking for? It allows you to render a template anywhere within your view (including in other templates). You can also pass in a model for the template to use.
Note the section at the bottom of that page on naming conventions -- template view gsp filenames should begin with an underscore (though that underscore is not supplied in the render tag). There's mos def a way to override this, but things work automagically if you put the underscore there.
Well I'm some what baffled!
'Simple problem'
I have parts of my master page that I want to render differently depending on whether or not a ContentPlaceHolder is empty.
So:
I have a master page that as some code like:
<% if (ContentPlaceHolder1.HasControls()) {%>
<div id="LittleDiv">
<% } else { %>
<div id="BigDiv">
<% } %>
some text
</div>
<% if (ContentPlaceHolder1.HasControls()) {%>
<div id="Div1">
yadda yadda yadda
[<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"/>]
blah blah blah
</div>
<% } %>
I have a page that has some code along the lines of:
<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
<% if (Model.SomeValue) { %>
hello!
<% } %>
</asp:Content>
(note: the logic in the example page's embeded code block may be unique, for each content place holder, for each page!)
Which seems nice however it doesn't work.
The problem is as I see it (warning I might be completely wrong!). The Embedded Code Blocks are evaluated in the objects Render. A little counter intuitively the page seems to control the master. So the master page's Render is called before the pages render. This means that the master page always sees content in the page's content control.
Is there a nice way round this?
(I have a bit of a solution but it is a monstrous hack! I won't post it yet coz I don't want to influence thinking.)
OK, here's another idea :). Instead of putting the logic in your master page...
<% if (ContentPlaceHolder1.HasControls()) {%>
<div id="LittleDiv">
<% } else { %>
<div id="BigDiv">
<% } %>
some text
</div>
Why not create a placeholder for it? e.g.
<asp:ContentPlaceHolder ID="LittleBigDivPlaceHolder" runat="server" />
You could then allow your concrete non-master pages to decide the content. You could also avoid repeating yourself by moving the logic into a Partial View that could be, say, parameterised by your different views.
Rather than looking for the resultant controls can your master page examine the contents of the ViewData dictionary and work its logic from there?
Alternatively, you could use javascript to show / hide divs on the client.