2

I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on, however, the page scrolls down so that the top of the map (the image map) is at the top of the screen even though the information is directly beside the map.

I am assuming this is because the anchor is seeking to load at the top of the screen. This would be okay except that my header is now pushed out of the screen. Is there a way for the page to not "move" when the hotspot is clicked?

The page can be seen here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
rlphilli
  • 111
  • 1
  • 4
  • 17

3 Answers3

1

Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.

$('area').bind('click', function(e) {
    e.preventDefault();
    // the div in question has nothing uniquely identifiable as it is now,
    // assign it a unqie class or id so you can select it
   var findAnchor=this.href.split('#')[1];
    $('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});

It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.

(edit) - OP set up a fiddle with the problem, updated version here:

http://jsfiddle.net/H3Mz6/9/

The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:

1) get the part of the href after the # - the browser may add the full url. 2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information 3) then get the position().top value which is the postion of that element relative to it's container 4) then scrollTop(..) to it


Contrary to @colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.

Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • Bump! If I had known how to do that, I would have said to use jQuery instead for sure :) Cheers, Jamietre! – joshmax Jun 10 '11 at 03:38
  • Ok, Jamietre, I think I see what you're trying to do. I'm still very new at jQuery but I've been reading specifically about the function you have shown here. But my inexperience will show here: 1) do I need to copy that last line for all of my locations (#Nashville, #Batesville, etc.)? 2) what do I replace the 'a#' with? – rlphilli Jun 10 '11 at 12:49
  • You shouldn't have to change anything - this will pull the anchor target from the `href` attribute of the area that was clicked. This code will bind the event to all the areas on your map and scroll the div so that the matching anchor to the one that was clicked is at the top. Like I said though it will be lucky if it works *exactly* as is, but if you can pull out just the imagemap and the div into a jsfiddle it would be a lot easier for me to test and give you more guidance. – Jamie Treworgy Jun 10 '11 at 13:04
  • actually -- one minor problem i think, updated above(the # will already be in the href) – Jamie Treworgy Jun 10 '11 at 13:06
  • Okay, I made a jsfiddle.htm page here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/jsfiddle.htm The only thing is that I am forced to work inside of the white space because another company developed the site and we only have access to that white frame. It stinks, but they own the software and the back-end stuff that we use to buy, sell, and manage all our company with. – rlphilli Jun 10 '11 at 13:23
  • Sorry I meant http://jsfiddle.net/ -- if you can pull out just the relevant pieces to simplify the problem as much as possible it makes it much easier to tinker with. So can you copy the HTML of just the imagemap & scrolling list to create a mini-demo. – Jamie Treworgy Jun 10 '11 at 13:25
  • Sorry for being so new. Okay, try this: http://jsfiddle.net/maverick_ncsu/H3Mz6/1/ I have stripped away all of the anchors except the 3 left-most ones (IN, KY, TN) so it would be a little tidier. – rlphilli Jun 10 '11 at 13:49
  • Nothing wrong with being new! And great job setting up that fiddle, I assume that was your first go round! Here ya go: http://jsfiddle.net/H3Mz6/9/ – Jamie Treworgy Jun 10 '11 at 16:37
  • ... and here's a tricked out version: http://jsfiddle.net/H3Mz6/11/ which will animate the scrolling. – Jamie Treworgy Jun 10 '11 at 16:55
  • Thank you so much for looking in to this. I saw what you created and it looked like it was going to work great. I really like the animation, but when I put it into my page, it still didn't work. What am I missing: http://www.mydillonsupply.com/customer/disupp/customerpages/locations_page.htm There is no frame on this, just a colored bar at the top so that you can see it move. I put this into your fiddle and it worked correctly though, but not on my page. And that was my first fiddle. Thanks for showing me that. – rlphilli Jun 10 '11 at 18:37
  • I don't see that any of those changes are on that link you just posted - there's no script, and the div doesn't have the ID needed to identify it. – Jamie Treworgy Jun 10 '11 at 19:02
  • Ok, I did forget to name the div at first, but I have copied your work directly into a new page just to see if it works, and can still not get it to work. I know it must be something obviously important that I can't figure out: http://www.mydillonsupply.com/customer/disupp/customerpages/locations_page2.htm – rlphilli Jun 10 '11 at 19:30
  • Think you need to add `$(document).ready(function() { ... });` around the script. It's running but when I debug the script, the `$('area')` selector finds nothing so I don't think the DOM is ready yet and nothing is being bound as a result. – Jamie Treworgy Jun 10 '11 at 19:37
  • Thank you so much! It worked perfectly. Thanks for you patience. Still very new but enjoying learning. I know you put in a good amount of time on this. I really appreciate it. – rlphilli Jun 10 '11 at 19:56
  • No problem, it wasn't much time at all! – Jamie Treworgy Jun 10 '11 at 20:05
0

The jump is happening because you are using an image map that is processing a click to the location #DillonLocationsMap.

It is the same result as having an in-page anchor like <a name="over_here" /> and a link elsewhere of <a href="#over_here">Go over here.</a>

I would suggest you don't use an image map to be honest and they are not very extensible nor configurable.

give the fish answer Move the actual <map> element up, to for instance before the table#MainTable element. It will still technically jump, but your header should still be in view.

p.s. Tables for page-layout makes pandas cry ;(

colinross
  • 2,075
  • 13
  • 10
0

When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your <!-- table containing locations -->.

Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a <a href="#TOP">Back to top</a> at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).

You could try something like this (found here):

<html>
<head>
<title>Document Title</title>

<script type="text/javascript" language="javaScript">
<!--
  function go_anchor(n){
    document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
  }
// -->
</script>
</head>

<body>
<a href="#null" onclick="go_anchor('sp1')">To anchor 1</a><br />
<a href="#null" onclick="go_anchor('sp2')">To anchor 2</a><br />
<a href="#null" onclick="go_anchor('sp3')">To anchor 3</a><br />
<a href="#null" onclick="go_anchor('sp4')">To anchor 4</a><br />

<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black"> 
<p><a href="#null" onclick="go_anchor('sp1')">To anchor 1</a></p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>

<p><span id="sp1">Anchor 1</span></p>

<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>

<span id="sp2">Anchor 2</span>

<br/><br/><br/><br/><br/>

<span id="sp3">Anchor 3</span>

<br/><br/><br/><br/><br/>

<span id="sp4">Anchor 4</span>

<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div> 

</body>
</html>
joshmax
  • 378
  • 5
  • 20