iWeb: Internal links to spots on the same page?

[els80]

Hi!

I am using iWeb '08 version 2.0.4 and I am creating a huge FAQ page on my site (www.desertluxuryvacations.com). I was hoping to be able to link to different spots on the same page? (i.e. like a "Back to Top" so people aren't scrolling forever...I have a ton of FAQ! )

Any ideas?

Thanks!

Emily

[MacJerry]

Emily, I need the same thing. If you find a link or another helpful post, be sure to revisit this thread with the info. Thanks!

[kkat69]

Somehow your going to need to place 'anchors' on the 'hotspots' on your page. Basically you'll need to probably try to add an HTML snipped resembling "<a name='myspot' />" and then your link TO that spot would resemble "<a href='#myspot' />" to goto top of page you can do the same thing, just link to an anchor at the top of the page, or give something up top an 'id' and link to it similar to what was mentioned before.

To add the actual href link you can 'enable as hyperlink' and just add the #myspot in the text box and it should work.

If anything else fails you can just 'add html snippet' and use the above techniques.

<a name="myAnchor" />
<a href="#myAnchor">Link</a>
<a name="top" />
<a href="#top">Back to Top</a>

[Giovannino]

I don't think HTML Snippets work for Anchors as iWeb creates a new page for each HTML Snippet which gets embedded into the page you added the Snippet to using an iFrame. So the code you put in an HTML Snippet doesn't end up being in the page you added the Snippet to.

Try this one instead:
http://iwebfaq.org/site/iWeb_Anchors.html

[stovetop6872]

Originally Posted by els80

Hi!

I am using iWeb '08 version 2.0.4 and I am creating a huge FAQ page on my site (www.desertluxuryvacations.com). I was hoping to be able to link to different spots on the same page? (i.e. like a "Back to Top" so people aren't scrolling forever...I have a ton of FAQ! )

Any ideas?

Thanks!

Emily

Hey! Sorry this is a little off of topic but on your link, at the bottom of the page your logo covers your phone number a bit and email address. I am not trying to be critical, just a friendly FYI. Looks nice!

[kkat69]

I was asking around and was pretty much told to do this after the site is published.

After it's published open the html file you want to modify and manually add the anchor tags.

You can (prior to publishing) insert the hyperlink as link to external site and reference the location, "http://mysite.com/myname/HomePage.html#Top" then after publishing add the "<a name="Top">" where you want it.

[SrWebDeveloper]

For a universal approach and non-proprietary to iWeb for creating a hyperlink (i.e. anchor tag) out of ANYTHING on your page create an href and assign an ID and set coordinates in the selector in your stylesheet. The coordinates form a virtual box based on the link's position, height and width style elements. So anything within that virtual box is now a link (white space, graphics, text, whatever).

Example, in your html:

<a href="/path/to/whatever_page.html#top" id="mylink" title="Top of Page...">Top of Page</a>

CSS:

#mylink {

    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 16px;

}

The above example sets the link (box) at an absolute position on the page, but you can use relative positioning too or if you nest div's. You get the idea. As an aside (a cool trick) for hidden links you can define your ID with a psuedo class like you'd do for any anchor link, add "cursor: text" and/or disable any cascading link effects or match color so literally nothing "changes" on a mouseover to let people know its a link. But, it is!

It's all done via CSS!

Just another way of doing things, get creative and have fun!

-jim

[MacJerry]

Thanks to everyone who responded with various suggestions. This response is greatly appreciated. I must confess, though, that I am a novice at web production. I just started using iWeb for the first time a few weeks ago. Funny how so quickly I needed to do things that Apple did not think to "code in" to the software to ease the user experience--like jumps, or anchors, on the same page to another part of that page.

OK, so here's the confession. I appreciate the posted suggestions greatly. But actually knowing how to implement them in my web page still seems a little tenuous. I apologize, but I need a little more of a step 1, step 2, this window, that drop-down menu choice, kind of a hand-holding "walk through" tutorial in the iWeb app to do this, if someone has the time. As a complete novice (not stupid, just ignorant) I am not sure I can implement these html coding processes without some specific "do this," "do this," "then do this" in the iWeb 08 app.

So, I have an iWeb page. The content is lengthy. At the bottom of the page, after scrolling through lots of graphics and text, I want to make getting back to the top of the page convenient for my reader. So I want to put a "Back To Top" link at the bottom of that page that when clicked jumps the user back to the top of that same page. So, in iWeb 08 I . . .

[Giovannino]

Originally Posted by MacJerry

I need a little more of a step 1, step 2, this window, that drop-down menu choice, kind of a hand-holding "walk through" tutorial in the iWeb app to do this, if someone has the time.

There's a step by step guide on the site I linked to on my previous post in this thread. I don't think you will get something more step by step... And I'm sure you will be able to get it to work with that one...

[MacJerry]

Thanks. I did look at that discussion. Still had some jargon that I need time to parse, and seemed a little convoluted. In the meantime I discovered on my own a simple work around for at least one type of jump, that is, the specific one I needed (from bottom of page to top). Thanks again. Much appreciated.

[Carole Hayes]

Originally Posted by MacJerry

Thanks. I did look at that discussion. Still had some jargon that I need time to parse, and seemed a little convoluted. In the meantime I discovered on my own a simple work around for at least one type of jump, that is, the specific one I needed (from bottom of page to top). Thanks again. Much appreciated.

What was your work around???

[Giovannino]

Originally Posted by Carole Hayes

What was your work around???

The easiest way to have a link at the bottom of a page which goes to the top of a page is to have a link to the page itself. So the browser reloads the page an d voilà you're at the top again...

[kkat69]

Originally Posted by Giovannino

The easiest way to have a link at the bottom of a page which goes to the top of a page is to have a link to the page itself. So the browser reloads the page an d voilà you're at the top again...

yes it's easy but not all browsers work that way. Some will reload back to the position you were last.

Also this is a bad practice as it makes a round trip back to the server again which can eat bandwidth and load time. Meaning if the page was slow to load to begin with, just getting to the top would be just as slow when a simple <target="_Top"> would work.

I would not recommend relinking the page.

[Giovannino]

Originally Posted by kkat69

I would not recommend relinking the page.

Neither I would recommend it. I agree with you that it's bad practice to do so.

[Carole Hayes]

I don't want to re-link the page....

I want to do what a previous poster asked about: I am trying to build a FAQ page, with a list of questions at the top, linked to the answer down below.

I can't believe iWeb doesn't have anchor tags, and I'm trying to find some way to do it without them....

[angelwatt]

I don't have iWeb on my computer at work, but something you can try. Go to the point on the page where you want a link to go to, then insert a HTML Snippet. Use this as the snippet

<a name="faq-1"></a>

Then go to the top of the page and highlight the question that relates to the answer spot where we just put that snippet and make the text a link using the inspector. For the link address you'll put the URL to your current page followed by #faq-1, e.g., /faq.html#faq-1.

I can't try it out though so you'll just have to give it a try.

Edit: Well, I got to try the above, but it didn't work as is. I forgot iWeb stores the snippets in an iframe so it's not accessible by #faq-1. However, the iframe itself does have an id attribute, which you can link to. In my case it was widget1-frame, so my link pointed to http:?/domain.com/FAQ.html#widget1-frame and that seems to work. What a pain though.

[Carole Hayes]

Originally Posted by angelwatt

I don't have iWeb on my computer at work, but something you can try. Go to the point on the page where you want a link to go to, then insert a HTML Snippet. Use this as the snippet

<a name="faq-1"></a>

Then go to the top of the page and highlight the question that relates to the answer spot where we just put that snippet and make the text a link using the inspector. For the link address you'll put the URL to your current page followed by #faq-1, e.g., /faq.html#faq-1.

I can't try it out though so you'll just have to give it a try.

Edit: Well, I got to try the above, but it didn't work as is. I forgot iWeb stores the snippets in an iframe so it's not accessible by #faq-1. However, the iframe itself does have an id attribute, which you can link to. In my case it was widget1-frame, so my link pointed to http:?/domain.com/FAQ.html#widget1-frame and that seems to work. What a pain though.

It works! It WORKS!!!

Thank you, so much!!!!

I was starting to get really worried that there was just NO way to do it, and that I was going to have to have my husband hand-code the FAQ page and then REPLACE the iWeb page EVERY time I published!

Now I won't have to!!!

You don't happen to know how to do drop-down menus in iWeb, do you??

[angelwatt]

Originally Posted by Carole Hayes

You don't happen to know how to do drop-down menus in iWeb, do you??

See this other thread. It's not easy.

[Carole Hayes]

Originally Posted by angelwatt

See this other thread. It's not easy.

Thanks for the link!

[lucasledger]

Originally Posted by Carole Hayes

It works! It WORKS!!!

Thank you, so much!!!!

I was starting to get really worried that there was just NO way to do it, and that I was going to have to have my husband hand-code the FAQ page and then REPLACE the iWeb page EVERY time I published!

Now I won't have to!!!

You don't happen to know how to do drop-down menus in iWeb, do you??

Hi Carole,

I checked out your site and it does work! I'm having trouble figuring out two things though and was hoping you could help:

1. How did you find the iFrame id attribute (i.e., http:?/domain.com/FAQ.html#widget1-frame in angelwatt's post)?

2. Once you changed your external link to reflect the iFrame id attribute, did you keep the snippet the same as in angelwatt's post (i.e., <a name="faq-1"></a> )?

BTW I spent quite a bit of time trying to get the other page anchor method to work (the one Giovannino posted a link to: http://iwebfaq.org/site/iWeb_Anchors.html) but it just didn't. Otherwise, that site is pretty extensive.

[angelwatt]

Originally Posted by lucasledger

Hi Carole,

I checked out your site and it does work! I'm having trouble figuring out two things though and was hoping you could help:

1. How did you find the iFrame id attribute (i.e., http:?/domain.com/FAQ.html#widget1-frame in angelwatt's post)?

2. Once you changed your external link to reflect the iFrame id attribute, did you keep the snippet the same as in angelwatt's post (i.e., <a name="faq-1"></a> )?

BTW I spent quite a bit of time trying to get the other page anchor method to work (the one Giovannino posted a link to: http://iwebfaq.org/site/iWeb_Anchors.html) but it just didn't. Otherwise, that site is pretty extensive.

I never went fully through it, but essentially you'll be working the steps backward from what you have.

1. First do a Publish to Folder.
2. You'll then look through the HTML file created (it'll be one of the HTML files inside the Site folder that gets published) and find the iframe tag that is associated with loading that particular snippet. Once you find it you'll make note of the value in the id attribute.
3. You'll then go back to iWeb and create the link like you have in your above step 1, but use the id value after the #.

Note that the id attribute may be different for you depending on how the page is done. To look at the code for the HTML file you'll need to open it in a text editor (don't try using TextEdit, download Smultron or TextWrangler) to view the actual code and look for the iframe tag (<iframe id="...">...).

[Carole Hayes]

Originally Posted by lucasledger

Hi Carole,

I checked out your site and it does work! I'm having trouble figuring out two things though and was hoping you could help:

1. How did you find the iFrame id attribute (i.e., http:?/domain.com/FAQ.html#widget1-frame in angelwatt's post)?

2. Once you changed your external link to reflect the iFrame id attribute, did you keep the snippet the same as in angelwatt's post (i.e., <a name="faq-1"></a> )?

BTW I spent quite a bit of time trying to get the other page anchor method to work (the one Giovannino posted a link to: http://iwebfaq.org/site/iWeb_Anchors.html) but it just didn't. Otherwise, that site is pretty extensive.

I just tried the name that angelwatt used, and it worked! I changed the number for each additional anchor; they seem to keep the same name, and just go up one number each time you add one.

Mine don't line up exactly how I want them to right now, and I'm about to go back to tweak them, so I'm afraid I WILL have to do it the long way, but if you only have a couple, and aren't constantly adding and deleting like I did, you can probably just number them, in order....

Did that make any sense? I'm about to go to sleep, and a bit muddle-headed.... I'll be back in the a.m.....

[lucasledger]

Originally Posted by angelwatt

I never went fully through it, but essentially you'll be working the steps backward from what you have.

1. First do a Publish to Folder.
2. You'll then look through the HTML file created (it'll be one of the HTML files inside the Site folder that gets published) and find the iframe tag that is associated with loading that particular snippet. Once you find it you'll make note of the value in the id attribute.
3. You'll then go back to iWeb and create the link like you have in your above step 1, but use the id value after the #.

Note that the id attribute may be different for you depending on how the page is done. To look at the code for the HTML file you'll need to open it in a text editor (don't try using TextEdit, download Smultron or TextWrangler) to view the actual code and look for the iframe tag (<iframe id="...">...).

Thanks! It worked! Here's the result: www.lucasledger.com (Any and all feedback on layout would be much appreciated.)

Here are some extra hints for others who like me are also new to iWeb:

1. Figuring out which widget id in TextWrangler (TW) corresponds to your anchor: Once you've got the TW file open, you'll notice that the widget ids start at 0 and are numbered sequentially. You'll also notice that TW identifies each widget id by the corresponding anchor's absolute position from the top. In a nutshell, all you need from TW is the first widget id ("widget0-frame" in my case), because all your widget ids will have the exact same format (except that the number will go from 0 to 1 to 2 etc.). Then go back to iWeb and you can visually figure out which is the first id ("widget0-frame") because it'll be the the one closest to the top of your page. The second id (widget1-frame) is the second closest to the top of your page. And so on.

2. Anchors do not like objects!! For the anchors within my main text box (the ones corresponding to my FAQs, not to my Back To Top) to work properly I had to remove, and replace with text-only, all (1) fixed text boxes, (2) floating text boxes, (3) bullets, and (4) column formatting. Not being able to format columns automatically was rough--you can't do it with tabs or by centering the text and adding spaces to create justified columns. Fortunately I didn't have a similar issue with the anchor for my Back To Top because that anchor isn't inserted in a text box--instead, the anchor snippet is a fixed object that sits at the top corner of my page.

3. Off of the anchors topic but still on the objects topic: Internet Explorer (IE) doesn't like objects in the same location with text either. Objects by themselves seem to get translated okay, but every time I had a text box with both text and an object (fixed or floating), IE ignored the way the text wrapped around the object (either through the floating mechanism or even by creating text paragraph returns underneath a fixed object).

4. A final note on browsers other than Safari and Firefox: even when I used web-standard fonts (99.9% of my entire website is in Times New Roman), IE creates an image of the website and does not recognize the content as text. Same thing with a bunch of other browsers (both OS and Windows versions).

[lucasledger]

Originally Posted by Carole Hayes

I just tried the name that angelwatt used, and it worked! I changed the number for each additional anchor; they seem to keep the same name, and just go up one number each time you add one.

Mine don't line up exactly how I want them to right now, and I'm about to go back to tweak them, so I'm afraid I WILL have to do it the long way, but if you only have a couple, and aren't constantly adding and deleting like I did, you can probably just number them, in order....

Did that make any sense? I'm about to go to sleep, and a bit muddle-headed.... I'll be back in the a.m.....

Hi Carole,

It sounds like you may be having the same issues as me with alignment (see my most recent post, #2). If the same thing is causing our alignment problems, please let me know if you find a better workaround than going with 100% text.

Thanks again to you and Angelwatt for your help!

[Carole Hayes]

Originally Posted by lucasledger

Hi Carole,

It sounds like you may be having the same issues as me with alignment (see my most recent post, #2). If the same thing is causing our alignment problems, please let me know if you find a better workaround than going with 100% text.

Thanks again to you and Angelwatt for your help!

I'm going to keep your post open and see if I can't fix my issues now that I've had some sleep.

I don't think I have anything in that text box other than left-justified text, and all of it is Verdana, so I don't know that that's the issue, but I'll check again and see...

The page I'm working on is here, if anyone wants to take a look and tell me if there's something I'm missing.