Help - Search - Members - Calendar
Full Version: Keep menu items fixed while the sub menu scrolls...
HTMLHelp Forums > Programming > Client-side Scripting
Black_Lightning
Nov 14 2019, 02:44 AM
Greetings, being a beginner I've been playing with this one feature I'm having difficulty with. You see I have a menu which sub menus have a lot of links so I have been (with JavaScript/jQuery) setting up the sub menus to hide the overflow but then to scroll when the user hovers over the scroll up or down buttons. In the long run I think it would make the site less cluttered. I am nearly there it scrolls, I can open and hide the sub menus via JavaScript. the only issue I'm having is that for some reason, upon scrolling the parent category button is scrolling with the sub menu. To make it work I need it to stay fixed. This is the source code I have so far. Be mindful though, it won't work unless the linked jQuery link is updated (hopefully I'm not expected to post the jQuery file too I got it from the jquery site. Anyhow if someone wouldn't mind taking a peek at the code to see why the parent buttons are scrolling too it would really be appreciated. Thanks.

CODE
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // Script for scroll
$(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});
function scrollContent(direction) {
    var amount = (direction === "up" ? "-=3px" : "+=3px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

    });  
  //script for sub menu show and hide
    $(function(){
$(function () {
    $(".MenuFunctions").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".MenuFunctions")) {
            $(".MenuFunctions", this).toggle();
        }
    });
});

    });

  //]]>
  </script>


<style>
#content {
    height:200px;
    overflow:hidden;
}
</style>
</head>

<body>
<div id="LeftContent">
  <div id="wrapper">
    <div align="left"><a class="NavButtons" id="scrollUp" href="#">Scroll Up</a>
      <div id="content">
        <ul>
          <li class="parent"> <a href="#">Category One</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              <li class='MenuButton'><a href="#">Item4</a></li>
              <li class='MenuButton'><a href="#">Item5</a></li>
              <li class='MenuButton'><a href="#">Item6</a></li>
              <li class='MenuButton'><a href="#">Item7</a></li>
              <li class='MenuButton'><a href="#">Item8</a></li>
              <li class='MenuButton'><a href="#">Item9</a></li>
              <li class='MenuButton'><a href="#">Item10</a></li>
              <li class='MenuButton'><a href="#">Item11</a></li>
              <li class='MenuButton'><a href="#">Item12</a></li>
              <li class='MenuButton'><a href="#">Item13</a></li>
              <li class='MenuButton'><a href="#">Item14</a></li>
              <li class='MenuButton'><a href="#">Item15</a></li>
              <li class='MenuButton'><a href="#">Item16</a></li>
              <li class='MenuButton'><a href="#">Item17</a></li>
              <li class='MenuButton'><a href="#">Item18</a></li>
              <li class='MenuButton'><a href="#">Item19</a></li>
              <li class='MenuButton'><a href="#">Item20</a></li>
              <li class='MenuButton'><a href="#">Item21</a></li>
              <li class='MenuButton'><a href="#">Item22</a></li>
              <li class='MenuButton'><a href="#">Item23</a></li>
              <li class='MenuButton'><a href="#">Item24</a></li>
              <li class='MenuButton'><a href="#">Item25</a></li>
              <li class='MenuButton'><a href="#">Item26</a></li>
              <li class='MenuButton'><a href="#">Item27</a></li>
              <li class='MenuButton'><a href="#">Item28</a></li>
              <li class='MenuButton'><a href="#">Item29</a></li>
              <li class='MenuButton'><a href="#">Item30</a></li>
              <li class='MenuButton'><a href="#">Item31</a></li>
              <li class='MenuButton'><a href="#">Item32</a></li>
              <li class='MenuButton'><a href="#">Item33</a></li>
              <li class='MenuButton'><a href="#">Item34</a></li>
              <li class='MenuButton'><a href="#">Item35</a></li>
              <li class='MenuButton'><a href="#">Item36</a></li>
              <li class='MenuButton'><a href="#">Item37</a></li>
              <li class='MenuButton'><a href="#">Item38</a></li>
              <li class='MenuButton'><a href="#">Item39</a></li>
              <li class='MenuButton'><a href="#">Item40</a></li>
              <li class='MenuButton'><a href="#">Item41</a></li>
              <li class='MenuButton'><a href="#">Item42</a></li>
              <li class='MenuButton'><a href="#">Item43</a></li>
              <li class='MenuButton'><a href="#">Item44</a></li>
              <li class='MenuButton'><a href="#">Item45</a></li>
              <li class='MenuButton'><a href="#">Item46</a></li>
              <li class='MenuButton'><a href="#">Item47</a></li>
              <li class='MenuButton'><a href="#">Item48</a></li>
              <li class='MenuButton'><a href="#">Item49</a></li>
              <li class='MenuButton'><a href="#">Item50</a></li>
            </ul>
          </li>
          <li class="parent"> <a href="#">Category Two</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              <li class='MenuButton'><a href="#">Item4</a></li>
              <li class='MenuButton'><a href="#">Item5</a></li>
              <li class='MenuButton'><a href="#">Item6</a></li>
              <li class='MenuButton'><a href="#">Item7</a></li>
              <li class='MenuButton'><a href="#">Item8</a></li>
              <li class='MenuButton'><a href="#">Item9</a></li>
              <li class='MenuButton'><a href="#">Item10</a></li>
              <li class='MenuButton'><a href="#">Item11</a></li>
              <li class='MenuButton'><a href="#">Item12</a></li>
              <li class='MenuButton'><a href="#">Item13</a></li>
              <li class='MenuButton'><a href="#">Item14</a></li>
              <li class='MenuButton'><a href="#">Item15</a></li>
              <li class='MenuButton'><a href="#">Item16</a></li>
              <li class='MenuButton'><a href="#">Item17</a></li>
              <li class='MenuButton'><a href="#">Item18</a></li>
              <li class='MenuButton'><a href="#">Item19</a></li>
              <li class='MenuButton'><a href="#">Item20</a></li>
              <li class='MenuButton'><a href="#">Item21</a></li>
              <li class='MenuButton'><a href="#">Item22</a></li>
              <li class='MenuButton'><a href="#">Item23</a></li>
              <li class='MenuButton'><a href="#">Item24</a></li>
              <li class='MenuButton'><a href="#">Item25</a></li>
              <li class='MenuButton'><a href="#">Item26</a></li>
              <li class='MenuButton'><a href="#">Item27</a></li>
              <li class='MenuButton'><a href="#">Item28</a></li>
              <li class='MenuButton'><a href="#">Item29</a></li>
              <li class='MenuButton'><a href="#">Item30</a></li>
              <li class='MenuButton'><a href="#">Item31</a></li>
              <li class='MenuButton'><a href="#">Item32</a></li>
              <li class='MenuButton'><a href="#">Item33</a></li>
              <li class='MenuButton'><a href="#">Item34</a></li>
              <li class='MenuButton'><a href="#">Item35</a></li>
              <li class='MenuButton'><a href="#">Item36</a></li>
              <li class='MenuButton'><a href="#">Item37</a></li>
              <li class='MenuButton'><a href="#">Item38</a></li>
              <li class='MenuButton'><a href="#">Item39</a></li>
              <li class='MenuButton'><a href="#">Item40</a></li>
              <li class='MenuButton'><a href="#">Item41</a></li>
              <li class='MenuButton'><a href="#">Item42</a></li>
              <li class='MenuButton'><a href="#">Item43</a></li>
              <li class='MenuButton'><a href="#">Item44</a></li>
              <li class='MenuButton'><a href="#">Item45</a></li>
              <li class='MenuButton'><a href="#">Item46</a></li>
              <li class='MenuButton'><a href="#">Item47</a></li>
              <li class='MenuButton'><a href="#">Item48</a></li>
              <li class='MenuButton'><a href="#">Item49</a></li>
              <li class='MenuButton'><a href="#">Item50</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <a class="NavButtons" id="scrollDown" href="#">Scroll Down</a> </div>
  </div>
</div>
</div>
</body>
</html>
pandy
Nov 14 2019, 03:31 AM
As far as I understand you scroll the DIV #content which would include the Category line. shouldn't you rather scroll the UL .MenuFunctions? unsure.gif


CODE
<div id="content">
        <ul>
          <li class="parent"> <a href="#">Category One</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              ...
Black_Lightning
Nov 14 2019, 01:55 PM
QUOTE(pandy @ Nov 14 2019, 03:31 AM) *

As far as I understand you scroll the DIV #content which would include the Category line. shouldn't you rather scroll the UL .MenuFunctions? unsure.gif


CODE
<div id="content">
        <ul>
          <li class="parent"> <a href="#">Category One</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              ...



You're right that is the intention to target the "MenuFunctions" I just found when I tried to change the javascript from #content to .MenuFunctions I broke it unless I declared it wrong or something. I'm certainly not the most skilled coder out there. This is how I declared it in the java script:
CODE
<script type="text/javascript">
    // Script for scroll
$(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    $(".MenuFunctions").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $(".MenuFunctions").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});
function scrollContent(direction) {
    var amount = (direction === "up" ? "-=3px" : "+=3px");
    $(".MenuFunctions").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

    });  
  //script for sub menu show and hide
    $(function(){
$(function () {
    $(".MenuFunctions").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".MenuFunctions")) {
            $(".MenuFunctions", this).toggle();
        }
    });
});

    });

  //]]>


It is certainly a maddening problem for me as the solution should be so obvious yet I have not the wits to see it. Thanks for looking at it. Sometimes fresh eyes always help. unsure.gif wacko.gif sad.gif
pandy
Nov 15 2019, 03:19 AM
Yeah. I tried to add an id to just one of the menu sets and use that in the script. Nothing happened. But the script is a little above me, so maybe I did it wrong. I just changed #content to my id.
Black_Lightning
Nov 15 2019, 07:11 PM
QUOTE(pandy @ Nov 15 2019, 03:19 AM) *

Yeah. I tried to add an id to just one of the menu sets and use that in the script. Nothing happened. But the script is a little above me, so maybe I did it wrong. I just changed #content to my id.



Again I appreciate the help. That is sort of my issue too. All my code I get from following along those on tutorial sites/videos. Though I am starting to understand bits and pieces I have yet to truly grasp JavaScript enough to isolate the issue. To me just getting something to work warrants a victory dance so I'm choreographing my moves and perhaps one day soon... I have been trying to replace an id here or there or my favorite, rearrange the up and down links so they're outside the targeted div since I'm more familiar with HTML again, nothing. I thought maybe have the sub menu open, somehow into an empty div which the scroll buttons can then target the div but that too requires JavaScript which, again, is above my skill level. If I could find a similar situation with a tutorial made there maybe a fighting chance but until then, alas I'm afraid I must muddle along getting nowhere fast. I think, though, that maybe when declaring a class or an id is, perhaps, declared differently than in CSS though I could be wrong. I'm just grasping at straws here.

I have just been Googling the uses of a class in JavaScript and from what I've been understanding from my limited knowledge is that declaring a class isn't straight forward as using an id as there is global classes and local classes (which sounds vaguely familiar from a flash course I took way back in college though I don't recall the specifics.) Anyhow from what I interpret from the situation, because of JavaScript being notoriously bad for confusing class parameters the desired class has to be bound to a function or variable something of the sort so "var X= MyClass(this).bind". Yes I know I must look so thick with misused syntax and not the foggiest notion what I'm talking about. Anyways once the class is bound to a variable... or function whatever it needs to be bound to then, in the code, it just has to be called so instead of #content use MyVariable instead... if only I kept all my old college notes. I do remember a local variable is only used in the function it was declared whereas global variables can be used throughout all functions once declared... sorry thinking aloud here. Yes, alas, as it is coming back to me I remember one thing, classes are way more complicated to deal with.
pandy
Nov 16 2019, 03:31 AM
I don't know enough JS for this. And even less about jQuery. Christian, can you solve this?
Christian J
Nov 16 2019, 05:56 AM
QUOTE(Black_Lightning @ Nov 16 2019, 01:11 AM) *

I have just been Googling the uses of a class in JavaScript and from what I've been understanding from my limited knowledge is that declaring a class isn't straight forward as using an id as there is global classes and local classes

Maybe you are confusing javascript classes with the CLASS HTML attribute/CSS selector? It's probably the latter you want to use.

Black_Lightning
Nov 16 2019, 07:44 PM
QUOTE(pandy @ Nov 16 2019, 03:31 AM) *

I don't know enough JS for this. And even less about jQuery. Christian, can you solve this?



QUOTE(Christian J @ Nov 16 2019, 05:56 AM) *

QUOTE(Black_Lightning @ Nov 16 2019, 01:11 AM) *

I have just been Googling the uses of a class in JavaScript and from what I've been understanding from my limited knowledge is that declaring a class isn't straight forward as using an id as there is global classes and local classes

Maybe you are confusing javascript classes with the CLASS HTML attribute/CSS selector? It's probably the latter you want to use.


Hmm it seems my issue is starting to stump many. Christian, I know many scripting languages declare (and use) classes differently. I am quite used to the css way of doing so. My issue lies with how JavaScript utilizes the class element. What pandy first said that I should be targeting the ul class "MenuFunctions" is likely the solution needed to rectify the parent buttons scrolling too. What my issue is (assuming that would solve the issue) is how to declare for JavaScript to target the "MenuFunctions" class rather than the "#content" id which I (and by the sounds of things pandy as well) suspect is the culprit for the scrolling parent buttons. Such is beyond my understanding which is what drove me to the forums in need of some assistance in the first place, which I thank you both very kindly for offering.
CharlesEF
Nov 16 2019, 08:36 PM
Why not read the jQuery documentation? Here is a link to the jQuery Selectors page. Seems to me you might need this 'Attribute Contains Prefix Selector [name|=”value”]'.
Black_Lightning
Nov 17 2019, 02:15 AM
QUOTE(CharlesEF @ Nov 16 2019, 08:36 PM) *

Why not read the jQuery documentation? Here is a link to the jQuery Selectors page. Seems to me you might need this 'Attribute Contains Prefix Selector [name|=”value”]'.



Great suggestion CharlesEE though I still can't get it to work (now it doesn't scroll at all). I might have declared it wrong though with my limited coding skills:
CODE

<script type="text/javascript">
    // Script for scroll
$(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    $[name|="MenuFunctions"].animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $[name|="MenuFunctions"].animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    $(".parent").scrolling = false;
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});
function scrollContent(direction) {
    var amount = (direction === "up" ? "-=3px" : "+=3px");
    $[name|="MenuFunctions"].animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

    });  
  //script for sub menu show and hide
    $(function(){
$(function () {
    $(".MenuFunctions").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".MenuFunctions")) {
            $(".MenuFunctions", this).toggle();
        }
    });
});

    });

  //]]>
  </script>

CharlesEF
Nov 17 2019, 05:25 PM
I don't do jQuery, that's why I never jumped in. But this seems wrong: '[name|="MenuFunctions"]'. I think it should be '[class|="MenuFunctions"]' since it is the class attribute that uses MenuFunctions.
Black_Lightning
Nov 17 2019, 07:23 PM
QUOTE(CharlesEF @ Nov 17 2019, 05:25 PM) *

I don't do jQuery, that's why I never jumped in. But this seems wrong: '[name|="MenuFunctions"]'. I think it should be '[class|="MenuFunctions"]' since it is the class attribute that uses MenuFunctions.


Thanks CharlesEE... unfortunately I don't do JQuery either and there in lies the problem. I did try your suggestion so it appears like '[class|="MenuFunctions"]' now when you load the page it opens with category one sub menu in open position with no scrolling functionality (or showing or hiding the sub menu either for that matter). I have included a screenshot below of exactly the way it looks upon loading. I should praise you for having the bravery to step up to the plate when it isn't your area of expertise. For something I thought to be a simple typo style fix it is turning into one maddening issue. blink.gif

IPB Image
pandy
Nov 18 2019, 03:46 AM
What in the original script catches which category is clicked? Expanded by the user?

I don't understand the script, but I think ID would be easier than class. With class you must distinguish between the two sets in the script.

With normal JS the logic would go something like this.

* Catch which category is clicked
* Show the list in that category
* Make that list scroll when the scroll links are clicked

So it would involve some conditional when the Scroll Up and Down links are clicked ( (either ID is used or not). "IF category A is clicked, then scroll list A. ELSE scroll list B".

I can't follow your script enough to see where this happens.

BTW I copied your original code again and now it doesn't work. It did yesterday. Go figure. unsure.gif
Black_Lightning
Nov 18 2019, 07:14 PM
QUOTE(pandy @ Nov 18 2019, 03:46 AM) *

What in the original script catches which category is clicked? Expanded by the user?

I don't understand the script, but I think ID would be easier than class. With class you must distinguish between the two sets in the script.

With normal JS the logic would go something like this.

* Catch which category is clicked
* Show the list in that category
* Make that list scroll when the scroll links are clicked

So it would involve some conditional when the Scroll Up and Down links are clicked ( (either ID is used or not). "IF category A is clicked, then scroll list A. ELSE scroll list B".

I can't follow your script enough to see where this happens.

BTW I copied your original code again and now it doesn't work. It did yesterday. Go figure. unsure.gif



I'm sorry it didn't work for you. The only time it didn't work for me is when I didn't properly link the j Query file. It needs a j Query one to function. Aside from that I don't know what could have caused it to fail. When I scripted the java script portion of the code I was following along with a tutorial so I myself don't entirely know the ins and outs of it. Regardless I will do my best to answer your query. As far as my current script is concerned it doesn't care what one is visible it just scrolls all that's in the content div when either the up or down is clicked (which is why the parent button scrolls too seeing as it is in the content div as well. I assure you if there was a way it would be scrolling the other hidden sub menu as well the only reason when the second category is opened it too starts at the top is because to close the first category it has to be scrolled to the top to find and collapse the parent button. When tested you can actually have both sub menus open simultaneously (it just adds to the list of sub menus) believe or not because of the way I intended to utilize the script I sort of like that feature seeing as how, though it is divided into categories, each is quite related to one another in terms of topic. Regardless, your logic and approach to the issue greatly surpasses my limited knowledge. It certainly would be far more elegant. As far as coding language is concerned I don't have a preference as to what one is utilized so long as it is clean and works. I only went with j Query because it was the only one which had a tutorial that somewhat fit my needs. I do love the way it scrolls I will admit my issue, of course, is targeting the right menu. Now I don't want to promise anything but I will TRY to code it your way and go from there.
Black_Lightning
Nov 18 2019, 07:54 PM
QUOTE(pandy @ Nov 18 2019, 03:46 AM) *

What in the original script catches which category is clicked? Expanded by the user?

I don't understand the script, but I think ID would be easier than class. With class you must distinguish between the two sets in the script.

With normal JS the logic would go something like this.

* Catch which category is clicked
* Show the list in that category
* Make that list scroll when the scroll links are clicked

So it would involve some conditional when the Scroll Up and Down links are clicked ( (either ID is used or not). "IF category A is clicked, then scroll list A. ELSE scroll list B".

I can't follow your script enough to see where this happens.



Okay pandy assuming I understood you right I've implemented a code that listens for an event click and based on the button clicked to do something but I have no clue if it is cross browser compatible and furthermore how I would go about creating an identical scrolling effect as what was scripted in my original j Query.

I thank you all again for helping I really do try and hate when I can't figure out how to do something.

CODE
   document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

        if (evt.type=="click" && elem.id == "CategoryOne" || elem.className == "parent") {  
            alert(elem.id);
//obviously this is where the scrolling would go as well if possible to show and hide the sub menu here to keep the code cleaner but is unnecessary
        }
if (evt.type=="click" && elem.id == "CategoryTwo" || elem.className == "parent") {  
            alert(elem.id);
//obviously this is where the scrolling would go as well if possible to show and hide the sub menu here to keep the code cleaner but is unnecessary
        }
    }
}


The other thing necessary, of course, is to implement an id on the parent buttons like so:
CODE

<li > <a href="#" class="parent" id="CategoryOne">Category One</a>
            <ul class='MenuFunctions'>



If it is easier and if there is a way I can call the jquery scroll function from inside the java script if statement. I just don't know if its possible I know in pure java script calling a fuction is relatively straight forward though I suspect j Query to be different. On Google it says to open the j Query function with something like:
CODE
$.myjQuery = function() {
then call it with:
CODE

function display() {
            $.myjQuery();
         };

Of course it would have to be modified so the scrolling is applied to current menu rather than #content maybe with a ".this" command instead. Sorry, I'm just thinking aloud here...
Black_Lightning
Nov 23 2019, 12:18 AM
QUOTE(pandy @ Nov 18 2019, 03:46 AM) *

With normal JS the logic would go something like this.

* Catch which category is clicked
* Show the list in that category
* Make that list scroll when the scroll links are clicked

So it would involve some conditional when the Scroll Up and Down links are clicked ( (either ID is used or not). "IF category A is clicked, then scroll list A. ELSE scroll list B".


I said I would update if I made any progress at all (which I use the term loosely for I didn't make much). Following up from my last post I've been trying to follow pandy's advice in how I should go about structuring my JavaScript. I tell you, I've been working whenever possible on it over the last two days and though I've done a lot of dissecting I haven't done much in the way of rebuilding. (I daresay I've nearly fashioned myself a new hairstyle in my frustration... bald wacko.gif ) What bugs me the most is that my family has the audacity to wonder why I just scrap my entire project when I face problems like these. I only live one and I don't fancy spending it fighting with code angry.gif . Anyhow I'm getting side tracked here. I have, as you recall from my last post, managed to script it so that JavaScript can identify what button I clicked so to execute code specifically for it. Well the only victory I've achieved over the last two days (besides ripping my hair out) is showing and hiding the sub menu though it only partially works. When you click on a parent button you never know what list JavaScript will show (even though I made it clear if it's this show that else show this. As for the scrolling... it terrifies me especially with how much trouble I'm dealing with here thus I haven't even begun to touch it yet. Anyhow, I more just came on here to post my most recent code changes, if for nothing else than to maybe help inspire some other poor sap who, like myself has stared at Google search so much as of late their logo is now burned into my vision... blink.gif to the next one I hope my hassle will spare you from future blindness... here is my most up to date code (though it has no jQuery including that scrolling script). I also changed category 2's entries so I can tell what one JavaScript is loading. sad.gif

CODE

<html>
<head>
<title>Example</title>
<script type="text/javascript">
document.onclick = eventRef
function eventRef(evt) {
    var han;
    var scrollBtn;
    var x;    
    evt || (evt = window.event);
    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

        if (evt.type=="click" && elem.id == "CategoryOne" || elem.className == "parent") {
        scrollBtn = elem.id;
        x = document.getElementById("CategoryOneSubmenu");
        }
        if (evt.type=="click" && elem.id == "CategoryTwo" || elem.className == "parent") {  
        scrollBtn = elem.id;
        x = document.getElementById("CategoryTwoSubmenu");
        }        
    }
        if (x.style.display === "none") {
          x.style.display = "block";
          } else {
          x.style.display = "none";
         }
}
</script>
  
<style>
#content {
    height:400px;
    width: 250px;
    overflow:hidden;
    position:relative;
    scrolling:no;
}
#CategoryOneSubmenu {
    display:none;
}
#CategoryTwoSubmenu {
    display:none;
}
</style>
</head>
<body>
<div id="LeftContent">
  <div id="wrapper">
    <div align="left"><a class="NavButtons" id="scrollUp" href="#">Scroll Up</a>
      <div id="content">
        <ul>
          <li class="submenu-toggle"> <a href="#" class="parent" id="CategoryOne">Category One</a>
            <ul id="CategoryOneSubmenu" class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              <li class='MenuButton'><a href="#">Item4</a></li>
              <li class='MenuButton'><a href="#">Item5</a></li>
              <li class='MenuButton'><a href="#">Item6</a></li>
              <li class='MenuButton'><a href="#">Item7</a></li>
              <li class='MenuButton'><a href="#">Item8</a></li>
              <li class='MenuButton'><a href="#">Item9</a></li>
              <li class='MenuButton'><a href="#">Item10</a></li>
              <li class='MenuButton'><a href="#">Item11</a></li>
              <li class='MenuButton'><a href="#">Item12</a></li>
              <li class='MenuButton'><a href="#">Item13</a></li>
              <li class='MenuButton'><a href="#">Item14</a></li>
              <li class='MenuButton'><a href="#">Item15</a></li>
              <li class='MenuButton'><a href="#">Item16</a></li>
              <li class='MenuButton'><a href="#">Item17</a></li>
              <li class='MenuButton'><a href="#">Item18</a></li>
              <li class='MenuButton'><a href="#">Item19</a></li>
              <li class='MenuButton'><a href="#">Item20</a></li>
              <li class='MenuButton'><a href="#">Item21</a></li>
              <li class='MenuButton'><a href="#">Item22</a></li>
              <li class='MenuButton'><a href="#">Item23</a></li>
              <li class='MenuButton'><a href="#">Item24</a></li>
              <li class='MenuButton'><a href="#">Item25</a></li>
              <li class='MenuButton'><a href="#">Item26</a></li>
              <li class='MenuButton'><a href="#">Item27</a></li>
              <li class='MenuButton'><a href="#">Item28</a></li>
              <li class='MenuButton'><a href="#">Item29</a></li>
              <li class='MenuButton'><a href="#">Item30</a></li>
              <li class='MenuButton'><a href="#">Item31</a></li>
              <li class='MenuButton'><a href="#">Item32</a></li>
              <li class='MenuButton'><a href="#">Item33</a></li>
              <li class='MenuButton'><a href="#">Item34</a></li>
              <li class='MenuButton'><a href="#">Item35</a></li>
              <li class='MenuButton'><a href="#">Item36</a></li>
              <li class='MenuButton'><a href="#">Item37</a></li>
              <li class='MenuButton'><a href="#">Item38</a></li>
              <li class='MenuButton'><a href="#">Item39</a></li>
              <li class='MenuButton'><a href="#">Item40</a></li>
              <li class='MenuButton'><a href="#">Item41</a></li>
              <li class='MenuButton'><a href="#">Item42</a></li>
              <li class='MenuButton'><a href="#">Item43</a></li>
              <li class='MenuButton'><a href="#">Item44</a></li>
              <li class='MenuButton'><a href="#">Item45</a></li>
              <li class='MenuButton'><a href="#">Item46</a></li>
              <li class='MenuButton'><a href="#">Item47</a></li>
              <li class='MenuButton'><a href="#">Item48</a></li>
              <li class='MenuButton'><a href="#">Item49</a></li>
              <li class='MenuButton'><a href="#">Item50</a></li>
            </ul>
          </li>
          <li class="submenu-toggle"> <a href="#" class="parent" id="CategoryTwo">Category Two</a>
            <ul id="CategoryTwoSubmenu" class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Category2Item1</a></li>
              <li class='MenuButton'><a href="#">Category2Item2</a></li>
              <li class='MenuButton'><a href="#">Category2Item3</a></li>
              <li class='MenuButton'><a href="#">Category2Item4</a></li>
              <li class='MenuButton'><a href="#">Category2Item5</a></li>
              <li class='MenuButton'><a href="#">Category2Item6</a></li>
              <li class='MenuButton'><a href="#">Category2Item7</a></li>
              <li class='MenuButton'><a href="#">Category2Item8</a></li>
              <li class='MenuButton'><a href="#">Category2Item9</a></li>
              <li class='MenuButton'><a href="#">Category2Item10</a></li>
              <li class='MenuButton'><a href="#">Category2Item11</a></li>
              <li class='MenuButton'><a href="#">Category2Item12</a></li>
              <li class='MenuButton'><a href="#">Category2Item13</a></li>
              <li class='MenuButton'><a href="#">Category2Item14</a></li>
              <li class='MenuButton'><a href="#">Category2Item15</a></li>
              <li class='MenuButton'><a href="#">Category2Item16</a></li>
              <li class='MenuButton'><a href="#">Category2Item17</a></li>
              <li class='MenuButton'><a href="#">Category2Item18</a></li>
              <li class='MenuButton'><a href="#">Category2Item19</a></li>
              <li class='MenuButton'><a href="#">Category2Item20</a></li>
              <li class='MenuButton'><a href="#">Category2Item21</a></li>
              <li class='MenuButton'><a href="#">Category2Item22</a></li>
              <li class='MenuButton'><a href="#">Category2Item23</a></li>
              <li class='MenuButton'><a href="#">Category2Item24</a></li>
              <li class='MenuButton'><a href="#">Category2Item25</a></li>
              <li class='MenuButton'><a href="#">Category2Item26</a></li>
              <li class='MenuButton'><a href="#">Category2Item27</a></li>
              <li class='MenuButton'><a href="#">Category2Item28</a></li>
              <li class='MenuButton'><a href="#">Category2Item29</a></li>
              <li class='MenuButton'><a href="#">Category2Item30</a></li>
              <li class='MenuButton'><a href="#">Category2Item31</a></li>
              <li class='MenuButton'><a href="#">Category2Item32</a></li>
              <li class='MenuButton'><a href="#">Category2Item33</a></li>
              <li class='MenuButton'><a href="#">Category2Item34</a></li>
              <li class='MenuButton'><a href="#">Category2Item35</a></li>
              <li class='MenuButton'><a href="#">Category2Item36</a></li>
              <li class='MenuButton'><a href="#">Category2Item37</a></li>
              <li class='MenuButton'><a href="#">Category2Item38</a></li>
              <li class='MenuButton'><a href="#">Category2Item39</a></li>
              <li class='MenuButton'><a href="#">Category2Item40</a></li>
              <li class='MenuButton'><a href="#">Category2Item41</a></li>
              <li class='MenuButton'><a href="#">Category2Item42</a></li>
              <li class='MenuButton'><a href="#">Category2Item43</a></li>
              <li class='MenuButton'><a href="#">Category2Item44</a></li>
              <li class='MenuButton'><a href="#">Category2Item45</a></li>
              <li class='MenuButton'><a href="#">Category2Item46</a></li>
              <li class='MenuButton'><a href="#">Category2Item47</a></li>
              <li class='MenuButton'><a href="#">Category2Item48</a></li>
              <li class='MenuButton'><a href="#">Category2Item49</a></li>
              <li class='MenuButton'><a href="#">Category2Item50</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <a class="NavButtons" id="scrollDown" href="#">Scroll Down</a> </div>
  </div>
</div>
</div>
</body>
</html>



This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.