jQWidgets Forums

Tagged: background, image, jqxtree, transparent, Tree

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

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

Author

How to remove white background. Posts

August 26, 2012 at 2:21 am How to remove white background. #7144

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?

August 27, 2012 at 7:11 am 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/

August 27, 2012 at 11:38 am 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?

August 28, 2012 at 5:23 am 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/

August 28, 2012 at 11:05 am 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…

Author

Posts

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

You must be logged in to reply to this topic.