Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, November 9, 2010

Jump to a Content Anywhere in a Page

Here's another one. Have you ever wondered how to create a jump-to-content action when you click on something from a table of contents? For example, there maybe a list of links named alphabetically from 'A' to 'Z'. When you click on 'Y' for example, your browser will jump to the contents in 'Y', saving you from the trouble of scrolling down all the way towards the bottom of the page. Here's a simple example:




-------------------------------------------------------------------------------
Content for A


-------------------------------------------------------------------------------




-------------------------------------------------------------------------------
Content for B



-------------------------------------------------------------------------------




-------------------------------------------------------------------------------
Content for C


-------------------------------------------------------------------------------




-------------------------------------------------------------------------------
Content for D



-------------------------------------------------------------------------------


Before you get started, make sure your content is prepared. This includes your actual content as well as your table of contents (links that you expect your readers to click on). You can include 'Back to Top' text in your content to provide a jump back to your table of contents.

Step 1:

Give your destination a unique ID. The destination can be anything: text, image, you name it. In the above example, I used texts as destinations. This is how you can do it. Click on Edit HTML, and find for the text that you want to be the destination of a jump. Then, give the text an ID. Let's say I want the text "Content for C" to be my destination. So all I have to do is give this text a unique ID. Say I want my unique ID for this destination to be 'ccontent', so I just have to add the ID as such:

<p id="ccontent">
Content for C
</p>

You can make almost anything as your destination. For example, if you want an image to be your destination, just add an ID to it. So it'd look something like this:

<div id="uniqueID" class="separator" <div id="uniqueID" class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNhFTiNRfPI/AAAAAAAAB_I/iERLIWg22uQ/s1600/P1070106.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNhFTiNRfPI/AAAAAAAAB_I/iERLIWg22uQ/s500/P1070106.JPG" width="500" />
</a></div>
The only addition that I made to the code above is the line 'id="uniqueID"'. You get the idea. Give your destination a unique ID.

Step 2:

All there is left to do is link your table of contents to the destination. Again, click on Edit HTML, find the text that you want to be the link for your jump, and link it to your destination. To link it, just use '#destionationID' as its address. In my case, when you click on 'C', you'd jump to 'Content of C'. This is how I did it. In Edit HTML, I find for this letter 'C', and I linked it, as such:

<a href="#ccontent">C</a>

Again, emphasize on the target address. Use your destination unique id, prefixed with hash (#) as the target address. In the example above, my destination ID is 'ccontent'. So my target address is "#ccontent". To link an element, all you have to do is add a tag before your link, and another one after your link.

It's that easy! Do the same for your 'Back to Top' texts. Give your Table of Contents a unique ID, then go to your 'Back to Top' texts and link it to this unique ID. You can also link other elements like images in your blog to jump to a certain destination. Just link the image to the destination's unique ID. It is noteworthy that if you link something by just using a hash symbol, you'll jump to the very top of the page. Let me show you an example. In the text below, this is how I have tagged it in Edit HTML mode:

<a href="#">Jump to the top!</a>

Go ahead and see what it does if you link something using the hash symbol only, without specifying any unique IDs. Before you jump to the top, let me say this. Do check my little advice below, and I hope this tutorial will be informative for you, and happy jumping!


Advice: It is always a good idea to publish your post first and get your link to the post before you include this jumping action. Why you may ask. Blogger's Post Editor acts in a funny way. After you have linked your text to your unique ID, Blogger's post editor sometimes will misinterpret this. So instead of being this:
<a href="#ccontent">C</a>
Blogger changes it into this:
<a href="http://www.blogger.com/post-edit.g?blogID=1430937011014702882&amp;postID=2984578751898596115#ccontent">C</a>
This gives a false destination. It's a disaster. An easy fix to this problem is by adding your post's URL before the #. It will be more stable as Blogger's post editor will not misinterpret it.
<a href="http://southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html#ccontent">C</a>
Then again, if you're using a custom domain, your page will/might refresh first before jumping to the intended destination. I am still linking directly to my IDs instead of adding my post's URL in front. As long as I don't toggle between Edit HTML mode and Compose mode often, my links will be fine (those uncanny numbers will not be added).

28 comments:

  1. If I want to make jump link text in a within a "text" gadget to another gadget farther down on the page how do I do that?

    Thanks
    Terri

    ReplyDelete
  2. Olivia: It's easier. Gadgets come with IDs readily. So you can skip Step 1 of this tutorial. But you need to know what's the ID of your destination gadget (the "another gadget father down"). It's easy, see this link on how you can find its ID.

    Now that you have your destination gadget's ID, all you have to do is link to this gadget in your text gadget (step 2 of this tutorial).

    For example, say the destination gadget's ID is 'BlogArchive1'. Now, go to your text gadget, click on 'Edit HTML' and paste this:
    <a href="#BlogArchive1">Click here to jump to my Archive gadget</a>

    ReplyDelete
  3. Thanks! That worked great.

    I only have one problem now... I have all my links set to open in a new window/tab per one of your other tutorials. This is the only link I don't want to open in a new page.

    Can I add some code that will force just this one link to jump in the existing window?

    Thanks,
    Terri

    ReplyDelete
  4. Interesting situation. Yes there is. Use this HTML instead:

    <a href="#BlogArchive1" target="_self">Click here to jump to my Archive gadget 2</a>

    ReplyDelete
  5. You are awesome, I have learned so much! I am having a blast playing with this and learning as I go.

    Terri

    ReplyDelete
  6. Olivia: I could say the same. Merry Christmas and regards.

    ReplyDelete
  7. Ok, I guess there is one more link I DON"T want to open in a new window/tab and the would be the "Home" tab. I couldn't find the html link any where to change is as I did for the Gadget.

    Can I add some code that will force this link to jump in the existing window too?

    Terri

    ReplyDelete
  8. You can't particularly address the 'Home' link if you're using a Pages Gadget. You can make the entire Pages gadget's links to open in the same window by going to Dashboard - Design - Edit HTML - Expand Widget Template - Find for these two lines:

    <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>

    <li><a expr:href='data:link.href'><data:link.title/></a></li>

    Change them to:

    <li class='selected'><a expr:href='data:link.href' target="_self"><data:link.title/></a></li>

    <li><a expr:href='data:link.href' target="_self"><data:link.title/></a></li>

    You can address the links individually if you use a LinkList gadget instead of a Pages gadget. Same concept. If you use a linklist gadget, you'll be able to see the links for individual tabs under Edit HTML. Then you can just add target="_self" to those links.

    ReplyDelete
  9. hi.. great blog thx for the knowlege
    i had 1 quastion.
    what if i wanna "post link" only to open in new tab?
    is that posible?

    ReplyDelete
  10. @Admin : You're welcome. Unfortunately, there is no automatic way to make all your post links to open in a new tab. You can do it manually though, by clicking on Edit HTML. A link will look like this:

    <a href="http://www.southernspeakers.net/">Voices From South V2.0</a>

    You have to add target="_blank" to the back of it, as such:

    <a href="http://www.southernspeakers.net" target="_blank">Voices From South V2.0</a>


    If you want only your post links to open in new tabs, you've to do it manually one by one. There might be some javascript that will simplify the process, but javascript is not my field. Hope this helps. Cheers and God bless.

    ReplyDelete
  11. Hi yoboy, (this is my second Q)
    Just wondering, if is possible to jump content anywhere in a specific place on a different page!! feel free to check my blog (which is all done thanks to your blog) and give me any suggestions of any kind!!! www.retrobikes.es

    Big Thanks and one more time your are a Legend!!!

    ReplyDelete
  12. @Retro: Oh yes it is very much possible. See this link for example:

    http://www.southernspeakers.net/2010/12/getting-best-responses-from-blogger.html#tip13

    The ID in the example is (no prize for guessing), 'tip13'.

    ReplyDelete
  13. Yoboy,
    one and one more time Thanks for your help on this one !!!! as i said before this blog is just amazing in every aspect!!!
    Cheers mate!!!

    ReplyDelete
  14. @Retro: Happy to help Retro! Cheers :)

    ReplyDelete
  15. Hi Yo Boy, (Jump content to a specific place in a different page)

    Lets see if u can help me on this one as i haven't been able to work out what i'm doing wrong.
    i hope i'll be able to explain my problem properly as is quite simple i guess!? but quite tricky to explain it!!!

    I have followed your tutorial but it looks that i'm doing something completely wrong,

    my unique id is (bhblanca)

    The actual picture which should take me to my final destination is on this link (http://www.retrobikes.es/2011/10/bh-plegable-white.html) and clicking on HERE should refer me to my final destination which is this one http://www.retrobikes.es/p/bikes-for-sale.html#bhblanca, but it doesn't, it is literally loading to the actual page where the photo is but is not going to the specific place on the page, which it should be at the bottom (where the white bike is)
    Now listen this: if u go to this link (http://www.retrobikes.es/2011/10/bh-plegable-white.html) and click on HERE and then after Clicking on HERE you copy and paste the final destination link (http://www.retrobikes.es/p/bikes-for-sale.html#bhblanca) on the domain area, the page itself recognise the link and goes down to the specific place indicated. (don't know if this could give u a clue of what is going on but i thought it would be worth mention it.

    Hope i explained myself and everything that i mentioned make sense.

    One more time Thank you so much in advance for everything that you could do to help me!!! BTW your Blogg is simply Amazing!!!

    www.retrobikes.es

    ReplyDelete
  16. @RetroBikes: That didn't come as a surprise to me. Though I called it 'Jump to content anywhere in page", the tech savvies call this feature an 'HTML anchor'. And in Dynamic view, HTMLs are hardly HTMLs. To be put simply, Dynamic View's machine captures (for the lack of a better word) your HTML, and regenerate your content dynamically. Things like HTML anchors, unfortunately, will get lost in translation. What you see in DV is a stripped-down version of your regenerated content, built using your post-feed, dynamically. Long story short, HTML anchors won't work in DV, at least not easily, and definitely not with the conventional way.

    ReplyDelete
  17. This is the only post I found that describes the solution for blogger. Thank you very much. If you want to have an anchor link in blogger, it only works with your trick to add the web address before the #. Finally, it works. http://www.stlbankruptcyinfo.com I put a table of content at the top of pages.

    ReplyDelete
    Replies
    1. Glad you see the trick behind this. It'll be useful in many occasions. You have fun, and happy blogging :)

      Delete
  18. Will this work in Dynamic Views?

    I'm wanting to have two jumps on my next game review, one for the single player, and one for the multiplayer...

    www.TheReviewOnline.info

    ReplyDelete
    Replies
    1. Hi Stephen,

      Yes, it will work in DV as well. But you'll notice a slight inaccuracy to the destination where the link jumps to..

      Delete
    2. Thanks, I will definitely try this out.

      Delete
    3. And I wish you all the best :)

      Delete
    4. I had it working through a different tutorial and then it stopped working, so I just had to remove it. Oh well.

      Delete
    5. Not surprised.. I expected static rules to go crazy with dynamic views..

      Delete
  19. how to do this?
    i wan it.
    but i try many times also cant get the effect.

    ReplyDelete
    Replies
    1. Let me have a look at the page that you've been working on. I'll see if I can help..

      Delete
  20. thanks for the tutorial. in my blogspot blog, page id changes automatically to div id. Is it OK?

    ReplyDelete
    Replies
    1. Try to avoid any uncontrolled changes, as it will break the reference in your links. See the tips in the 'Advice' box in my post above, that might help.

      Cheers :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.