2 Replies - 416 Views - Last Post: 24 September 2015 - 05:07 PM

#1 Lelleebelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-August 15

Horizontal Gallery repositions when user clicks on a different section

Posted 24 September 2015 - 01:59 PM

This is an issue concerning my personal portfolio site: http://ellensivess.net/ There are several sections of my site that have a horizontal scrolling image gallery. When viewing these galleries in Firefox or IE, depending on where you scrolled in the gallery, the browser re positions the images to the starting position when you click on a different section of my site in the navigation box. I would prefer that Firefox and IE not jump to the beginning of the images when you click on a section. I'm guessing this will need to be remedied in my javascript, but I'm not completely sure. Any help would be much appreciated as I'm just learning all this fancy web coding.

Here is an example of a page using the horizontal gallery
<!DOCTYPE html>
<html>
<head>
  <title>Ellen Sivess</title>
	<link rel="shortcut icon" href="images/ellen.ico">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="js/jquery-mousewheel-master/jquery.mousewheel.min.js" type="text/javascript"></script>
	<script src="js/navigation.js"></script>
	

</head>

<body>
	<!--logo and social networking links -->
	<div id="left_div" align="center">
		
		<a href="index.html"><img id="logo" src="images/Ellen_logo_2015.png"></a>
		<div>
			<a href="http://lelleebelle.tumblr.com/" target="blank"><img src="images/social_btn_color/tumblr.png"></a>
			<a href="#"><img src="images/social_btn_color/facebook.png"></a>
			<a href="https://twitter.com/Lelleebelle" target="blank"><img src="images/social_btn_color/twitter.png"></a>
			<a href="https://vimeo.com/user2817113" target="blank"><img src="images/social_btn_color/vimeo.png"></a>
			<a href="https://www.linkedin.com/in/ellensivess" target="blank"><img src="images/social_btn_color/linkedin.png"></a>
			<a href="https://instagram.com/lelleebelle/" target="blank"><img src="images/social_btn_color/instagram.png"></a>
		</div> 
		<hr>
		<!--navigation -->
		<div>
		<ul id="sub-menu">
			<li><a id="illustration" href="#">Illustration</a>
				<ul>
					<li><a id="portraits" class="currentLink" href="portraits.html?current=illustration.portraits">Portraits</a></li>

					<li><a id="commissioned" href="study.html?current=illustration.study">Rough / Study</a></li>
					<li><a id="original" href="original.html?current=illustration.study">Original</a></li>
				</ul>
			</li>
			<li><a id="concept_art" href="#">Concept Art</a>
				<ul>
					<li><a href="character.html?current=concept_art.character">Character Design</a></li>
					<li><a href="storyboard.html?current=concept_art.storyboard">Storyboards</a></li>
					<li><a href="environment.html?current=concept_art.environment">Environment Design</a></li>
				</ul>
			</li>
			<li><a href="#">Graphic Design</a>
				<ul>
					<li><a id="logo_design" href="logo_design.html?current=graphic_design.logo_design">Logo Design</a></li>
					<li><a id="graphs" href="graphs.html?current=graphic_design.graphs">Infographics / PowerPoint</a></li>
					<li><a href="web_design.html?current=graphic_design.web_design">Web / Mobile Design</a></li>
				</ul>
			</li>
			<li><a href="animation.html?current=animation">Motion Graphics / <br>Animation</a></li>
			<li><a href="about.html?current=about">About</a></li>
		</ul>
	</div>
	</div>
	
<!-- image gallery -->
		<div class="container">
		 <div class="image-gallery">
		     <table>
		  <tr>
		  	<td class="images">
		      <div class="img"><img src="images/Illus_portraits/emma.jpg" /></div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/Alan_C.jpg" /></div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/Kirsten.jpg" /> </div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/Kirsten_details_02.jpg" /> </div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/cumberbatch_sketches.jpg"/> </div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/Alan_R.jpg"/> </div>
		    </td>
		    <td class="images">
		      <div class="img"><img src="images/Illus_portraits/self_portrait.jpg"/> </div>
		    </td>
		  </tr>
		</table>
		    </div>
		  </div>
	

	<script>

			//gallery mousewheel scroll
		$(document).ready(function(){
	      $("html, body").mousewheel( function(event, delta) {

	         //The "30" represents speed. preventDefault ensures the page won't scroll down.
	         this.scrollLeft -= (delta * 30);
	         this.scrollRight -=(delta*30);
	         event.preventDefault();

	      });
	});
	</script>

<!--<div id="footer">
<p> &copy; Ellen Sivess 2015</p>
</div> -->
</body>

</html>



Here is the external Javascript controlling the navigation
}

	var goToCurrentNav = function () {
		var args = getURLArgs (),
			currentNav = args.current.split('.');
		for (var i = 0; i < currentNav.length; i++) {
			$('#' + currentNav[i]).parent().children('ul').show ();
		}
	}

	//hide or collapsed initially.
	$('#sub-menu ul').hide();

	// toggle hide/show when clicking nav elements
	$('#sub-menu a').on ('click', function (e) {
		$(this).parent().children('ul').toggle();
	});

	// go to... the current one!
	goToCurrentNav ();
	

});



Is This A Good Question/Topic? 0
  • +

Replies To: Horizontal Gallery repositions when user clicks on a different section

#2 andrewsw   User is online

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6552
  • View blog
  • Posts: 26,562
  • Joined: 12-December 12

Re: Horizontal Gallery repositions when user clicks on a different section

Posted 24 September 2015 - 04:04 PM

Do you mean that when they've scrolled through a gallery, then navigate to a different page/gallery and back, it doesn't return to the previously scrolled position? Assuming this, I doubt that this is easy to achieve, particularly when the galleries are on different pages. (If the galleries were on the same page, with the links just changing content display, then this would happen naturally.)

In my opinion this would be a lot of work for a minor inconvenience (possibly involving updating a cookie on wheeling). One could even argue that it is quite good for the user to have to scroll through the gallery again!

This post has been edited by andrewsw: 24 September 2015 - 04:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Horizontal Gallery repositions when user clicks on a different section

Posted 24 September 2015 - 05:07 PM

If you scroll a page to the right, and then click on a link in the nav that does not load a new page (i.e., a heading link that expands another nav menu), then the page jumps back to the left. I'm not sure if that's something you can control, it's definitely not related to Javascript. Floating the nav and using fixed positioning is what I would suggest, which is what you're already doing. I suspect that the browser jumps the page back to the left side because you've clicked on an element on the left side of the HTML structure, even though that element is floated and fixed in position on the screen.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1