SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Newcastle, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post help with oo javascript

    I got this neat script from http://javascript.internet.com and i want to make a few changes to it but can't figure out the OOP bit.

    A BACK option appears at the start of each list if there is a parent menu to go back to. I want to remove the BACK option and instead have a button/graphic next to the dropdown that will do the same thing.

    Also how do i get access to values for each option so that, once selected, i can use them in form submissions to a php script?

    Also is there a way to set the default header for each category to be the name of that category?

    Any quick pointers or tutorials would be extremely useful!

    PHP Code:
    function DURPM(text,value,parent){
    this.parent parent;
    this.children = new Array();
    this.text text;
    this.value value;
    this.header "Select an option:"// default category header
    this.target "_self"// default
    this.winArgs ""// default
    this.stat false// default

    this.addChild addChild;
    this.relate relate;
    this.loadSelection loadSelection;
    this.back back;
    this.jmp jmp;
    this.isStatic isStatic;
    this.redir redir;
    this.write write;

    if(
    typeof(parent)=="undefined"){
        
    this.parent null;
        
    DURPMArray.current DURPMArray[this.value] = this;
    }

    function 
    addChild(textvalue){
        return (
    this.children[this.children.length] = new DURPM(textvaluethis));
    }

    function 
    relate(menu){
        var 
    index menu.selectedIndex 1// remove header
        
    if(this.parent!=null)
            
    index--;
        if(
    index==-&& this.parent!=null)
            
    this.back(menu);
        else if(
    index > -1)
            if(
    this.children[index].children.length 0)
            
    this.children[index].loadSelection(menu);
        else
        
    this.jmp(index);
    }

    function 
    loadSelection(menu){
        if(
    menu==null){
            
    menu document.forms[this.text][this.value];
            
    menu.durpm this;
        }
        for(var 
    menu.options.length0i--) menu.options[i-1] = null;
        
        
    menu.options[0] = new Option(this.headernulltruetrue);
        if(
    this.parent!=nullmenu.options[1] = new Option("BACK"null);
        
    offset menu.options.length;
        for(var 
    0this.children.lengthi++) menu.options[i+offset] = new Option(this.children[i].text
        
    this.children[i].text);
        
    menu.durpm this;
    }

    function 
    back(menu){
        
    this.parent.loadSelection(menu);
    }

    function 
    jmp(index){
    if(!((
    this.parent!=null)?this.parent.isStatic():this.stat))
    alert("You would have been taken to : " this.children[index].value " but this is just a demo!");
    // this.redir(this.children[index].value); // redirect for navigation, not used if menu is static
    }
    function 
    isStatic(){
    return (
    this.parent!=null)?this.parent.isStatic():this.stat;
    }

    function 
    redir(page){
    if(
    this.parent!=null)
    this.parent.redir(page);
    else if(
    page!=null){
    if(
    this.winArgs.length == 0)
    win window.open(pagethis.target);
    else
    win window.open(pagethis.targetthis.winArgs);
    if(
    typeof(focus)!="undefined")
    win.focus();
    }
    }
    function 
    write(colsrowssize){
    document.writeln("<select class=\"menu\" name=\""+this.value+"\" size=\""+size+"\" onChange=\"this.durpm.relate(this);\">");
    for(var 
    0rows-1i++)
    document.writeln("<option> </option>");
    document.write("<option>");
    for(var 
    0colsi++)
    document.write("=");
    document.writeln("</option>");
    document.writeln("</select>");
    }
    }
    function 
    main(){
    for(var 
    durpm in DURPMArray)
        if(
    typeof(DURPMArray[durpm])=="object")
        
    DURPMArray[durpm].loadSelection(null);
    }
    function 
    addCat(text){
    DURPMArray.current DURPMArray.current.addChild(text);
    }
    function 
    endCat(){
    if(
    DURPMArray.current.parent!=null)
    DURPMArray.current DURPMArray.current.parent;
    }
    function 
    addItem(textvalue){
    DURPMArray.current.addChild(textvalue);
    }
    function 
    addHeader(text){
    DURPMArray.current.header text;
    }
    function 
    setWindowArgs(args){
    DURPMArray.current.winArgs args;
    }
    function 
    setTarget(target){
    DURPMArray.current.target target;
    }
    function 
    setStatic(){
    DURPMArray.current.stat true;
    }

    // v, tests if the script will run (much like if(document.images).
    // if !v, then you can add optional code.
    var = (typeof(Option)!="undefined");
    // constructs the master array, do not modify, this is used internally.
    var DURPMArray = new Array();

    if(
    v){ // "if the menu will work"

    // First argument is the name or index of the FORM in which
    // the SELECT menu will reside. The second is the name for
    // the actual SELECT object (for data retrieval purposes).
    // This begins the construction of the first menu
    new DURPM("form1","foo");
      
    // setTarget, well, sets the target for the redirect
      // defaults to "_self"
      
    setTarget("_blank");
      
    // setWindowArgs accepts the argument string passed to window.open
      // this is the format of the window that the menu redirects to.
      // defaults to the empty string. The new window will inherit the
      // the style of the current window. Ignore for use with frames.
      
    setWindowArgs("width=300,height=200");
      
    // each new menu object has a header.
      // defaults to "Please make a selection:"
      
    addHeader("Please select a category:");
      
    // addCat means that when this option is selected, it will load sub
      // options. The sub options immediately follow until endCat is called.
      
    addCat("Residential");
        
    // As before, each new menu has a header.
        
    addHeader("Residential");
        
    addCat("Selected Works");
          
    addHeader("Selected Works");
          
    // addItem means that when this option is selected, no menu is
          // loaded. If the SELECT redirects, the it does so now.
          // If redirecting, first param is the text, the second is the location.
          
    addItem("Mast House Terrace","process.html?page=/3d/glossary/");
          
    addItem("North Haven","process.html?page=/3d/lesson56/");
          
    addItem("Romford Brewery Housing","process.html?page=/3d/lesson57/");
        
        
    // end cat means that this list of sub options is complete.
        // the following cats/items are added the menu before.
        
    endCat();
        
    addCat("Urban Regeneration");
          
    addHeader("Please choose a project:");
          
    addItem("Cannon Cinema Site","process.html?page=/dlab/about.html");
          
    addItem("Clayton Street West","process.html?page=/dlab/books/");
          
    addItem("Farmers Point","process.html?page=/dlab/dessert.html");
          
    addItem("Gallowgate","process.html?page=/dlab/peoplesay.html");
          
    addItem("Leazes Square","process.html?page=/dlab/about.html");
          
    addItem("Main Gate","process.html?page=/dlab/books/");
          
    addItem("North Haven","process.html?page=/dlab/dessert.html");
          
    addItem("Romford Brewery Housing","process.html?page=/dlab/peoplesay.html");
        
    endCat();
        
    addCat("Sheltered Housing");
          
    addHeader("Please choose a project:");
          
    addItem("Anfield Court","process.html?page=/dhtml/dynomat/");
          
    addItem("Chelsea Court","process.html?page=/dhtml/diner/");
          
    addItem("Mast House Terrace","process.html?page=/dhtml/hiermenus/");
        
    endCat();
        
    addCat("Restoration");
          
    addHeader("Please choose a project:");
          
    addItem("Clayton Street West","process.html?page=/ecommerce/mm/about.html");
        
    endCat();
        
    addCat("Conversion");
          
    addHeader("Please choose a project:");
          
    addItem("Chelsea Court","process.html?page=/graphics/bio.html");
          
    addItem("Romford Brewery","process.html?page=/graphics/column1/");
          
    addItem("Stannington Hospital","process.html?page=/graphics/column2/");
        
    endCat();
        
    addCat("Student Residence");
          
    addHeader("Please choose a project:");
          
    addItem("Gallowgate : Phase 3","process.html?page=/html/about/");
        
    endCat();
        
    addCat("Other");
          
    addHeader("Please choose a project:");
          
    addItem("Blandford Camp","process.html?page=/js/about.html");
        
    endCat();
      
    endCat();
      
      
    addCat("Commercial");
        
    addHeader("Commercial");
        
    addCat("Selected Works");
          
    addHeader("Please choose a project:");
          
    addItem("NETC","process.html?page=/authoring/collections.html");
          
    addItem("Northern Rock Campus","process.html?page=/authoring/design/");
          
    addItem("One NorthEast","process.html?page=/authoring/faqs.html");
        
    endCat();
        
    addCat("Urban Regeneration");
          
    addHeader("Please choose a project:");
          
    addItem("Bottle Bank Offices","process.html?page=/internet/collections.html");
          
    addItem("Boulevard Plaza","process.html?page=/internet/conferences.html");
          
    addItem("NEMI","process.html?page=/internet/discussion.html");
        
    endCat();
        
    addCat("R & D");
          
    addHeader("Please choose a project:");
          
    addItem("AERIUS","process.html?page=/internet/collections.html");
          
    addItem("NEMI","process.html?page=/internet/conferences.html");
          
    addItem("Kvaerner","process.html?page=/internet/discussion.html");
        
    endCat();
      
    endCat();
    // This ends the construction of the first menu

    // if(v)
    // End --> 
    WINDOWS XP
    IE 6
    1280x1024
    BROADBAND

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you

    1) provide a link to the specific page on internet.com
    2) provide a link to a working example of this code


    ??
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Newcastle, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the url for the actual script.
    There is an error on the page that is caused by lines wrapping in the wrong place on the code. If you copy it and remove the 5 or so incorrect line wraps then it works fine.
    http://javascript.internet.com/navig...ble-menus.html

    I have got part of it working now using a new custom function i created called
    BackUp()

    PHP Code:
     function backUp(menu){
     if(
    menu==null){
      
    menu document.forms[this.text][this.value];
      
    menu.durpm this;
     }
     if(
    this.parent!=nullthis.parent.loadSelection(menu);
     else return 
    false;

    I just cut and paste bits that i thought i needed and suprisingly it works.
    I also had to add this new function to the constructor (function DURPM)
    PHP Code:
    this.backUp backUp
    And used this code in the body to create the back-up button:
    PHP Code:
     <a href="#" onClick="return window.document.form1.foo.durpm.backUp(window.document.form1.foo);return false;"><img src="images/back_up.gif" width="15" height="13" border="0" name="back"></a
    Is this okay or could it be programmed better?

    I also wanted to change the image to an 'off' state when there was no parent menu using this code in the loadSelection() function:
    PHP Code:
     if(this.parent!=null){
      
    menu.options[1] = new Option("BACK"null);
      
    document.images["back"].src "images/back_up.gif";
     } else {
      
    // swap image of back button to faded image
      
    document.images["back"].src "images/back_up_off.gif";
     } 
    instead of:
    PHP Code:
     if(this.parent!=null)
    menu.options[1] = new Option("BACK"null); 
    but i'd rather that the 'off' state wasn't a link at all (ie the cursor didn't change to a hand on mouse-over)

    Any ideas?
    WINDOWS XP
    IE 6
    1280x1024
    BROADBAND


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •