Clicking Thumbnails Causes Page to ‘Jump Up’

[MBM]

I have a set of thumbnails below a larger image. Clicking on the thumbnails changes the larger image but also moves the screen up. I can’t figure out what’s causing it and I don’t want to disable scrollbars.

![Jump1] (http://mbmitservices.co.uk/pcommerce/jump_001.png)

Page jumps to this :

![Jump2] (http://mbmitservices.co.uk/pcommerce/jump_002.png)

Live here :

http://mbmitservices.co.uk/pcommerce/dortmund.html

* {margin: 0; padding: 0;}
body {
background: #ccc;
font-family: ‘PT Sans Narrow’, sans-serif;
}

/*Header Styling */
#topHeader{
margin-top:-20px;
height:128px;
background-color: #000000;
}

#click {
display:block;
height:128px;
margin:0;
text-indent: -1999px;
text-decoration:none;
}

/*Header Images */
.imgfacebook {
float: left;
margin-top:-120px;
margin-left:1090px;
}

.imgtwitter {
float: left;
margin-top:-120px;
margin-left:1170px;
}

.imgemail {
float: left;
margin-top:-110px;
margin-left:1280px;
}

/*Resize Images To Fit Window*/
.size {width:320px;height:320px;margin-left:0px;display:block;}
.size2 {width:80px;height:80px;}
.size3 {width:60px;height:60px;}

/*Navigation styling */
#navigation {
background-color:#ffff00;
margin-top:-20px;
list-style:none;
font-family: ‘Ubuntu’, Helvetica, Arial, sans-serif;
font-size: 20px;
width:300px;
float:left;
height:600px;
padding-top:100px;
}

#navigation ul {
padding: 0;
list-style: none;
}

#navigation li {
list-style: none;
padding-left:30px;
height: 28px;
padding-top:3px;
display:-moz-inline-box; /* FF2 and K-Meleon */
display:inline-block;
word-spacing:0; /* reset from parent ul*/
width:180px;
}

#navigation li a {
color: #000000;
text-decoration: none;
display:block;
margin-top:-1px;
margin-left:30px;
padding-right:5px;
width:180px;
}

#navigation ul a {
margin-left:-8px;
padding-left:10px;
padding-right:10px;
width:200px;
text-align: left;
}

/*hide drop down links*/
#navigation li ul {
display:none;
position: absolute;
}

#navigation li a:hover {
border-bottom: 2px solid #000000;
}

/*drop down styling*/
#navigation li:hover ul {
display:block;
margin-left:-37px;
margin-bottom:5px;
padding-top:10px;
padding-bottom:10px;
float:left;
text-align:left;
z-index:1;
width:220px;
z-index:1000;
}

#navigation li:nth-child(7):after {
content: “”;
display: block;
margin-left:20px;
margin-top:20px;
width:180px;
border-top:1px solid #000000;
}

/*container styling*/
div.container {
background: #ffffff;
margin:0 auto 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width:1396px;
height:100%;
position:relative;
margin-top:60px;
}

.offset-blur
{-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

/*fixed footer styling */
#documentFooter{
width:100%;
text-align: center;
font-size: 16px;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
color:#ffffff;
padding-top:20px;
padding-bottom:20px;
background: url(../images/html5.png) no-repeat;
background-position:1320px 14px;
background-color: #000000;
}

/*paragraph styling */
p.footer {
font-family: ‘PT Sans Narrow’, sans-serif;
font-size:20px;}

p.product {
font-size: 22px;
margin-top:20px;
margin-right:100px;
margin-left:860px;
position:absolute;
}

h1 {
font-family: ‘News Cycle’, sans-serif;
margin-top:-120px;
margin-left:100px;
font-size: 64px;
color:#ffffff;
height:120px;}

h2 {
font-size: 26px;
position:absolute;
margin-top:5px;
margin-left:860px;
}

div.ppal {
float:left;
margin-left:860px;
margin-top:530px;
position:absolute;
}

/*Link styling */
a:link {color: white;text-decoration:none;}
a:visited {color: white;text-decoration:none;}
a:hover {color:white;text-decoration:underline;}

/*image styling & caption styling */
figcaption {text-align:center;margin-left:-20px;}

/*bold styling */
b {font-size: 22px;
padding-bottom:10px;
display:block;
}

/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*contenteditable attribute is included anywhere else in the document.
*Otherwise it causes space to appear at the top and bottom of elements
*that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
*`:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: ” “; /* 1 */
display: table; /* 2 */
}

.cf:after {
clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}

figure {
left:30px;
float: left;
position: relative;
overflow: hidden;
margin-right:33px;
margin-bottom:20px;
border:1px solid #000000;
}

figcaption {
position: absolute;
bottom: -50%;
padding: 10px 60px 10px 10px;
background: rgba(0,0,0,0.7);
color: white;
width:100%;
transition: all 0.6s ease 0s;
font-size:20px;
}

figure:hover figcaption {
bottom: 0;
}

#gallery {
width: 620px;
overflow: hidden;
position: absolute;
z-index: 1;
margin-top:-670px;
margin-left:330px;
}

#thumbnails {
list-style: none;
float: left;
margin-left:30px;
}

/*thumbnail styling */
#thumbnails li {
float: left;
padding-right:15px;
padding-top:30px;
}

#thumbnails li a img {
display: block;
border: none;
height:100px;
}

#thumbnails li a {
display: block;
}
#full-picture {
height: 500px;
overflow: hidden;
float: left;
border:1px solid #333333;
}

#full-picture img {
}

[MBM]

Sorry I should have included the html :

• 
• 
• 
• 

The css from gallery onwards in my first post is the css for the gallery/thumbnails. If the large images and thumbnails don’t have the same id the code doesn’t work.

I wanted to use a css solution instead of a jquery gallery script which is overkill for something like this.

[MBM]

Yes but it’s not supposed to scroll! There is enough space on the page for the larger image to be displayed without scrolling the page up, it’s using the same window, the same container, the same size. You will not notice this if you’re viewing the page in full screen mode. If you click the live link and click on a thumbnail you will see the page scroll up as in the second image I have linked to.

[TheDoc]

Unfortunately, that’s how anchors work. It will always scroll so that the anchor you’re going to is at the top of your page. You’re not seeing it in ‘full screen mode’ because there is not scroll bar to begin with.

You’ll want to simply stop using anchors for this functionality.

[MBM]

Thanks for the explanation. Is there a way to adapt the code to stop using anchors?

[TheDoc]

To be honest with you, I don’t even know how it’s currently working. I can’t find any JS causing the images to change, why is that?

[MBM]

There’s no javascript! It’s pure css. I adapted code from a tutorial I found :

http://basicuse.net/articles/pl/textile/html_css/how_to_create_a_simple_css_gallery_without_using_javascript

@wolfcry911 showed me a cleaner way here :

http://codepen.io/wolfcry911/pen/CoJqH

I wrote code to do the same thing on hover but wanted a click solution so the code would also work on mobile devices.

[TheDoc]

Pretty darn cool! I don’t think there’s a way to keep it pure CSS and not have anchors, though.

[TheDoc]

Preferably, `event.preventDefault();`.

[CrocoDillon]

Won’t you lose the hash in the window location if you do that? (Though you can add it in JS as well I suppose) Interesting technique by the way!

[milchin_studio]

You may also add javascript:void() in href attribute.

[TheDoc]

@CrocoDillon, good point.

[unasAquila]

pure `css` would require that the container element of the anchor be fixed

position:fixed;

but `js` is a much cleaner solution.

offcorse there is one solution that may work and that would to contain the gallery in an `iframe`.

[MBM]

I’ve played around with some of the code suggested but am not sure what it’s supposed to do, will it stop the jump problem?

@unasAquila Yes fixed position works but is there a way to make the margins automatically centre because while at 100% everything is fine when you adjust the page size it’s a mess.

[unasAquila]

you would need to use something like

position:fixed;
right: 50%; // Move it to the right for 50% of parent element
margin-right: -250px; // must be 50% of the declared width
width: 500px; // the width you need

[Author]

Posts