Stop anchors from jumping vertically
It drives me crazy.
Basically, I need to stop the page from jumping vertically when I use anchors in a horizontally expanding div. Nowadays, instead of just nicely jumping from side to side, the page also bounces vertically, which is a big problem. I have a script to explain this:
http://jsfiddle.net/gkp17fap/4/
The code looks like this:
a {
color:#ccc;
padding:8px;
margin:2px;
display:block;
}
div.container {
width:250px;
height:350px;
overflow:hidden;
display:block;
background:#ccc;
border:solid 1px #555;
}
div.wide {
display:block;
height:350px;
width:auto;
}
div.inner {
height:350px;
width:250px;
display:inline-block;
float:left;
}
.blue {
background:blue;
}
.red {
background:red;
}
.yellow {
background:yellow;
}
.green {
background:green;
}
.white {
background:white;
}
.black {
background:black;
}
}
<div class="container">
<div class="wide">
<div class="inner blue" id="one"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
<div class="inner red" id="two"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
<div class="inner yellow" id="three"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
<div class="inner green" id="four"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
<div class="inner white" id="five"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
<div class="inner black" id="six"> <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br> </div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I've tried everything I can think of and now my brain is empty. Can anyone help remove this vertical jump?
Oh, I also hope for the simplest explanation, as this project will also be distributed on USB dongles and will no doubt be used in old sketchy browsers that never worked properly. I am very excited about this part.
Many thanks!
source to share
The problem can arise in two ways. First of all, the inner divs don't actually float to the left. div.wide
has width: auto;
, and since its parent has a fixed width of 250px, it takes 100% of it all, so it also has a (calculated) width of 250px. As a result, yours is div.inner
not located to the left and right of each other, but above and below.
Since you probably cannot apply a fixed width to div.wide
, because you might not know ahead of time how much div.inner
will be there in all cases, I suggest you either choose a width that in all cases will be wide enough to keep all left floats div.inner
next to each other another, or you calculate the required width by counting div.inner
and multiplying it by the width div.inner
:
$(document).ready(function() {
var noOfSlides = $(".inner").length;
var slideWidth = $(".inner").first().width();
$(".wide).css("width", (noOfSlides * slideWidth)+"px");
});
The second direction from which the problem might arise is how the page anchors work. But first try the solution I suggested and let me know if it works for you.
source to share