jQuery UI Widgets Forums Navigation Tree How to remove white background.

This topic contains 4 replies, has 2 voices, and was last updated by  Richard 10 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How to remove white background. #7144

    Richard
    Member

    I am having trouble trying to remove the white background from the menu. I added a background image to the jqxTree div tag. The UL in the menu has a white background which obscures the background image. I have tried to change the background to transparent and background none with no effect. I can change it to red and blue but not transparent. Can you tell me how to remove the white background?

    How to remove white background. #7162

    Dimitar
    Participant

    Hello homepagestore,

    Add this style to your project:

        <style type="text/css">
    #jqxTree
    {
    background-image: url(../custom_images/leaves-texture.jpg);
    }
    #jqxTree .jqx-widget-content
    {
    background-color: transparent;
    }
    </style>

    Best Regards,
    Dimitar

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

    How to remove white background. #7166

    Richard
    Member

    Thank you Dimitar, I added the classes to my custom theme. Next, I added the class name to the jqxTree div. The white background still appears.

    here is the example:
    http://www.austinwebmaster.com/BeeCreekUMC/tree_menu.php

    Next, I tried adding style=’background-color:transparent;’ to the UL. Still the white background appears.

    The issue appears to be with the UL or LI but I cannot be sure.

    Any idea?

    How to remove white background. #7179

    Dimitar
    Participant

    Hi homepagestore,

    Here is how the style should be implemented:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
    can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>jQuery Tree with Context Menu.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
    #jqxTree
    {
    background-image: url(../../custom_images/leaves-texture.jpg);
    }
    #jqxTree .jqx-widget-content
    {
    background-color: transparent;
    }
    </style>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ theme: theme, height: '450px', width: '250px' });
    var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', theme: theme, height: '56px', autoOpenPopup: false, mode: 'popup' });
    var clickedItem = null;
    // open the context menu when the user presses the mouse right button.
    $("#jqxTree li").live('mousedown', function (event) {
    var target = $(event.target).parents('li:first')[0];
    var rightClick = isRightClick(event);
    if (rightClick && target != null) {
    $("#jqxTree").jqxTree('selectItem', target);
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    return false;
    }
    });
    $("#jqxMenu").live('itemclick', function (event) {
    var item = $(event.args).text();
    switch (item) {
    case "Add Item":
    var selectedItem = $('#jqxTree').jqxTree('selectedItem');
    if (selectedItem != null) {
    $('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element);
    }
    break;
    case "Remove Item":
    var selectedItem = $('#jqxTree').jqxTree('selectedItem');
    if (selectedItem != null) {
    $('#jqxTree').jqxTree('removeItem', selectedItem.element);
    }
    break;
    }
    });
    // disable the default browser's context menu.
    $(document).bind('contextmenu', function (e) {
    if ($(e.target).parents('.jqx-tree').length > 0) {
    return false;
    }
    return true;
    });
    function isRightClick(event) {
    var rightclick;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
    return rightclick;
    }
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxTree'>
    <ul>
    <li id='home'><a href="http://beecreekumc.org/#/home" alt="Go to Home Page">Home</a></li>
    <li><a href="http://beecreekumc.org/#/about-us" alt="Go to About Us page">About Us</a></li>
    <li><a href="http://beecreekumc.org/#/calendarnews" alt="Go to Calendar News page">Calendar/News</a></li>
    <li><a href="http://beecreekumc.org/#/worship" alt="Go to Worship Services page">Worship</a></li>
    <li><a href="http://beecreekumc.org/#/children-preschool" alt="Go to Children and Preschool page">
    Children & Preschool</a></li>
    <li><a href="http://beecreekumc.org/#/youth" alt="Go to Youth Page">Youth</a></li>
    <li id='home' item-selected='true'>Adult Ministries
    <ul>
    <li item-selected='true'>Adult Ministries</li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/adult-studies" alt="Go to Adult Studies page">
    Adult Studies</a></li>
    <li item-selected='true'>
    <img src="images/active.jpg" width="16" height="9">&nbsp;Stephen Ministries</li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/mens-ministry" alt="Go to Men's Ministry page">
    Men's Ministry</a></li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/womens-ministry" alt="Go to Women's Ministry page">
    Women's Ministry</a></li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/prayer-shawl-ministry" alt="Go to Prayer Shawl Ministry page">
    Prayer Shawl Ministry</a></li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/hospital-visitation-team"
    alt="Go to Hospital Visitation Team page">Hospital Visitation Team</a></li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/small-groups" alt="Go to Small Groups page">
    Small Groups</a></li>
    <li><a href="http://beecreekumc.org/#/adult-ministries/get-connected-at-bcumc" alt="Go to Get Connected at Bee Creek UMC page">
    Get Connected at BCUMC</a></li>
    </ul>
    </li>
    <li><a href="http://beecreekumc.org/#/outreachmissions" alt="Go to Out Reach Missions page">
    Outreach/Missions</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How to remove white background. #7199

    Richard
    Member

    Thank you Dimitar, that almost fixed it for me… I had to make a couple of changes to your code to make the background replicate properly in the menu.

    #jqxTree
    {
    background-image: url(images/_menu_filler.jpg);
    background-position: right top;
    background-repeat:repeat-y;
    }
    #jqxTree .jqx-widget-content
    {
    background-color: transparent;
    }

    Now that works…

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

You must be logged in to reply to this topic.