Is there any solution to disable Javascript style changes in print?
For instance, if I'm hiding something through Javascript but I want to include that hidden info in print.
I hid a div using Javascript and I want to show that div if Javascript is disabled. Now the problem is, because div is hidden using Javascript it's also not showing when the page is printed.
Use a print stylesheet, along with !important statements to force the element to be visible for printing.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
CSS:
#myDiv { display: block!important; }
I've found a workaround (at least, it works for me). In my instance i had a basic html page with some styling (screen.css & print.css) plus some javascript to progressively enhance the page with extra features, etc.
When it came time to print the page i realised that the js was affecting the layout (since i was doing some css styling via jquery).
What i ended up doing was this:
in "screen.css"
body {
background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */
}
in "print.css"
body {
background-color: #fff;
}
in "the-javascript-file.js"
$(document).ready(function()
{
if (isPrinting() == false)
{
init();
}
});
function isPrinting()
{
var isPrint = false;
/* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)',
should do some testing here with other values || other attributes...
(font-size, color, line-height, other attributes that will have the
greatest difference / variation between "screen" and "print" styles)
*/
if ($('body').css('background-color') == 'rgb(255, 255, 255)')
{
isPrint = true;
}
return isPrint;
}
function init()
{
// All sorts of awesome goes here
}
And that was it! It worked!
Here's an overview of what's happening:
User loads page
Browser loads "screen.css"
Body background colour is set to "#ccc"
Browser loads "the-javascript-file.js"
JS checks background colour... it's "#ccc"...
JS does its thing
User hits print command
Browser loads "print.css"
Body background colour changes to "#fff"
Browser loads "the-javascript-file.js"
JS checks body background colour
JS realises background colour is "#fff"
JS does nothing :)
Hope this helps someone out there :)
The use of !important has already been mentioned, but it is a blunt instrument and things get very complicated once you start needing to override things which are already !important.
One of the great benefits of CSS is that it allows you to separate style from structure. Instead of using JS to manipulate the style of an element, use it to manipulate the structure. For example, by manipulating the className property.
Your screen media stylesheet can then hide the element, while leaving it visible for the print media stylesheet.
This has the additional benefit that you don't need to think about having to override these styles as they won't apply in the first place (for print).
Related
On some websites you can choose a color theme of a website by clicking a button. Seems like nothing sophisticated, however is there any state of the art techniques to do that (maybe toggle between classes throughout a page or call different css files)?
Give your body a color class.
For example <body class="color-green">. You can toggle the class via JS:
document.body.classList.toggle('color-green').
In your CSS you have to create color-aware selectors:
.button {
color: blue;
}
.color-green .button {
color: green;
}
In my opinion that's the way to go.
If you create a lot of color rules in your CSS you should probably seperate them into their own files and include them when the change-color button is clicked.
i find the new css3 solutions very helpfull also the js:
element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');
element.classList.contains('className');// check first
and so if you want to change the whole page's style you need to start from the highest element as you can't style parent nodes with css ...
example 1
with more than 2 classes
body.class1{color:blue}
body.class1>div{color:blue}
body.class1>div>a>p>whatever:hover{color:blue}
body.class2{color:green}
body.class2>div{color:green}
/*the div's inside the body with class 'class2' have a green font*/
body.class2>div>a>p>whatever:hover{color:green}
in this case you change the style to the whole page by just calling
body.classList.remove('class1');
body.classList.add('class2');
example 2
with 2 classes (one default and extra)
body{color:blue}
body>div{color:blue}
body>div>a>p>whatever:hover{color:blue}
body.extra{color:green}
body.extra>div{color:green}
body.extra>div>a>p>whatever:hover{color:green}
js:
body.classList.toggle('extra');
you can also change the whole css.. depends on how much your really wanna change.
or create the rules dynamically with javascript
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
myStyle.insertRule("#blanc { color: white }", 0);
but i think the first one is the simplest to handle...
also if you have a container which will be displayed as grid,rows large icons the simplest solution is just to create a class on the parent container.like in example 1.
tip:another thing i use alot lately is hsla (hue,saturation,lightness,alpha);
i use this if i want to have the background and the font the same color but the font just slightly darker:
background-color:hsla(360,100%,20%,1);// 20% light
color:hsla(360,100%,80%,1);// 80% light
I'm building a website that has to run entirely out of one window - it can never load another page. Consequently, I'm using a lot of JS to swap out the content that is displayed on the screen, and it's actually working rather well. However, I'm running out of good selectors and I don't want my stylesheet to get to be excessively long. So, I am wondering: is it possible to disable a stylesheet by placing it inside a div that is set to display:none?
For example:
<div style="display:none;">
<style type="text/css">
#my_image{
height:100px;
background-color:red;
}
</style>
</div>
<style type="text/css">
#my_image{
height:30px;
}
</style>
In this scenario, which of these would apply? I know that if both are loaded, the second one will be the latest one so it will be the one that is read. But let's say the div is not colored at all from the start. Would it be red when this script is run?
If this is not a viable solution to disable styles, then please inform me of what is.
You should ideally be using a separate stylesheet for each of your "themes".
You could then only load the correct stylesheet at runtime or:
Use javascript to create / destroy css link elements in the head
Use javascript to add a class to the body tag 'red' or 'blue' etc. Then have every selector in your theme begin with that class name:
.blue .header { background: red; }
I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?
you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}
Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.
If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...
Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.
I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.
The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..
Here is the script:
http://pastebin.com/8J9uwRtZ
In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.
Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.
http://www.matthewruddy.com/demo/ <- not working
http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working
Thanks to anyone who can help! Matthew.
As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.
Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:
p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }
In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:
p { color: blue; }
.container p { color: red !important; }
Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.
So in your case, the following rule works just fine and fixes your display problems in IE:
ul.lof-main-wapper li img { max-width: none !important; }
I have a CSS property (font) that I need to be able to change from Javascript (a pulldown). However, this font should only be used when printing (#media print).
So, the javascript can't just change the value of the font, because that will effect the screen view as well. Is there a way to change ONLY the print version of the font property?
Alternatively is there a way to have a CSS property be a reference to another property?
That way, in the print CSS, I could say font:printfont, and in the screen CSS font:12. And then change the value of printfont, and it would only change the font when printing.
thanks.
EDIT: The point is that I need to be able to change the font size that the document gets printed at from the pulldown, but I don't want to change the font size that the document gets displayed at.
That's an interesting dilemma you have going on there. Off the top of my head, the only thing I can think of is to add a new tag to the header where your font-size is declared with !important. For example, in your head tags:
<style type="text/css" media="print">
.printfont {
font-size: 16px !important;
}
</style>
This will ensure that the new font-size will take precedence.
The following is a very quick example of how you may accomplish this with javascript
<script type="text/javascript">
var inlineMediaStyle = null;
function changeMediaStyle ()
{
var head = document.getElementsByTagName('head')[0];
var newStyle = document.createElement('style');
newStyle.setAttribute('type', 'text/css');
newStyle.setAttribute('media', 'print');
newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));
if (inlineMediaStyle != null)
{
head.replaceChild(newStyle, inlineMediaStyle)
}
else
{
head.appendChild(newStyle);
}
inlineMediaStyle = newStyle;
}
</script>
Just ensure that you have onchange="changeMediaStyle()" as an attribute on your dropdown. Also, as a disclaimer in my example, I am not accounting for things like memory leaks, so you will have to work out those kind of issues on your own.
As to your alternate question, as far as I am aware, there isn't any method for declaring/using what is essentially CSS variables. However, there is currently a recommendation out there for it: http://disruptive-innovations.com/zoo/cssvariables/
seems like what you want to do is myabe just change or add a class to the item with JS
<p class="inrto comicSans">this is the text to change</p>
#screen p.intro {font-family:verdana;}
#print p.comicSans {font-family:comic-sans;}
You could just use JavaScript to switch classes, and have the
#print {
.myPrintClass { font-family: serif; }
}
#screen {
.defaultClass { font-family: sans-serif; }
}
While the class-based solutions would totally work, you could also use Javascript to dynamically add a new <link> tag to the page. For instance, if you have:
stylesheet1.css:
#print * {font-family:verdana;}
stylesheet2.css:
#print * {font-family:comicSans;}
You could then use jQuery to do something like:
$(document.body).append("<link href='stylesheet2.css'/>");
(you could do it without jQuery too, but I forget that syntax and am too lazy to look it up ;-)).
However, if you're only changing small amounts, a single stylesheet + different classes is probably the better way to go; the new <link> tag solution is only worthwhile if you have a bunch of different style changes happening.