www.webdeveloper.com
Results 1 to 9 of 9

Thread: help on sliding and tabbed menu

  1. #1
    Join Date
    Mar 2010
    Posts
    14

    help on sliding and tabbed menu

    1)SCROLL DOWN THE DOCUMENT AND LOCATE THE DIV ELEMENTS NAMED mainMenu1 THROUGH mainMenu6. WITHIN EACH DIV ELEMENT, INSERT AN INLINE STYLE SETTING THE Z-INDEX VALUE OF MAINMENU1 TO 6,MAINMENU2 TO 5, MAINMENU3 TO 4, MAINMENU4 TO 3, MAINMENU5 TO 2, MAINMENU6 TO 1

    2)SCROLL DOWN TO THE SUBMENUS OF THE SLIDING MENU, CONTAIN WITHIN DIV ELEMENT NAMED SIDEMENU1 THROUGH SIDEMENU6. FOR EACH OF THESE DIV ELEMENTS, CHANGE THE VALUE TO THE LEFT STYLE FROM 125PX TO 10PX.THIS HAS EFFECT OF MOVING THE SUBMENU BEHIND THE MAIN SIDE MENU

    3)RETURNTHE DOCUMENT HEAD SECTION AND ADD ANOTHER SCRIPT ELEMENT.WITHIN THIS SCRIPT ELEMENT,INSERT THE FOLLOWING COMMANDS: a)CREATE TWO ARRAY; AN ARRAY NAMED IMAGE AND AN ARRAY NAMED IMAGE_OVER. THESE ARRAYS WILL BE USED TO STORE THE IMAGE OBJECTS USED USED IN THE TABBED MENU TITLES.
    b) CREATE A FOR LOOP IN WHICH THE COUNTER VARIABLES RANGE FROM 1 TO 6 IN AN INCREMENTS OF 1. EACH TIME THROUGH THE LOOP, STORE AN IMAGE OBJECT IN THE IMAGE AND IMAGE_OVER ARRAYS. SET THE SOURCE OF THE OBJECT IN THE IMAGE ARRAY TO THE FILE maini.JPG AND THE SOURCE OF THE OBJECT IN THE IMAGE_OVER ARRAY TO THE FILE MAINI_OVER.JPG, WHERE I IS THE VALUE OF THE FOR LOOPS COUNTER VARIABLE. c)CREATE A VARIABLE NAMED MAXZ. THE PURPOSE OF THIS VARIBLE IS TO STORE THE Z-INDEX OF THE CURRENTLY DISPLYED MENU IN THE TABBED MENU SYSTEM.SET THE INITIAL VALUE OF THIS VARIABLE TO 6. d)CREATE A VARIABLENAMED ACTIVEMENU. THE PURPOSE OF THIS VARIABLE IS TO STORE THE SUBMENU CURRENTLY DISPLAYED IN THE SLIDING MENU. SET THE INITIAL VALUE OF THIS TO NULL VARIABLE.

    4)CREATE A FUNCTION NAMED SWAPIN(). THE PURPOSE OF THIS FUNCTION IS TO CREATE A ROLLOVER EFFECT FOR THE MENU TITLES IN THE TABBED MENU. THE FUNCTION HAS A SINGLE PARAMETER NAMED NUM THAT INDICATES THE INDEX NUMBER OF THE INLINE IMAGE AND INLINE OBJECT TO SWAP.USE THE NUM PARAMETER TO SWAP THE SOURCE OF THE INLINE IMAGE IN THE DOCUMENT WITH THE CORRESPONDING SOURCE IN THE IMAGE OBJECT IN THE IMAGE_OVER ARRAY.

    5)CREATE A FUNCTION NAMED SWAPOUT().THE PUPOSE OF THIS FUNCTION IS TO RESTORE THE MENU TITLE IMAGE TO ITS ORIGINAL APPEARANCE. LIKE SWAPIN(),THE FUNCTION HAS A SINGLE PARAMETER NAMED NUM THAT INDICATES THE INDEX NUMBER OF THE INLINE IMAGE AND INLINE OBJECT TO SWAP.USE THE NUM PARAMETER TO SWAP THE SOURCE OF THE INLINE IMAGE WITH THE CORRESPONDING SOURCE IN THE IMAGE ARRAY.

    6)CREATE A FUNCTION NAMED SHOWMAIN().THE PURPOSE OF THIS FUNCTION IS TO MOVE ONE OF THE TABBED MENUS TO THE TOP OF THE STACK.THE FUNCTION HAS A SINGLE PARAMETER,NUM WHICH REPRESENTS THE NUMBER OF MENU TO BE DISPLAYED.ADD THE FOLLOWING COMMANDS TO THE FUNCTION: a)INCREASE THE VALUE OF THE MAXZ VARIABLE BY 1 b)SET THE Z-INDEX VALUE OF THE ELEMENT WITH THE ID mainMenuNum TO THE VALUE OF THE MAXZ VARIABLE,WHERE NUM IS THE VALUE OF THE NUM PARAMETER.(HINT: USE THE GETELEMENTBYID() METHOD TO REFRENCE THE MAIN MAIN MENU ELEMENT.)

    7)CREATE A FUNCTION NAMED HIDEACTIVE().THE PURPOSE OF THIS FUNCTION IS TO HIDE ONE OF THE THE SLIDING SUBMENUS BEHIND THE MAIN SIDE MENU.THERE ARE NO PARAMETER FOR THIS FUNCTION.WITHIN THE FUNCTION,RUN A COMMAND TO CHANGE THE VALUE OF THE LEFT STYLE PROPERTY OF THE ACTIVEMENU OBJECT TO "10PX".

    8)CREATE A FUNCTION NAMED SLIDEMENU().THE PURPOSE OF THIS FUNCTION IS TO SLIDE THE ACTIVE MENU ACROSS THE PAGE UNTIL IT REACHES AN X-COORDINATE OF 126PIXELS. ADD THE FOLLOWING COMMAND TO THIS FUNCTION.
    a)CREATE A VARIABLE NAMED X EQUAL TO THE VALUE RETURNED BY THE XCOORD()
    FUNCTION. b)INSERT AN IF CONDITION THAT TEST WHETHER THE VALUE OF THE X VARIABLE IS LESS THAN 126. IF SO, THEN DO THE FOLLOWING: 1)CALL THE SHIFTMENU() FUNCTION USING THE PARAMETER VALUES 2 AND 0 TO SHIFT THE ACTIVEMENU 2 PIXELS TO THE RIGHT; 2)CALL THE SLIDEMENU() FUNCTION AGAIN AFTER A DELAY OF 10MILLISECONDS.

    9)CREATE A FUNCTION NAMED STARSLIDE(0.THE PURPOSE OF THIS FUNCTION IS TO HIDE THE CURRENTLY DISPLAYED SUBMENU AND THEN TO START SLIDING THE SELETED SUBMENUS OUT FROM BEHIND THE SIDE MENU.THE FUNCTION HAS A SINGLE PARAMETER,NUM, INDICATING THE NUMBER OF THE SUBMENU TO SLIDE. ADD THE FOLLOWING COMMANDS: a)INSERT AN IF CONDITION THAT TEST WHETHER THE VALUE OF THE ACTIVEMENU VARIABLE IS NOT EQUAL TO NULL.IF IT IS NOT EQUAL TO NULL,RUN THE HIDEACTIVE() FUNCTION TO HIDE THE THE CURRENTLY DISPLAYED SUBMENU. b)POINT THE ACTIVEMENU VARIABLE TO THE OBJECT WHOSE REFRENCE IS THE SIDEMENUNUM,WHERE NUM IS THE VALUE OF THE NUM PARAMETER.(HINT: USE THE DOCUMENT.GETELEMENTBYID() METHOD TO REFRENCE THE SIDEMENU OBJECT.) c)CALL THE SLIDEMENU() FUNCTION.

    10)SCROLL DOWN THE DOCUMENT AND LOCATE THE <a> TAG SURROUNDING THE INLINE IMAGE MAIN1.JPG. CHANGE THE HEF ATTRBUTE OF THIS INLINE IMAGE FROM "#" TO A LINK THAT CALLS THE SHOWMAIN() FUNCTION USING 1 AS THE PARAMETER VALUE.

    11)ADD AN MOUSEOVER EVENT HANDLER TO THE MAIN1.JPG INLINE IMAGE TO RUN THE SWAPIN() FUNCTION. USE 1 AS THE PARAMETER VALUE. THEN ADD MOUSEOVER EVENT HANDLER TO THE MAIN1.JPG INLINE IMAGE,RUNNING THE SWAPOUT() FUNCTION.ONCE AGAIN USE THE VALUE OF 1 AS THE PARAMETER VALUE

    12)REPEAT STEPS 10 AND 11 FOR THE MAIN2.JPG THROUGH MAIN6.JPG INLINE IMAGES,SETTING THE VALUES OF THE PARAMETERS IN THE SHOWMAIN(), SWAPIN(),AND SWAPOUT() FUNCTIONS FROM 2 THROUGH 6.

    13)SCROLL DOWN TO THE LINKMAP IMAGE. WITHIN THE HOTSPOT FOR THE FIRST AREA ELEMENT, CHANGE THE HREF ATTRIBUTE FROM "#" TO A LINK THAT CALLS THE STARTSLIDE()FUNCTION USING 1 AS THE PARAMETER VALUE. REPEAT FOR REMAINING 5 HOTSPOT,INCREASING THE VALUE OF THE PARAMETER VALUE FROM 2 THROUGH 6.

    14)ADD AN ONCLICK EVENT HANDLER TO THE MAIN DIV ELEMENT, CALLING THE HIDEACTIVE() FUNCTION.

    15)OPEN PRINTER.HTM IN YOUR WEB BROWSER AND VERIFY THAT THE IMAGE IN THE SIX TABBED MENU TITLE CHANGES IN RESPONSE TO A MOUSE ROLLOVER:CLICKING ONE OF THE SIX TABBED MENU TITLE DISPLAYS THE MENU FOR THAT OPTION; CLICKING ONE OF THE SIX MENU TITLES IN THE SIDE MENU CAUSES THE SUBMENU MENU FOR THAT OPTION TO SLIDE OUT INTO VIEW WHILE HIDING THE PREVIOUSLY DISPLAYED SUBMENU; AND CLICKING THE MAIN SECTION OF THE DOCUMENT HIDES THE ACTIVE SUB MENU.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Show what you have written and where you problem is.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2010
    Posts
    14
    the code is already there for you to see

  4. #4
    Join Date
    Mar 2010
    Posts
    14
    fang i have all the code do you want me to repost it to you

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Post your code in this thread, not a separate thread.
    Give a brief description of the problem, not your complete assignment.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Mar 2010
    Posts
    14
    the sliding menu is the issue

    <html>
    <head>
    <!--

    Filename: printer.htm
    Supporting files: back.jpg, je.css, logo.jpg, main1.jpg - main6.jpg,
    main1_over.jpg - main6_over.jpg, mainmenu1.jpg - mainmenu6.jpg,
    printer.jpg, side1.jpg - side6.jpg, sidemenu.jpg,
    -->
    <title>Jackson Electronics Printers</title>
    <link href="je.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    for (var i=1; i<=6; i++) {
    // set image list
    if (document.images) {
    image = new Array();
    image[1]="main1.jpg"
    image[2]="main2.jpg"
    image[3]="main3.jpg"
    image[4]="main4.jpg"
    image[5]="main5.jpg"
    image[6]="main6.jpg"
    image[1].src="main1.jpg"
    image[2].src="main2.jpg"
    image[3].src="main3.jpg"
    image[4].src="main4.jpg"
    image[5].src="main5.jpg"
    image[6].src="main6.jpg"
    // set imageOver list
    imageOver = new Array();
    imageOver[1]="main1_over.jpg"
    imageOver[2]="main2_over.jpg"
    imageOver[3]="main3_over.jpg"
    imageOver[4]="main4_over.jpg"
    imageOver[5]="main5_over.jpg"
    imageOver[6]="main6_over.jpg"
    imageOver[1].src="main1_over.jpg"
    imageOver[2].src="main2_over.jpg"
    imageOver[3].src="main3_over.jpg"
    imageOver[4].src="main4_over.jpg"
    imageOver[5].src="main5_over.jpg"
    imageOver[6].src="main6_over.jpg"
    image[i] = new Image;
    imageOver[i] = new Image;
    image[i].src="main" + i + ".jpg";
    imageOver[i].src="main" + i + "_over.jpg";
    }
    }
    var maxZ=6;
    var ActiveMenu=null;
    for (var num=1; num<=6; num++) {
    ActiveMenu = document.getElementById("sideMenu"+num);
    function swapIn(num) {
    if (document.images) 'document.images[num]'.src='imageOver[num]'.src;

    }
    function swapOut(num) {
    if (document.images) 'document.images[num]'.src='image[num]'.src;

    }

    function showMain(num) {
    maxZ++;
    document.getElementById("mainMenu"+num).style.zIndex=maxZ;
    }
    function hideit(object) {
    object.style.visibility="hidden";
    }
    function showit(object) {
    object.style.visibility="visible";
    }
    function hideActive(num) {
    if (ActiveMenu !==null) {
    hideIt(ActiveMenu);
    ActiveMenu=null;
    }
    }
    function popMenu(num) {
    hideActive(num);
    ActiveMenu = document.getElementById("mainMenu"+num);
    showIt(ActiveMenu);
    ActiveMenu.style.left="10px";

    }
    function slideMenu() {
    var x=xCoord();
    if (x < 126) {
    shiftMenu(2, 0);
    setTimeout("slideMenu()",10);
    }
    }

    function startSlide(num) {
    if (ActiveMenu !==null) {
    hideActive(ActiveMenu);
    ActiveMenu=null;
    }
    document.getElementById("sideMenu"+num).style.zIndex.maxZ;
    return slideMenu();

    onload = startSlide(num);
    window.onscroll = hideActive(num);
    }
    }
    </script>
    <script type="text/javascript">
    function xCoord() {
    return parseInt('ActiveMenu.style'.left);
    }

    function shiftMenu(dx, dy) {
    xc=parseInt('ActiveMenu.style'.left);
    yc=parseInt('ActiveMenu.style'.top);
    'ActiveMenu.style'.left=xc+dx+"px";
    'ActiveMenu.style'.top=yc+dy+"px";
    }
    </script>

    </head>

    <body>
    <div id="logo" style="z-index: 2"><img src="logo.jpg" alt="" /></div>

    <!-- Tabbed Menu Titles -->
    <div class="mainTitles" id="mainTitle1" style="left: 10px; top: 28px">
    <a href="javascript:showMain('1')">
    <img src="main1.jpg" alt="Computers" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle2" style="left: 104px; top: 28px">
    <a href="javascript:showMain('2')">
    <img src="main2.jpg" alt="Electronics" onmouseover="swapIn(2)" onmouseout="swapOut(2)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle3" style="left: 198px; top: 28px">
    <a href="javascript:showMain('3')">
    <img src="main3.jpg" alt="Accessories" onmouseover="swapIn(3)" onmouseout="swapOut(3)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle4" style="left: 292px; top: 28px">
    <a href="javascript:showMain('4')">
    <img src="main4.jpg" alt="Software" onmouseover="swapIn(4)" onmouseout="swapOut(4)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle5" style="left: 386px; top: 28px">
    <a href="javascript:showMain('5')">
    <img src="main5.jpg" alt="Services" onmouseover="swapIn(5)" onmouseout="swapOut(5)" />
    </a>
    </div>
    <div class="mainTitles" id="mainTitle6" style="left: 480px; top: 28px">
    <a href="javascript:showMain('6')">
    <img src="main6.jpg" alt="Store" onmouseover="swapIn(6)" onmouseout="swapOut(6)" />
    </a>
    </div>


    <!-- Tabbed Menu Contents -->

    </div>
    <div class="mainMenus" id="mainMenu1" style="z-index:-5">
    <img src="mainmenu1.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu2" style="z-index:-3">
    <img src="mainmenu2.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu3" style="z-index:-1">
    <img src="mainmenu3.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu4" style="z-index:1">
    <img src="mainmenu4.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu5" style="z-index:3">
    <img src="mainmenu5.jpg" alt="" />
    </div>
    <div class="mainMenus" id="mainMenu6" style="z-index:5">
    <img src="mainmenu6.jpg" alt="" />
    </div>


    <!-- Sliding Menu Contents -->
    <div id="sideMenu">
    <img src="sidemenu.jpg" alt="" usemap="#linkmap" />
    </div>


    <!-- Submenus of the Sliding Menu -->
    <div id="sideMenu1" class="sideMenus" style="top: 130px; left: 10px">
    <img src="side1.jpg" alt="" />
    </div>
    <div id="sideMenu2" class="sideMenus" style="top: 160px; left: 10px">
    <img src="side2.jpg" alt="" />
    </div>
    <div id="sideMenu3" class="sideMenus" style="top: 190px; left: 10px">
    <img src="side3.jpg" alt="" />
    </div>
    <div id="sideMenu4" class="sideMenus" style="top: 222px; left: 10px">
    <img src="side4.jpg" alt="" />
    </div>
    <div id="sideMenu5" class="sideMenus" style="top: 252px; left: 10px">
    <img src="side5.jpg" alt="" />
    </div>
    <div id="sideMenu6" class="sideMenus" style="top: 282px; left: 10px">
    <img src="side6.jpg" alt="" />
    </div>


    <!-- Sliding Menu Image Map -->
    <map id="linkmap" name="linkmap">
    <area shape="rect" coords="5,40,112,58" href="javascript:startSlide('1')" />
    <area shape="rect" coords="5,70,112,88" href="javascript:startSlide('2')" />
    <area shape="rect" coords="5,100,112,118" href="javascript:startSlide('3')" />
    <area shape="rect" coords="5,130,112,148" href="javascript:startSlide('4')" />
    <area shape="rect" coords="5,160,112,178" href="javascript:startSlide('5')" />
    <area shape="rect" coords="5,190,112,208" href="javascript:startSlide('6')" />
    </map>



    <!-- Page Content -->
    <div id="main" onclick="hideActive()">
    <h1>Printers</h1>
    <img src="printer.jpg" alt="" />
    <p>The best photo prints can now be made ... AT HOME. Introducing the Jackson
    Electronics' <b>Picture Perfect</b> printer. Darkroom quality prints
    without the cost, the mess, or the dark.</p>
    <p>Photo Shopper calls JE's Picture Perfect "<i>the photo printer
    we've been waiting for: high quality prints at an affordable price.</i>"
    Photo Review gives it 5 stars, calling it <i>"the outstanding product
    of the year."</i> As with all of our printers, make sure to choose JE's
    archival quality paper and inks, which are guaranteed not to fade.
    There is no better way to preserve your family memories than with
    JE photo products.</p>
    <p><a href="#">Order</a> the award-winning <b>Picture Perfect</b> printer
    today for the special price of <b>$299.95</b> or choose one of the other many
    fine printer products from Jackson Electronics.</p>
    </div>

    </body>
    </html>

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This appears to be college work using New Perspectives on JavaScript by Patrick Carey
    Are the code examples so full of errors?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Mar 2010
    Posts
    14
    it is my assignment, i wrote the code myself, the tabbed menu is working while the sliding menu is not working

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Nothing works in the script given. Do you have a link to a working example?
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles