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>