Home/ Questions/Q 8349373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:58:33+00:00

I’m really not sure how to properly title this problem Let me point to

  • 0

I’m really not sure how to properly title this problem

Let me point to an example fiddle

The problem is when the dialog is open and you click on the table of contents and begin to scroll the dialog gets stuck, and moves with your mouse. At least in chromium and firefox. Any ideas on how to release the mouse when I am scrolling my table of contents?

HTML

<button id="opener">Clicky</button>

<div id="dialog"><h1>Title</h1>
    <p>Bacon ipsum dolor sit amet pork chop deserunt ut esse leberkas, shankle strip steak veniam adipisicing salami ball tip.</p>
 <p>    Duis ut exercitation, velit biltong chicken sed enim pork pastrami shank ut adipisicing. Drumstick ham hock irure sunt filet mignon fatback est chicken mollit venison ad capicola fugiat consequat short loin. Shoulder ea labore, minim pork chop beef tongue pork belly ullamco ex. Bacon tempor officia, strip steak in irure venison magna. Corned beef eiusmod pork belly pork loin laboris.</p>


    </div>​

JS/JQuery

$(function() {
    var menu = [];
        menu[0] = '<input type="checkbox" id="helpTOCButton" title="Table of Contents"/>';
        menu[1] = '<label for="helpTOCButton">Table of Contents</label>'
        menu[2] = '<div id="helpTOC">';
        menu[3] = '<a title="Bacon">Bacon</a>';
        menu[4] = '<a title="pork">Pork</a>';
        menu[5] = '<a title="Steak">Steak</a>';
        menu[6] = '<a title="Frequently Asked Questions">FAQ</a>';
        menu[7] = '<a title="chicken">Chicken</a>';
        menu[8] = '<a title="baby cows">veal</a>';
        menu[9] = '<a title="brisket">brisket</a>';
        menu[10]  = '<a title="what to do in case of heart attacks">change diet</a>';
        menu[10] = '</div>';            


    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "clip",
        height: '400',
        width: '500',
        title: menu.join(''),
        open: function() {
            $('#helpTOCButton')
                .button({icons: { secondary: 'ui-icon-triangle-1-s'}})
                .on('click',function() { 
                  $('#helpTOC').slideToggle()

                });   
        },
        close: function() { 
               $('#helpTOCButton').off('click');                    
        }

    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});​

CSS

h1 { font: bold 1.25em/1.7em Serif; } 
#helpTOC {background: #fcfcfc; box-shadow: 2px 2px 2px rgba(50,50,50,.2); display: none; position: absolute; margin-left: 5em; z-index:999; border: 1px solid #ccc; height: 5em;  width: 10em; overflow: auto; } 
#helpTOC a { font: .75em/1.25em sans-serif; display: block; cursor: pointer; padding: .25em; border-bottom: 1px solid #ccc; } 
#helpTOC a:hover { background-color: #ebebeb; box-shadow: 2px 2px 2px rgba(50,50,50,.1);}

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I think I may have solved the essential problem

    The issue is this. The TOC of contents is inserted to the title of the dialog box, which by default jquery-ui targets that area to be moved. I am not entirely sure how this caused the problem, but moving prepending the menu #helpTOC to the dialog caused the problem to disappear.

    updated fiddle -> http://jsfiddle.net/Hax8K/

    I guess spending time writing up a question allowed my brain to think through this a bit. I am still welcoming answers or explanation to my original issue or how I chose to solve it.

    • 0