Detect if element in div clicked and reload page to that div
The photo gallery (Coppermine) for a client of mine is entirely enclosed in a div. All files associated with the gallery load in that div. Whenever any button or link in the gallery div is clicked, however, the page reloads to the top of the Web page. The problem is that the gallery is a ways down the page and moving it up is not an option.
The obvious and most common solution would be to add a "name" attribute to the div and find any links that call the gallery pages and add #gallery to the call. Unfortunately that also is not an option. Doing so would be a big undertaking, as the Coppermine gallery code is huge and altering the Coppermine code is not really desireable (customization of the gallery is mainly done by customizing a template file that the gallery loads everything on).
I hope I'm making sense so far. Visit the gallery to see what I mean. Scroll down and click on some links and buttons. The page reloads to the top of the page every time, requiring the user to scroll down to the gallery each time the page loads.
My (extremely) limited experience with jQuery leads me to believe that this can be dealt with using some sort of jQuery script.
What I'm thinking needs to be done is to:
1) Catch the click event on the page and determine if the click was on an element in the div
2) If the click event did happen on an element in the gallery div, when the page reloads load it with the div at the top of the page (or load the page and scroll down to the div)
then they will go right to the gallery on the page. ID's can be used as targets. So again you could either modify that link in your code OR with jQuery you could loop through each link, grab the original href value, then add #cpgGalleryContainer to it and then reinsert the new value back into the code.
with jQuery you could loop through each link, grab the original href value, then add #cpgGalleryContainer to it and then reinsert the new value back into the code.
That's what I was thinking I needed to do, and would like to try that route.
How exactly do I accomplish that? Can you provide some pseudo code?
Sure the way I tried going about this was the each loop check out the example
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$("#chris a").each(function(){ // on page load select all the links inside the div 'chris' and do something each time it runs across a match
var currentLink = $(this).attr("href"); // gets the current match's href value
var newLink = currentLink + '#anchor-area';
$(this).attr("href", newLink); // for the current item in the loop set the href value to newLink
});
});
</script>
</head>
<body>
<div id="chris">
<a href="test.htm">test link</a>
<a href="test1.htm">test link</a>
<a href="test2.htm">test link</a>
<a href="test3.htm">test link</a>
</div>
</body>
</html>
Thanks a lot for the code, and, though I didn't know how to implement it, that's what I was thinking needs to be done: search for particular items in the div and add the id to the link.
Unfortunately that didn't do the trick.
The links at the top of the gallery (login, top rated, register, etc) work, but nothing that is not a link. i.e. clicking on an image, or the stars to rate the images, etc, do refresh the page, but the page doesn't load with the gallery at the top.
I left the jQuery script in it to check my syntax: Gallery
Detect if element in div clicked and reload page to that div
Reply With Quote
Originally Posted by infinityspiral
Bookmarks