I am new to Rails. I am using Aptana Studio 3 to write a small application.
In the Views folder, I added a new .html.erb page and added a jQuery navigation menu bar. This page also has a banner. I want to keep this as a base page (like Master Page in .NET) for all the other pages.
I want all the other pages to automatically show the banner and menu bar on top.
How to do this? I am using Rails 3.2.
Edited
Code of application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript" src="..\Libraries\jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
<style type="text/css" rel="stylesheet">
/* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
#cssdropdown li.headlink a { display: block; padding: 15px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
#cssdropdown li.headlink ul li a:hover { background-color: LightBlue; color:Black }
/* Pretty styling */
body { font-family: verdana, arial, sans-serif; font-size: 0.8em;}
#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: Blue;}
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
</style>
</head>
<body>
<%= yield %>
<div id="divMain">
<div id="divHeader">
<img src="..\Images\W.png">
</div>
<div id="divMenu">
<ul id="cssdropdown">
<li class="headlink">
Task
<ul>
<li>Add New</li>
</ul>
</li>
<li class="headlink">
Reports
<ul>
<li>Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content"><%= content_for?(:content) ? yield(:content) : yield %></div>
</body>
</html>
Code of Content.html.erb
<% content_for :stylesheets do %>
<div id="divLogin">
</div>
<% end %>
<% content_for :MainContent do %>
<div id="divMain">
</div>
<% end %>
<%= render :partial => "layouts\application.html.erb" %>
Rails uses layouts as master templates. As default will you have one master layout template called application, which you can find in app/views/layouts/application.html.erb. If you look at this file will you see something like:
# app/views/layouts/application.html.erb
<html>
<head>
...
</head>
<body>
...
<div id="content">
# Your page content will be inserted here:
<%= yield %>
</div>
...
</body>
</html>
As default will this be rendered for all pages, and the content of each page (fx your new.html.erb) would be rendered in the yield block.
This means that application.html.erb is the right place to but generel layout stuff, like menus and banners that should appear on all pages.
If you want to have something that varies a bit for each page (fx different banners) can you add a special <%= yield(:banner) if content_for?(:banner) %> in your application.html.erb file. You will then be able to add a block in each of your pages for a banner like this:
# app/views/some_resource/some_page.html.erb
<% content_for(:banner) do %>
# insert page specifik banner here
<% end %>
# normal content for page
...
I hope this answers your question?
You can also read more about layouts (fx how to use more then one layout) on http://guides.rubyonrails.org/layouts_and_rendering.html
Edit: correct way to implement content.html.erb
The content of content.html.erb should be:
# What is this? This has nothing to do with stylesheets?
<% content_for :stylesheets do %>
<div id="divLogin">
</div>
<% end %>
<div id="divMain">
</div>
So no content_for :MainContent block and don't render the ´application.html.erb´ layout template (it's not even a partial, so you can't do this).
You can use nested layouts as described here.
Watch from 5:18,
from what I've read I think thats kind of what you may be looking for.
Hope it helps.
Railscast #328
Also here is a link to Twitter's bootstrap navbar which you may want to look into. It will show a banner and navigation bar on all pages and is fairly easy to set up.
http://twitter.github.io/bootstrap/components.html#navbar
One of the best sources for this topic is the beginning of the book The Rails View. Here is the link: The Rails View
This really helps with the content_for helper method, which will become your friend instantly once you know how to use it.
Related
Every cycle I get the new Thumbnail BUT under the previous one. Any suggestions how to solve that? How in each cycle add the new Thumbnail horizontally next to the previous one, until the space is fill and then move to the next line? Thanks.
From TO Picture
CODE
<% #employees.each do |em| %>
<div class="listTumbnail">
<% if em.user.imagepath %>
<div class = "user-image">
<img src="<%= em.user.imagepath%>" class="listimg">
</div>
<% else %>
<div>
<%= image_tag("icons/desconocido.jpg", :alt => "not found", :class => "listimg") %>
</div>
<% end %>
</div>
<% end %>
.user-image {
float: none;
padding-top: 127px;
margin-left: 193px;
padding-left: 6px;
border-left-style: solid;
border-left-color: #000;
border-left-width: 1px;
}
.listimg {
display: block;
max-width:80px;
max-height:100px;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 40px;
}
.listTumbnail {
border: 2px solid #95989A;
border-radius: 3px;
color: #000;
height: 140px;
width: 110px;
margin: 5px;
}
try adding this to your stylesheet:
.listThumbnail {
display: block;
}
.user-image {
display: inline-block;
}
If for some reason you don't have a css file in your project, here's one basic way to add one:
Create a file named my_styles.css (or whatever you want to name it) & add the above css examples there.
Add the following link in the <head> of your application.html.erb file:
<link rel="stylesheet" type="text/css" href="my_styles.css">
This allows your html file to work with your css file/stylesheet.
I'm making a web-app and came accross an interesting thing.
So I have a wrapper div with other divs in it. The wrapper has the following formating:
#ready{
height:568px;
white-space: nowrap;
}
their children divs have this:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
It works in firefox and chrome, the divs are next to each other as intended. I have to add float:left to .theme to make it work in Safari. Although when I add float:left Mobile Safari will break the divs to new lines.
Is this a bug, or am I doing something wrong? Any ideas, workarounds?
[EDIT]
Added html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>
Since you've tried variations of float: left, display: inline-block, position: relative and position: absolute to get your row to stay in one line, but it always breaks into two lines on one device/browser or another, maybe a table layout will achieve your goal.
You can use either the HTML <table> element or CSS table properties. In my example below I've gone with CSS.
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
Hope this helps. If you have any questions leave a comment below.
So my footer is transparent on every page. I don't know why it is but it is.
I would like to keep it transparent on the home page, but have a white bg on every other page. Any suggestions on the best way to go about this would be awesome. I have tried using many different bootstrap methods, but it always changes the bg on the home page as well, and pushes the footer to the top of the page??
I'm using rails 4.2.
_footer.html.erb
<body class="footer">
<nav class="navbar navbar-fixed-bottom">
<div class="container-fluid">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav"></ul>
<form class="navbar-form navbar-left">
<ul class="nav navbar-nav navbar-left">
<li><%= link_to "Privacy", privacy_path %></li>
<li><%= link_to "Terms", terms_path %></li>
<li><%= link_to "About", about_path %></li>
</ul>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
styles.css.scss (haven't input anything for the footer)
$navbar-default-bg: white;
$btn-default-bg: white;
#import 'bootstrap';
body {
color: black;
padding-bottom: 50px;
}
.searchbox > div {
text-transform: lowercase;
margin:0 auto;
padding-bottom: 15px;
width:600px;
}
.hb{
a {
color:white;
}
.privacycolor{
color:white;
}
.termscolor{
color:white;
}
.aboutcolor{
color:white;
}
.logincolor {
color:white;
}
.signupcolor {
color:white;
}
.navbar-brand{
color:white;
}
color:white;
background-size: cover;
background-image: asset-data-url("boom1.jpg")
}
.innercover{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.ab {
.featurette-heading {
margin-top: 150px;
}
}
.progress{
height: 24px;
}
.mcds {
.well {
background-color: white;
}
.jumbotron {
color:white;
background-size: cover;
background-image: asset-data-url("doi.jpg")
}
.row {
margin-bottom: 25px;
}
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title> Check it out </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header'%>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer'%>
</body>
</html>
If you need any other pages please let me know. Many thanks.
I am actually kinda new to html, but i cant figure out why i have to scroll to see the footer when there isn't any content between the container and it.
HTML
<head>
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<![endif]—>
body {
background-color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
</div>
<div class="footer">
<p> FOOTER CONTENT </p>
</div>
</body>
</html>
CSS
.wrap {
position:relative;
margin:0 auto;
width:100%;
}
.footer {
background-color: black;
bottom: 0;
float: right;
height: 240px;
left: 0;
overflow: hidden;
padding-top: 5px;
width: 100%;
}
Edit, I added the full HTML body, Please refer to the top HTML section for information.
Looks like you have some malformed html. It seems to work fine in jsfiddle after stripping everything out before <body> and the last </html> tag. http://jsfiddle.net/g6gDS/
Edit. I also made the text white in the footer so you can actually see it against the black background.
I think i figured part of it out. My body height was set to 100%. So i backed it down to 85% and it eliminates the scroll but there is a black spot of the background showing at the bottom. Hmm
I have tried this using both the files from the Masonry website, plus the masonry-rails gem, but am getting the same problem.
Basically, when I resize the browser window, the boxes aren't moving to fit the new page size. Instead, I'm just getting scroll bars appearing in the browser.
I know that the files are loading fine, and picking up the right selectors, because if I e.g. change the column width in the masonry() parameters, the boxes do appear in a different place when I load the page.
Also, I'm using Bootstrap if that's relevant, but I've named the selectors so they don't clash with the ones reserved for bootstrap - e.g. using #masonry-container instead of #container.
Any help would be much appreciated, thanks!!
application.js:
//= require masonry/jquery.masonry
message_board/show:
<div id="show-message-board">
<%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>
</div>
<script>
$(function(){
$('#masonry-container').masonry({
// options
itemSelector : '.item',
columnWidth : 50,
isAnimated: true
});
});
</script>
_show_message_board.html.erb:
<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
<div class="item">
<p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
<p class="message_content"><%= message.content %></p>
</div>
<% end %>
EDIT:
I've tried using the following as suggested elsewhere, and that still doesn't work!:
$(function(){
var $container = $('#masonry-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
Here's what I did to get Masonry to work in my Rails project. Perhaps this will help you...
I downloaded the "jquery.masonry.min.js" file from the site and placed it in my app\assets\javascripts directory.
I added
//= require jquery.masonry.min to my application.js file
I created a separate css file for masonry (just to keep things neat) called "masonry.css.scss" under my app\assets\stylesheets directory. This is the CSS I have (I'm using "box" instead of your "item"):
.box {
margin: 5px;
padding: 5px;
background: #D8D5D2;
font-size: 11px;
line-height: 1.4em;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline;
width: 260px;
}
.box img {
width: 100%;
}
Since I'm using the code in my "home\index.html.erb" file, I created a "home.js" file under my app\assets\javascripts" directory. This is the js code I have:
jQuery(document).ready(function () {
var $container = $('#UserShoppingRequestsContainer');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector:'.box',
isAnimated:true,
animationOptions:{
duration:750,
easing:'linear',
queue:false
}
});
});
})
Finally, in my "home\index.html.erb" file, I have something like this:
<div id="UserShoppingRequestsContainer">
<% #shopping_requests.each do |shopping_request| %>
<div class="box col3" id="<%= shopping_request.id.to_s %>">
<%= link_to image_tag(shopping_request.request_picture.url(:medium)), user_shopping_request_path(shopping_request.user, shopping_request) %>
<p class="serif1_no_padding"><%= shopping_request.category.name %></p>
</div>
<% end %>
</div>
I think that's it.