wdvltalk Roundup July 2002 - Page 27

Staying in the realm of JavaScript, what do you feel is the easiest way to parse URL name-value pairs and then populate a new form with said values? I'm investigating using a search string, placing the name-value pairs in an array and then taking the values and populating the aforementioned form. Is there a more elegant way using JavaScript? I know there are more elegant ways when using the heavy lifting of real programming languages but I need to use URL persistence for this one.

• Below is a JS function I've used to get the parameters from a query string. Stick it in a page and put this in the querystring for the page: "?item1=some%20silly%20string%20of%20stuff&item2=2&item3=3" (Without the quotes)

  <script language="JavaScript" type="text/javascript">
  function getQueryString() {
    var args = new Object();
    // Get Query String
    var query = location.search.substring(1);
    // Split query at the comma
    var pairs = query.split("&");
    
    var counter = 0;
    
    // Begin loop through the querystring
    for(var i = 0; i < pairs.length; i++) {
  
      // Look for "name=value"
      var pos = pairs[i].indexOf('=');
  
      // if not found, skip to next
      if (pos == -1) continue;
  
      // Extract the name
      var argname = pairs[i].substring(0,pos);
      
      // Extract the value
      var value = pairs[i].substring(pos+1); 
  
      // Store as a property
      if (!args[argname]) {
        args[argname] = unescape(value);
      }
      else {
        args[argname] += ("&" + argname + "=" + unescape(value));
      }
    }
    
    return args; // Return the Object
  }
  
  var oQS = getQueryString();
  
  // Now, we can access the items:
  alert("oQS.item1 = " + oQS.item1);
  alert("oQS.item2 = " + oQS.item2);
  alert("oQS.item3 = " + oQS.item3);
  
  alert("oQS['item1'] = " + oQS['item1']);
  alert("oQS['item2'] = " + oQS['item2']);
  alert("oQS['item3'] = " + oQS['item3']);
  
  </script>
  

In my page using css, I'm trying to avoid the horizontal scrolling that appears when I specify the overflow: scroll in my css.

• Try using overflow:auto. This will produce a scroll bar only where needed, rather than forcing vertical and horizontal scroll bars as overflow:scroll does.

I am in a need of a search engine will search through the static pages of a website and give out results depending on the matching words.

• Check out www.atomz.com

Cool CSS Tips and Tricks

• colored scroll bar effect

  html { 	scrollbar-face-color: #808080;
            scrollbar-arrow-color: #ffff00;
            scrollbar-base-color: #808080;
            scrollbar-shadow-color: #00009d; 
            scrollbar-highlight-color: #c0c0c0; 
            scrollbar-3d-light-color: #00009d;
  	}
  
  
  

• Colored form button

  <form action="/cgi-bin/something" method="post">
    Enter your name: <input name="visitorName" />
    <br />
    <input type="submit" value="Submit" style="color: #FF0000;
  background-color: #0000FF;" />
  </form>
  

  Enter your name:
  
• colored form fields

  input.blue 
    {background-color: #B7DBFF; 
     font-weight: regular; 
     font-size: 14px; 
     color: black;}
  
  textarea.blue 
    {background-color: #B7DBFF; 
     font-weight: regular; 
     font-size: 14px; 
     color: black;}
  
  select.blue
    {background-color: #B7DBFF;
     font-weight: regular;  
     font-size: 14px; color: black;}  
  
  option.blue 
    {background-color: #B7DBFF; 
     font-weight: regular; 
     font-size: 14px; 
     color: black;}
  
  

• Just remember that it doesn't work in NN 4.x.

wdvltalk Roundup July 2002 - Page 26
wdvltalk Roundup
wdvlTalk Roundup August 2002 - Page 28