jQWidgets Forums

Forum Replies Created

Viewing 11 posts - 6,526 through 6,536 (of 6,536 total)

← 1 … 435 436

Author

Posts

August 3, 2012 at 8:37 am in reply to: Disabling Top Level Menu Item Disabling Top Level Menu Item #6552

Dimitar

Participant

Hello Cyril,

Here is a solution that answers both your questions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <style type="text/css">
    .colorClass
    {
        background-color: Green;
    }
    </style>
</head>
<body>
<div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 600, height: 30 });
                // Disable menu item by clicking a button
                $("#btnd").click(function () {
                    $("#jqxMenu").jqxMenu('disable', 'about', true);
                });
                // Enable menu item by clicking a button
                $("#btne").click(function () {
                    $("#jqxMenu").jqxMenu('disable', 'about', false);
                });
                // Highlight a clicked element
                $("#jqxMenu").bind('itemclick', function () {
                    var children = $("#jqxMenu ul:first").children();
                    // In case a top-level menu item is clicked
                    if ($(args).is(children)) {
                        children.removeClass("colorClass");
                        $(args).addClass("colorClass"); // Applies the selected class - in this case - a green background color for highlighting
                    }
                    // In case another menu item is clicked
                    else {
                        children.removeClass("colorClass");
                        var popup = $(args).parents(".jqx-menu-popup:last");
                        var ul = $(popup.children()[0]).find('ul:first');
                        var textul = "#" + ul[0].id;
                        var n = textul.indexOf("-ul");
                        var text = textul.slice(0, (n));
                        $(text).addClass("colorClass"); // Applies the selected class
                    };
                });
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li id="about">About Us
                        <ul id="about-ul">
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services
                    </li>
                    <li id="products">Products
                        <ul id="products-ul">
                            <li id="new"><a href="#">New</a>
                                <ul id="new-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li id="used"><a href="#">Used</a>
                                <ul id="used-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                         </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <button id="btnd">Disable.</button>
    <button id="btne">Enable.</button>
</body>
</html>

Note that for the highlight to work properly you need to set ids to every ul and its parent li. If the ul id is named “name-ul”, for example, the li id must be named “name”. This allows highlighting top-level menu items by clicking their lower-level children.

Best Regards,
Dimitar,

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

August 1, 2012 at 3:40 pm in reply to: destroy window destroy window #6484

Dimitar

Participant

Hi mr_putersmit,

I suggest you to see this demo: popupediting.htm. The demo shows how to show and hide jqxWindow on some user action. The issue in your code is that you try to open the jqxWindow when the jqxWindow’s element is clicked, but you Hide the jqxWindow’s element before that, but the code in the click handler will not be executed because it is not possible to Click something which is not visible.

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

August 1, 2012 at 2:58 pm in reply to: destroy window destroy window #6478

Dimitar

Participant

Hi mr_putersmit,

This topic shows how to format code when you post in the Forum: http://www.jqwidgets.com/community/topic/code-formatting

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

August 1, 2012 at 5:16 am in reply to: destroy window destroy window #6458

Dimitar

Participant

Hi mr_putersmit,

The Cancel button closes the window but doesn’t remove it.

$('div').remove('#jqxwindow');

is used to remove the window. It can be used with a button or however you like.

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 31, 2012 at 10:26 am in reply to: Menu items font size Menu items font size #6437

Dimitar

Participant

Hi Bruce,

Just change the width of the unordered list when there is a longer entry in it. Here is the solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>jQuery Menu - Horizontal Menu Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<!-- The next style changes the font size-->
    <style type="text/css">
        .jqx-menu-item-top, .jqx-menu-item
        {
            font-size:30px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 1000, height: 60 }); //remember to change the size of the menu accordingly!
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul style="width:400px"> <!-- change the width of the unordered list with long list item names -->
                            <li><a href="#">History History History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#">New</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Used</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                         </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 31, 2012 at 8:45 am in reply to: destroy window destroy window #6421

Dimitar

Participant

Hello mr_putersmit,

Here is the solution. Check the inline comments for more clarification:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
    $(document).ready(function () {
        $("#OK").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
        $("#Cancel").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
        $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
        $('#jqxwindow').jqxWindow({ okButton: $('#OK') }); //creates the OK button - returns true
        $('#jqxwindow').jqxWindow({ cancelButton: $('#Cancel') }); //creates the Cancel button - returns false
        $('#btn').click(function () {
            $('div').remove('#jqxwindow');
        })
    });
</script>
<div id='jqxwindow'>
	<div>Header</div>
	<div>Content<br />
    <!-- The buttons should go into the "Content" <div> -->
    <button id="OK">OK</button>
    <button id="Cancel">Cancel</button>
    </div>
</div>
<button id="btn">Remove window!</button>
</div>
</body>
</html>

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 31, 2012 at 6:54 am in reply to: jqxDropDownButton jqxDropDownButton #6418

Dimitar

Participant

Hi Peter,

We tested your page with Firefox and Chrome and we have the same issue. I am sorry we are unable to help you at this time but we have created a work item about the reported issue.

However, I recommend using the most recent version of jQWidgets.

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 31, 2012 at 5:52 am in reply to: jqxDropDownButton jqxDropDownButton #6414

Dimitar

Participant

Hi Peter,

We tried your sample page with the latest version of jQWidgets(ver. 2.3.1) to see if we could reproduce the issue, but without avail. What version of jQWidgets do you use?

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 31, 2012 at 5:25 am in reply to: destroy window destroy window #6413

Dimitar

Participant

Hello mr_putersmit,

Here is an example which answers your question. You need to call the remove() function to remove the window. In the example it is called when a button is clicked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
        $('#btn').click(function(){
        $('div').remove('#jqxwindow');})
    });
</script>  
<div id='jqxwindow'>
	<div>Header</div>
	<div>Content</div>
</div>
<button id="btn">Remove window!</button>
</div>
</body>
</html>

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 30, 2012 at 5:32 am in reply to: Menu items font size Menu items font size #6395

Dimitar

Participant

Hi Bruce,

Here is an example based on the one in the widget documentation with changed font size. Notice you have to change the size of the menu itself, too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>jQuery Menu - Horizontal Menu Sample</title>
    <link rel="stylesheet" href="jqx.base.css" type="text/css" />
<!-- The next style changes the font size-->
    <style type="text/css">
        .jqx-menu-item-top, .jqx-menu-item
        {
            font-size:30px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 1000, height: 60 });//remember to change the size of the menu accordingly!
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#">New</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Used</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                         </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar,

jQWidgets Team,
http://www.jqwidgets.com/

July 26, 2012 at 5:31 am in reply to: Converting Date value to timestamp Converting Date value to timestamp #6347

Dimitar

Participant

Hi mc,

1) To convert your getDate value to timestamp use the getTime() function. For example:

var timestamp = getDate.getTime();

This will return a timestamp showing the number of milliseconds since 01.01.1970.

2) Here is the explanation of these formats:

“F” (long date, long time pattern) – “dddd, MMMM dd, yyyy h:mm:ss tt”

“T” (long time pattern) – “h:mm:ss tt”

Used Date format strings:

“dd”-the day of the month;
“dddd”- the full name of the day of the week;
“h”-the hour, using a 12-hour clock from 1 to 12;
“mm”-the minutes,from 00 though59;
“MMMM”-the full name of the month;
“ss”-the second, from 00 through 59;
“tt”-the AM/PM designator;
“yyyy”-the year as a four-digit number;

Best Regards,
Dimitar,

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 11 posts - 6,526 through 6,536 (of 6,536 total)

← 1 … 435 436