Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    linking to anchor near bottom of a page

    . . . .Within my website (so I control all pages) I often make anchor-links from one page (call it currentpage.htm) to an anchor-link in another page (newpage.htm). Imagine that newpage.htm has two anchor-locations, one near the page-beginning (#high) and one near the page-end (#low).
    . . . .There is a problem when linking to newpage.htm#low (or an inside-the-page link to #low) because the page-end goes to the bottom of the browser window, and the location (#low) appears somewhere in the vertical middle of the browser window, so it's difficult for a user to know where they should begin reading, and they get confused.
    . . . .A low-tech solution is to "make the page longer" by adding space to the page-bottom with a series of <p>&nbsp;</p>, or with a tall blank spacer-gif. But this implies something false, it tricks a user into thinking the page is longer than it is, so they may think "this page is too long, I don't want to read that much" and they go away, or they "skim" when they could read more slowly.
    . . . .Is there a solution using javascript?
    . . . .If yes, I assume the javascript must be located within newpage.htm, because a command within currentpage.htm can't "tell another page" what to do. Is this correct? I'm not confident because I'm a novice with using javascript.
    . . . .So is there a way to say, within newpage.htm, "make the page longer by adding a blank spacer-gif to the page-end when an incoming link goes to newpage.htm#low" but to have this be temporary, so when newpage.htm is opened the next time normally (with a link to newpage.htm or to newpage.htm#high) the spacer-gif is gone?
    CraigR
    Last edited by craigr7; 02-02-2012 at 05:57 PM. Reason: to shorten it a little bit

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The page cannot be scrolled down beyond the point where the bottom of the page is at the bottom of the browser.

    You don't add space to the bottom using <p>&nbsp;</p> though - you should add the space by increasing the bottom margin on an appropriate element in the page via the CSS. Doing it witl empty paragraphs could result in printing unnecessary blank pages when the page is printed and is providing content that says nothing where all you are trying to do is change the appearance.

    If you wanted it to be temporary then you could have JavaScript in the destination page check the value in the location.hash field and dynamically apply the larger margin when required.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    >You don't add space to the bottom using <p>&nbsp;</p> ...
    >Doing it with empty paragraphs could result in printing unnecessary blank pages

    ____I hadn’t thought about this. Thanks for calling attention to the bad side-effect. Would a tall blank spacer-gif also be printed? But not the CSS solution you suggest?

    >you should add the space by increasing the bottom margin on an appropriate element in the page via the CSS.

    ____What is an “appropriate element”? Could it be a type of paragraph that is used only for this purpose -- maybe named “pagebottom” -- with “margin-bottom: 1000px;” (or some other large number) to lengthen the page? I use CSS only to format paragraphs and link colors, so I don’t know much about element-possibilities.

    >If you wanted it to be temporary then you could have JavaScript in the destination page check the value in the location.hash field and dynamically apply the larger margin when required.

    ____This sounds like the basis for a good solution, if it would make the page “temporarily long” so it opens with the anchor-location at the top of the browser window, and a user can just begin reading.
    ____But “I'm a novice with using javascript” so I don’t know what the “location.hash” field is, or how to write code that will use it properly to make this happen. It seems that if I have a page-end paragraph that is “<pagebottom>&nbsp;</pagebottom”, then this would always be active. Yes, my novice-ness is apparent.
    ____And how would this behavior (checking location.hash and activating the page-extension, or not activating it) be regulated? Would it be used only for all links that end with an anchor-suffix (...htm#anchorname), or would all anchors that are “low in the page” have to be defined (by my decisions) and specified (in the javascript)? and the page-lengthening would occur only for these specified links?
    CraigR

  • #4
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    As a simpler alternative, you might just highlight the target text, display an arrow next to it, or otherwise mark where the user should start reading. Here's a very simple prototype. Test.htm contains a link to #target in Test01.htm. When Test01.htm loads, if it detects the #target fragment identifier, it highlights the starting paragraph. Here's where you could do something fancier, like displaying an arrow, or doing what you've been talking about: setting the margin-bottom property of the final paragraph to a large enough value so that the #target position is at the top of the browser window.

    Test.htm:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Tester Page</title>
    
    </head>
    <body>
    
    <a href="Test01.htm#target">Go to Page</a>
    
    </body>
    </html>
    Test01.htm:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Tester Page</title>
    
    <script>
    
    window.onload = function ()
       {
       if (location.hash === "#target")
          {
          var target = document.getElementById ("target");
          target.style.fontWeight = "bold";
          }
       };
    
    </script>
    
    </head>
    <body>
    
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <a name="target"></a>
    <p id="target">
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    <p>
       paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text. paragraph text.
    </p>
    
    </body>
    </html>
    Author of the Kindle book JavaScript: Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  • Users who have thanked mjy for this post:

    craigr7 (02-05-2012)

  • #5
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    you might just highlight the target text...
    Here's a very simple prototype,...if it detects the #target fragment identifier, it highlights the starting paragraph. Here's where you could do something fancier, like...
    ____This works, because it changes temporarily; the paragraph is bold when I link to tester.htm#anchor but converts to the original non-bold when I link to tester.htm. Thanks, mjy.
    ____I'm a javascript novice, so I tried lots of experiments. Replacing
    target.style.fontWeight = "bold";
    with
    target.style.color="#FF0000";
    made the paragraph temporarily red - success!

    Here's where you could do something fancier, like... setting the margin-bottom property of the final paragraph to a large enough value so that the #target position is at the top of the browser window.
    ____But replacing the target.style line with code from a css stylesheet, to make it be
    target.style.margin-bottom:1200px;
    or
    target.style.margin-bottom: 1200px;
    or
    target.margin-bottom:1200px;
    or
    target.style."margin-bottom:1200px";
    didn't do anything - failure!

    ____Below is the code I used for "turning it red" -- I wanted to see what does and doesn't matter, so I changed 2 of the 3 "targets" to "anchor" and "title" -- and in the end-of-page paragraph this page-code makes makes "eop" turn red when I link to tester.htm#anchor, so I didn't do anything to mess up the code from mjy.
    ____But when I replace
    target.style.color="#FF0000";
    with
    target.style.margin-bottom:1200px;
    it doesn't do anything.
    ____So I think my failure (to make the page temporarily longer by 1200px) is localized to an error in the target.style...; line, due to an error in my conversion of the margin-bottom command from css-code format into javascript-code format. So,... what is the correct way to do the margin-bottom command?
    CraigR

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Tester Page</title>
    
    <script>
    window.onload = function ()
       {
       if (location.hash === "#anchor")
          {
          var target = document.getElementById ("endofpage");
          target.style.color="#FF0000";
          }
       };
    </script>
    
    </head>
    
    <body>
    <p>regular paragraph text. regular paragraph text. regular paragraph text.</p>
    <a name="anchor"></a>
    <p id="title">Anchor-Paragraph Title</p>
    <p>paragraph #1 text. paragraph #1 text. paragraph #1 text. paragraph #1 text.</p>
    <p>regular paragraph text. regular paragraph text. regular paragraph text.</p>
    <p id="endofpage">&nbsp;eop</p>
    </body>
    </html>
    Last edited by craigr7; 02-04-2012 at 11:43 PM. Reason: fixed minor error

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by craigr7 View Post
    ____But replacing the target.style line with code from a css stylesheet, to make it be
    target.style.margin-bottom:1200px;
    or
    target.style.margin-bottom: 1200px;
    or
    target.margin-bottom:1200px;
    or
    target.style."margin-bottom:1200px";
    didn't do anything - failure!
    Subtracting bottom from margin isn't going to work as bottom will be undefined. Try marginBottom to reference the bottom margin from JavaScript. Also JavaScript uses = not : and needs the value being assigned to be inside quotes.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    craigr7 (02-05-2012)

  • #7
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile

    Thanks. It works!
    Oops, I should have figured this out, because...
    After your answer I web-searched [margin-bottom javascript] and quickly found "marginBottom" as the javascript replacement-term. And by experimenting I found the change from color:FF000 to color="#FF0000" but I didn't use analogy to make the other two changes you point out (using = instead of : , and using " ") to go from margin-bottom:1200px to marginBottom="1200px".
    But I didn't get it, so I appreciate your help, felgall, mjy, and (again) felgall.
    CraigR

  • #8
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    After thinking this problem was solved, I returned to writing idea-content for my pages. But when I tried using the code above for a page with more than one "low in the page" anchor that is linked-to in other pages, the page-lengthening only works for the anchor named in the first "if" in the head-code.
    . . For example, in the code below only "#anchor1" matters. Browsers treat the code as if the 2nd and 3rd if-checks don't exist.
    window.onload = function ()
    {if (location.hash === "#anchor1") ..... }
    {if (location.hash === "#anchor2") ..... }
    {if (location.hash === "#anchor3") ..... }

    . . For each of these, a "match" would activate the same command, to lengthen the final paragraph by setting its bottom-margin to 900px (or some other medium-large number) temporarily. (this lasts until the next page-loading, which is what I want) But the browser only "looks for a match" with the first "if", for anchor1.
    . . Is there a way to adjust this code so it tells browsers to "keep checking until you find a match"? (i.e., if the check for anchor1 is false, check for anchor2, and if it's false, check for anchor3, and the first match that is found will activate the page-lengthening)
    CraigR

  • #9
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Hello craigr7,

    So you're saying that you want to activate page lengthening if location.hash is equal to any one of those three values? That would suggest an OR expression:
    Code:
    if (location.hash === "#anchor1" ||
        location.hash === "#anchor2" ||
        location.hash === "#anchor3")
       {
       // then activate page lengthening...
       }
    Author of the Kindle book JavaScript: Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  • #10
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, mjy, this “OR” variation works!
    . . But I oversimplified when I said that
    >For each of these [anchors] a "match" would activate the same command, to lengthen the final paragraph by setting its bottom-margin to 900px (or some other medium-large number)
    . . Actually, it might be useful to lengthen the screen by different amounts (maybe 700px for the highest-in-page link, 800px for the second link, and 900px for the lowest-in-page link.
    . . But this isn’t essential, since using the same marginBottom for all would work OK. So if there is no quick-and-easy adjustment (to make it three “or” checks, each with its own command) the “OR” solution you supplied will work fine.

  • #11
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    . . Here is a question that (unless there is a reason for “why?”) is a complaint. [it's against browser makers, not against codingforums]
    . . From the beginning, I’ve wondered why this thread was necessary. It required me taking time to write posts, felgall and mjy using their time to help (thanks, your help is appreciated), then me struggling to understand the code, adjust it (what should be changed and what must remain as-is) and soon I’ll have to put it into my template-pages (and then into each individual page in which I’m linking to low-in-the-page anchors) with no errors. And for each anchor, figuring out how much to lengthen a page so it’s “long enough but not ridiculously long” which depends on how close to the bottom of my page the anchor is, and my guessing about what a typical “range of users” have for screen size and window size (both vertical & horizontal) plus font sizes used, the browser’s menu-space at top & bottom,...
    . . But why should any of this be necessary?

    In his first post, felgall said
    >The page cannot be scrolled down beyond the point where the bottom of the page is at the bottom of the browser.
    Why? Is there a technical reason? Why can’t the browser just put the anchor-location at the top of the window, then include blank white space (or blue space,...) at the bottom of the window if this is necessary?
    Was this a bad decision by early browser designers? (that still survives, contrary to logic, due to inertia and tradition) It seems like bad browser design because it causes problems in two important ways:
    . . 1) page-end anchors don’t work properly (without fancy JavaScript solutions and a lot of work/time), as in my situation.
    . . 2) page-down scrolling doesn’t work properly. For the final screen, the only solution is for a reader to highlight the current location (by selecting it with the mouse) so in the final page-down your current reading spot can be found easily.
    . . These are basic websurfing techniques. #2 is used often, by ever reader who wants to read an entire article in a page that doesn’t have lots of padding (by ads, comments, etc) at its end. And for #1, browsers should allow anchors to work as they’re intended, taking a reader to a specific location in the page, always, even if the location is near the page-end.
    Last edited by craigr7; 02-15-2012 at 04:50 PM. Reason: clarifying "who the complaint is about"

  • #12
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    is current browser behavior rational?

    My practical problem is solved (thanks!) but I’m still curious about these questions from 4 days ago:
    . . Is there any technical reason for not making the place where a reader should be -- at an anchor-location, or the place they were (bottom of the previous window) before a "page down" scroll -- always appear at the top of a browser window?
    . . Does “not doing this” provide some practical benefits for a reader? (with the rational browser behavior I’m describing, a reader would know “the page has ended” when they see nothing but white space below a certain point, so this white space wouldn’t be a disadvantage)
    . . If the answers are “no” and “no” -- as it seems to me, but maybe I'm just not seeing the reason -- then should we say “yes” when we ask “Is the current browser behavior due to an unwise decision about browser design?” (evidently a decision was made sometime in the distant past, and has continued since then due to inertia)
    Craig R
    P.S. If others have no interest in this, I won’t ask again, I'll just continue to wonder and that will be OK.


  •  

    Posting Permissions

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