I'm implementing an epub reader in iOS platform. I have paginated the HTML files using a CSS multicolumn layout. It works fine on pure-text HTML files, but when loading images, the images will be separated into several pages.
Here is my multicolumn style:
body {
-webkit-column-width:320px;
-webkit-column-gap:22px;
height:480px;
}
I have tried to implement the following style:
img{
-webkit-column-break-inside: avoid;
}
But it's not working. How can I avoid images separated?
To do this dynamically, i.e. when you read an epub not knowing its content, wrapping each image in a div and then appending the "page-break-inside: avoid" attribute to that div works. Appending that attribute strictly to an image in android 3.1's WebView didn't work for me for some reason, this was my workaround.
Example (without jQuery) :
var images = document.getElementsByTagName('img');
var imgLength = images.length;
for(var i = 0; i < imgLength; i++)
{
images[i].innerHTML = '<div>'+images[i]+'</div>';
images[i].pageBreakInside = 'avoid';
}
Update to an old post, but hopefully this will help those still having similar problems.
img
{
max-width: 320px;
max-height: 480px;
height: auto;
};
If the images are higher than 480px, it will break the images to the next column, the height of the column must be larger than the height of images
Related
I'm having some trouble getting a website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page displays the footer somewhere in the middle of the page as the height of the html and body tags somehow seems to match the size of my viewport instead of the content. The footer has the color-footer class (you can verify this yourself by dynamically changing the css rules through your browser's developer tools).
OAS: this site was developed by an external and runs on Joomla. I'm not a web developer and I'm just getting a headache from trying to get this to work. I've gone through a dozen of guides but it looks like this time Google couldn't give me the simple solution. After hours of meddling in the developer mode with chrome I can't get it to work so I was wondering if anyone could figure out the correct css rules to add to my stylesheet so I get the desired behaviour.
A JavaScript/jQuery solution:
function CheckFooterPos() {
var Footer = $('.color-footer');
var BottomOfScroll = $('html').scrollTop() + $(window).height();
var BottomOfFooter = Footer.offset().top + Footer.height();
if (BottomOfFooter < BottomOfScroll) {
Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
} else {
Footer.css('bottom', '0px');
}
}
$(document).ready(function() {
$(window).scroll(function(){
CheckFooterPos();
});
$(window).resize(function(){
CheckFooterPos();
});
CheckFooterPos();
});
Because it's position:absolute so, it will so in the middle of the screen.
Just remove position: absolute; from .color-footer { will solved your issue.
.color-footer {
bottom: 0;
height: 66px;
margin-top: 50px;
padding-top: 0;
width: 100%;
// position: absolute; //remove it.
}
Hope it helps.
You can set footer position using javascript if you are not able to fix its position through css, though its possible through CSS too.
http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/
and I guesss
How to keep footer at the bottom even with dynamic height website
this can also help you.
I have a website that looks something like this:
http://illandril.net/outer.html
(Warning: AngularJS site on a server not setup to serve it properly - you'll need to go back to http://illandril.net/outer.html directly instead of using the browser reload.)
I seem to have two conflicting requirements though...
The images need to scale down when viewed on small screens (or in narrow browser windows)
There is a link that takes the user to the page already scrolled down to the "HEADER" section
My solution to #1 was simple...
img {
max-width: 100%;
}
But scrolling down to the HEADER area doesn't work, because the browser doesn't know how tall any of the images are (at least not on first view). "Easy", I thought... and I added width and height attributes to all my images.
Unfortunately, this made the images squished on narrow screens. So I adjust my CSS some more...
img {
max-width: 100%;
height: auto;
}
That fixed the squished image problem, but now the browser doesn't know how tall the images are again and scrolls to the wrong area when the page loads.
Is there some way I'm not aware of to tell the browser that images too wide to fit in their containers should be scaled down, but with a known aspect ratio so the image placeholders are all the right size before the image loads?
If it were a normal page, using window.onload for to trigger the scroll would work (See http://jsfiddle.net/nbS3F/1/), since that waits for all the images to load... but the site I'm working on is a single-page app using AngularJS, so the load event has long since fired by the time these new images are starting to load.
You must be doing the scrolling wrong. Use:
element.scrollIntoView(true);
With:
img {
max-width: 100%;
}
Fiddle
There is no such thing as "I want a max-width of 100%, but without a max-width of 100%".
I advise you to use css3 with responsive theme technique, you have to use different parameters in each screen size by applying :
#media only screen and
search google for responsive theme with jquery plug-in , this will help you a lot to design your website in professional way.
I've found a solution (though I'd prefer a nicer one still if anybody has one)... manually checking every single image to see if it is loaded or not, and listening to the onload and onerror events of the images not yet ready, scrolling only after all images have either loaded or failed.
var target = document.getElementById(targetID);
if (target) {
var scroll = function() {
target.scrollIntoView();
};
var toLoad = 0;
var onload = function() {
toLoad--;
if (toLoad === 0) {
scroll();
} else {
console.log('Waiting on ' + toLoad + ' images');
}
};
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
if (!images[i].complete) {
toLoad++;
images[i].onload = onload;
images[i].onerror = onload;
}
}
if (toLoad === 0) {
scroll();
}
}
I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.
I have image on the page like this ( image url is generated dynamically on the server by PHP ):
<img src="/images_BIG/image_12345.jpg" />
Now - I would love to use only CSS media queries to change this image URL, let's say to this ( when browser viewport width is smaller than e.g. 800px ):
<img src="/images_SMALL/image_12345.jpg" />
I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.
Thank you for any thoughts and help in advance.
Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.
The two downsides - a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.
The HTML
<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>
The CSS
// for screens bigger than 800px
#media screen and (min-device-width:800px) {
div.imgContainer {
background-image:url(../images_BIG/image_12345.jpg);
background-size:100px;
width:100px;
height:100px;
}
img {
display:none;
}
}
EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.
You can set a different css file depending on your media queries:
#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
#media screen and (max-device-width: 480px) {
#image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}
In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).
Well, as I have read your comment...if the only problem is including variable urls into a css stylesheet...what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.
basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working right. I'll post some images below to show you all what I mean.
On my resolution:
http://imgur.com/Pl87L
On a 1024x768 screen:
http://imgur.com/l6CUe
Also, here is the CSS for my background:
html, body {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/../images/background10.jpg) fixed no-repeat;
}
I hope this helps :).
Ross.
There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...
function browserSize() {
var bsr_w = $(window).width();
if (bsr_w <= 800) {
$('body').css("background-image", "url(background_small.jpg)");
} else if (bsr_w <= 1024) {
$('body').css("background-image", "url(background_medium.jpg)");
} else {
$('body').css("background-image", "url(background_large.jpg)");
}
}
In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)
There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
Say if image is smaller, we retain the size and put it at the center of container. if image is bigger, we scale it down according to the prominent direction.
Our container is 500x500 and image is say 1000x400, then it will be scaled like 500x200. Similarly if image is 400x1000, then scaled image is 200x500. Is this doable with just html/css. Any help is appreciated. Thanks.
You can use max-width and max-height CSS properties to get the effect you want:
#container img {
max-width:500px;
max-height:500px:
}
Be aware that this does not work in IE6. To make it work there you may need to either scale the image serverside OR use expressions which are nasty. There are other workarounds which you can find on google :)
You'll get much better results if you resize the images on the server. Resizing in the browser means the client is downloading much larger files than necessary, and the resizing quality is not great.
No. It's not fully doable with htm and css.
img{ width: 100% }
will make 1000x400 image to appear as 500x200 bu 400x1000 will appear as 500x1200.
You can use javascrpt like:
function scaleimage(id)
{
var image = document.getElementById(id);
if(image.offsetWidth > image.offsetHeight)
{
if(image.offsetWidth > 500)
{
image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
image.offsetWidth = 500;
}
}
else
{
if(image.offsetHeight > 500)
{
image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
image.offsetHeight = 500;
}
}
}
Sorry for poor formating, seems like my iPhone doesn't support it.
The best way to do it on the server. Or manually before uploading them (if it's possible).
You can use width and height CSS properties to get the effect you want:
container img {
width:500px;
height:500px:
}
Be aware that this work in all browsers.
Thanks
Ptiwari.