www.webdeveloper.com
Results 1 to 7 of 7

Thread: Detect if element in div clicked and reload page to that div

  1. #1
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41

    Question 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)

    Thanks for anyone's help!

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Really the best route is modifying the gallery link output, but you already mentioned you didn't want to go that route.

    Right now your links go to:
    Code:
    displayimage.php?album=6&pos=5
    but if you have them go to:
    Code:
    displayimage.php?album=6&pos=5#cpgGalleryContainer
    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.

  3. #3
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    Quote Originally Posted by infinityspiral View Post
    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?

    Thanks!

  4. #4
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    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>

  5. #5
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    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

    Any thoughts?

  6. #6
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Well the images are wrapped inside <a> tags so those should be hitting. I did notice that the jquery.js wasn't being found. Instead of:
    Code:
    js/jquery.js
    Try:
    Code:
    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
    Also if you didn't want to contact google evertime, you could just download jquery.js from the jquery site and stick it in the js directory

  7. #7
    Join Date
    Dec 2009
    Location
    West-Central, MN
    Posts
    41
    I agree, whatever would refresh the page would be wrapped in <a> tags - odd...

    Maybe I got the path wrong somehow, but I do have the jquery.js file in a js folder - I'll take a look.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles