The WebRing.com System

Mixing SSNB JavaScript and Native HTML Code
on the Same Page

This page explains how to easily mix SSNB JavaScript and native HTML Code for webrings in the WebRing.com system, and specifically, how to mix them on the same page.

What Is the Problem?

	This is the new logo for the WebRing.com system, implemented in their changes of Oct.2006. It distinguishes this webring system from the other systems like Ringlink, RingSurf and Bravenet. See also my articles: WebRing.com Logos and Is Webring a Trademark?

The WebRing.com system supports both JavaScript based Server Side Navigation Bars (SSNBs) and also the use of native HTML for coding the navigation bars.

Some webrings require the use of the SSNB JavaScript, others require the use of native HTML and still others permit either to be used.

So far, there is no problem.

But if you attempt to "mix" both native HTML and SSNB JavaScript on the same page, you can encounter a problem. The problem is that the navbars that are coded in native HTML are "duplicated" by the SSNB JavaScript and appear twice on the page.

Let's See an Example

Let's say that you have membership in two webrings:

• The HTML Webring, and
   
• The JavaScript Webring

You register both of these webrings to this URL:

http://www.MySite.com/webrings.html

Then for The HTML Webring, you put native HTML code on your page.

And, for The JavaScript Webring, you put the SSNB JavaScript on your page.

Guess what! The SSNB JavaScript shows two navbars: one for each of the webrings. The navbar for The HTML Webring is duplicated. This is a problem.

What Causes the Problem?

When you register a page for a webring in the WebRing.com system, it assigns that membership to a "stack". All webrings that you register to the same URL share the same "stack".

The SSNB JavaScript delivers all the navbars for all the webrings that are in a stack.

And this is what causes the problem.

What Is the General Solution?

Putting a particular webring into a separate stack is pretty easy to do, as long as you know two tricks:

• How WebRing.com Groups Webrings
   
• The Little HTML Thing Called Bookmarks

Trick #1: How WebRing.com Groups Webrings

First, you need to know how WebRing.com groups webrings.

Many people think that WebRing.com creates a separate stack for each page. But this is not true. It creates a separate stack for each unique URL, even if the two URLs point to the same page.

Consider these three URLs:

• http://www.ACoolDomain.com
• http://www.acooldomain.com
• http://www.acooldomain.com/index.htm

Each of these URLs points to the exact same page. But, if you registered four webrings, one to each URL, you would get four unique stacks and four sets of JavaScript code. Even little differences, like capitalization make a difference to WebRing.com

Trick #2: How Bookmarks Work

HTML allows for things called "bookmarks". Bookmarks are a way to go to separate places on the same page.

Suppose you had a very long page named

• http://www.ACoolDomain.com/webrings.htm

Now suppose that one page had three sections. You might create three bookmarks named

• Section1
• Section2
• Section3

Then, you would reference each section this way:

• http://www.ACoolDomain.com/webrings.htm#Section1
• http://www.ACoolDomain.com/webrings.htm#Section2
• http://www.ACoolDomain.com/webrings.htm#Section3

Don't get too hung up on this. What we are going to do is to create a dummy bookmark.

Here is the great thing. Suppose that you reference a bookmark that doesn't exist. If you do, the browser just goes to the top of the page.

For example, on that page I told you about above, if you used this URL

• http://www.ACoolDomain.com/webrings.htm#Section4

the browser would go to the top of the page because the page doesn't actually have a bookmark named Section4.

Any time you reference a bookmark that does not exist, the browser just goes to the top of the page

Putting the Two Tricks Together

Now that we understand Trick #1 and Trick #2, we can use "bookmarks" to make the URL "different" and cause WebRing.com to create a separate stack for the webring.

Here is the background:

Consider these two different URLs:

• http://www.ACoolDomain.com/webrings.htm
   
• http://www.ACoolDomain.com/webrings.htm#separate

These two URLs are different. Because the only difference is the bookmark ("#separate") they both actually point to the same page. Not only that, because the bookmark ("#separate") doesn't actually appear on the page, the second URL will point to the top of the page, just like the first URL does.

However, because they are, in fact, different, WebRing.com will assign unique stacks for these two URLs . . . even though they refer to the same page.

So, what you do is to add a bookmark to the URL for the particular webring you want to appear in a separate stack.

For example, if your registered page is:

• http://www.ACoolDomain.com/webrings.htm

you could add a bookmark like this

• http://www.ACoolDomain.com/webrings.htm#separate

That will cause the WebRing.com system to put this webring in a stack by itself.

Again, the reason is that WebRing.com creates a separate stack for each unique URL. Some people think it creates a separate stack for each page. But this is not true. It creates a separate stack for each unique URL, even if the two URLs point to the same page.

After you create a separate stack for the webring, get the new code for this new stack and put it on your page.

What Is the Specific Solution?

Well, that depends.

I've got recommendations for two different cases:

1. You normally use native HTML and encounter a webring that requires the use of SSNB JavaScript,
    
2. You normally use SSNB JavaScript and encounter a webring that requires the use of native HTML

1. Normally Use Native HTML

If you normally use native HTML and encounter a webring that requires the use of SSNB JavaScript, then create a second stack for your page by adding "#ssnb" to your URL. For example, if your "normal" URL is

http://www.MySite.com/webrings.html

then your "special" URL would be

http://www.MySite.com/webrings.html#ssnb

Use this second special URL to register all webrings that require SSNB JavaScript. This will prevent duplication. And, it will be easy to remember.

2. Normally Use SSNB JavaScript

If you normally use SSNB JavaScript and encounter a webring that requires the use of native HTML, then create a second stack for your page by adding "#html" to your URL. For example, if your "normal" URL is

http://www.MySite.com/webrings.html

then your "special" URL would be

http://www.MySite.com/webrings.html#html

Use this second special URL to register all webrings that require native HTML. This will prevent duplication. And, it will be easy to remember.

Is That All It Takes?

Yes. That is all it takes. It isn't hard. It is actually, pretty easy.

And, I'm here to help. If you have any questions, feel free to email me.

Why I Require SSNB JavaScript

I have a page on my site that explains why I require SSNB JavaScript and do not permit the use of native HTML. Click here to go to that page.

A Personal Note:
If You Want to Delete Your Webring

If you are considering deleting your WebRing.com webring, please do not delete it. Instead, please contact me . I would be pleased to adopt it from you. I will personally work with you to make that transition smooth and painless.

I'm sorry. While I have long adopted webrings in the WebRing.com system, because of the Oct.2006 changes, I am no longer doing that.

However, please note that "deleting" your webring is a fruitless exercise. The system will just restore it and place it up for adoption.

Webring News and Announcements

WebRing.com Changes Big Time ---  It was October 2001 that WebRing.com came into existence following the end of Yahoo! Webring. Now, 5 years later, WebRing.com is changing again. Moving from primarily a free service to primarily a paid service, the system is undergoing massive change. Stay tuned.

Ringlink Activity  ---  While Ringlink has not released a new version since Version 3.2 on 21.Feb.2005, the system seems to be getting a lot of activity. Many people are discovering this great webring system and moving their webrings here. If you don't know about Ringlink, definitely check out this great webring system. I personally recommend it.

WoW  ---  The World of Webrings features the World of Webrings discussion list. It offers a forum for both webring owners (ringmasters) and webring members to discuss the latest hot topics about all webrings, including WebRing.com, Ringlink , Alt-Webring, RingSurf, Bravenet and others. If you belong to any webring in any webring service, you should join this list.

RingSurf Passes 3 Year Anniversary  ---  It was 3 years ago, on 16.Aug.2003 when the WoW list list noted that RingSurf's domain name registration had changed. Then the new owner came forward. A RingSurf Feature List was developed and debated. Then, on Thanksgiving day, 27.Nov.2003 the new owner posted on the WoW list that the new RingSurf is up! If you haven't checked it out lately, see what has happened in the last three years.

Article About Webrings  ---  Check out this excellent Salon.com article about the history of Yahoo! and WebRing.com: The Strange Saga of Yahoo and Webring . For some, it will bring back memories. For others, it will explain the history. Now, I wonder if they will update it to talk about the latest WebRing.com changes.

Articles About the WebRing.com System

Webring Sections and Subsections

The Webring Section is a large section of my website. I have divided it into four major "subsections".

• General Information
• The WebRing.com System
• Webrings I Own and Belong To
• The Wazillion Navbars Project

Each "subsection" has it's own special "logo".

As you travel in the various subsections you will find, near the bottom of each page, links to pages within that subsection and also links to the other subsections. To go to any subsection, just click on the "logo" or on the text link for that subsection.

Webrings: General Information

This subsection includes general information about webrings. Webrings can be hosted by a variety of different services. This section deals with the overall concepts and issues, not with any one particular "brand" of webring.

It includes my Webring FAQ, links to articles about webrings, and general help information. Click here or on the graphic.

The Wazillion Navbars Project

This subsection is a historical section about the Yahoo! WebRing system. It was begun during the early days of problems with the Yahoo! WebRing system in September 2000.

It ended when the Yahoo! WebRing system spun off into the independent WebRing.com system in October 2001. I maintain it for the historical record. Click here or on the graphic.

Webrings I Own and Belong To

This subsection shows all the webrings I own and links to all the webrings to which I belong. This includes webrings in Ringlink, RingSurf, Bravenet and the WebRing.com system as well.

If you are looking to join one of my webrings, this is a good place to start. If you wonder about the webrings I belong to, this is the place to go. Click here or on the graphic.

Last updated:
16:46, Fri, 27.Jun.2008