I am working on a page which has a print view so when the user clicks on "Print" a new window pops up and I want to add a .css file just for that window.
Thanks
When including your stylesheet, use this:
<link rel="stylesheet" media="print" href="stylesheet.css" />
You can add a print only style sheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet does not need to be "added" to popup windows. It will be ignored when the user is in the "normal" view and then only applied when the user goes to print the document.
If you want to be both visible and apply to the printed document, just have it cascade.
<link rel="stylesheet" type="text/css" href="normal.css" /> #normal styling
<link rel="stylesheet" type="text/css" href="print.css" /> #override normal styling
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> #override normal, for printer
That way you get the best of both worlds. Override the css rules in normal.css with new rules in print.css, as needed to make the document look as you wish. The new document will visually look different and then also print out differently.
EDIT: Removed due to clarification. New answer:
Open the URL in a new window as such: blah.aspx?print=true
Then on your backend:
//Assuming you use .NET...
if(Request.Querystring("print").toLower() == "true" ) { //Convert to bool type if you are so inclined
printCSS.Visible = True;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="..." visible="false" runat="server" id="printCSS" />
</head>
You could also use one of the jQuery methods shown to load it in using jQuery too.
$(document).ready(function () {
$(".print").click(function () {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/ecsPrint.css"
});
return false;
});
});
Unless this is a Internal Web Application, i wouldnt recommend loading css with JS.
Related
I have CSS order like this:
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">
What I want to achieve is order like this:
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
The ideal would be if this can be done when page loads.
I don't see why you need to have to do it with JavaScript, but here's the answer:
$("LINK[rel='stylesheet']")
you can use this jquery code in order to get the all the link tags for stylesheets. Using array manipulation, you could change the order. More info about this specific snippet here
then once you are ready, you could loop over the code. More info about this from here
$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
obviously, change what you are appending.
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
I have created a small mvc application using Ckeditor that should use some css files that are stored on a local server
<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/all.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/templates.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/colors.css?v=1" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/paged_test.css?v=2" media="paged" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/main.css?v=1" rel="stylesheet" type="text/css" />
<style type="text/css">html { -ro-editable: true; }
</style>
</head>
At the initialization of the editor i call setData and pass in a string with that html block to apply the remote css files to the content of the editor. However they are not being applied correctly
if i set config.fullPage = true then the html block gets put in between the body tags and thus can be deleted if the user presses the backspace key enough.
I have also tried setting config.fullPage =false, this inserts the content fine however it strips the head tags from the block so it can also be deleted by the user if they press backspace.
Is there anyway of getting this html block to go specifically in the head section so that it cannot be edited?
I recommend to use the config.contentsCss property in your ckeditor config, to set a specific css file or a list of css files.
See API Docs: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
Since version 4.4 it is also possible to add more than one stylesheet during runtime to the editor instance with editor.addContentsCss(), see http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss for more info.
May the source be with you. Have Fun.
I need to use javascript to load a different stylesheet based on a URL variable that is being passed.
The scenario is this: We need to maintain a mobile website with one CSS stylesheet, and a different stylesheet that will be used to style the same page when it is accessed via a web-view loaded in an iOS app.
If you look at www.blog.meetcody.com you'll see that we're already using media queries and responsive webdesign. The reason that this is insufficient for us is because media queries cannot detect if the page is being loaded via a webview in a native app vs. a mobile safari. We need to handle these two cases separately. The blog is a hosted wordpress blog, that we are accessing via a JSON API in our iOS app.
The way we are handling this is as follows: When the webpage is loaded via our iOS app, we append a variable to the end of the URL "/?app=true". What I'd like to do is check to see if the URL contains this string, and if so, use a different webview.
I am attempting to do this with the below code:
<script language="javascript" type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />");
}
document.close();
</script>
The issue that I'm having is that the above code doesn't actually load the appstyle.css stylesheet when ?app=true is part of the URL.
If you take a look at http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2 you can see that I'm testing this by setting the background: black in the body {} tag
body {
background: black;
}
Whereas, in style.css at http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 the body background color is #F2F0EB; in the body {} tag
body {
background: #F2F0EB;
}
Of course, we want to do more than just change the background color, but I'm just showing this as an example.
Is there a better way to do this, or is there something wrong with my code? Perhaps I cannot use a direct link to appstyle.css an href in javascipt? Help much appreciated. And Merry Christmas!
You can add a CSS stylesheet by using appendChild() like this:
var header = $.getElementsByTagName('head')[0];
var styleSheet = $.createElement('link');
styleSheet.rel = 'stylesheet';
styleSheet.type = 'text/css';
styleSheet.href = 'style.css'; // name of your css file
styleSheet.media = 'all';
header.appendChild(styleSheet);
Of course you could change this example to accomodate different css file names depending on the current URL by doing something like this:
styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';
You should never try to close the document when you use inline script. document.close is only needed if you document.write to an iframe, frame or new window
Also I suggest you test the location.search rather than the href since that is where you placed the flag.
Please try
<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>
and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS
PS: Your body tag has the classes of home and blog on your homepage. I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.
PPS: I do not see any media detection here
<link rel='stylesheet' id='standard-activity-tabs-css' href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css' href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css' href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css' href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css' href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css' href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css' href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css' href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css' href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />
I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.
I have the regular external css for the page inbetween the head tags
And when the user click on the print link . it loads the print css .
<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>
var format = getUrlParam('format');
if (format == 'print') {
$('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
}
But,in IE it load the standard css instead of the print.css.
How do can this be fixed for IE6?
Thanks
You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:
<link href="/theme/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/theme/screen.css" rel="stylesheet" type="text/css" media="screen" />
No need to go through the javascript trickery.
As for IE6 - it does support this, as can be seen on the comparison list on this page.
Try removing the <link> to the other css file when you append the print.css
try with document.write,
document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');