The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Keep menu items fixed while the sub menu scrolls...
Black_Lightning
post Nov 14 2019, 02:44 AM
Post #1





Group: Members
Posts: 9
Joined: 14-November 19
Member No.: 27,040



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Black_Lightning
post Nov 23 2019, 12:18 AM
Post #2





Group: Members
Posts: 9
Joined: 14-November 19
Member No.: 27,040



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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th February 2020 - 07:44 PM