div scrollTop problem - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

div scrollTop problem Posts

March 17, 2013 at 1:07 am div scrollTop problem #17216

Member

Hi, I get the following problem with a control jqxTabs, and would be grateful if someone could be of help.
I put the control on a page, with various tabs dynamically created based on a template.
The control works fine, but when I switch from one tab to another, the positions of all scrollTop div content on them will be lost.
Does anyone know how to fix it?

March 17, 2013 at 9:25 am div scrollTop problem #17224

Peter Stoev

Keymaster

Dear willy70,

Could you please provide a small sample which demonstrates your issue with jqxTabs?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 18, 2013 at 9:35 pm div scrollTop problem #17342

willy70

Member

This is an example page that I created to show the problem.
When I move from one tab to another, the scroll position of the div content in the previous tab is lost.
How can I solve this problem?
I used jqwidgets version 2.7

$(function() {

$(‘#div_Tabs’).jqxTabs(
{ width: 400, scrollPosition: ‘both’, padding: 1,
reorder: true, showCloseButtons: true, theme: ‘black’
});

})

tab 1
tab 2
tab 3

prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1

prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2

prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3

March 18, 2013 at 9:43 pm div scrollTop problem #17343

willy70

Member

$(function() {

$(‘#div_Tabs’).jqxTabs(
{ width: 400, scrollPosition: ‘both’, padding: 1,
reorder: true, showCloseButtons: true, theme: ‘black’
});

})

tab 1
tab 2
tab 3

prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1
prova 1

prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2
prova 2

prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3
prova 3

March 18, 2013 at 9:46 pm div scrollTop problem #17344

willy70

Member

I can not insert HTML code…
How it works?

March 18, 2013 at 9:48 pm div scrollTop problem #17345

willy70

Member

$(function() {

$(‘#div_Tabs’).jqxTabs(
{ width: 400, scrollPosition: ‘both’, padding: 1,
reorder: true, showCloseButtons: true, theme: ‘black’
});

})

“

tab 1
tab 2
tab 3

”

March 19, 2013 at 7:09 am div scrollTop problem #17396

Peter Stoev

Keymaster

Hi willy70,

1. To insert HTML in the Forum, please take a look at this topic: http://www.jqwidgets.com/community/topic/code-formatting/
2. When you switch tabs, we set display: none to the old tab and display: block to the new tab. When you navigate to the old tab again, we set display:block. That resets the DIV tag’s scrolling position. As a solution, you may use the jqxPanel inside your tabs. It will keep your scrolling position.

Below is a sample solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({
                width: '90%', height: 200, position: 'top', initTabContent: function (index) {
                    switch (index) {
                        case 0:
                            $("#panel1").jqxPanel({ width: '100%', height: '100%' });
                            break;
                        case 1:
                            $("#panel2").jqxPanel({ width: '100%', height: '100%' });
                            break;
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
            </ul>
            <div style="overflow: hidden;">
                <div id="panel1">
                    Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
                     Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
                </div>
            </div>
             <div style="overflow: hidden;">
                <div id="panel2">
                    JavaServer Pages (JSP) is a Java technology that helps software developers serve
                dynamically generated web pages based on HTML, XML, or other document types. Released
                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
                the perception that the Java programming environment didn't provide developers with
                enough support for the Web. To deploy and run, a compatible web server with servlet
                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
                container.
                   Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
                </div>
            </div>
        </div>
</body>
</html>

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.