I have a stylesheet for desktops, and another for handhelds. The web page displays some images when displayed on the desktop, but hides those images when displayed on handhelds. The page appears as designed for both desktops and handhelds.
When I check the server logs, I find that the handheld is actually still loading the images, just not displaying them. Is there a way to stop the handheld from loading the images entirely, since it doesn't need them, without having to maintain two sets of web pages? Can it be done using just stylesheets?
Thanks in advance.
Ray Mond
Include the images you don't want to display on the mobile devices as background image. In the browser stylesheet you then can use
.element {
background: #FFF url('image.png') no-repeat left top; /* or whatever */
}
while in the handheld stylesheet you just don't set a background image, so, depending on the exact usage, you could use
.element {
display: none;
}
or
.element {
background: #FFF;
}
However, it won't be possible to remove images you include with <img src="" /> afterwards through CSS rules (just display: none etc, but that wouldn't stop them from loading, as you noticed).
Send your stylesheet per HTTP header before the markup:
Link: <compact.css>; rel="stylesheet"; media="handheld"
Then the most used handheld browser – Opera – won’t load the images. WebKit (Safari) still does, however – even background images for hidden elements!
Related
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
Example (JSFiddle)
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using #media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
Cover page should be filled with some image up the very edges of A4 paper.
You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.
You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.
But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.
Why don't you display a cover image that doesn't span the entire page?
You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.
I'm using webkit-image-set to make my images look all nice and pretty for users using a Retina Display.
Since this CSS selector doesn't work on an img tag, I have some HTML and CSS that looks like this (as exhibited in Apple's WWDC 2012 session):
<div id="iconImage">
</div>
div#iconImage {
width:152px;
height:152px;
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon#2x.png) 2x);
background-size: 152px 152px;
margin-left:auto;
margin-right:auto;
}
Looks great on my Retina MacBook Pro! Of course, not when I'm using Firefox: it's just a blank spot, as I'd expect. I'm sure it doesn't show anything at all when viewed in IE either. Nor is it very accessible.
So, what can I add to the above code to make:
An image (probably the low resolution version) display in
Maybe some kind of text or alt text or
something so that it's a bit more accessible to impaired visitors.
You can't do alt text for CSS backgrounds (not least because backgrounds should not be used for semantically meaningful images), but doing the fallback background is easy:
background-image: url(whatever);
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon#2x.png) 2x);
non-WebKit UAs will ignore the second declaration, while WebKit will ignore the first because the second overrides it.
Perhaps you could create another class specifically made for non-webkit browsers.
div#iconImage.nonWebkit {
background-image: url(WebsiteIconNonWebkit.png);
}
And then detect a non-Webkit browser using jQuery
if (!$.browser.webkit) {
$('#iconImage').addClass('nonWebkit');
}
I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).
Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.
I want the visitor to see the loading GIF as soon as he enters the gallery page, until the the gallery images have been downloaded and are ready to be viewed.
In order to achieve my goal, this is what I've done:
This is the beginning of the body of the gallery HTML page:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
And this is the gallery CSS part:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.
This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.
However, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox & IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.
Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.
Why doesn't the Ajax loading GIF work properly on Chrome?
You just need to delete this declaration on line 602:
background-attachment: fixed;
I also had the same problem. The way I fixed it was to put the loading gif in it's own element (to keep markup clean, use a pseudo element).
Now, instead of using the background-attachment rule, you can use position: fixed. Here's the code you should use (assuming you'd like that loader gif to sit right in the middle of the screen):
#gallery:after {
content: "";
background: url(images/ajax-loader.gif);
position: fixed;
top: 50%;
left: 50%;
width: 50px; /*change to the width of your image*/
height: 50px; /*change to the height of your image*/
margin-left: -25px; /*Make this 1/2 the width of your image */
margin-top: -25px; /*Make this 1/2 the height of your image */
}
Hope this helps!
I'm a strong advocate of using dataURI with base64-encoded images in this and similar situations. What it does is effectively eliminates the need for a separate http request to retrieve the spinner gif, meaning the "loading" animation is immediately available to be rendered. This makes the value of the UX improvement so more valuable than a couple extra kilobytes in overhead - especially since the stylesheet would be only downloaded once and then cached by the client.
This fiddle has the animation embedded from ajaxload.info, having added literally less than 1KB to the final CSS.
Note that this kind of resource embedding is not supported at all on IE7 (but IE7 users have much bigger concerns to address :)
You may try this using jQuery BlockUI Plugin (v2)
Hope this helps.
Personally for loaders i've always done it this way , I do not remember where i read it .. But its always worked for me ..
$(function(){
$('#overlay')
.hide()
.ajaxStart(function() {
$(this).css("display","inline");
})
.ajaxStop(function() {
$(this).hide();
});
});
What it does , is it takes the div with an id of overlay and on any AJAX request that goes out , makes it visible and once the ajax request is complete , it hides it out.
Let me know if u need more code.
Cheers.
In the CSS for #gallery
background-position: center;
Should be
background-position: center center;
You should also try to use jQuery. See http://yulounge.alienworkers.com/photogallery/ for an example.
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
I have a webview that displays an image, as shown in the code below. The bundle also has a DGT64#2x.png with dimensions of 128x128 for use on the iPhone4. The DGT64#2x.png never shows. Is there a way to display either/or depending on whether it's an iPhone or an iPhone4?
<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>
The way to do it is with CSS backgrounds. Just embedd all your 2x stuff in a subsection in CSS. The key is also to set the -webkit-background-size. Here is an example of the portion of the css (both retina and not) for a div with the id Ampersand that acts as an image.
div#Ampersand {
background: url('AmpersandBurned.png');
width:43px;
height:97px;
float:left;
-webkit-background-size: 43px 97px;
}
#media screen and (-webkit-device-pixel-ratio: 2) {
div#Ampersand {
background: url('AmpersandBurned#2x.png');
width:43px;
height:97px;
float:left;
}
}
I don't think the #2x trick works with web content. Sounds really useful though, I would certainly file a bug with Apple to request that.
If you are generating the above HTML from your app then I think the best way for now will be to detect if you are running on a Retina display device and then adjusting the image name manually.
You can detect the Retina display by doing something like this:
if ([[UIScreen mainScreen] respondsToSelector:#selector(scale)]) {
if ([[UIScreen mainScreen] scale] == 2) {
// Use high resolution images
}
}
(Took that code from an answer I found here in SO)
Currently the best way to do this is by referencing your images in your CSS file using the background-image property. Then, you can use a special CSS file that is only loaded by devices with high resolution screens to override these properties.
See this blog post for more information.