jQWidgets Forums

Tagged: jqxMenu, jqxsplitter, Menu, splitter, video

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.

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

Author

Video in splitter panel Posts

February 12, 2015 at 5:57 pm Video in splitter panel #67032

hcccs

Participant

When I put in a video in a splitter panel the rest of the panel is filled with black.

If I call the html page as a freestanding page only the video fram is shown which is correct.
It seems to me that jqwidgets has something to do with this.
This is the code:

$('#jqxMenu').on('itemclick', function (event) {
	var element = event.args;
	var page;
	page = element.id + ".html"
	$('#ContentPanel').load(page);

February 13, 2015 at 1:03 pm Video in splitter panel #67088

Nadezhda

Participant

Hello hcccs,

Please, find the following example which shows how to add video in page and this page is loading in splitter panel after click on menu option. In this example the random video is embedded in page as iframe and works correctly on our side.

-Here is the page with splitter panels:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '10%', resizable: false }, { size: '90%', resizable: false }] });
            $('#hor2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '90%', resizable: false }, { size: '10%', resizable: false }] });
            var source =
            [
                { label: "AAAAA", value: "45" },
                { label: "BBBBB" },
                { label: "CCCCC" }
            ];
            $("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
            $('#jqxMenu').on('itemclick', function (event) {
                var element = event.args;
                if (element.textContent == "AAAAA") {
                    $('#ContentPanel').load('test.html');
                }
                $('#BottomPanel').text($(event.target).text() + " item has been clicked");
            });
        });
    </script>
</head>
<body>
    <div id="hor1Splitter">
        <div>
            <div id="jqxMenu"></div>
        </div>
        <div>
            <div id="hor2Splitter">
                <div>
                    <div id='ContentPanel'></div>
                </div>
                <div>
                    <div id='BottomPanel'></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

-Here is the code of video page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test page</title>
</head>
<body>
    <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ozmE8G6YKww" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

If this suggestion does not help you, please, provide us with more information about video page, how do you use video into the page.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.