Results 1 to 2 of 2

Thread: Priority+ Scrolling Menu - Modified to include Non-Scrolling Elements

  1. #1
    Join Date
    Jun 2017
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Priority+ Scrolling Menu - Modified to include Non-Scrolling Elements

    Hello everybody!

    I really like the Priority+ and horizontal scrolling navigation concepts of Dynamic Drive's Priority+ Scrolling Menu. Noticing this excellent script does not provide for non-scrolling elements, I attempted to modify it to enable the inclusion of non-scrolling items for a home icon, dropdown menu, etc.

    Here is the script information:

    1) Priority+ Scrolling Menu

    2) http://www.dynamicdrive.com/dynamici...scrollmenu.htm

    3) In the HTML I added a span to the priorityscroll div ul:

    Code:
     	<div id="priorityscroll">
     	  <ul>   
     	    <li><a href="/"><i>home</i></a></li>
     	    <SPAN>   
     	      <li><a href="#">Link 1</a></li>   
     	      <li><a href="#">Link 2</a></li>   
     	      <li><a href="#">Link 3</a></li>
     	    </SPAN>
     	  </ul>
     	</div>
    In the javascript I edited priorityscroll.js line 67 to change the querySelector() value from 'ul' to 'span':

    Code:
     	before: var hamburgermenu = priorityscroll.querySelector('ul')
    	after:   var hamburgermenu = priorityscroll.querySelector('span')
    With these changes the first li is static and the span contents scroll. Nice, right? But not so fast! Now the span contents visibly scroll through the static li. Changing the z-index values of the static li and span did not resolve the issue. I am not proficient in javascript, so any pointers or assistance would be great!
    Last edited by jscheuer1; 06-19-2017 at 02:42 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,371
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Well, first of all, that's invalid HTML. Only li elements may be the direct children of a ul element. But that might not be the issue. Still I would try markup like so:

    Code:
     	<div id="priorityscroll">
     	  <span><a href="/"><i>home</i></a></span>
     	  <ul>   
     	      <li><a href="#">Link 1</a></li>   
     	      <li><a href="#">Link 2</a></li>   
     	      <li><a href="#">Link 3</a></li>
     	  </ul>
     	</div>
    Leave the script as it originally was. Then, in the stylesheet, add whatever styles are needed to get your fixed span to look and behave as desired.

    Another option would be to create the fixed link outside the menu entirely:

    Code:
     	<span id="fixedlink"><a href="/"><i>home</i></a></span>
     	<div id="priorityscroll">
     	  <ul>   
     	      <li><a href="#">Link 1</a></li>   
     	      <li><a href="#">Link 2</a></li>   
     	      <li><a href="#">Link 3</a></li>
     	  </ul>
     	</div>
    Again, leave the script itself as it originally was, and use style to get the span to look and act as desired.

    If you want more help, please post a link to the page on your site with the problematic code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Scrolling Problem. Message doesnt scroll on page scrolling
    By mrsea001 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-02-2009, 12:00 PM
  2. Can javascript be modified to include exceptions?
    By SuitsAbounding.com in forum JavaScript
    Replies: 1
    Last Post: 08-07-2008, 06:10 PM
  3. scrolling menu
    By Modboy in forum JavaScript
    Replies: 0
    Last Post: 08-09-2007, 12:49 PM
  4. Nesting a horizontally scrolling script within a vertically scrolling script?
    By unknownelement in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-13-2005, 08:57 AM
  5. scrolling in a scrolling window in Mozilla
    By ammwebmaster2 in forum JavaScript
    Replies: 0
    Last Post: 06-06-2005, 03:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •