Log in

View Full Version : Scrollbar removes right part of images


Rain Lover
07-06-2012, 04:22 AM
Hi,

Sample:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

Except in Internet Explorer and Opera the right part of images are cut. I wonder what's the reason and how they can be displayed the same across different browsers.

Many thanks in advance!
Mike
jscheuer1
07-06-2012, 04:42 AM
If you know the width of the widest image (in this case 80), set the div's width to that + 20:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; width: 100px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

If not (image width unknown for some reason), javascript could be used, but if the images vary in width it would have to wait until all the images are loaded. If they're all the same unknown width, the load event of the first image could be used to set the width of the div.

Example checking all images:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
<script type="text/javascript">
var divWidth = {
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})(),
init: function(){
this.addEvent(window, 'load', function(){
var pdiv = document.getElementById('pics'), ims = pdiv.getElementsByTagName('img'), imsCount = ims.length, max = 0;
while(ims[--imsCount]){
max = Math.max(max, ims[imsCount].width);
}
pdiv.style.width = max + 20 + 'px';
});
}
};
divWidth.init();
</script>
</head>
<body>
<div id="pics">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
Rain Lover
07-06-2012, 05:07 AM
If you know the width of the widest image (in this case 80), set the div's width to that + 20

Dear John,

Thanks for the answer, but how can you make sure it's 20? As you know the scrollbar width isn't always the same in different browsers/systems.
jscheuer1
07-06-2012, 05:15 AM
I figure it's close enough. I don't think any are that wide, but adding 20 looks good to me. Javascript could probably be used to determine the width of the scrollbar though if it's crucial.

BTW, I added a javascript example to my previous post. It doesn't calculate the width of the scrollbar though. If I hit on a way to do that, I'll post it, probably as an edit to this message.
ApacheTech
07-06-2012, 05:31 AM
Could you set up a recursive function using div.scrollWidth > div.innerWidth?

The other thing you could do is set a max width for the images:


#div img
{
max-width:80px;
}
Rain Lover
07-06-2012, 05:46 AM
The other thing you could do is set a max width for the images:


#div img
{
max-width:80px;
}

I tried it to no success.
jscheuer1
07-06-2012, 05:55 AM
OK, hmm recursive sounds like an endless loop in some browsers. There is no innerWidth anyway. At least not for a div in this case. jQuery has that, but I don't think it has anything to do with scrollbars. Setting a max width won't solve anything other than not knowing the width of the images. It still leaves the scrollbar width unknown, and therefore the exact amount to add to the width of the div is still a mystery. And it will resize some images, perhaps not what Rain Lover has in mind.

Anyways, I've been playing with this. Even 'as is' it doesn't work in IE 7 (IE 7 doesn't do inline-block in the same way as other browsers). But if we leave that aside, this is pretty good:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pics {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
<script type="text/javascript">
var divWidth = {
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})(),
init: function(){
this.addEvent(window, 'load', function(){
var pdiv = document.getElementById('pics'), ims = pdiv.getElementsByTagName('img'),
inner = document.getElementById('inner').offsetWidth, imsCount = ims.length, max = 0;
while(ims[--imsCount]){
max = Math.max(max, ims[imsCount].width);
}
pdiv.style.width = Math.max(pdiv.offsetWidth, max * 2 - inner) + 'px';
});
}
};
divWidth.init();
</script>
</head>
<body>
<div id="pics">
<div id="inner"></div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

I have some other ideas. If any of those pan out, I'll let you know.
Rain Lover
07-06-2012, 06:45 AM
Anyways, I've been playing with this. Even 'as is' it doesn't work in IE 7 (IE 7 doesn't do inline-block in the same way as other browsers). But if we leave that aside, this is pretty good

Yes, it is. Thank you! I thought there was a CSS solution, but it seems that I have to use a script. By the way, all my thumbnails are the same size.
jscheuer1
07-06-2012, 09:23 AM
If they're all the same size, we can play off of that and the fact that neither IE nor Opera seem to require any help. Doing so will speed things up:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pics {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
<script type="text/javascript">
var divWidth = {
addEvent: (function(){return window.addEventListener && !window.attachEvent && !window.opera? function(el, ev, f){
el.addEventListener(ev, f, false);
}:function(){return;};
})(),
setWidth: function(){
divWidth.pdiv.style.width = divWidth.im.width * 2 - divWidth.inner.offsetWidth + 'px';
},
init: function(){
var dw = this;
dw.addEvent(window, 'DOMContentLoaded', function(){
dw.pdiv = document.getElementById('pics');
dw.im = dw.pdiv.getElementsByTagName('img')[0];
dw.pdiv.appendChild(dw.inner = document.createElement('div'));
dw.addEvent(dw.im, 'load', dw.setWidth);
});
}
};
divWidth.init();
</script>
</head>
<body>
<div id="pics">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
Rain Lover
07-06-2012, 10:05 AM
You're the scripting God! Thanks again! :)
ApacheTech
07-06-2012, 02:24 PM
I did see a script in passing that checked to see if an element has scrollbars, if so, it adds one to the width, then repeats until false. I can't remember where I saw it now though.
jscheuer1
07-06-2012, 05:00 PM
That wouldn't help here. Rain Lover wants a scrollbar.

BTW, I was playing around some more and found that IE 7 and less can work with this quite well if we add the highlighted:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pics {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
img {margin-bottom: 0.25em;}
</style>
<script type="text/javascript">
document.onreadystatechange = function(){
var div = document.createElement('div'), w1 = pics.all.tags('img')[0].width, w2;
pics.style.width = w1;
pics.appendChild(div);
w2 = div.offsetWidth;
pics.style.width = w1 * 2 - w2;
pics.removeChild(div);
};
</script>
<![endif]-->
<script type="text/javascript">
var divWidth = {
addEvent: (function(){return window.addEventListener && !window.attachEvent && !window.opera? function(el, ev, f){
el.addEventListener(ev, f, false);
}:function(){return;};
})(),
setWidth: function(){
divWidth.pdiv.style.width = divWidth.im.width * 2 - divWidth.inner.offsetWidth + 'px';
},
init: function(){
var dw = this;
dw.addEvent(window, 'DOMContentLoaded', function(){
dw.pdiv = document.getElementById('pics');
dw.im = dw.pdiv.getElementsByTagName('img')[0];
dw.pdiv.appendChild(dw.inner = document.createElement('div'));
dw.addEvent(dw.im, 'load', dw.setWidth);
});
}
};
divWidth.init();
</script>
</head>
<body>
<div id="pics">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

And people wonder why Microsoft was reluctant to adopt standard methods when it already had a much more concise language for these sorts of things.

But that's ancient history now. Funny thing though, jQuery and this older style of coding from Microsoft remind me of each other in that they're both more succinct than standard javascript. However, since with jscript (MS proprietary code), the 'shorthand' functions are all native code, they not only take less time to write, they execute faster as well.