jqxSwitchbuttons not showing on/off properly in jqxtabs - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: initTabContent, jqxSwitchButton, jqxTabs, switch button, Tabs

This topic contains 15 replies, has 2 voices, and was last updated by Narendra 10 years, 2 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

jqxSwitchbuttons not showing on/off properly in jqxtabs Posts

March 18, 2013 at 7:10 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17250

Narendra

Participant

Hi Frnds,

I am using jqxswitchbuttons inside the jqxtabs, inside the jqxswitchbuttons, the text on/off are showing only half, the remaining text is hiding it means that going bottom

Plz help me as early as possible…..

Thanks in advance….!

March 18, 2013 at 7:43 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17259

Dimitar

Participant

Hello narendra.pvnb,

You should use the initTabContent callback function when integrating a widget in a tab. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxswitchbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var initSwitchButton = function () {
                $('#button1').jqxSwitchButton({ height: 27, width: 81, theme: theme });
            };
            var initWidgets = function (tab) {
                switch (tab) {
                    case 1:
                        initSwitchButton();
                        break;
                };
            };
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme, initTabContent: initWidgets });
            $('#settings div').css('margin-top', '10px');
            $('#animation').jqxCheckBox({ theme: theme });
            $('#contentAnimation').jqxCheckBox({ theme: theme });
            $('#animation').on('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTabs').jqxTabs({ selectionTracker: checked });
            });
            $('#contentAnimation').on('change', function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $('#jqxTabs').jqxTabs({ animationType: 'fade' });
                }
                else {
                    $('#jqxTabs').jqxTabs({ animationType: 'none' });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>
                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
            </div>
            <div>
                JavaServer Pages (JSP) is a Java technology that helps software developers serve
                dynamically generated web pages based on HTML, XML, or other document types. Released
                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
                the perception that the Java programming environment didn't provide developers with
                enough support for the Web. To deploy and run, a compatible web server with servlet
                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
                container.
                <div id="button1">
                </div>
            </div>
            <div>
                ASP.NET is a web application framework developed and marketed by Microsoft to allow
                programmers to build dynamic web sites, web applications and web services. It was
                first released in January 2002 with version 1.0 of the .NET Framework, and is the
                successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
                on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
                using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
                components to process SOAP messages.
            </div>
            <div>
                Python is a general-purpose, high-level programming language[5] whose design philosophy
                emphasizes code readability. Python claims to "[combine] remarkable power with very
                clear syntax",[7] and its standard library is large and comprehensive. Its use of
                indentation for block delimiters is unique among popular programming languages.
                Python supports multiple programming paradigms, primarily but not limited to object-oriented,
                imperative and, to a lesser extent, functional programming styles. It features a
                fully dynamic type system and automatic memory management, similar to that of Scheme,
                Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
                language, but is also used in a wide range of non-scripting contexts.
            </div>
            <div>
                Perl is a high-level, general-purpose, interpreted, dynamic programming language.
                Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
                language to make report processing easier. Since then, it has undergone many changes
                and revisions and become widely popular amongst programmers. Larry Wall continues
                to oversee development of the core language, and its upcoming version, Perl 6. Perl
                borrows features from other programming languages including C, shell scripting (sh),
                AWK, and sed.[5] The language provides powerful text processing facilities without
                the arbitrary data length limits of many contemporary Unix tools, facilitating easy
                manipulation of text files.
            </div>
        </div>
        <div id='settings'>
            <div id='animation'>
                Enable Select Animation</div>
            <div id='contentAnimation'>
                Enable Content Animation</div>
        </div>
    </div>
</body>
</html>

You may also find the demo Integration with other widgets helpful.

Best Regards,
Dimitar

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

March 18, 2013 at 8:44 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17271

Narendra

Participant

Thanks for ur reply But That is not my requirement!

My requirement is that the content in jqxswitchbutton is not appearing completely it is showing half of the content ON/OFF its cutting horizontally

Plz try to understand and help me

March 18, 2013 at 9:05 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17274

Narendra

Participant

Inside jqxtabs jqxswitchbuttons are not showing ON/OFF completely, It cutting ON/OFF horizontally and displays half part only

Plz try to understand and help me

Thanks in advance………….

March 18, 2013 at 9:22 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17276

Dimitar

Participant

Hi narendra.pvnb,

The solution we provided has your issue solved. Please check out the example and click on the second tab to see the working switch button.

Best Regards,
Dimitar

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

March 18, 2013 at 9:30 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17278

Narendra

Participant

Thanks for your reply

But i have 5 tabs in jqxtabs and in one tab i have 8 jqxbuttons, If I tried the code you provided then the all jqxswitchbuttons are disappeared..

please help me it is urgent to me…..

March 18, 2013 at 10:19 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17283

Dimitar

Participant

Hi narendra.pvnb,

Please provide us with a code sample, so that we may examine the reported issue.

Best Regards,
Dimitar

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

March 18, 2013 at 10:48 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17285

Narendra

Participant

Here is my code……..

$(document).ready(function () {

$(‘#jqxTabs’).jqxTabs({ selectedItem: 0, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });

$(‘#jqxTabs’).jqxTabs({ selectedItem: 3, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });

$(‘#jqxTabs’).jqxTabs({ selectedItem: 4, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });

$(‘#jqxTabs’).jqxTabs({ selectedItem: 5, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });

$(‘#btnnextprofile’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnnextalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});

$(‘#btnbacksocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextsocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});

});

$(‘#btnnextprofile’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnnextalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});

$(‘#btnbacksocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextsocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});

});

$(document).ready(function () {
var source = [
“Primary E-mail”,
“Alternate E-mail”,
“SMS”,
“Print”,
“Social”
];
// Create a jqxDropDownList
$(“#drpdwnpcmethod”).jqxDropDownList({ source: source, width: ‘155px’, height: ’25px’, });
});

$(document).ready(function () {
var theme = getTheme();
// For Switch Buttons

$(‘#button1’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button2’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button3’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button4’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button5’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button6’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button7’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button8’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });

//For Switch Checked and Unchecked
$(“#button1”).bind(‘checked’, function (event) {
$(“#txtfbuname”).removeAttr(“disabled”);
});
$(“#button1”).bind(‘unchecked’, function (event) {
$(“#txtfbuname”).val(“”);
$(“#txtfbuname”).attr(“disabled”, “disabled”);
});
$(“#button2”).bind(‘checked’, function (event) {
$(“#txttwtuname”).removeAttr(“disabled”);
});
$(“#button2”).bind(‘unchecked’, function (event) {
$(“#txttwtuname”).val(“”);
$(“#txttwtuname”).attr(“disabled”, “disabled”);
});
$(“#button3”).bind(‘checked’, function (event) {
$(“#txtlinkeduname”).removeAttr(“disabled”);
});
$(“#button3”).bind(‘unchecked’, function (event) {
$(“#txtlinkeduname”).val(“”);
$(“#txtlinkeduname”).attr(“disabled”, “disabled”);
});
$(“#button4”).bind(‘checked’, function (event) {
$(“#txtgplusuname”).removeAttr(“disabled”);
});
$(“#button4”).bind(‘unchecked’, function (event) {
$(“#txtgplusuname”).val(“”);
$(“#txtgplusuname”).attr(“disabled”, “disabled”);
});
$(“#button5”).bind(‘checked’, function (event) {
$(“#txtdrpbxname”).removeAttr(“disabled”);
});
$(“#button5”).bind(‘unchecked’, function (event) {
$(“#txtdrpbxname”).val(“”);
$(“#txtdrpbxname”).attr(“disabled”, “disabled”);
});
$(“#button6”).bind(‘checked’, function (event) {
$(“#txtboxname”).removeAttr(“disabled”);
});
$(“#button6”).bind(‘unchecked’, function (event) {
$(“#txtboxname”).val(“”);
$(“#txtboxname”).attr(“disabled”, “disabled”);
});
$(“#button7”).bind(‘checked’, function (event) {
$(“#txtgdrivename”).removeAttr(“disabled”);
});
$(“#button7”).bind(‘unchecked’, function (event) {
$(“#txtgdrivename”).val(“”);
$(“#txtgdrivename”).attr(“disabled”, “disabled”);
});
$(“#button8”).bind(‘checked’, function (event) {
$(“#txtevrnotename”).removeAttr(“disabled”);
});
$(“#button8”).bind(‘unchecked’, function (event) {
$(“#txtevrnotename”).val(“”);
$(“#txtevrnotename”).attr(“disabled”, “disabled”);
});
});

$(‘#btnnextprofile’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnnextalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackalter’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});

$(‘#btnbacksocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextsocial’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextphoto’).click(function () {

$(‘#jqxTabs’).jqxTabs(‘next’);
});

});

$(document).ready(function () {
var theme = getTheme();
// For Switch Buttons

$(document).ready(function () {
$(“#btnupload”).click(function () {
$(“#imgupload”).click();
})
$(‘#imgupload’).change(function () {
var src1 = $(“#imgupload”).value;
$(‘#imgprofile’).add(‘src’, src1);
// $(‘#frm_aftermaster’).submit();
});
});

Profile
Alternate Contact
Social
Upload Photo

First Name:

Last Name:

E-mail:

Cell Phone:

Title:

Address:

Address2:

Country:

City:

State:

Zip:

Alternate E-mail:

Phone:

Primary Contact method:

Try to understand and give me quick reply please….

March 18, 2013 at 11:00 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17286

Dimitar

Participant

Hi narendra.pvnb,

Please re-post your code and format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

March 18, 2013 at 12:06 pm jqxSwitchbuttons not showing on/off properly in jqxtabs #17296

Narendra

Participant

.auto-style1 {
width: 35px;
}
#gplusuname {
height: 24px;
}
#linkeduname {
height: 24px;
}
#twtuname {
height: 25px;
}
#fbuname {
height: 25px;
}

$(document).ready(function () {
if (document.getElementById(“ContentPlaceHolder1_HdnSelectedTab”).value == “”) {
$(‘#jqxTabs’).jqxTabs({ selectedItem: 0, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });
}
if (document.getElementById(“ContentPlaceHolder1_HdnSelectedTab”).value == “0”) {
$(‘#jqxTabs’).jqxTabs({ selectedItem: 0, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });
}
if (document.getElementById(“ContentPlaceHolder1_HdnSelectedTab”).value == “3”) {
$(‘#jqxTabs’).jqxTabs({ selectedItem: 3, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });
}
if (document.getElementById(“ContentPlaceHolder1_HdnSelectedTab”).value == “4”) {
$(‘#jqxTabs’).jqxTabs({ selectedItem: 4, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });
}
if (document.getElementById(“ContentPlaceHolder1_HdnSelectedTab”).value == “5”) {
$(‘#jqxTabs’).jqxTabs({ selectedItem: 5, height: 590, theme: ‘maroon’, selectionTracker: true, animationType: ‘fade’, keyboardNavigation: true });
}
$(‘#btnnextprofile’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnnextalter’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackalter’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnbacksocial’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextsocial’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘next’);
});
$(‘#btnbackphoto’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘previous’);
});
$(‘#btnnextphoto’).click(function () {
$(‘#jqxTabs’).jqxTabs(‘next’);
});
});

$(document).ready(function () {
var theme = getTheme();
// For Switch Buttons
$(‘#button1’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button2’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button3’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button4’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button5’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button6’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button7’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
$(‘#button8’).jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: ‘50%’ });
//For Switch Checked and Unchecked
$(“#button1”).bind(‘checked’, function (event) {
$(“#txtfbuname”).removeAttr(“disabled”);
});
$(“#button1”).bind(‘unchecked’, function (event) {
$(“#txtfbuname”).val(“”);
$(“#txtfbuname”).attr(“disabled”, “disabled”);
});
$(“#button2”).bind(‘checked’, function (event) {
$(“#txttwtuname”).removeAttr(“disabled”);
});
$(“#button2”).bind(‘unchecked’, function (event) {
$(“#txttwtuname”).val(“”);
$(“#txttwtuname”).attr(“disabled”, “disabled”);
});
$(“#button3”).bind(‘checked’, function (event) {
$(“#txtlinkeduname”).removeAttr(“disabled”);
});
$(“#button3”).bind(‘unchecked’, function (event) {
$(“#txtlinkeduname”).val(“”);
$(“#txtlinkeduname”).attr(“disabled”, “disabled”);
});
$(“#button4”).bind(‘checked’, function (event) {
$(“#txtgplusuname”).removeAttr(“disabled”);
});
$(“#button4”).bind(‘unchecked’, function (event) {
$(“#txtgplusuname”).val(“”);
$(“#txtgplusuname”).attr(“disabled”, “disabled”);
});
$(“#button5”).bind(‘checked’, function (event) {
$(“#txtdrpbxname”).removeAttr(“disabled”);
});
$(“#button5”).bind(‘unchecked’, function (event) {
$(“#txtdrpbxname”).val(“”);
$(“#txtdrpbxname”).attr(“disabled”, “disabled”);
});
$(“#button6”).bind(‘checked’, function (event) {
$(“#txtboxname”).removeAttr(“disabled”);
});
$(“#button6”).bind(‘unchecked’, function (event) {
$(“#txtboxname”).val(“”);
$(“#txtboxname”).attr(“disabled”, “disabled”);
});
$(“#button7”).bind(‘checked’, function (event) {
$(“#txtgdrivename”).removeAttr(“disabled”);
});
$(“#button7”).bind(‘unchecked’, function (event) {
$(“#txtgdrivename”).val(“”);
$(“#txtgdrivename”).attr(“disabled”, “disabled”);
});
$(“#button8”).bind(‘checked’, function (event) {
$(“#txtevrnotename”).removeAttr(“disabled”);
});
$(“#button8”).bind(‘unchecked’, function (event) {
$(“#txtevrnotename”).val(“”);
$(“#txtevrnotename”).attr(“disabled”, “disabled”);
});
});

function uploadComplete(sender, args) {
var filename = args.get_fileName();
$get(”).src = “./Images/ProfilePhotos/” + filename;
}

function abc() {
// $(“#flup”).click();
// var file = $(”).value;
// alert(file);
}

Profile
Alternate Contact
Social
Upload Photo

First Name:

Last Name:

E-mail:

Cell Phone:

Title:

Address:

Address2:

Country:

City:

State:

Zip:

Alternate E-mail:

Phone:

Primary Contact method:

< %—-%>

“right”

“button” value=”Next” class=”Post” id=”btnnextphoto”

“center”

“btnsubmit” Text=”Save” runat=”server” CssClass=”Post”

March 18, 2013 at 12:08 pm jqxSwitchbuttons not showing on/off properly in jqxtabs #17297

Narendra

Participant

<%@ Page Title="" Language="VB" MasterPageFile="~/AfterLogin.master" AutoEventWireup="false" CodeFile="UserProfile.aspx.vb" Inherits="UserProfile" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        .auto-style1 {
            width: 35px;
        }
        #gplusuname {
            height: 24px;
        }
        #linkeduname {
            height: 24px;
        }
        #twtuname {
            height: 25px;
        }
        #fbuname {
            height: 25px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:HiddenField ID="HdnSelectedTab" runat="server" />
    <asp:HiddenField ID="Hdnfname" runat="server" />
    <asp:HiddenField ID="Hdnlname" runat="server" />
    <asp:HiddenField ID="Hdnemail" runat="server" />
    <asp:HiddenField ID="Hdnalteremail" runat="server" />
    <asp:HiddenField ID="Hdncellphone" runat="server" />
    <asp:HiddenField ID="Hdnphone" runat="server" />
    <asp:HiddenField ID="Hdntitle" runat="server" />
    <asp:HiddenField ID="Hdnaddress" runat="server" />
    <asp:HiddenField ID="Hdnaddress2" runat="server" />
    <asp:HiddenField ID="Hdncountry" runat="server" />
    <asp:HiddenField ID="Hdncity" runat="server" />
    <asp:HiddenField ID="Hdnstate" runat="server" />
    <asp:HiddenField ID="Hdnzip" runat="server" />
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <script type="text/javascript">
        $(document).ready(function () {
            if (document.getElementById("ContentPlaceHolder1_HdnSelectedTab").value == "") {
                $('#jqxTabs').jqxTabs({ selectedItem: 0, height: 590, theme: 'maroon', selectionTracker: true, animationType: 'fade', keyboardNavigation: true });
            }
            if (document.getElementById("ContentPlaceHolder1_HdnSelectedTab").value == "0") {
                $('#jqxTabs').jqxTabs({ selectedItem: 0, height: 590, theme: 'maroon', selectionTracker: true, animationType: 'fade', keyboardNavigation: true });
            }
            if (document.getElementById("ContentPlaceHolder1_HdnSelectedTab").value == "3") {
                $('#jqxTabs').jqxTabs({ selectedItem: 3, height: 590, theme: 'maroon', selectionTracker: true, animationType: 'fade', keyboardNavigation: true });
            }
            if (document.getElementById("ContentPlaceHolder1_HdnSelectedTab").value == "4") {
                $('#jqxTabs').jqxTabs({ selectedItem: 4, height: 590, theme: 'maroon', selectionTracker: true, animationType: 'fade', keyboardNavigation: true });
            }
            if (document.getElementById("ContentPlaceHolder1_HdnSelectedTab").value == "5") {
                $('#jqxTabs').jqxTabs({ selectedItem: 5, height: 590, theme: 'maroon', selectionTracker: true, animationType: 'fade', keyboardNavigation: true });
            }
            $('#btnnextprofile').click(function () {
                $('#jqxTabs').jqxTabs('next');
            });
            $('#btnnextalter').click(function () {
                $('#jqxTabs').jqxTabs('next');
            });
            $('#btnbackalter').click(function () {
                $('#jqxTabs').jqxTabs('previous');
            });
            $('#btnbacksocial').click(function () {
                $('#jqxTabs').jqxTabs('previous');
            });
            $('#btnnextsocial').click(function () {
                $('#jqxTabs').jqxTabs('next');
            });
            $('#btnbackphoto').click(function () {
                $('#jqxTabs').jqxTabs('previous');
            });
            $('#btnnextphoto').click(function () {
                $('#jqxTabs').jqxTabs('next');
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                           "Primary E-mail",
                           "Alternate E-mail",
                           "SMS",
                           "Print",
                           "Social"
            ];
            // Create a jqxDropDownList
            $("#drpdwnpcmethod").jqxDropDownList({ source: source, width: '155px', height: '25px', });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // For Switch Buttons
            $('#button1').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button2').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button3').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button4').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button5').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button6').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button7').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            $('#button8').jqxSwitchButton({ height: 20, width: 81, theme: theme, checked: false, thumbSize: '50%' });
            //For Switch Checked and Unchecked
            $("#button1").bind('checked', function (event) {
                $("#txtfbuname").removeAttr("disabled");
            });
            $("#button1").bind('unchecked', function (event) {
                $("#txtfbuname").val("");
                $("#txtfbuname").attr("disabled", "disabled");
            });
            $("#button2").bind('checked', function (event) {
                $("#txttwtuname").removeAttr("disabled");
            });
            $("#button2").bind('unchecked', function (event) {
                $("#txttwtuname").val("");
                $("#txttwtuname").attr("disabled", "disabled");
            });
            $("#button3").bind('checked', function (event) {
                $("#txtlinkeduname").removeAttr("disabled");
            });
            $("#button3").bind('unchecked', function (event) {
                $("#txtlinkeduname").val("");
                $("#txtlinkeduname").attr("disabled", "disabled");
            });
            $("#button4").bind('checked', function (event) {
                $("#txtgplusuname").removeAttr("disabled");
            });
            $("#button4").bind('unchecked', function (event) {
                $("#txtgplusuname").val("");
                $("#txtgplusuname").attr("disabled", "disabled");
            });
            $("#button5").bind('checked', function (event) {
                $("#txtdrpbxname").removeAttr("disabled");
            });
            $("#button5").bind('unchecked', function (event) {
                $("#txtdrpbxname").val("");
                $("#txtdrpbxname").attr("disabled", "disabled");
            });
            $("#button6").bind('checked', function (event) {
                $("#txtboxname").removeAttr("disabled");
            });
            $("#button6").bind('unchecked', function (event) {
                $("#txtboxname").val("");
                $("#txtboxname").attr("disabled", "disabled");
            });
            $("#button7").bind('checked', function (event) {
                $("#txtgdrivename").removeAttr("disabled");
            });
            $("#button7").bind('unchecked', function (event) {
                $("#txtgdrivename").val("");
                $("#txtgdrivename").attr("disabled", "disabled");
            });
            $("#button8").bind('checked', function (event) {
                $("#txtevrnotename").removeAttr("disabled");
            });
            $("#button8").bind('unchecked', function (event) {
                $("#txtevrnotename").val("");
                $("#txtevrnotename").attr("disabled", "disabled");
            });
        });
    </script>
    <script type="text/javascript">
        function uploadComplete(sender, args) {
            var filename = args.get_fileName();
            $get('<%=imgprofile.ClientID%>').src = "./Images/ProfilePhotos/" + filename;
        }
    </script>
    <script type="text/javascript">
        function abc() {
            //  $("#flup").click();
            // var file = $('<%=imgUpload.ClientID%>').value;
            //    alert(file);
        }
    </script>
    <div id='jqxWidget' style="margin-left: 6px;" align="justify">
        <div id='jqxTabs' style="margin-left: 90px; margin-right: 100px; height: 1360px;">
            <ul>
                <li>Profile</li>
                <li>Alternate Contact</li>
                <li>Social</li>
                <li>Upload Photo</li>
            </ul>
            <br />
            <br />
            <div class="corner" style="margin-left: 200px; display: block; height: 477px; width: 406px; padding-top: 0px; padding-left: 7px;">
                <table align="center">
                    <tr>
                        <td align="center" class="tabhead">
                            <asp:Label ID="lblprofile" runat="server" Text="User Information"></asp:Label></td>
                    </tr>
                </table>
                <br />
                <br />
                <table style="padding-left: 40px;">
                    <tr>
                        <td>First Name:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtfname' />
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtlname' />
                        </td>
                    </tr>
                    <tr>
                        <td>E-mail:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtemail' />
                        </td>
                    </tr>
                    <tr>
                        <td>Cell Phone:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtcellphone' />
                        </td>
                    </tr>
                    <tr>
                        <td>Title:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txttitle' />
                        </td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtaddress' />
                        </td>
                    </tr>
                    <tr>
                        <td>Address2:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtaddress2' />
                        </td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtcountry' />
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtcity' />
                        </td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtstate' />
                        </td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtzip' />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="auto-style1"></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="3">
                            <div style="padding-left: 50px">
                                <input type="button" value="Next" class="Post" id="btnnextprofile" />
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="corner" style="margin-left: 200px; display: block; height: 257px; width: 406px; padding-top: 0px; padding-left: 7px;">
                <table align="center">
                    <tr>
                        <td align="center" class="tabhead">
                            <asp:Label ID="lblalter" runat="server" Text="Alternate Contact"></asp:Label></td>
                    </tr>
                </table>
                <br />
                <br />
                <table style="padding-left: 40px;">
                    <tr>
                        <td>Alternate E-mail:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtalteremail' />
                        </td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <input type="text" id='txtphone' />
                        </td>
                    </tr>
                    <tr>
                        <td>Primary Contact method:</td>
                        <td class="auto-style1"></td>
                        <td>
                            <div id="drpdwnpcmethod"></div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="left">
                            <input type="button" value="Back" class="Post" id="btnbackalter" />
                        </td>
                        <td class="auto-style1"></td>
                        <td align="right">
                            <input type="button" value="Next" class="Post" id="btnnextalter" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="margin-left: 200px; display: block; height: 369px; width: 381px; padding-top: 0px; padding-left: 7px;" class="corner">
                <table align="center" class="tabhead">
                    <tr>
                        <td>
                            <asp:Label ID="lblsocial" runat="server" Text="Social"></asp:Label></td>
                    </tr>
                </table>
                <br />
                <table style="padding-left: 40px;" class="networktab">
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/facebook_icon.png" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button1" height="25px" width="25px"></div>
                        </td>
                        <td>
                            <input type="text" id="txtfbuname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/twitter-icon.png" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button2"></div>
                        </td>
                        <td>
                            <input type="text" id="txttwtuname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/LinkedIn_logo.png" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button3"></div>
                        </td>
                        <td>
                            <input type="text" id="txtlinkeduname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/newgplusicon.png" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button4"></div>
                        </td>
                        <td>
                            <input type="text" id="txtgplusuname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/drpbx.jpg" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button5"></div>
                        </td>
                        <td>
                            <input type="text" id="txtdrpbxname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/box.jpg" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button6"></div>
                        </td>
                        <td>
                            <input type="text" id="txtboxname" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/gdrive.jpg" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button7"></div>
                        </td>
                        <td>
                            <input type="text" id="txtgdrivename" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/Welcome/Connections/evrnote.jpg" class="networkimg" /></td>
                        <td class="networkbuttontd">
                            <div id="button8"></div>
                        </td>
                        <td>
                            <input type="text" id="txtevrnotename" disabled="disabled" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="left">
                            <input type="button" value="Back" class="Post" id="btnbacksocial" />
                        </td>
                        <td class="auto-style1"></td>
                        <td align="right">
                            <input type="button" value="Next" class="Post" id="btnnextsocial" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="margin-left: 270px; display: block; height: 341px; width: 300px; padding-top: 0px; padding-left: 7px;" class="corner">
                <table align="center" class="tabhead">
                    <tr>
                        <td>
                            <asp:Label ID="lblphoto" runat="server" Text="Upload Photo"></asp:Label></td>
                    </tr>
                </table>
                <br />
                <table style="padding-top: 10px;" class="networktab" align="center">
                    <tr>
                        <td align="center" colspan="3">
                            <asp:Image runat="server" ID="imgprofile" src="Images/ProfilePhotos/profile1.jpg" Width="105" Height="143" /></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">
                            <input type="file" id="flup" style="visibility: hidden; position: absolute" />
                            <asp:AsyncFileUpload ID="imgupload" runat="server" OnClientUploadComplete="uploadComplete" CompleteBackColor=""
                                Height="16px" Width="107px" OnUploadedComplete="imgUpload_UploadedComplete" UploaderStyle="Modern" BorderStyle="None" BackColor="White" BorderColor="White" />
                            <%--<input type="button" id="btnupload" value="Upload Photo" class="Post" width="116px" height="26px" onclick="abc()"/></td>--%>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="left">
                            <input type="button" value="Back" class="Post" id="btnbackphoto" />
                        </td>
                        <td class="auto-style1"></td>
                        <td align="right">
                            <input type="button" value="Next" class="Post" id="btnnextphoto" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <br />
        <div align="center">
            <asp:Button ID="btnsubmit" Text="Save" runat="server" CssClass="Post" />
        </div>
    </div>
</asp:Content>

March 18, 2013 at 12:32 pm jqxSwitchbuttons not showing on/off properly in jqxtabs #17300

Dimitar

Participant

Hi narendra.pvnb,

Please note that widgets in jqxTabs should be implemented with initTabContent as shown in the example we provided you. Also note that there should be only one $(document).ready function present.

Best Regards,
Dimitar

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

March 18, 2013 at 12:59 pm jqxSwitchbuttons not showing on/off properly in jqxtabs #17306

Narendra

Participant

Thank you……….!

It’s working………..

March 18, 2013 at 2:16 pm jqxSwitchbuttons not showing on/off properly in jqxtabs #17313

Narendra

Participant

Hi Sir,

The above issue was again raising, if i refresh the page then it will show properly, If i go to next tab and then i came back to this tab then these jqxswitchbuttons in jqxtabs are again hiding and displaying half part only……

Plz help me………

Thanks in advance…….

March 19, 2013 at 9:43 am jqxSwitchbuttons not showing on/off properly in jqxtabs #17427

Dimitar

Participant

Hi narendra.pvnb,

Have you implemented the initTabContent callback function?

Best Regards,
Dimitar

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

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.