Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML jQuery

Description

In webpage, Scrolling is not working inside jQuery popup & it's just dragging the entire popup window on page. Kindly help me to resolve this. Thank you guys.
<html>
<head>
    <title>Popup Scroll</title>
</head>
<body>
    <script type="text/javascript" src="js/jqueryPopUp/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/jquery.dimensions.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.dialog1.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.resizable.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.mouse.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.draggable.js"></script>
    <script type="text/javascript">  
        function openpop()
        {
            document.getElementById('Popwindow').style.display = "block"; 
            $('#Popwindow').dialog({ position: 'center' });
            $('#Popwindow').dialog('option', 'position', 'center');
        }
    </script>
    <form id="Form1"  runat="server">
        <div id="Popwindow" class="div_popup" style="display: none; removed: relative; border: solid 1px #000000;">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table2" class="div_popup_table">
                <tr>
                    <th align="left">
                        Popup Title
                    </th>
                    <th align="right">
                        <input type="button" id="btnpopupclose" value="X"  önclick="$('#Popwindow').dialogClose();" />
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="popuptable">
                                    <div id="div-datagrid_dg" style="height: 100px; overflow: scroll;">
                                        I am having a problem with a modal popup that has a vertical scroll bar. If I try to click and drag the scroll box or "thumb" along the track the whole modal popup is dragged across the screen. The scroll buttons will advance the scroll, I just can't grab the thumb without dragging the whole screen.
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <input type="button" id="btnpopupopen" value="Open Popup"  onclick="openpop();" />
</body>
</html>

Screen Shot

Clickety[^](I can't make a gif file so I did something in jpg file hope it will help you to look forward to this)

Resources to Download

jquery-latest.js - jQuery Latest[^]
jquery.dimensions.js - jQuery Dimensions[^]
ui.dialog1.js - jQuery UI/API/1.8/Dialog[^]
ui.resizable.js - jQuery UI/API/1.8/Resizable[^]
ui.mouse.js - jQuery ui/Mouse.js[^]
ui.draggable.js - jQuery UI/API/1.8/Draggable[^]

Edit History


DateDetails
01-Mar-2011BTW you can run this HTML page if you have those jQuery script files. You can open the Popup & you can Drag that anywhere in the page but the issue is I can't scroll the scrollbar(It's dragging the popup screen in the page.)
Please see the attached screen-shot for the clarification.
03-Mar-2011I have changed this issue type as cosmetics & low priority in the project bug list. Roll eyes | :rolleyes: So please try again guys.
28-Apr-2011BTW it's working in IE but not in Firefox....Actually I don't like this(my idea is to replace this with AJAX toolkit which is easy for me....BTW It's existing project for me) but here the PM don't accept my suggestion Mad | :mad:
Added Resource links to download
03-June-2011Well, I relieved from my current company so no need.... Smile | :)
Now I remember below joke

God decided it was time to end the world, so he called together those whom he considered the three most influential people in the world - Bill Clinton, Fidel Castro and Bill Gates. "The world will end," God told them. "You must go tell the people." President Clinton made a live statement on CNN. "I have good news and I have bad news," he said. "The good news is that we have been right, there is a God. The bad news is that he is ending the world." Castro sent out a worldwide message to all Communists. "I have bad new and worse news," he said. "The bad news is that we have been wrong all along, there is a God. The worse news is that he is ending the world." Bill Gates go on his computer and sent out a worldwide e-mail on the Internet. "I have good news and I have better news," he wrote. "The good news is that God thinks I am one of the three most influential people in the world. The better news is that we don't have to upgrade Windows '95!"


BTW I'll try solve this issue myself when ever possible. Thanks to all.
Posted 28-Feb-11 2:40am
thatraja242.7K
Edited 3-Jun-11 6:43am
v8
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

May be something wrong with the plugin "dialog" used in jquery but i'm not sure about it
  Permalink  
Comments
thatraja at 2-Mar-11 19:18pm
   
/*May be something wrong with the plugin "dialog" used in jquery*/
Nope. Please try again.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

can you add two more options into dialogOpts as "modal: true", "bgiframe: false"
  Permalink  
Comments
thatraja at 28-Apr-11 6:22am
   
I tried dude but still not working :( Please try again for me. Normally IE gave me trouble but this time firefox.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Forget all of the above... try this :-
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#btnPopup').click(function() {
            var diag = $("<div>DialogOpen content in an interactive overlay.Examples Default functionality AnimationBasic modal Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</div>");
            diag.dialog({
            title: 'My Pop-up',
            dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                width: 850,
                minHeight: 400,
                draggable:true
            });
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="Click to open Pop-up!" id="btnPopup" />
    </div>
    </form>
</body>
</html>
 

Now, when you run this code on browser, try resizing the pop-up window. You can see the scrolling......
 
Hope, this will helps you...
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 450
1 OriginalGriff 180
2 DamithSL 130
3 Dave Kreskowiak 120
4 Suvendu Shekhar Giri 110
0 OriginalGriff 7,645
1 DamithSL 5,614
2 Sergey Alexandrovich Kryukov 5,344
3 Maciej Los 4,961
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web03 | 2.8.141223.1 | Last Updated 9 Dec 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100