Tabbed website in ASP.NET, want to print all of them, recommendations ? - javascript

I have an ASP.NET website divided in tabs like this
|TITLE1| - |TITLE2| - |TITLE3| - ETC.
If user clicks on Title 2, only the div corresponding to title 2 shows under, and so on.
I made a print image button but i'd like to make it so that it print as if all tabs were opened stacked one over another. Right now, it only prints that tab that was clicked.

You will need to render the contents of all your tabs into a div which has a css media print rule associated with it. Your actual tabs also need another css rule which will hide them for printing.
So for example you have
<div id="tabs" class="print_hidden">
Your actual tabs go here
</div>
<div id="printTabs" class="screen_hidden">
Your printer friendly text goes here when the link below is clicked.
</div>
<asp:LinkButton runat="server" id="lnkPrinterFriendly">Printer-friendly view</asp:LinkButton>
Then in css file you have the following:
#media print {
.screen_hidden { display: none; }
}
#media screen {
.print_hidden { display: none; }
}

Use a print stylesheet which has all the tabs (which I assume would be in div elements) set to display: block.

Related

Why is IE ignoring width, height on inline link tag?

Pre-req:
<a href="#a"
onClick="MyWindow=window.open(\'https://<Server IP>/ClickHereNotes.html#<Div Name AAA>\',\'MyWindow\',width=600, height=300); return false;">Click Here.</a>
By clicking on the link above, the embedded html page is opened but only the target div name AAA is displayed.
Below is the toggle like function I have used in the html script tag:
div {
display: none;
}
div:target {
display: block;
}
Problem: When the link above is clicked in Chrome it opens a popup window, while displaying the whole div html content
When I try to open the link in IE 11, the pop up window appears but the window size does not wrap around the html content of the div in concern. There is also no scroll bar.
Things I have tried so far, but did not work:
Adding scrollbar=yes
Adding min-height
Adding % in width and height.
removing width and height.
Adding a char after href=#.
What property should I use to display the pop up window with complete div HTML content?
Try this instead
add this attribute Overflow:scroll to your div
You are trying to show a new page with bookmark .
which is possible by Just create CONTENT Will come on top when url with #BookMark1 will
but still another content will show while scrolling .
to make hide this u need to code for java script.
remove
div { display: none; }
div:target { display: block; }
and add:
html, body{ overflow: auto; }
and add
scrollbar=yes
in tag

Change website stucuture and div position on mobile only

My website is www.to-hawaii.com
When you see the site on mobile the left panel with the ads shifts all the way to the bottom of the site.
On each page the left panel is generated by an include file and when the site is viewed on mobile it shifts under the content. The structure of the site is:
<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div>
<div class="leftpanel"></div> / Which is actually the right panel
</div>
Is it technically possible, without changing the whole structure of the site, to do the following change on mobile - to be included at a specified location on the page, for example under the photo gallery instead of this panel to show on the bottom of the page?
Base on your structure, i think that wouldn't do. To achieve what you want, make a Copy of the div you only want to show on mobile then hide the main div which is for non-mobile through CCS3 #media rule.
Example you want to add the mobile version of rightpanel below the gallery
<div class="gallery-container"></div>
<div class="rightpanel_mobile"></div>
Then manipulate the css...
<style type="text/css">
#media (max-width: 768px) {
.rightpanel { //Main
display: none;
}
.rightpanel_mobile { //Mobile
display: block;
}
}
</style>

How do I conditionally select DIVs that appear on top each page on 'print' mode?

I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of
#media print { .myDiv { page-break-inside: avoid; } }
I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.
Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:
#media print {
.print-header { display: none; }
.print-header:first-of-the-page { display: block; } /*pseudo css*/
}
JS solution is acceptable too.
More Details [added on 04-01-2016]
Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).
Option 1: using an HTML5 API. NOT AVAILABLE
Option 2: using #media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY
On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document
Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE
This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.
Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION
In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?
Related Links
Apparently they won't provide a definite solution, but I may have missed something:
How to use HTML to print header and footer on every printed page of a document?
Print footer on every printed page from website, across all browsers (Chrome)
Having Google Chrome repeat table headers on printed pages
How to apply some styles to first and last elements on a print page?
Using CSS and/or jQuery for Printed Pages with Page Breaks
Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Here is a sample on how to accomplish the previous task with HTML and CSS:
<div id="print-header">
<img src="img/logo.png" width="200px" height="50px" >
</div>
#print-header{ display: none; }
#media print {
#print-header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: right;
}
}
NOTE:
Showing header on all pages was fixed on Chrome

Print website with multiple tabs

Within a website I'm developing there're several info tabs, each of them displaying different reports or graphs when activated.
But when trying to print the website with window.print() it only prints the current displayed tab, that's the current website status, applying the printable CSS styles.
My customer wants to print the whole information in the website, but with the less user interaction as possible. That means without moving from one tab to another, clicking on "print" button for every single page, and avoiding the "validate" and "accept" printing process.
To sum up, my customer wants a single "print" button that prints every single document contained in the different tabs. I am afraid this is 100% impossible as is planned.
May I have to create a printing pool background process?
You can do something like that with CSS only. Just use #media print { }. If your tabs are hidden with display: none; you can just use
#media print {
.tabs {
display: block;
}
}
do a custom print css
#media print {
p {
font-size: 20px;
color: red;
}
}
http://www.w3schools.com/css/css_mediatypes.asp
You can then have all content tabs displayed as display:block

Multiple print styles in one document for different DIVs

I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});

Categories