Drupal pop-up window for printing - javascript

I have a Drupal website and I need to create a link to a different version of the same page that opens up in a new window but hides all the side bars, blocks and header and just shows the main content. This is so people can print the main content of the page without all the extra bits.
I know I can add in a link to a print version like print version. But then I want to add a new CSS class to the page which I could use to hide the extra bits. I am not sure how I can add the CSS class to the link/page.
I guess I could also use Javascript but not sure about which method to use for this.

Try the Drupal Print module, it provides customization for printing pages in Drupal.

If the Drupal Print module doesn't work for you (for some reason), the standard method for creating a print view utilizing CSS is to include in your primary stylesheet the following:
#media print {
/* style sheet for print goes here */
}
You would redefine the classes, elements, etc inside that stanza to change or suppress them for printing.
Good luck!

You do not need to create a new print-only page.
Instead, you can just add something like the following to the bottom of your stylesheet and the user will print the page without the extras.
#media print {
body {background-image:none; background-color:#fff;} //turns off bg images
//sets bg to white
div#header, div#footer, div#nav {display:none;} //hides elements
//change to match your divs etc.
h1, h2, h3, h4, h5, ul, ol, div, p, a {color:black;} //changes text to black
}

Related

How to edit bootstrap modal inherited CSS

I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.
The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though.
So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.
.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}
I wanted the modals header background colors to change, which I did not.
You can override modal popup css by using following code, this is work for me try this once.
put this at the top of page or on conman page
#media( min-width: 768px ) {
.modal-header {
background-color: black
}
}

How to override the external CSS using some condition in Jquery?

Actually, I have an application for different countries in different languages and external CSS is defined for all the HTML elements on the Page using classes and Id's. What I want is to change the font of the whole website for a particular country but I don't want to do it by applying the CSS to all the classes again and again. So Is there a way that I can change the CSS(font) of whole website in a go or by using a convenient way.
You don't need to add Class to all of elements again and again. Adding class to body is enough to solve your problem. Please take a look at following code.
if(/* Check your users's country, suppose that your users are in China */){
$("body").addClass("font-chinese");
} else if(/* So on */) {
// keep on adding body class
}
and your CSS file
body {
font-family: default-font;
}
body.font-chinese .container-element {
font-family: chinese-font;
}
body.font-another-country .container-element {
font-family: another-font;
}
Your child elements in .container-element will use inherited CSS properties from .container-element, so you just change font-family of .container-element, it will effect all child elements with out having to add class to all of those ones individually again and again.
You could try something like this:
$('.mysentence').css('font-face', "Arial,sans-serif");
Due to the fact that you're saying there's styles set by ID, the only way to really override these without doing specific style for each element, would be inline styles.
To avoid having to set it for every class like in the example above, you would do something like this instead:
$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');
In the selector part (the first part) you either go through this list and take all relevant elements - or better yet: go through a few samples of the pages you're going to be using and select the relevant html elements from there. It shouldn't really take that long.
For the part about making your solution work on only specific languages/countries I would do something like this:
$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');
Then you can apply class 'en-us', 'en-ca', 'fr-fr' to the body tag and use this to target your javascript changes for those specific countries. Depending on what kind of changes you need to do or how many countries you need to do this for, another approach could be to apply a 'font-verdana' class or something similar to the body tag for those countries and then simply use this as the parent selector instead of the countries/locales.
Well, I have used the $('*') for applying CSS to all the elements and for the elements that are being created dynamically, we can use "DOMNodeInserted" event and deal with the dynamically created elements.

How to render email template in a page?

I have an email template which I wants to render in a page. email template have their own CSS like :
<style>
body{
font-size : 20px;
}
</style>
, when I am trying to render email template on my web page their CSS is overriding my page CSS. How to resolve this overriding issue ? , I want to render template like gmail.
Note : Dont want to render inside iframe.
Option 1 When doing email styling, keep the styles inline. While CSS is supported by many email clients today, the best way to prevent them from interfering with the rest of the page is to restrict the styles to the individual cells.
In essence, you're gonna have a lot of:
<td style="font-size:20px">
content here
</td>
Option 2 If you cannot change the email HTML for some reason, the other way is to adapt your page CSS to be stricter, and more targeted to specific elements on the page.
Assuming your page has a header, a main content and a footer, and the email is appearing inside a section of your main-content, you should give each of these blocks an id. Then, your page CSS could look like this:
/***
* Header
***/
#header {
font-size:16px;
}
#header-nav {
font-size:15px;
}
#header-nav > a { /* affects all links inside header-nav */
font-size:14px;
}
/***
* Main Content
***/
#main {
font-size:18px;
}
#email-section {
/* we expect font-size of the email to be declared within itself.
And we are not worried that its style would overwrite any other
*/
}
#some-other-section {
font-size:14px;
}
#some-other-section > p { /* all paragraphs in this section */
font-size:16px;
}
/***
* Footer
***/
#footer {
font-size: 16px
}
If you follow this discipline of targeting your elements very specifically with your CSS, you usually have little to worry about when you import external stylesheets into your page.
Often, you see people using too loose selector rules that apply to too many things. It's important that CSS developers understand the cascading and specificity well enough.
The error you are getting is logical, because the webpage and email template both having same style tag name such "body" tag is in both aspects.
You have 2 ways
1) do all in-line styling for email template (This is hard to do).
or
2)Change the style tag names of the email template both in html and CSS. (This is easy way to complete your task just add "email" before each style tag of your email template's html and css pages).
Then create a div tag in you web page with appropriate height and width as your email template and put your template into that.

Can I use JQuery with inline html? If so how?

I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, Wordpress.com, and I don't know Java Script yet, but I am familiar with if then statements from studying logic for years.
So I effectively have two problems:
Can I use JQuery with inline html: no css?
How do I do it?
I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.
Just thought I would try for advice here. I may not even be in the ballpark!
Here is my div tag and here is what I attempted:
<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>
$(window).resize(function() {
if ($(this).width() < 951) {
$('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);
} else {
$('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);
}
});
Javascript is kind of over-kill for this kind of thing.
I would suggest using CSS media queries.
Paste this in and it should work just fine :)
<style>
#YourDiv{
height:5px;
background-color:#FFFFFF;
}
#media only screen and (min-width:951px){
#YourDiv{width:950px;}
}
#media only screen and (max-width:950px){
#YourDiv{width:450px;}
}
</style>
<div id="YourDiv"></div>
Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The #media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don't change are set above ONE time because they are the same regardless of window size.
And now, just for fun I'll show you how to do it in pure Javascript as well:
http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)
<script>
var myDiv = document.getElementById("myDiv");
window.onresize = function(){
var w = window.innerWidth;
if (w > 600){
myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
}
else{
myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
}
}
</script>
$('.divIWantedToHide').hide() will hide the div !!
In order to apply css to this div you need to use css:
$('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');
If you want to append any div and apply css to it then use append/html
$('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
or
$('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
No, at wordpress.com you won't be able to use inline JavaScript. Not in regular posts using the HTML editor nor using the Custom Design upgrade that only includes a CSS editor.
Maybe you'll benefit from the following:
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information. You can select which syntax you would prefer to use at the bottom of the Appearance -> Customize -> CSS panel.
If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the #media css property.
#your_div_id {
width: 950px;
/* ... */
}
#media (max-width: 38em) {
#your_div_id {
display:none;
}
}
You are trying to hide a div with class '.divIWantedToHide'. But your div does not have any class.
So you should add to your div the class:
<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;"> </div>
And then, you can show and hide it like here:
$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()

How can I print just an area inside a DIV

I have a page with a top navigation area, a side navigation area, a control button area and somewhere in the middle a DIV with an id="content" that contains content.
I would like to be able to print just the contents of that DIV. I realize I have many lines of code making my other areas invisible and resizing everything but is there some alternative? Is there some way I can just print the contents of the DIV?
Take a look at using Media Types - specifically #media print - in your CSS to specify styling that only applies to printing.
This way, you can write a stylesheet that hides everything except your "area inside a DIV".
Use a css print stylesheet putting display:none in the fields that you don't want to print.
Use the tag link like this:
link rel="stylesheet" type="text/css" media="print" href="print.css"
OR
#media print {
BODY { font-size: 10pt }
}

Categories

Resources