I'm trying to print a line on paper which I don't want to see on screen. This is what I do:
<style media="screen" type="text/css">
.print {
display: none;
}
</style>
<span class="print"><hr></span>
The ruler is displayed on screen as well as on paper. If I put anything else inside the span it isn't displayed. Any idea?
Try removing the span, and applying the condition to the <hr> tag itself, as this may be overriding. (You could right click on the line, and Inspect Element, which will show you if the style is being overridden).
<style>
#media print {
hr { display:block; }
}
#media screen {
hr { display:none; }
}
</style>
So now you can just use <hr> in your markup, and it will only be displayed when printing.
Copy the example below into a HTML file and view it, then go onto Print Preview, and you'll see the lines appearing in the print preview, but not on the screen.
<html>
<style>
#media print {
hr { display:block; }
}
#media screen {
hr { display:none; }
}
</style>
<body>
<h1>This is a title</h1>
<p>This is some text</p>
<hr>
<h1>This is a title</h1>
<p>This is some text</p>
<hr>
<h1>This is a title</h1>
<p>This is some text</p>
</body>
</html>
Related
My web page has a fixed positioned header bar. As you scroll, the content will go under the header bar, using z-index. Clicking on the blocks in the content area will toggle its color. Click anywhere in header should not trigger the event handler of the block.
But this does not work on iOS7 Safari. Tapping on header made blocks change color. As I searched the internet, it seems to be iOS7 bug. Tried window.scrollTo(0,0), and extra 20px thing, did not help.
Interestingly I noticed the same problem on Yahoo Finance and Yahoo Sport web app on iOS7 mobile Safari, where they have fixed header too.
Anyone know a good fix?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<style>
header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
background: grey;
width: 100%;
height: 50px;
}
.content {
z-index: 1;
margin-top: 60px;
}
.block {
background: red;
height: 150px;
margin: 4%;
}
.block.green {
background: green;
}
</style>
</head>
<body>
<header>
Fixed positiond header.
</header>
<div class="content">
<p>On iOS Safari, scroll the blocks below the header, tap the header on the top edge to let the address bar appear. Then tap anywhere in the header, you will see block toggling colors.
</p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(document).ready(function() {
$(".block").on("click", function() {
$(this).toggleClass("green");
});
});
</script>
</body>
</html>
This does appear to be a bug, or at least a quirk in the way Safari on iPad is handling this. For a workaround, it seems that if you add and onclick event handler to your header it resolves the issue:
<header onclick="">
You can also add one with jQuery if you prefer that method.
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
Im using JQM and phonegap to create a simple app. In Android everything's fine, but when I run the app in an IOS device the keyboard makes some strange effect on the screen
If the list is not scrolled, everything seems to be working,
but if I scroll the list a little bit and make the keyboard appear, the hell breaks loose:
HTML
<div id="my-wrapper">
<ul data-role="listview" data-theme="a" data-filter="true" data-filter-theme='b' data-filter-placeholder="Buscar Producto y/o Droga" id="RemediosList">
</ul>
</div>
and the CSS
#my-wrapper {
top : 45px;
}
#my-wrapper form {
position :fixed;
top : 87px;
left : 15px;
width : 100%;
z-index : 10000;
}
Any help, will be welcomed!
I have tried to remove the header and only have a fixed seachbox. Works perfect on desktop and Android. But I get the same result in iOS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
#wrp {
padding-top : 45px;
}
#wrp form {
position :fixed!important;
top : 13px;
left : 15px;
width : 100%;
z-index : 2;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a" data-dom-cache="true">
<div data-role="content">
<div id="wrp">
<ul id="search" data-role="listview" data-filter="true" data-filter-placeholder="Sök.." data-inset="false" data-filter-theme="a">
<li><h2>header<h2></li>
</ul>
</div><!-- /my wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
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.
I'm starting with developing for webpage available on mobile.
I need to have an application with 6 big icons which will consume almost all visible space. When mobile is placed horizontaly I'd like to have those icons 3 rows in 2 columns. And when mobile is placed vertically I'd like to have them 2 rows and 3 columns. I can't declare single icon widht as for example 100px and then use simple float:left - I'd like my loyout to be fluid.
I plan to use jQuery mobile in my page.
I made you a working example, just copy it into an empty html file.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#custom-icon {
position: relative;
float: left;
width: 33.333%;
height: 50%;
}
.ui-content {
padding: 0 !important;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
detectOrientationMode();
setRealContentHeight();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
setRealContentHeight();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'50%','height':'33.33333%'});
});
} else {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'33.33333%','height':'50%'});
});
}
}
function setRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find("div[data-role='content']").height(content_height);
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div id="custom-icon" style="background: red;">Icon 1</div>
<div id="custom-icon" style="background: blue;">Icon 2</div>
<div id="custom-icon" style="background: green;">Icon 3</div>
<div id="custom-icon" style="background: yellow;">Icon 4</div>
<div id="custom-icon" style="background: orange;">Icon 5</div>
<div id="custom-icon" style="background: violet;">Icon 6</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Tested on :
Android 4.1.1 Chrome
iPad iOS 6.0