I currently have a popup dialog with a timetable inside it and a button below. When pressed it should print the timetable inside that dialog.
What I've done so far is: <input type="submit" value="Print Timetable" class="ActionButton" onClick="window.print()"/> but it prints the entire page. I'm not sure how I can print just the table inside it.
I've also noticed that in print preview. there are no colours. It's black and white.
I'm using jQuery and PHP as well.
Thanks
Create a print stylesheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Create CSS rules to hide the content you do not what to be printed. Format the popup so it looks pretty.
http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
Related
I'd like to ask if there's an option to print(send to printer) in js some part of website with css styles ?
I've created code:
let print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
it prints exactly what I want, but I have no css styles there(but I've created media print)
my project on jsfiddle:
https://jsfiddle.net/z58pr1fL/
I advice to create a css file for printer and insert this:
(…)
<head>
(…)
<link rel="stylesheet" media="print" href="print.css" />
(…)
</head>
(…)
Inside this print.css subtract lots of colors as you can. Just for save inks in your users :)
Keep only border of your elements and texts with the shades of grey.
You could create a button for send to user's printer like this:
<button type="button" onClick="window.print()">
or the best way is
<button type="button" onClick="./path/of/javascript/files/printer.js">
printer.js
'use strict'
window.print();
If you not convince, try window.print() in your console.
I want to make these buttons which enable/disable the css across an entire website I am making. I am trying to make it so when a user clicks the button to disable/enable the css, it does so across all the webpages of the site and not just for the page a user is on.
So far, my code to enable/disable the css is as follows
<script>
$("#text-only").click(function () { jQuery('#mainStyleSheet').remove();});
$("#renable-style").click(function () {$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
</script>
Any ideas?
{$('head').append('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
instead of
{$('head').html('<link href="css/style.css" rel="stylesheet" id="mainStyleSheet" />');});
in my opinion you should add a css class to every object that you have made in the webpage.In that class make all the changes.
I have a certain page that I want the user to be able to print using the native browser print page (window.print()) and I want to be able to show the user a preview of the page
I have a css file called print.css which looks like this :
#media print
{ ... }
The native print looks good but I can't figure out how to show the print preview, which means applying the css within "#media print" on demand
You could use jQuery to insert the css to the page on demand withouth the media print tag.
Instead of doing the media print you can do this in the HTML tag itself so you can use the css file for multiple purposes
Jquery:
$('head').append('<link rel="stylesheet" href="print.css" type="text/css" />');
Adding a media tag in the HTML:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
im trying to switch the stylesheet.css and the content section at the same time, if the user click on a Section on the Top-menue bar.
If I do one of them alone, it works fine, but both together will not work at the moment.
In my index.php I have a function that set the Stylesheet:
<link id="pagestyle" rel="stylesheet" type="text/css" href="Style.css">
<script type="text/javascript">
function swapStyleSheet (sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
return;
}
</script>
In the Menu.php is the code for changing the section and it also calls the function above. The Categories are in a list.
<li>Games</li>
With the return false statement the Style switch correct, but not the Content selection. And if I remove the return false statement the Content is correct but the Style switches only for a little moment.
Can somebody help me, please!
Thank you guys! It works now...
I load the Stylesheet now in the php file for every section in the tag with onload. Looks like this:
<body onload="swapStyleSheet('Game.css')">
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here