I am trying to complete my jquery slider type plugin. not really a slider. just a div of images and when you mouse over that image gets larger, and the rest get smaller, to retain the same width of container. the problem is with mozillas slow js render, sometimes the images enlarge before they get smaller, sending the furthest div to the right to over expand, dropping it off the div. this is all beyond the point. basically i want it so all my divs stay in one line no matter what the size. this is easy with images only with the same code, but not with divs? please help. attached rar has images for easy testing. thanks alot.
Just some notes:
The display area is 850px wide.
There are 9 divs within the display div.
850 / 9 = 94.444 = 94px wide.
So if we make each small div 100 px wide, it should display 8 divs and 50px of the 9th.
Right?
WRONG!
<style type="text/css">
#portfolioDisplay {width: 850px; height: 366px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.portfolioDisplayBlock {height: 366px;
overflow: hidden;
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id="portfolioDisplay">
<div class="portfolioDisplayBlock" alt="Sweet dreams :)"> <img src="sweetdreams.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Hot swanky deal"> <img src="887295065_419b11f6a8.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Pro baller che che"> <img src="MK2N8724.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Sweet dreams :)"> <img src="sweetdreams.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Hot swanky deal"> <img src="887295065_419b11f6a8.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Pro baller che che"> <img src="MK2N8724.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Sweet dreams :)"> <img src="sweetdreams.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Hot swanky deal"> <img src="887295065_419b11f6a8.jpg" /></div>
<div class="portfolioDisplayBlock" alt="Pro baller che che"> <img src="MK2N8724.jpg" /></div>
</div>
</body>