#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    uk
    Posts
    4
    Rep Power
    0

    javascript N,E,S,W dynamic navigation


    totally newbie here, this is my first ever script and first time using js - i completely made it up.. and its a bit long...

    this is a script meant to dynamically create north,east,south,west (and diagonal) movement buttons.

    Movement is made around a square map of 64 (8x8) squares.
    Each square is an index.shtml file located in folders name 01-64.

    so u see if you are on square 41, North would be 33, NE 34, E 42... etc etc...

    so the script is meant to (as it is):

    read in dir path

    narrow path to 2 digits (eg 01-64)

    convert to integer (to get rid of '0' prefix on dirs 01-09)

    work out numbers for the 8 directions

    convert back to string and if 1-9 then add back on the '0' prefix

    THEN you have all the ifs to accomodate limits on directions - eg if you in top left corner, you cant go N,NW,NE,W,SW etc..


    PROBLEM:
    it all works fine EXCEPT for 3 locations, with folder numbers 08, 41, 09.

    08 is the top right corner and gives no output at all.

    41 is on the left hand edge and should have 6 possible directions and actually displays correct options BUT a whole extra set of 8 movement directions!!

    09 is one down from top row on left hand edge and gives no output...


    PLEASE HELP!!! i cant find the problem at all!! Also, if you have a better way of doing this function, pls let me know!!
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    uk
    Posts
    4
    Rep Power
    0
    var path = document.location.pathname;
    var dir = path.substring(path.indexOf('/', 1)-2, path.lastIndexOf('/'));

    dirnumber = parseInt(dir);

    {
    n = dirnumber - 8
    ne = dirnumber - 7
    e= dirnumber + 1
    se= dirnumber + 9
    s= dirnumber + 8
    sw= dirnumber + 7
    w= dirnumber - 1
    nw= dirnumber - 9
    }

    var n = n + '';
    var ne = ne + '';
    var e = e + '';
    var se = se + '';
    var s = s + '';
    var sw = sw + '';
    var w = w + '';
    var nw = nw + '';


    if (n<10) n=(0+n);
    if (ne<10) ne=(0+ne);
    if (e<10) e=(0+e);
    if (se<10) se=(0+se);
    if (s<10) s=(0+s);
    if (sw<10) sw=(0+sw);
    if (w<10) w=(0+w);
    if (nw<10) nw=(0+nw);


    // Four corner squares

    if (dirnumber == "1")
    {
    document.write("<IMG SRC=../images/northwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0><BR>");
    document.write("<IMG SRC=../images/westoff.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/southwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + se + "/index.shtml><IMG SRC=../images/southeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A>");
    }

    if (dirnumber == "8")
    {
    document.write("<IMG SRC=../images/northwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/eastoff.gif WIDTH=35 HEIGHT=30 BORDER=0><BR>");
    document.write("<A HREF=../" + sw + "/index.shtml><IMG SRC=../images/southwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><IMG SRC=../images/southeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0>");
    }

    if (dirnumber == "57")
    {
    document.write("<IMG SRC=../images/northwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + ne + "/index.shtml><IMG SRC=../images/northeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/westoff.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/southwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0>");
    }

    if (dirnumber == "64")
    {
    document.write("<A HREF=../" + nw + "/index.shtml><IMG SRC=../images/northwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><IMG SRC=../images/northeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/eastoff.gif WIDTH=35 HEIGHT=30 BORDER=0><BR>");
    document.write("<IMG SRC=../images/southwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0>");
    }

    // Edge Squares

    if ((dirnumber == "2") || (dirnumber == "3") || (dirnumber == "4") || (dirnumber == "5") || (dirnumber == "6") || (dirnumber == "7"))
    {
    document.write("<IMG SRC=../images/northwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/northeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<A HREF=../" + sw + "/index.shtml><IMG SRC=../images/southwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + se + "/index.shtml><IMG SRC=../images/southeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A>");
    }

    if ((dirnumber == "9") || (dirnumber == "17") || (dirnumber == "25") || (dirnumber == "33") || (dirnumber == "41") || (dirnumber == "49"))
    {
    document.write("<IMG SRC=../images/northwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + ne + "/index.shtml><IMG SRC=../images/northeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/westoff.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/southwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + se + "/index.shtml><IMG SRC=../images/southeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A>");
    }

    if ((dirnumber == "16") || (dirnumber == "24") || (dirnumber == "32") || (dirnumber == "40") || (dirnumber == "48") || (dirnumber == "56"))
    {
    document.write("<A HREF=../" + nw + "/index.shtml><IMG SRC=../images/northwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><IMG SRC=../images/northeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><IMG SRC=../images/eastoff.gif WIDTH=35 HEIGHT=30 BORDER=0><BR>");
    document.write("<A HREF=../" + sw + "/index.shtml><IMG SRC=../images/southwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><IMG SRC=../images/southeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0>");
    }

    if ((dirnumber == "58") || (dirnumber == "59") || (dirnumber == "60") || (dirnumber == "61") || (dirnumber == "62") || (dirnumber == "63"))
    {
    document.write("<A HREF=../" + nw + "/index.shtml><IMG SRC=../images/northwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + ne + "/index.shtml><IMG SRC=../images/northeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<IMG SRC=../images/southwestoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southoff.gif WIDTH=30 HEIGHT=36 BORDER=0><IMG SRC=../images/southeastoff.gif WIDTH=35 HEIGHT=36 BORDER=0>");
    }


    // Centre squares with all directions

    if ((dirnumber == "10") || (dirnumber == "11") || (dirnumber == "12") || (dirnumber == "13") || (dirnumber == "14") || (dirnumber == "15") || (dirnumber == "18") || (dirnumber == "19") || (dirnumber == "20") || (dirnumber == "21") || (dirnumber == "22") || (dirnumber == "23") || (dirnumber == "26") || (dirnumber == "27") || (dirnumber == "28") || (dirnumber == "29") || (dirnumber == "30") || (dirnumber == "31") || (dirnumber == "34") || (dirnumber == "35") || (dirnumber == "36") || (dirnumber == "37") || (dirnumber == "38") || (dirnumber == "39") || (dirnumber == "42") || (dirnumber == "41") || (dirnumber == "42") || (dirnumber == "43") || (dirnumber == "44") || (dirnumber == "45") || (dirnumber == "46") || (dirnumber == "47") || (dirnumber == "50") || (dirnumber == "51") || (dirnumber == "52") || (dirnumber == "53") || (dirnumber == "54") || (dirnumber == "55"))
    {
    document.write("<A HREF=../" + nw + "/index.shtml><IMG SRC=../images/northwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + n + "/index.shtml><IMG SRC=../images/north.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + ne + "/index.shtml><IMG SRC=../images/northeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A><BR>");
    document.write("<A HREF=../" + w + "/index.shtml><IMG SRC=../images/west.gif WIDTH=30 HEIGHT=30 BORDER=0><\/A><IMG SRC=../images/plus.gif WIDTH=30 HEIGHT=30 BORDER=0><A HREF=../" + e + "/index.shtml><IMG SRC=../images/east.gif WIDTH=35 HEIGHT=30 BORDER=0><\/A><BR>");
    document.write("<A HREF=../" + sw + "/index.shtml><IMG SRC=../images/southwest.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + s + "/index.shtml><IMG SRC=../images/south.gif WIDTH=30 HEIGHT=36 BORDER=0><\/A><A HREF=../" + se + "/index.shtml><IMG SRC=../images/southeast.gif WIDTH=35 HEIGHT=36 BORDER=0><\/A>");
    }
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    uk
    Posts
    4
    Rep Power
    0
    oops fixed 41, i had it in 2 places!! 8 and 9 still no joy
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    uk
    Posts
    4
    Rep Power
    0
    just fixed it by adding:

    if (dir == 01) dir=1;
    if (dir == 02) dir=2;
    if (dir == 03) dir=3;
    if (dir == 04) dir=4;
    if (dir == 05) dir=5;
    if (dir == 06) dir=6;
    if (dir == 07) dir=7;
    if (dir == 08) dir=8;
    if (dir == 09) dir=9;


    at the beginning... dunno why.
    i only had to add these lines for 08 and 09 for it to work but added the others to be on the safe side.

IMN logo majestic logo threadwatch logo seochat tools logo