Text page reading within one page say a menu 6-7 articles

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi.It may seem basic but I want to put some text in a help and hints page which visitors can view but when I copy and paste to text widget the article fills the whole page I want to make it so I can open each article from a menu is it possible.Thanks
Photo of Albert Rowe

Albert Rowe

  • 3 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Albert,

The easiest way is to use anchors which when a user hits an index word it jumps to the respective help topic. The rest of the txt still is above and below but the relevant text will appear at the top of the viewable page.

There are other methods whereby only the relevant text comes onto the screen but this is more complex to code for.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The tutorial for Anchors: Creating HTML Anchor links
Photo of Albert Rowe

Albert Rowe

  • 3 Posts
  • 0 Reply Likes
Thanks for the reply I'm still a bit lost as to the set up.On my site which is a model aircraft club site I have created a page on the heading page which is hints and tips I have tried doing the html anchor I assume I have to change the jump to top to say fibre glassing(which is one of the choices I want)Jump to fibre which is the first word of the text but where do I put the text is it in a html widget and where would I put the command Jump to fibre .

many thanks Albert
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You understand the concept clearly Albert. It can trick many as I remember painfully :(

I think you said that you have already added your text to the page? If you can confirm this I will then give you the process from there.
Photo of Albert Rowe

Albert Rowe

  • 3 Posts
  • 0 Reply Likes
I am tying to make it so on my site from the top menu on the front page that when I choose hints and tips the page opens I then need to have the topics listed say
1.Fibre glassing
2.understanding fuels
3.field safety
with no text showing

Etc I have the relivent files saved in microsoft office format in my documents i want to put these topics on this page without it filling the whole page i.e not until I click 1 fibre glassing for example I have tried copying and pasting but it fills the text widget and takes up the whole page as I said it is just understanding where things go in the html widgets and text combination.
Thanks Albert
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Albert,

Did you copy and paste directly from the word doc into your page? If so I suggest you delete it because it carries the rtf codes with it which can cause havoc with your site and in fact in worst case scenarios can actually break your site and it does now or in the future. There have been a number of victims of this oversight and I can still hear the weeping and gnashing of teeth.

You need to copy the MS Word text and then place it into Notepad. From Notepad copy it again and then Paste it into your page. This process removes all the MS Word coding. You can re-style and format it by using the GUI tools or with HTML.

So back to the anchors:

First thing is to create that short list of topics on your page.
Then Click on the HTML button in your text widget.
For example identify the text in the short list "Fibre glassing" and modify this a little by adding some markup code so that it is expanded to: <a href="#fibre-glass">Fibre glassing</a> {the link}
This then is the Link.

Now go to the body text that you have previously pasted. Identify the section relating to the explanation of the Fibre glassing and insert this bit of code:<a name="fibre-glass"></a> {the anchor}. this then is the spot that the page will jump to, the specific anchor, and it will be at the top of the view position for the user.

repeat this for your other topics:
understanding fuels <a href="#fuel">understanding fuels</a> {the link}paired with <a name="fuel"></a> {the anchor}
field safety<a href="#safety">field safety</a> {the link}paired with<a name="safety"></a> {the anchor}

You can create a large space between your list and your topics and also create a large space between topics. An easy way to do this is to scroll down the page until the topic or index list is no longer seen within the screen as it would have scrolled up and out, then double that space because there are users who are lucky enough to have super-large screens and they will display more lines per screen than a standard(?) monitor screen. This will give the feeling of specific text only (because the other text will be too far away by the spacing created or out of view).

It's also very good practice to have a return link placed at the end of each topic section with something like "Return to topic list" or whatever you prefer.

The link can be <a href="#return">Return to topic list</a> {the link} (Multiple identical links will work, you don't have to have a specific link-name and anchor point name for each return.)

At the very top of your list of topics or index place the jump to spot or specific anchor<a name="return"></a> {the anchor}

When a user reads the text of a topic and then wishes to go back to your headings they simply click on the Return to topic list and be instantly taken back to the isolated topic list
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you wish to number your index points then the best way is to use HTML. Ask if you wish info on this.
Photo of Albert Rowe

Albert Rowe

  • 8 Posts
  • 1 Reply Like
Hi Gop.I would like to thank you for your help with the problem I managed to get them workng after a bit of fiddleing.Albert
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's great work. Congratulations.