Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy I wanted to make a code eaiser to use

    I'm really not sure what I'm doing wrong I'm not sure how to set this up.

    I started out with an object that holds all the vars for the Div tags in the code. then I needed to find out what link was clicked in a table.

    So I tried to have only the links in the table by the name of navi checked with Wile.
    if they were the link that was clicked it then moves the div down when it gets to a number down it stops. when the user moves the mouse away from the div a function is called to undo the movement.

    there are other divs in this table so I was trying to make the code smaller.

    I think I don't understand the this. property that well.
    can some one tell me where the code is set up wrong. I'm sure there is a way to do this.
    Code:
    function siteNavi() {
      this.UpValue = 70;
      this.downValue = 20;
      this.theDoc = document.getElementById('sectab').style;
      this.theDocA = document.getElementById('sectab2').style;
      this.theDocB = document.getElementById('sectab3').style;
      this.theDocC = document.getElementById('sectab4').style;
      this.theDocD = document.getElementById('sectab5').style;
      this.theDocE = document.getElementById('sectab6').style;
      this.theDocF = document.getElementById('sectab7').style;
    }
    
    function filink(e){
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    return false;
    }
    
    
    if (links[i].parentNode.parentNode.parentNode.class==navbase)
    {                   
    switch (e){
       case "links[0]":
    
                      this.theDoc.top=this.UpValue+'px'
    
                      UpValue++;
                      
    				  if (this.UpValue==76)
                      {this.theDoc.display='block'};
                      
    				  if (this.UpValue<90)
                      {setTimeout('show()',10)};
                   
    			   function clap(){
                     setTimeout('redo()',1000);
      
    }
    
                  function redo(){
    
    
                 this.theDoc.top=this.downValue+'px';
                   
    			   this.downValue--;
     
                        if (this.downValue<69)
                         setTimeout('redo()',10); 
    
                       if (this.downValue==1)
                          this.theDoc.display='none'; 
      
    
    }
    
    
    
    break;
    case "links[1]": 
    
    break;
    case "": 
    
    break;
    
    }
    
    } else{}
    The table and Div never mind everything that is in the divs. the function only moves it. the links are in the table
    Code:
    <table class="navbase" align="center"  summary="This table holds the links. 
    You need a browser to that handles java script"   bgcolor=""  cellpadding="2px" cellspacing="12px">
            <tr>
              <td  bgcolor="#B69F01"  ><a href="#" >Click me</a> </td>
            </tr>
            <tr>
              <td bgcolor="#B69F01"> <a href="#" >Click me too</a> </td>
                
            </tr></table>
    
    
     <div id="sectab" onmouseover="" onmouseout=" clap()">
            <ul class="navlinklist" >
                    <li> </li>
                  <li> </li>
                  <li> </li>
                  <li> </li>
            </ul> 
         </div>
          <!--end of sectab-->
    	  <!--sectab2-->
    	  <div id="sectab2" onmouseover="" onmouseout=" clap()">
            <ul class="navlinklist">
                  <li> </li>
                  <li> </li>
                  <li> </li>
                  <li> </li>
                  <li> </li>
            </ul>
         </div>

  • #2
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    look I just need to know if you can use a switch function, the find links object and the links array. to assign functions to links.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I confess I did not understand much of your problem(s). Nor the codes posted are of much help, as they are incomplete (for instance where is the loop which handle links[i] object?).

    Can you isolate your problems/questions, please? What precisely is your final aim?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well I was hoping to

    find out what link was clicked. check to see if it's parent. (td) .parent(tr). parent( table) id is navibase. so I used an if statement.

    if (!document.getElementsByTagName) return false;
    var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
    for (var ty=0; ty < links.length; ty ++)


    inside of the if statement is a switch function. the functions is to loops through all the links in the table called navibase.

    switch (Mlinks[ty]) {
    case " e=Mlinks[0]":


    then asign a function to the link. the problem is the if statement and switch function use the var e that is used in the function to capture the clicked links. I'm not sure how it works but i've seen the code used before and it crossbrowser

    function filink(e){
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    return false;
    }


    Ignore that first function looking code I was trying to write an object and it wasn't working out so well. I'm not even sure i needed an object to do it I was just trying to but various document.getElementById.style. into Vars because I have many other divs that I wanted to do something with later. I can explain what I was trying to do but just want to work out his part first.
    Last edited by riptide; 06-11-2008 at 05:05 PM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,189
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you should not need to loop through them like that.

    the this keyword performs several roles in javascript depending on context.


    a simpler way to make your objects:
    Code:
    function el(s){ return document.getElementById(s).style; }
    
    siteNavi = {	
            UpValue  :  70	,
    	downValue  :  20 ,
    	theDoc  :  el("sectab1"),
    	theDocA  : el("sectab2"),
    	theDocB  : el("sectab3"),
    	theDocC  : el("sectab4"),
    	theDocD  : el("sectab5"),
    	theDocE  : el("sectab6"),
    	theDocF  : el("sectab7")	
    }



    something else i noticed:
    Code:
    if (!document.getElementsByTagName) return false;
    var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
    for (var ty=0; ty < links.length; ty ++) 
    
    might supposed to be:
    if (!document.getElementsByTagName) return false;
    var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
    for (var ty=0; ty < Mlinks.length; ty ++)

    i would also recommend looking into the javascript 1.6 array extras. you can find tiny compatibility libs for all browsers.

    then you can write a simple function, and apply it to an entire array without the usual loop code.
    i would not want to manage a large number of objects without using map and filter :

    Code:
    if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
    Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}return res;};}
    
    if (!Array.prototype.filter) { //from  http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:filter
    Array.prototype.filter = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array;var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {var val = this[i];if (fun.call(thisp, val, i, this)) {res.push(val);}}}return res;};}
    
    if (!Array.prototype.forEach) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:forEach
    Array.prototype.forEach = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {fun.call(thisp, this[i], i, this);}}};}
    Last edited by rnd me; 06-11-2008 at 09:31 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #6
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yeah that is the way I learned to make objects. I was trying to decide how I was going to make it. but anyway I don't know what map and filer are.
    I'll look it up.
    I see the loop mistake I though I should look in to that issue. I'm going to test this with another function because I know my object isn't working yet.

    why do you think I need to use map and filter. I used the switch function because I might decided to extend the table and add more divs
    Last edited by riptide; 06-12-2008 at 01:54 PM.

  • #7
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well I tried it out and replaced switch with if. it still doesn't work

    is the last if statement not right. sould it be just be
    if (targ.Mlinks[0]) or if (targ.Mlinks[0]==true) or if (e==targ.Mlinks[0)

    by the way I read books on Javascript coding and I know the functions and statements but I don't know how to combine them very well. I wasn't able to find many good books. Is there a site I can go to to read stuff about how codes interact.

    That would be great.

    function filink(e){
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    return false;
    }



    if (!document.getElementsByTagName) return false;
    var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
    for (var ty=0; ty < Mlinks.length; ty ++) {


    if (targ.Mlinks[ty]==targ.Mlinks[0]){alert ("The function works")}}


  •  

    Posting Permissions

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