Input control used to display and change font-family does not work with multiple javascript

Donald Symmons 2,856 Reputation points
2023-03-25T13:21:23.1466667+00:00

I have controls that can be used to change font-family and colors of label controls. The input control is for changing font-family while the AjaxControlToolkit ColorPickerExtender is used to change labels color. At the top of my HTML page, I registered the AjaxControlToolkit with this:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

The issue I am having is that the input for changing the font-family only works when I have less javascript codes. But when I add javascript code that control my sidebar navigation toggle, the font-family input stops working. I tried to apply noConflict rule but it still did not work.

This HTML and Javascript does not contain Javascript that controls my sidebar navigation toggle and the font-family input works here.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="stylesheet" href="style.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap');
        @import url('https://fonts.cdnfonts.com/css/graphik?styles=44660,44666,44654,44656,44658,44662,44652,44650,44664');
 
        .wrapper { display: flex; width: 100%; align-items: stretch; }
 
        #sidebar { min-width: 200px; max-width: 200px; min-height: 100vh; top: 0; left: 0; z-index: 999; background-color: #0b2436; color: #fff; transition: all 0.3s; font-family: 'Graphik', sans-serif; }
 
        @media screen and (min-width: 1200px) {
            #content { width: 100%; }
        }
 
        @media screen and (min-width: 360px) and (max-width:640px) {
            #content { width: 100%; }
        }
 
 
        #sidebar.active { margin-left: -200px; }
 
        a[data-toggle="collapse"] { position: relative; background-color: #0b2436; }
 
        .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
 
        @media (max-width: 768px) {
            #sidebar { margin-left: -200px; }
 
                #sidebar.active { margin-left: 0; }
        }
 
        p { font-family: 'Graphik', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; }
 
        a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; }
 
        #sidebar { /* don't forget to add all the previously mentioned styles here too */ background-color: #0b2436; color: #fff; transition: all 0.3s; }
 
        #topbar { background-color: #0b2436; }
 
        #sidebar .sidebar-header { background: #0b2436; font-family: 'Graphik', sans-serif; margin: 0 auto; padding: 5px; border-bottom: 0.3px solid #404344; }
 
        #sidebar ul.components { padding: 10px 0; }
 
        #sidebar ul p { color: #fff; padding: 10px; font-size: medium; }
 
        #sub-head:hover { color: #05214d; }
 
        #navbarSupportedContent li a { color: #eeeeee; font-family: 'Graphik', sans-serif; }
 
        #sidebar ul li a { padding: 10px; display: block; font-size: 10pt; font-family: 'Graphik', sans-serif; }
 
            #sidebar ul li a:hover { color: #eeeeee; background-color: rgba(44, 62, 80, 0.3); }
 
        #sidebar ul li.active > a, a[aria-expanded="true"] { color: #31b8ef; background-color: rgba(44, 62, 80, 0.3); }
 
        ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #0b2436; font-family: 'Graphik', sans-serif; }
 
        #sidebarCollapse { background-color: transparent; color: #0b2436; font-size: 10pt; width: 28px; height: 28px; border: none; }
 
        #sideCollapse { background-color: transparent; color: #0b2436; font-size: 10pt; width: 30px; height: 30px; border: none; }
 
        .navbar navbar-expand-lg { background-color: #0b2436; }
 
        #lblright { float: right; position: center; right: 5px; }
 
        hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
 
        #orgName { font-weight: 800; font-family: 'Mulish', sans-serif; font-size: 17pt; color: #0b2436; }
 
        #title { font-weight: 900; font-family: 'Mulish', sans-serif; font-size: 15pt; color: #0b2436; }
 
        #TextName { text-transform: capitalize; }
 
        #permitID { font-weight: 600; color: #616161; font-size: 20pt; }
 
        #infolbl { font-size: 3pt; font-weight: 300; }
 
        #headcolor { font-size: 3pt; font-weight: 300; }
 
        .fs-drop-op { opacity: 0; }

        #PermitPrint { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px;}
    </style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
        <nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
                <ul class="list-unstyled sidebar-header" style="padding: 10px; margin: 0 auto; margin-top: 2%;">
                    <li style="margin: 0 7px;">
                        <asp:Label runat="server" ID="id" Font-Size="9pt" ForeColor="#546579" Font-Bold="true" Text="ID"></asp:Label>
                    </li>
                    <li style="margin: 0 7px;">
                        <asp:Label ID="named" runat="server" Font-Size="10pt" Text="NAME" ForeColor="White"></asp:Label>
                    </li>
                </ul>
                <ul class="nav navbar-nav list-unstyled components">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Page 2</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Page 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Page 4</a>
                    </li>
                </ul>
                <ul class="list-unstyled components">
                    <li class="nav-item"><a href="#">Page 5</a>
                    </li>
                </ul>
            </nav>
        <div id="content" style="font-size: 10pt; width: 100%;">
                <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4; background-color: #fff;">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-bars"></i>
                            <span class="sr-only">Toggle Navigation</span>
                        </button>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
                                    <asp:Label ID="user" runat="server" Font-Size="10pt" Text="Login Username" ForeColor="#0b2436"></asp:Label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <asp:UpdatePanel ID="UpdatePane1" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
                            <div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
                                <asp:Panel ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
                                    <div class="card1" runat="server" id="permit" style="width: 100%; margin: 0 auto; padding: 6px; border-radius: 6px; border: 1px solid #dde0e2;">
                                    <div class="row" style="width: 100%;">
                                        <div class="col-2">
                                            <asp:Image ID="Image2" ImageUrl="~/images/resources/linkedin.png" AlternateText="logo" runat="server" Width="35" Height="35" />
                                        </div>
                                        <div class="col-8">
                                            <span style="float: inline-start;">
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label7" runat="server" Text="Emerald Concepts"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="title" runat="server" Text="JAZZ MUSICAL FESTIVAL"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label8" runat="server" Text="Emerald Event Center, 75 Mayne Avenue, Calabar"></asp:Label>
                                                </div>
                                            </span>
                                        </div>
                                        <hr style="margin-top: 3px;" />
                                    </div>
                                    <div class="eventdetail" runat="server" id="eventdetail" style="display: block; margin: 0 auto; margin-top: 5%;">
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label4" runat="server" Text="Access Level"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label5" runat="server" Text="Date"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label6" runat="server" Text="Time"></asp:Label>
                                            </div>
                                        </div>
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label11" runat="server" Text="Regular"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label13" runat="server" Text="May 14, 2023"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label15" runat="server" Text="6:30 PM"></asp:Label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 5%; margin-bottom: -1%;">
                                        <div class="col-sm-10">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <asp:Label ID="Label2" runat="server" Text="Richard Williams"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="width: 100%; margin: 0 auto;">
                                            <div class="col-sm-5">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <asp:Label ID="phonelbl" runat="server" Text="08032454324"></asp:Label>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="float: left; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Label ID="permitID" runat="server" Text="08770"></asp:Label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-7">
                                                <div class="form-group" style="float: right; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <div class="card" style="width: 100%; background-color: #f2f8fb; border: 0.1px solid #dde0e2;">
                                    </div>
                                </div>
                                </asp:Panel>
                            </div>

                            <div class="col-sm-4" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
                                <div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
                                    <div style="margin-top: 1%; margin-bottom: 4%;">
                                        <label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
                                    </div>
                                    <asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                            PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="Label3" runat="server">Background Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                                            PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="BackChangedColor" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                                    <div class="input-group">
                                        <input type="text" class="fonts" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                    </Triggers>
                </asp:UpdatePanel>
                <br />
                <div style="margin: 0 auto; padding: 10px;">
                    <asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print" OnClientClick="return PrintPanel();" />
                </div>
            </div>
            </div>
    </form>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
   <script type="text/javascript">
       //This is the javascript for changing label font family.
       $(document).ready(function () {
           function selectFontAndApplyToEle(fontName, callback) {
               $('div.font-select').find('.fs-results li').removeClass('active');
               var dropEle = $('div.font-select').find('.fs-drop');
               var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
               dropEle.addClass('fs-drop-op');
               var posFont = fontToSelect.offset().top
               var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
               $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
               fontToSelect.addClass('active').trigger('click');
               setTimeout(function () {
                   $('div.font-select a div').trigger('click');
                   dropEle.removeClass('fs-drop-op');
                   callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
               }, 500);
           }
           $(function () {
               $('input.fonts').fontselect({
                   style: 'font-select',
                   placeholder: 'Select a font',
                   lookahead: 2
               }).on('change', function (e) {
                   var fontFamily = $(this).val().replace(/\+/g, ' ');
                   $('.card1').css('font-family', fontFamily);
               });
               selectFontAndApplyToEle('Anton', function (fontFamily) {
                   $('.card1').css('font-family', fontFamily);
                   setTimeout(function () {
                       selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                           $('.card1').css('font-family', fontFamily);
                       });
                   }, 1000);
               });
           });
       });

        //This is where label colors can be changed, both for all labels and one label.
       function ColorChanged(sender) {
           document.getElementById("title").style.color = "#" + sender.get_selectedColor();
       }
       function BackChangedColor(sender) {
               document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
           }
   </script>
</body>
</html>

Here, I have added the Javascript that controls my sidebar navigation toggle. The input for font-family does not work here but the sidebar toggle works.

NOTE: I am using the same HTML but added the javascript for sidebar toggle navigation

 <script type="text/javascript">
        var $ = $.noConflict(true);
    </script>
    <script type="text/javascript">
        //This is the javascript for changing label font family.
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }
            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('.card1').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('.card1').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('.card1').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });

        //This is where label colors can be changed, both for all labels and one label.
        function ColorChanged(sender) {
            document.getElementById("title").style.color = "#" + sender.get_selectedColor();
        }
            function ChangedAllColor(sender) {
                document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
            }
    </script>
    <script type="text/javascript">
        var $j = $.noConflict(true);
    </script>
    <script type="text/javascript">
        //This is where my sidebar navigation can be toggled when in mobile view.
        //It's omission in the first javascript I posted made the input for font family to work, but adding it now, the font-family does not display in the drop-down input
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    </script>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,357 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,249 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
865 questions
0 comments
Accepted answer
  1. Lan Huang-MSFT 25,471 Reputation points Microsoft Vendor
    2023-03-27T07:44:56.1166667+00:00

    Hi @Donald Symmons,

    First of all, you don't need to use var $ = $.noConflict(true);, I tested that it doesn't work, it should be that the jquery.mCustomScrollbar.concat library call location is incorrect.

    Place the jquery.mCustomScrollbar.concat library before calling the $("").mCustomScrollbar method. 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript">
        //This is where my sidebar navigation can be toggled when in mobile view.
        //It's omission in the first javascript I posted made the input for font family to work, but adding it now, the font-family does not display in the drop-down input
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });
        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    </script>

    ALL CODE

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script> 
    <script type="text/javascript">
        //This is the javascript for changing label font family.
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }
            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('.card1').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('.card1').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('.card1').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });

        //This is where label colors can be changed, both for all labels and one label.
        function ColorChanged(sender) {
            document.getElementById("title").style.color = "#" + sender.get_selectedColor();
        }
        function ChangedAllColor(sender) {
            document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
        }
    </script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript">
        //This is where my sidebar navigation can be toggled when in mobile view.
        //It's omission in the first javascript I posted made the input for font family to work, but adding it now, the font-family does not display in the drop-down input
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    </script>

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest