5 Replies - 872 Views - Last Post: 24 June 2013 - 07:42 AM

#1 DRWChick  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-June 13

Problem: Gallery jumps to top of page

Posted 11 June 2013 - 06:49 AM

Here is my css code. The problem is that I have text above my gallery and the page scrolls past it, but when I click on a photo in the gallery it jumps the page to align the gallery at the top. I don't see in the code where it's doing that so if you see please let me know.

 
#images {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  
  margin: 20px auto;
}
#images img {
  width: 400px;
  height: 250px;
  position: absolute;
  left: -400px;
  z-index: 1;
  opacity: 0;
  
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}
#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}
#images img:first-child {
  left: 0;
  opacity: 1;
}

#slider {
	text-align:center;
}

#slider a {
  text-decoration: none;
  background: #E3F1FA;
  border: 1px solid #C6E4F2;
  padding:4px 6px;
  color: #222;
}
#slider a:hover {
  background: #C6E4F2;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Problem: Gallery jumps to top of page

#2 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 354
  • Joined: 10-November 09

Re: Problem: Gallery jumps to top of page

Posted 12 June 2013 - 09:08 AM

What is the slider?
Are you using some sort of scripted (javascript or jquery) image slider or image rotator?

Can you post the front end code so I can take a look?

This post has been edited by mb2000inc: 12 June 2013 - 09:09 AM

Was This Post Helpful? 0
  • +
  • -

#3 DRWChick  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-June 13

Re: Problem: Gallery jumps to top of page

Posted 12 June 2013 - 01:37 PM

I'm only using html and css. Here is the html code.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>


Was This Post Helpful? 0
  • +
  • -

#4 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 354
  • Joined: 10-November 09

Re: Problem: Gallery jumps to top of page

Posted 13 June 2013 - 04:40 AM

I didn't run into this problem with your code.
I tried it in IE, FF, And Chrome. It doesn't "jump" for me.

below is my version of the code you supplied. I added your css to the page - I was lazy. I admit it.
But not so lazy that I didn't play around with it a bit to try to get it to break.

I added more divs, sample text and whatever else I could to get it to do what you claim, but... it wouldn't break for me. :)/>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
 
#images {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  
  margin: 20px auto;
}
#images img {
  width: 400px;
  height: 250px;
  position: absolute;
  left: -400px;
  z-index: 1;
  opacity: 0;
  
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}
#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}
#images img:first-child {
  left: 0;
  opacity: 1;
}

#slider {
	text-align:center;
}

#slider a {
  text-decoration: none;
  background: #E3F1FA;
  border: 1px solid #C6E4F2;
  padding:4px 6px;
  color: #222;
}
#slider a:hover {
  background: #C6E4F2;
}
</style>
</head>

<body>
<div style="width:300px; margin-left:auto;margin-right:auto;padding-bottom6px;">
<div style="margin-bottom:10px;text-align:center">
<p>THIS IS A TEST. This is only a test.</p>
<p>We are going to see if the page jumps or not.</p>
<p>I can't imagine that it would, though.</p>
<p>This is another line of text to see if page jumps or not.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
<p>Just adding more text to see if this still acts the same.</p>
</div>
</div>
<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>
</body>
</html>



Oh, one more thing... I did add the Beginning <HTML> tag and the </BODY> and the </HTML> tags - only because it wouldn't have done "ANYTHING" for me. ;)

This post has been edited by mb2000inc: 13 June 2013 - 04:43 AM

Was This Post Helpful? 0
  • +
  • -

#5 Cyrus88  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 06-August 10

Re: Problem: Gallery jumps to top of page

Posted 23 June 2013 - 10:02 AM

I'm not sure but i think you have to put a new div around the div "image" and div "slider".
So it acts like a container.
Was This Post Helpful? 1
  • +
  • -

#6 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 354
  • Joined: 10-November 09

Re: Problem: Gallery jumps to top of page

Posted 24 June 2013 - 07:42 AM

View PostCyrus88, on 23 June 2013 - 01:02 PM, said:

I'm not sure but i think you have to put a new div around the div "image" and div "slider".
So it acts like a container.

Valid. I didn't think about that at first.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1