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 16 2019, 07:44 PM
Post #2





Group: Members
Posts: 9
Joined: 14-November 19
Member No.: 27,040
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Black_Lightning   Keep menu items fixed while the sub menu scrolls...   Nov 14 2019, 02:44 AM
pandy   As far as I understand you scroll the DIV #content...   Nov 14 2019, 03:31 AM
Black_Lightning   As far as I understand you scroll the DIV #conten...   Nov 14 2019, 01:55 PM
pandy   Yeah. I tried to add an id to just one of the menu...   Nov 15 2019, 03:19 AM
Black_Lightning   Yeah. I tried to add an id to just one of the men...   Nov 15 2019, 07:11 PM
pandy   I don't know enough JS for this. And even less...   Nov 16 2019, 03:31 AM
Christian J   I have just been Googling the uses of a class in ...   Nov 16 2019, 05:56 AM
Black_Lightning   I don't know enough JS for this. And even les...   Nov 16 2019, 07:44 PM
CharlesEF   Why not read the jQuery documentation? Here is a ...   Nov 16 2019, 08:36 PM
Black_Lightning   Why not read the jQuery documentation? Here is a...   Nov 17 2019, 02:15 AM
CharlesEF   I don't do jQuery, that's why I never jump...   Nov 17 2019, 05:25 PM
Black_Lightning   I don't do jQuery, that's why I never jum...   Nov 17 2019, 07:23 PM
pandy   What in the original script catches which category...   Nov 18 2019, 03:46 AM
Black_Lightning   What in the original script catches which categor...   Nov 18 2019, 07:14 PM
Black_Lightning   What in the original script catches which categor...   Nov 18 2019, 07:54 PM
Black_Lightning   With normal JS the logic would go something like ...   Nov 23 2019, 12:18 AM

« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 08:57 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC