[DiegoUnanueParticipant]

Solved:
In the jqx-menu class located in my custom theme, I overwrite the class setting background-image: none

/*jqxMenu Style*/
.jqx-menu
{
    border: 1px solid transparent;
    float: none;
    margin: 0px;
    height: 100%;
    padding: 0px;
    overflow: hidden;
    text-align: left;
    border-radius: 0;
    border-color: transparent;
    border: none;
    background-color: transparent;
    color: transparent;
    position: fixed;
    left: 970px;
    background-image: none; --> set to none, allows me to see the background
}

[DiegoUnanueParticipant]

I find that if I delete the background image from the css class called jqx-widget-header it works, but as I use other components of jqwidgets, I don’t know what impact will have. How can I use or rewrite this class and only applied it to the menu. By the way the class that I use it’s from a theme that I create jqx-widget-header-custom. I named the other in order to be understood what the problem is.

.jqx-widget-header-custom {
    background-clip: padding-box;
    background-image: -moz-linear-gradient(center top , #292929, #292929);  --> this line its what I need to delete
    font-family: Verdana;
    text-shadow: none;
}

best regards

[DiegoUnanueParticipant]

I tried the solution previously given but it didn’t work, still looking the same as the dropbox pic.
here’s the code:

<div id='jqxWidget' >
                            <div id='jqxMenu' style="background-color: transparent">
                                <ul>
                                    <li><a href="#">
                                        <img src='/Images/config.png' /></a>
                                        <ul>
                                            <li><a href="#" id="showUsersList">User Settings</a></li>
                                            <li ><a href="#" id="showCompanies">Company Settings</a></li>
                                            <li><a href="#" id="showMyProfile">User Profile</a></li>
                                            <li  target="_blank">Download</a></li>
                                            <li data-bind="visible: mViewModel.userLogin().UserType() == 'SA'"><a href="#">Reports</a>
                                                <ul>
                                                    <li><a href="#" class="showRpt" target="_blank">Sell Company List</a></li>
                                                    <li><a href="#" class="showRpt"  target="_blank">Buy Company List</a></li>
                                                    <li><a href="#" class="showUserRpt"  target="_blank">Sell Side User List</a></li>
                                                    <li><a href="#" class="showUserRpt"  target="_blank">Buy Side User List</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#" class="spanMenu">Help? (888) 988-3735</a></li>
                        </ul>
                 </ul>
        </div>
</div>

[DiegoUnanueParticipant]

This is the image of the menu:

https://drive.google.com/file/d/0BzdiE5NGBr1QR3hZOU02V256LVU/edit?usp=sharing

[DiegoUnanueParticipant]

Where should I locate the following code:
/Sets the new position to the window
$(‘#windowVolaxe’).position().left = xPosPrev;
$(‘#windowVolaxe’).position().top = yPosPrev;

Best Regards,
Diego Unanue

[DiegoUnanueParticipant]

Hi Peter thanks for your answer, yes I have many windows, the idea it’s to set a cascade style between the windows, when they are opened, getting the moved position to cascade them when they are moved and other it’s opened. At the very first time I put the code inside the open event, but then I put it outside it, in the main function of the model. I try many posibilities but none of them worked, I still getting the flash effects from the previous position.

function initialize()
{
//WINDOW 1 ADCONSOLE
$(‘#windowAdConsole’).on(‘open’, function (event) {
$(‘#jqxAddConsoleTabs’).jqxTabs({
width: ‘100%’,
height: 468,
position: ‘top’,
theme: ‘custom’,
selectedItem: 0
});

$(‘#windowAdConsole’).jqxWindow(‘bringToFront’);

});

//Gets the position and stored it in a variable
xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

//Sets the new position to the window
$(‘#windowAdConsole’).position().left = xPosPrev;
$(‘#windowAdConsole’).position().top = yPosPrev;

//Gets the new position
position = $(‘#windowAdConsole’).jqxWindow(‘position’);
xPosNew = position.x;
yPosNew = position.y;

$(‘#windowAdConsole’).on(‘moved’, function (event) {
//Gets the position when moved
var positionCss = $(‘#windowAdConsole’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;
});

//WINDOW 2 VOLAXE
$(‘#windowVolaxe’).jqxWindow({
showCollapseButton: true, height: 518, width: 832, maxWidth: 832, theme: ‘custom’, autoOpen: false, resizable: false, closeAnimationDuration: 200,
initContent: function () {
$(‘#jqxTabs’).jqxTabs({
width: ‘100%’, height: 468, position: ‘top’, theme: ‘custom’, selectedItem: 0
});
}
});

$(‘#windowVolaxe’).on(‘open’, function (event) {

$(‘#jqxTabs’).jqxTabs({
width: ‘100%’, height: 468, position: ‘top’, theme: ‘custom’, selectedItem: 0
});

$(‘#windowVolaxe’).jqxWindow(‘bringToFront’);

});

//Gets the position and stored it in a variable
xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

//Sets the new position to the window
$(‘#windowVolaxe’).position().left = xPosPrev;
$(‘#windowVolaxe’).position().top = yPosPrev;

//Gets the new position
position = $(‘#windowVolaxe’).jqxWindow(‘position’);
xPosNew = position.x;
yPosNew = position.y;

$(‘#windowVolaxe’).on(‘moved’, function (event) {
var positionCss = $(‘#windowVolaxe’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;

});

};

Best Regards,
Diego Unanue

[DiegoUnanueParticipant]

I change my code like you said:

$(‘#windowAdConsole’).on(‘open’, function (event) {

$(‘#jqxAddConsoleTabs’).jqxTabs({
width: ‘100%’,
height: 468,
position: ‘top’,
theme: ‘custom’,
selectedItem: 0
});

xPosPrev = xPosNew + 20;
yPosPrev = yPosNew + 20;

}

Code is outside open event
//$(‘#windowAdConsole’).position().left = xPosNew;
//$(‘#windowAdConsole’).position().top = yPosNew;

$(‘#windowAdConsole’).jqxWindow(‘bringToFront’);

And Im still getting the flash between the previous and new position. Where should I locate this code, should I change it?
Best Regards,
Diego Unanue

[DiegoUnanueParticipant]

I’m getting the position like this,

$(‘#windowAdConsole’).on(‘moved’, function (event) {
var positionCss = $(‘#windowAdConsole’).position();
xPosNew = positionCss.left;
yPosNew = positionCss.top;

});

and it works but when I assign onOpen event the new position I get the flash effect:

when the window its opened I set the position
$(‘#windowAdConsole’).jqxWindow({ position: { x: xPosPrev + 20, y: yPosPrev + 20} });

when I close it and open again in other position setting
$(‘#windowAdConsole’).jqxWindow({ position: { x: xPosPrev + 20, y: yPosPrev + 20} });

I get the flash effect.

I need to solve this to make a solid application.

Thanks
Diego Unanue

[Author]

Posts