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
pandy
post Nov 14 2019, 03:31 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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>
              ...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Black_Lightning
post Nov 14 2019, 01:55 PM
Post #3





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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Black_Lightning
post Nov 15 2019, 07:11 PM
Post #5





Group: Members
Posts: 9
Joined: 14-November 19
Member No.: 27,040
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.

This post has been edited by Black_Lightning: Nov 15 2019, 07:48 PM
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
2 User(s) are reading this topic (2 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: 19th April 2024 - 06:54 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC