I have a page with multiple scrolling slides inside a pane. Whenever I try to print the second slide, it always prints the first one which is loaded when user first visit the site. Is there any print function in Javascript or JQuery, which allows me to print slides which wasn't loaded first or even the contents that is visible to the user?
Have you looked at #media print { } and #media screen { } in CSS?
The first will be implemented when printing, the 2nd will be implemented on screen.
Purely as an example...
#media print {
#myDiv { overflow : auto; }
}
#media screen {
#myDiv { overflow : scroll; }
}
Related
I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
I am trying to print the page body, but the vertical "navbar" still shows up and covers a part of it.
This is the code i am using to hide the navbar on print:
##media print and (min-width: 800px){
#print {
display: none;
}
}
This is the navbar loaded on _Layout.cshtml, as a partial view:
<partial name="_MenuSidebarVerticalPartial" id="print" />
You could use the class .d-print-none.
Google Webmaster Tools reports that this page - https://www.shlomifish.org/__Beta-kmor/meta/FAQ/about.xhtml - has a horizontal scrollbar in mobile mode. I verified its presence using Firefox's Ctrl-shift-m in 360x740 portrait mode. How can I eliminate the horizontal scrollbar there?
Note that adding main { overflow: scroll; } is a symptomatic (and not too good) fix, and I'm seeking a better solution.
( The XHTML and CSS both validate. )
main.main {
max-width: 100vw;
}
or, more specific with media query:
#media (max-width:450px) {
main.main {
max-width: 100vw;
}
}
You need to change your grid display setup on your body.
On mobile change on display block and it'll works.
#media (max-width:650px) {
body {
display:block;
}
}
I was wondering if it is possible to change the position of the search box but only on mobiles.. I tried to put id="search" on the box that contains the input with:
#media only screen and (max-width: 767px) {
#search
{
position:absolute;
top: 0;
width:90%;
background: none repeat scroll 0 0 #ffffff;
}
}
But doesn't seem to work. I want the search box just at the bottom of the header, but only on mobiles. Is this possible?
At work we use JavaScript & jQuery to move an element on different screen sizes like so:
function moveMenu(){
if($(window).width() < 767){
// If the screen is less than 767, move the menu to mobile position
$('#menu-header').prependTo('#mobile-menu-wrapper');
}
else {
// Otherwise, put it in the normal location
$('#menu-header').prependTo('#header-menu-wrapper');
}
}
Its important that if someone loads the page on a small screen, then resizes it to large that this function runs. So we also add these two bits to trigger it on page load and on page resize:
$(window).resize(function(){
moveMenu();
});
$(window).load(function(){
moveMenu();
});
This method means you don't have to duplicate menus to 'reflow' the page.
Add another search box in the Center-block
Hide this on desktop and show it on the
UPDATE: Position fixed will work but will not allow to use other elements
the code is something like this
#search1 {
display: block;
}
#search2 {
display: none;
}
#media only [....] {
#search1 {
display: none;
}
#search2 {
display: block;
}
}
Right now I have my #media print style sheet to hide various objects by ID/class, such as
#media print {
#header, #navbar, #navbar, #toolbar, #footer, .title {
visibility:hidden;
display:none;
}
}
At print preview, it does hide these objects but the space they take up is still there, forcing what I WANT to print to be on page 2, with a blank page 1 and blank page 3. If there is a way to have the only page 2 shows at the print screen, or a way to truncate the stuff I don't want as oppose to just hiding them, please let me know.
Thank you.
Using visibility:hidden leaves the space the element would occupy, while display:none does not show that space.
You want to use:
#media print {
#header, #navbar, #navbar, #toolbar, #footer, .title {
display:none !important;
}
}
Of course this has been addressed before:
What is the difference between visibility:hidden and display:none?