I have a web page designed in MVC3. I want to add some data (a disclaimer text) at the bottom of the page on the print button click and then print the page. How to do this?
Thanks!
Description
You can do this using css.
Create a div at the end of your page and give them a className disclaimer
Create a stylesheet file for the normal view of your page and set the display attribute to none
Create another css file called print.css and set the display attribute to visible
Sample
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="myCSSfile.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<head>
<body>
<!--- your content --->
<div class="disclaimer">Your disclaimer text</div>
</body>
</html>
Your myCSSfile.css
.disclaimer { display: none; }
Your print.css
.disclaimer { display: block; }
More Information
CSS Design: Going to Print
You want to use CSS and print media style sheets to make the element visible for printing.
A basic tutorial about this can be seen here: CSS Media Types Create Print-Friendly Pages
Related
So I want to include my navbar to every page. I use #extends in laravel and When I define any html elements, It just goes above the navbar. It does not make sense at all. I write the html elements under the navbar but why does it go on top?????
here is my code:
<!DOCTYPE html>
<html lang="en">
#extends('layout.header')
<style>
</style>
</head>
<body>
#extends('layout.navbar')
asdasdsa
</body>
</html>
I was looking at the documentation for the insertSheet method for Kendo Spreadsheet, at the below link:
http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#methods-insertSheet
I didn't see any examples on how to actually use this method. I tried searching on Kendo forums but didn't have any luck. Has anyone used this method or seen any examples of usage that we can use as a reference?
Thanks in advance.
I have provided a very simple dojo showing how to insert a sheet and then rename it.
https://dojo.telerik.com/AXulOsAS
If you look at the demo's for the spreadsheet control it gives you some insight into the control but this is still a relatively new element to the kendo UI suite so the documentation is a little sparse.
https://demos.telerik.com/kendo-ui/spreadsheet/index
have added the dojo code here just in case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script></head>
<body>
<div id="ss">
</div>
<script>
$('document').ready(function(){
$('#ss').kendoSpreadsheet();
var ss = $('#ss').data('kendoSpreadsheet');
ss.insertSheet();
ss.renameSheet(ss.sheets()[1], 'test 1');
});
</script>
</body>
</html>
I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
I use springboot + thymeleaf, it can find the template pages, but could not find the static (css or js).
application.yml :
spring:
application:
name: exe-springboot
thymeleaf:
suffix: .html
resources:
static-locations: /static/**
and the controller :
#RequestMapping("/index")
public String index() {
return "index";
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="../static/index.css"/>
</head>
<body>
<h2>test page</h2>
<span class="test-span">hello world with css</span>
</body>
</html>
index.css
.test-span{
font-size: 20px;
color: red;
}
and browser: http://localhost:8080/index
the except color of hello world with css should be red, but not. and the console, with chrome, shows 404 http://localhost:8080/static/index.css
Try to access the resources in your static directory like this :
<link rel="stylesheet" th:href="#{index.css}"/>
When you are using thymeleaf do not forget "th:" and also you do not have to write the whole path to the resource you want. Spring is looking at static directory so you can access the index.css like in my example.
Also a good practise maybe is to put your css, js, fonts and images in to different folders in your static directory. For example create a folder CSS and put the index.css in it and access it in your HTML like :
<link rel="stylesheet" th:href="#{/css/index.css}"/>
EDIT:
Now the problems is not in the loading of the resources from your static folder. As you can see you are getting a status code 200 that means that the index.css is loaded to your HTML.
So I can suggest you better replace your tag with :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
I am creating an application in mvc3 razor.i am using jqxnavigationbar to create navigationa panels. i added the required js and css files in the folders. below is my examle code in layout
Header 1
Content 1
Header 2
Content 2
Header 3
Content 3
below is my javascript function in header portion
<script type="text/javascript">
$(document).ready(function () {
// Create jqxNavigationBar
$("#jqxnavigationbar").jqxNavigationBar({ width: 200, height: 200 });
$("#jqxnavigationbar").bind('expandedItem', function (event) {
var index = event.item + 1;
alert("Expanded: Header " + index);
});
});
but when i run the project it shown error
$("#jqxnavigationbar").jqxNavigationBar is not a function. and navigation panels are not display in the browser.
what can i do to remove error and use jq navigation bar.
Did you put your script :
At the Top of your _Layout view ?
Your error means that the jquery nav lib has not yet extended the jquery one.
Also look at the script window from your web browser debuging tool to check if you don't load multiple jquery-1.8.3* lib, you should only have one, the full ou minified one.
I did a mistake in my head section in layout page. After adding refference of required jqxnavigationbar js and css files I added the refference of jquery-1.4.2.min.js file.so it does not work for me. Now after removing those refference the final header code is below which works fine for me.
<link rel="stylesheet" href="/Content/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="#Url.Content("~/Content/jqx.energyblue.css")" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/scripts/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/jqxnavigationbar.js"></script>
<script type="text/javascript" src="/scripts/jqxexpander.js"></script>
#*AUTOCOMPLETE JQUERY FILES AND CSS FIES*#
<link href="/Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
#* <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>*#
<script src="/Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
#RenderSection("PageScripts",false)
put code for jqnavigation bar in javascript portion.