Adding Jump Menu JS - Githubissues

chrisdarke42 commented 2 months ago

Basic jump menu tool, please review

zipymonkey commented 2 months ago

Thanks Chris. This works as advertised there is an overflow issue with larger items and it would be ideal for the dropdown to stay in the container.

Screenshot 2024-04-26 at 10 03 20 AM

Would be nice to drop jquery but definitely not a priority.

chrisdarke42 commented 2 months ago

OK was that a single line item that was v long? Can you paste the tested HTML? Since it is using bootstrap5 for the dropdown, I will apply something on the container div to keep it constrained. I did consider ditching jquery but since the other js in there is also using jquery, for expediency I didn't bother, but I can refactor if needed.

zipymonkey commented 2 months ago

No worries about jquery. That can be a future issue.

Here is the HTML I used.

<ul class="jump-menu" data-jump-breakpoint="md" data-jump-id="this-is-a-test" data-jump-classes="special-styling">
    <li>
        <a href="&lt;front&gt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Ultricies per tempor phasellus dictum eget, lobortis aliquam ligula.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Tortor suscipit potenti parturient, curae scelerisque feugiat, ad habitasse.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Tempus bibendum pharetra convallis velit class, inceptos litora diam.</a>
        <ul class="jump-menu" data-jump-breakpoint="md" data-jump-id="this-is-a-test" data-jump-classes="special-styling">
            <li>
                <a href="&lt;front&gt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
            </li>
            <li>
                <a href="&lt;front&gt;">Ultricies per tempor phasellus dictum eget, lobortis aliquam ligula.</a>
            </li>
            <li>
                <a href="&lt;front&gt;">Tortor suscipit potenti parturient, curae scelerisque feugiat, ad habitasse.</a>
            </li>
            <li>
                <a href="&lt;front&gt;">Tempus bibendum pharetra convallis velit class, inceptos litora diam.</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="&lt;front&gt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Ultricies per tempor phasellus dictum eget, lobortis aliquam ligula.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Tortor suscipit potenti parturient, curae scelerisque feugiat, ad habitasse.</a>
    </li>
    <li>
        <a href="&lt;front&gt;">Tempus bibendum pharetra convallis velit class, inceptos litora diam.</a>
    </li>
</ul>

chrisdarke42 commented 2 months ago

Added an update to deal with the long text

psu-libraries / psulib_base

Adding Jump Menu JS #73