James S. Huggins' Refrigerator Door: Click here to go to my Home Page. WebRing.com system mixing ssnb javascript native html navbars same page
.
The WebRing.com System - - - An interlocking stack of gold rings symbolizes the system - - - This graphic identifies pages of my website about the Webring.com System - - - Original image copyright Jeff McIntosh - - - Licensed through iStockphoto.com
   

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.

This page is part of WebRing.com Help, my extensive reference section about the WebRing.com system. WebRing.com was born 12.Oct.2001 when Yahoo! left the webring business. It was reborn in Oct.2006 when it had a major redesign and began charging for what had been a free service.


What Is the Problem?

. This is the WebRing.com system logo as of Oct.2006. This logo is shown ONLY to illustrate the logo for purposes of this article. The appearance of this logo in this article does not imply any endorsement or affiliation of any kind between this site or the author and the WebRing.com system.
.
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.

.
This is the logo for the Ringlink system. This logo is shown ONLY to illustrate the logo for purposes of this article. The appearance of this logo in this article does not imply any endorsement or affiliation of any kind between this site or the author and the Ringlink system.  

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.

.
This is the logo for the World of Webrings Community. This logo is shown ONLY to illustrate the logo for purposes of this article. The appearance of this logo in this article does not imply any endorsement or affiliation of any kind between this site or the author and the World of Webrings Community.  

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.

.
This is the logo for the RingSurf system. This logo is shown ONLY to illustrate the logo for purposes of this article. The appearance of this logo in this article does not imply any endorsement or affiliation of any kind between this site or the author and the RingSurf system.  

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.

.
James S. Huggins is interviewed and quoted in a new Salon.com article entitled: The Strange Saga of Yahoo and Webring (05.Dec.2001)  

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.com System
see all my pages about the WebRing.com system,
including information about all the pages shown below.

 

WebRing.com System Overview
 
How to Use Your Own Graphics  
 
How to Get Your JavaScript  
 
Invalid Code: ID/U# Mismatch
 
How to Test Your Code  
 
How to Activate Your Forum  
 
How to Unsuspend Your Site  
 
How to Change Thumbs Up/Down  
 
How to Change Your Email Address  
 
How to Change the Category  
 
How to Change Your Registered Page  
 
  Testing Email Addresses
 
How to ensure a Navbar Shows  
 
  Adoption Score Requirements
 
How to Mix JavaScript and HTML  
 
Problems, Questions & Suggestions
 
How to Show the entire Stack
 
One-Click Login
 
How to Customize HTML  
 
Glossary  
 
How to Force a Stack Rebuild  
 
Is "Webring" a Trademark  
 
How to Change Your Stack Order  
 
Webring System Hosts
 
How to Find the "Ring ID"  
 
  Forums and email Lists
 
Why Is My Site Still Pending  
 
  Terms of Service
 
How the JavaScript Works  
 
  The end of Yahoo! WebRing  
 
Mixing JavaScript and HTML
                          
  end of Yahoo! WebRing email  
 
Why I Require SSNB JavaScript
                          
  The end of Yahoo! FAQ  
 
Non-JavaScript Browsers  
 
  Pedro Huggins  
 
How AMS Validation Works  
 
  MSN and YahooGroups Pages  
 
Suspended/Pending  
 
  WebRing.com Logos  
 
Why No Navbars  
 
  Remove Duplicate Navbars  
 
How to Create a Separate Stack  
 
  Unauthorized Access error Message  
 
Single Navbar Option
 
  Ring Does Not exist error Message  
 
Why Not Featured Sites
 
   
     


Want to link to my section on The WebRing.com system?
Want to suggest a link for me to add?
Please read my
Requests and Suggestions for Linking


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 - - - A chainmail web of rings - - - This graphic identifies pages of my website about webrings in general - - - This graphic is by Dylon White. Graphic copyright 2001 by Dylon Whyte of artofchainmail.com and James S. Huggins

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.

Wazillion Navbars Project: Yahoo! WebRing - - - A stack of "ABC" blocks symbolizes stacks of "navbars" - - - This graphic identifies pages of my website about the Wazillion Navbars Project - - - Original image copyright Jeff Allen Johnson - - - Licensed through iStockphoto.com

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 Webrings I Belong To - - - A floating stack of rings - - - This graphic identifies pages of my website showing webrings I own and webrings I belong to - - - Original image copyright Jeff McIntosh - - - Licensed through iStockphoto.com

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.

The extra text menu links (previously here) are being removed in the site redesign.
Browser and search engine improvements have eliminated the motivation/necessity for them.

This page created:
Sun, 26.Jan.2003

Last updated:
16:18, Sat, 10.May.2014

. . .

NOTICE --- SITE  UNDERGOING REWRITE - SEE LINK BELOW FOR DETAILS

 Explanation of the rewrite: New Page Layout.
 Check out my blog: My Ephemerae
 Yes ... I want you to link to my site Please link to me
 Want to email me? I'd love to hear from you.
 I have begun tutoring in the South Houston, Texas area.

. . .
WebRing.com system mixing ssnb javascript native html navbars same page . . . WebRing.com system mixing ssnb javascript native html navbars same page