Hopefully I can explain this well and hopefully I'm thinking the right way :)
My question is, If I have a print style sheet that has a couple of classes that "displays" a background image, is there a way to make the browser download the images at the point of printing or do you have to preload the images.
I have mixed results doing a print styled background image with FF and IE. IE actually seems to download the image at print? where as FF doesn't - (even though Firefox's Live HTTP headers addon says it does!).
My code is basically saying this:
#media=screen
.class
{
display: none;
}
#media=print
.class
{
display: list-item !important;
list-style-image:
}
Not a great solution, but you could provide a "Print" button which modifies the style when it's clicked prior to actually printing and changes it back afterwards?
For example (using jQuery):
<script type="text/javascript" language="javascript">
function doprint() {
$('.class').css('display','list-item').css('list-style-image','img.jpg');
window.print();
$('.class').css('display','none').css('list-style-image','');
}
</script>
<input type="button" onclick="doprint();" />
Obviously you can get around this by using the browser's Print function.
There's also the issue of the overhead you've saved by not preloading the image being well and truly used up by using jquery and script...
Related
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.
Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.
This is the site. You may have to click the logo a few times in order to see it show blank.
I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.
I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os.
How to fix it?its really easy.
hide you body in your css and then show it when page load and every thing will work.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
The link to the page does not work. Is the page available on the futurism site?
I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.
My copy of the page is running on Apache with Multiviews.
I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.
The page loads without a problem.
I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.
I had the same problem.
Just don't apply direction to the body or html tags.
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>
I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).
First, I applied a fixed positioning rule to the body,
body { position: fixed; }
Then, I reverted the positioning on page load using jQuery,
jQuery(window).load(function() {
jQuery('body').css('position','static');
});
Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.
I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...
which added by modernizr.js (v2.8.3)
I added this to my page header, and the blank page issue disappeared:
<script src="/js/modernizr.js"></script>
I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.
I have this issue with my Wordpress and I fixed it by adding this javascript code
window.scrollTo(0, 1);
window.scrollTo(0, 0);
EDIT: we found what causes this problem and a solution. Read the choosen answer for more info.
Original question:
I'm experiencing this strange issue where the text is not rendering correctly for some words, displaying totally meaningless words or symbols instead of the words i put in the html, although inspecting the code all is how it should be, no errors in console, no problems of any kind (apparently).
First things first, the problem:
Here is how the text should be displayed on my page:
This is how it is displayed when refreshing:
When i zoom the page in or out it fixes itself until the next refresh.
I use a google web font ("Cabin" for anyone interested) but it seems to not be the issue since i tried different fonts with no luck.
I also include some third party javascript in the page (jquery.js, underscore.js, backbone.js, handlebars.js, foundation.js, jquery.cookie.js, i18next.js) and a bunch of proprietary js files.
I tried to disable them one by one and the problem goes away when i disable all of them.(conflict maybe?)
I tested the page on different pc/laptops in my office, tried locally and online, but the issue persist.
I read a question here on SO (can't find the link) where a user was having text rendering problems and fixed it wit CSS propriety -webkit-transform: translateZ(0); but looks like it's not my case.
For what is worth, here is my HTML:
<div class="footer-story full-width">
<div class="footer-story-row">
<h5>SUGGESTED</h5>
<div class="columns large-6">
<img src="http://lorempixel.com/120/120" alt=""/>
<div class="inline-top">
<h5>This is the title of the article</h5>
<p>by RandomUsername</p>
</div>
</div>
</div>
</div>
And the css involved (not everything):
.footer-story {
width: 100%;
max-width: 100%;
height: 400px;
background-color: gray;
padding-top: 15px;
}
.footer-story .footer-story-row h5 {
color: white;
border-bottom: 1px solid #ffffff;
}
.inline-top .footer-story .footer-story-row h5 {
border-bottom: 0px !important;
}
Now i have no idea how to look for a solution for this problem, because i can't see where the problem generates and can't reproduce it for you to see and play with.
I'm assuming it's a Chrome bug since everything works fine on Firefox, but i can't find anything similar anywhere, so i hope some of you can at least point me in the right direction to find a solution.
Thanks
I was able to fix this by using webfontloader to load Google Fonts.
Instead of:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500">
Use this:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:300,400,500']
}
});
</script>
See: https://github.com/typekit/webfontloader#get-started
Ok so we finally found what was wrong:
Foundation puts text-rendering:optimizeLegibility by default on all <h> and <p>.
Looks like this css property behaves really buggy with chrome, you can read more about the problem here:
Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?
https://code.google.com/p/chromium/issues/detail?id=39017
It looks different from the bug issued above, but it has the same behavior although in different circumstances.
From what we have experienced it happens when:
- you load a custom font from Google Web Fonts
- you load one or more JS files in your page
- you have set text-rendering:optimizeLegibility on text elements and there's an <a></a> inside OR wrapping the text element
it happens really random and it's not easy to reproduce.
The solution was just to set the SASS variables that use this property in Foundation to text-rendering:none !default; and everything went in his place.
Hope this helps.
Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
At my work, we're interested in tracking how often people print our web pages. (If a lot of people are doing it, we'll probably put more focus on making the print view nicer.)
Obviously if we put a "Print" button on the page, we can log when people click on that, but if users just use the "File" menu and choose "Print," we have no way of knowing if they did that.
Is there some clever way to use print-only CSS to cause the browser to issue a web request only when printing? My experiments seem to say no, but this seems like it should be possible.
Edit: A reasonable answer is offered below that works in FF; I'm offering a 100 point bounty for a solution that works on IE as well.
To build on responses from Tyson and Jao, you can try this approach to get around the issue of background images not being displayed/printed by default. instead of background image, use a bullet image...
Insert an element in your HTML source like:
<div id="print_tracker"><ul><li> </li></ul></div>
In your screen CSS:
#media screen {
#print_tracker { display: none; }
}
#media print {
#print_tracker { display: block; }
#print_tracker UL { list-style-image: url(/images/printtracker.gif); }
}
Then track the hits to that image. Hacky... i know
There is no accurate way to see when a page is being printed (and some may consider it privacy invasion). The suggestions for having a separate print CSS do work, but they can create a lot of false alarms - Print Preview, prefetching, and mirroring tools (even wget) would request the CSS file too, even if they are not going to print anything.
Maybe you could add a background image to the print.css file and link that background image to a file on your server which does the logging.
For example:
body {background-image:url(http://www.example.com/printlogger.aspx);}
I'm not sure if that works, just a thought
Update: I just tried the above. It does increment the counter if you do a print preview. However it doesn't when update the counter when printing a page (even with print background images turned off). Another option might be to use the CSS content property.
UPDATE II You can use the content property, works in Firefox, not in IE8. I haven't tested other browsers:
body
{
content:url(http://www.example.com/Count.aspx);
}
Insert an element in your HTML source like:
<div id="print_tracker"></div>
In your screen CSS:
#print_tracker { display: none }
(That's not really needed unless you have some default styles for divs that causes it to have a size.)
In your print CSS:
#print_css { display: block; height: 1px; background-image: url(clear.gif); }
Then just track the hits to that image.
You could check that your printing CSS has loaded (you can select CSS for a particular layout using media selectors) with javascript. The javascript could then log to the server this request.
For IE, explore use the print - related events of the Document body.
window.onbeforeprint - Fires just prior to the page being printed
window.onafterprint - Fires immediately after the page to be printed out has been loaded into printer queue/cache.
$(function() {
//Check to see if browser supports onbeforeprint (IE6, IE7 and IE8)
if (window.onbeforeprint !== undefined) {
window.onbeforeprint = TrackPrint;
}
}); function TrackPrint(){
$.get("http://www.example.com/Count.aspx");}
You could have a "print version" page and put some server-side logging on that page, however that could be a bit annoying for all parties involved.
What else you could do to is something like this:
On page load, use javascript to add a print-only stylesheet on the page which hides everything except a message saying "Please use the print link on this page".
Use javascript here so that users with JS disabled will still be able to print as normal. You won't be able to log them, but you won't piss them off either.
Put a link on the page which, when clicked, logs the event via AJAX, removes that stylesheet and then calls window.print()