Background-image inside a jqxpanel - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 1 voice, and was last updated by tamaraOnt 11 years, 9 months ago.

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

Author

Background-image inside a jqxpanel Posts

January 17, 2013 at 11:07 am Background-image inside a jqxpanel #13789

Member

I’m trying to put a image as a background inside a jqxpanel, but I can’t. Could anyone help me?

I have the following code:
Note: The image is located as the same folder as the main.php, (this code)
I put as a comment because if I don’t do it, it replace my code

<!–

PRUEBA

@import “css/style.css”;

#cabecer
{
background-image: url(./topMainBack.png);
background-position: right top;
background-repeat:repeat-y;
}
#cabecer.jqx-widget-content
{
background-color: transparent;
}

$(document).ready(function () {
$(“#mainLayout”).jqxDockPanel({ width: 600, height: 600, theme:’darkblue’ });
$(“#cabecer”).jqxPanel({ width: 600, height: 100, theme:’darkblue’});

// $(“#menu”).jqxNavigationBar({ width: 400, height: 420, sizeMode: ‘fitAvailableHeight’, theme: ‘darkblue’ });
});

Hola

–>

January 17, 2013 at 11:15 am Background-image inside a jqxpanel #13793

tamaraOnt

Member

I’m trying again:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="cache-Control" CONTENT="no-cache"> 
        <title>PRUEBA</title>
        <style>
            @import "css/style.css";    
        </style>
        <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        
        <script type="text/javascript" src="../frontend/scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../frontend/scripts/knockout-2.2.0.js"></script>
        <script type="text/javascript" src="../frontend/scripts/knockout-mapping-2.0.0.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxvalidator.js"></script> 
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxdockpanel.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxnavigationbar.js"></script>
        <style type="text/css">
           #cabecer
           {
               background-image: url(./topMainBack.png);
               background-position: right top;
               background-repeat:repeat-y;
           }
           #cabecer.jqx-widget-content
           {
               background-color: transparent;
           }
       </style>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#mainLayout").jqxDockPanel({ width: 600, height: 600, theme:'darkblue' });
               $("#cabecer").jqxPanel({ width: 600, height: 100, theme:'darkblue'});
               //        $("#menu").jqxNavigationBar({ width: 400, height: 420, sizeMode: 'fitAvailableHeight', theme: 'darkblue' });
           });
       </script>
    </head>
   <body>
        <div id='mainLayout'>
            <div id="cabecer" class="cabecer">
                <div style="float:left">
                    <span class="tituloPrincipal">BB</span>
                </div>
                <div style="float:right">
                    <table>
                        <tr>
                            <td>Hola </td>                        
                        </tr>
                    </table>
                </div>   
            </div>
        </div>
    </body>
</html>

January 17, 2013 at 11:21 am Background-image inside a jqxpanel #13797

tamaraOnt

Member

I have it.

You must to include the following:


 $("#cabecer").css('background-image', 'url(views/tpl/topMainBack.png)');

Author

Posts

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

You must be logged in to reply to this topic.