I tried to set margin-top during printing preview (chrome browser) to a minimum size that could remove page header text (date time, url), but at any size, the header won't be removed.
I have one html file iframe.html that is an iframe referent to another html file print.html which contain printing button.
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<iframe src="print.html" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
print.html is a page I would to print its content, and want to remove header text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
#media print {
#page {
margin-top:0.5cm;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<p>Hello Please press button print to preview</p>
<button>Print</button>
</div>
</div>
<script>
$(document).ready(function(){
$('button').click(function(){
window.print();
})
})
</script>
</body>
</html>
In print.html, I set margin-top of #page to a minimum size 0.5cm I supposed it to removed header page, yet on print preview the content of print.html overlaps the header text.
Here it looks like on print preview:
I wonder if there's any css hack I would remove page header print preview during printing, currently I'm using chrome browser.
Edited
The suggested answer above does not apply to my current problem as I tested solution from there already. The difference is I am print page from iframe rather from page alone. If I run file print.html alone the magin-top style could remove page header fine, however the problem is when press print button from Iframe, that does not work.
Related
I am currently learning to use thymeleaf and javascript. I want to create a header, and when click on the user's avatar a dropdown menu will show.
The problem I am countering is when I add <script> tag to my header fragment, when I click on the button, the console give me ReferenceError, function not found.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!-- Logged in show the user's avatar-->
<div class="profile bulge-icon" sec:authorize="isAuthenticated()">
<button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
<img class="img" alt="user profile picture" th:src="#{images/profile-placeholder.png}"/>
</button>
<div id = "dropdown-menu">
<form th:action="#{/logout}" method="post">
<button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
</form>
</div>
</div>
</header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
To make this js work, I need to add .js file to my page that uses the header fragment. For example, my test.html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
</head>
<body>
<header th:replace="global/header :: header"></header>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</body>
</html>
Is there a method to let .js works when <script> tag is put in my header.html. So in this way, I don't need to add header.js to every page that use the header fragment.
When you use th:replace, Thymeleaf will literally take the contents of that <header> element and place it in your main page. That JavaScript line in your header fragment will never be used.
The way I usually handle this is using Thymeleaf Layout Dialect so that all needed script tags are included on every page. See https://ultraq.github.io/thymeleaf-layout-dialect/ for info on how to use it.
For example, create a layout.html file like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/header.css}"/>
<div layout:fragment="page-content">
</div>
<script type="text/javascript" th:src="#{/js/jquery/header.js}"></script>
</head>
</html>
Now update test.html to use it:
<!DOCTYPE html>
<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
<header th:replace="global/header :: header"></header>
<!-- Add more content for the test page here -->
</div>
</body>
</html>
If the header should be on all pages, you can also move it into layout.html.
I'm practicing the basics from scratch on a new machine and I can't change the text within the header. For some reason it seems the app.js isn't linked up with my index.html file.
This is what i have in the app.js file:
document.getElementsByClassName("title1").innerHTML = 'Testing 123';
Did I link app.js correctly? Is it because I have also linked other js files (bootstrap, jquery and popper)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1 class = "title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
I expected the text within the header to change.
Thanks!
getElementsByClassName returns an array with all specified elements within the document. You can access elements by their index. You can read more about that method from W3Schools.
In your case, you are accessing the first element with that attribute, so that element would be found with an index of 0. You can learn more about indexes and arrays from W3Schools.
document.getElementsByClassName('title1')[0]
I noticed you are using jQuery in your project which enables another method. You can learn more about this from learn.jQuery
$(".title1")[0].innerHTML = 'Testing 123';
I would also suggest you append your javascript to the bottom of the body of your page to minimize above the fold content to have your site load faster. You can learn more about that from Google's Developer Docs.
//app.js
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Website Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.fakeimg {
height: 200px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom: 0">
<h1 class="title1" id="testing11">My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
getElementsByClassName("title1") returns an array-like object,
use getElementById("testing11") or getElementsByClassName("title1")[0] instead
getElementsByClassName function return an array.
So you need do approach the first element in that array and then you can access to the innerHTML property.
Try this...
document.getElementsByClassName("title1")[0].innerHTML = 'Testing 123';
Or..
Var header = document.getElementsByClassName("title1")[0];
header.innerHTML = 'Testing 123';
Although.. the best solution in this example is to approach to the h1 element by it's I'd that you gave him, and document.getElementById function return single element.
Like so...
document.getElementById('testing11').innerHTML = 'Testing 123';
1st solution: You have to be sure that index.html and app.js are saved in the same folder.
2nd solution: click on F12 and than go to console tab and verify if your html is calling your app.js or if there is any other problem.
The html looks good
You can move the script into end of the body
And check that you use document on ready in your js file
I am trying to reproduce the example on the link below to print all nav tabs
Example:
example:print-all-tabs-on-a-webpage
Link taken from a stackoverflow question:
print-all-tabs-on-a-webpage
But I am getting a page like this one:
Nav buttons are not functioning properly and the print button does not do anything.
I just added this to the html file:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
<link rel="stylesheet" type="text/css" href="print-nav-tabs.css">
and
<script src="myscripts.js"></script>
Otherwise, I have the exact same code as in the example. Why does it not work? What am I mising?
I exported the zip of the code in https://codepen.io/anon/pen/RWxvEo, and then I noticed that the css was not rendered well because this was missing:
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
#s1{
background-color:red;
height:100px;
}
#s2{
background-color:blue;
height:100px;
}
#s3{
background-color:orange;
height:100px;
}
#s4{
background-color:yellow;
height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- icons script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="container">
<div class="row" id="s1">Section1</div>
<div class="row" id="s2">Section2</div>
<div class="row" id="s3">Section3</div>
<div class="row" id="s4">Section4</div>
<div>
</body>
</html>
How to use css and javascript in these sections to make them act like separate webpages with on scroll function.
Example: During my first scroll, I want to navigate to section 2 with it's separate url.
During my 2nd scroll, I want to navigate to section 3 with it's separate url.
During my 3nd scroll, I want to navigate to section 4 with it's separate url.
You can't do this with the scroll bar. The next best thing is anchor links.
When you click these it'll scroll to the specific iframe because we tied them with the iframe IDs:
Section 1
Section 2
Section 3
Section 4
And further down your frames...
<iframe id="F1" src="URL 1"></iframe>
<iframe id="F2" src="URL 2"></iframe>
<iframe id="F3" src="URL 3"></iframe>
<iframe id="F4" src="URL 4"></iframe>
I would recomend you to use scrollify its a fantastic plugin that will save you a lot of time and you will have everything you need. Below is the link
https://projects.lukehaas.me/scrollify/#home
this is my html:
<!DOCTYPE html>
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
</body>
</html>
The html is opening fine, but my left and right html documents aren't showing up. This may be from not correctly typing in the code. Was there anything I did wrong?
Is there any way I can reference my left and right html documents to this without using iframes?
The load function attempts to make an ajax call to the location specified (remember, here in JavaScript we're on the client), so unless you specify absolute URLs, it won't retrieve from the correct location.
Furthermore, assuming that left.html and right.html are complete documents including doctype and <head> etc, that would produce invalid HTML.
Try the following:
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe id="left" frameborder="0" style="border: 0;" src="left.html"></iframe>
<iframe id="right" frameborder="0" style="border: 0;" src="right.html"></iframe>
</body>
</html>
While it's not perfect, it should at least display the pages correctly.