Develop Reference

Trying to have a window where the row of sevens are visible and rest is hidden - images are spritesheet.png in div tags

Trying to have a window where the row of sevens are visible and the rest of them arent for my website as it for a slot machine and i want the rest is hidden - images are spritesheet.png in div tags. Any ideas?
here is a image of my website with containers - 1
Thanks for the help
and here is my tags i used.
<div class="outerbox">
<div class="container">
<div class="column">
<img src="images/spritesheet.png">
</div>
<div class="column">
<img src="images/spritesheet.png">
</div>
<div class="column">
<img src="images/spritesheet.png">
</div>
</div>
</div>

Javascript - load an image before the rest of the page

I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.

You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}

Bootstrap popover changing position with resolution

I have bootstrap popover as follows
<div style="float:left; width:30%"></div>
<div class="popover results" style="z-index:1060; float:left; width:70%">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content">
<p></p>
</div></div>
</div>
I saw that with change in screen resolution, its changing the relative position with the input element I have. I want to maintain the relative position of popover and input element same irrespective of resolution. Is there any way to do this ?

This was happening since I used following in above code
<div style="float:left; width:30%"></div>
I removed it and it now auto adjusts correctly

How do i get boxes to have equal width always

Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn

All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}

CSS or Javascript DIV align

I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help

jQuery Masonry: http://masonry.desandro.com/

Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.

Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.