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
CharlesEF
post Nov 17 2019, 05:25 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Black_Lightning
post Nov 17 2019, 07:23 PM
Post #3





Group: Members
Posts: 9
Joined: 14-November 19
Member No.: 27,040
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
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: 27th April 2024 - 12:35 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC