Thursday, 15 July 2010

css - Center on anchored image after jump? -


When I jump to an expanded (4000px) page on an anchor tag, the anchor image is aligning horizontally to the right . How do I get to align the center? I have tried many things but no one seems to be working. Since I am new here, I am not allowed to post the code, so I hope I am quite clear.

Thank you for your help,

Robert C.

This issue arises because the browser will give the least amount of scrolling necessary to look at the anchor element. Thus, if it goes to the right of the viewable area, when the anchor tag is clicked, it will only scroll enough enough to reveal the whole element.

You can correct this behavior with javascript if this is an option, you will not be able to click it directly with #tancer CSS.

Here's a "solution" by using jQuery. I have a "solution" in the quote because it may be related to the problems you may want. For example, without the forward JS, the back button will not work to go to the previous link.

Turn off this link to the page you link it to & lt; Head & gt; Tags:

  & lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () {$ ("a [href ^ ="]). Click (function (e) {var id = $ (this) .attr ('href'). Substr (1), $ target = $ ('* [Name =' + id + '] img'), $ window = $ (window), offset = $ target.offset (); var left = offset.left - ($ window.width () / 2) + ($ Target.width () / 2); var top = offset.top - ($ window.height () / 2) + ($ target.height () / 2); $ ('html, body') ScrollTop (Top) .scrollLeft (left); e.preventDefault (); // Keep the browser from trying}};}); & Lt; / Script & gt;  

This will find all the one tags with the internal link (starts with href # ). Then it finds the goal of receiving that name, and the child grabs the img tag then it defines the img element and the dimensions of the window Does anything math offset with img elements, and it scrolls in the center


No comments:

Post a Comment