I was trying to add placeholder in <p> tag, I tried the following way but dint work out.
I need a placeholder in the <p> tag, it should be replaced with the value in input text.
JS fiddle Link
$( "#incharge" )
.keyup(function() {
var value = $( this ).val();
$( "p#incharge" ).text( value );
})
.keyup();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="incharge" placeholder="Some Placeholder text comes here"></p>
You can fake some kind of placeholder with :empty, :focus and pseudo-elements:
p:empty:not(:focus)::before {
content: attr(data-placeholder);
}
<p data-placeholder="Insert text here..." contenteditable></p>
You can't use placeholders out of inputs. To put a text in a paragraph, simple text:
<p id="incharge">Some Placeholder text comes here</p>
So the snippet looks like this
$( "#incharge" )
.keyup(function() {
var value = $( this ).val();
$( "p#incharge" ).text( value );
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="incharge">Some Placeholder text comes here</p>
You can only use the placeholder attribute for input elements.
You can, however, (1) get the value the value of the placeholder attribute whenever the content is empty and (2) add that value to your paragraph instead of the content of the input element. If I interpret your question correctly, that is what you're trying to do.
You could achieve that effect by using the following code :
$( "#i-incharge" )
.keyup(function() {
var input = $( this ),
output = $( 'p#p-incharge' ),
inputvalue = input.val();
if(inputvalue === '') {
inputvalue = input.attr( 'placeholder' );
}
output.text( inputvalue );
})
.keyup();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="i-incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="p-incharge"></p>
Related
I have developed this website.
Website link
If you click on the tabs above. It shows the website without styles for a microsecond and then renders. I tried everything and removed all the errors and warnings from console but still it happens. It should not do that because it gives very negative looks if the internet is slow then it might be there for a while.
layout/Master page's code:
Update:
New ordering of JS, css files i.e. I put Now jquery first then bootstrap and then other plugins. I put Css in the start of page and scripts after rendering the body. Kindly check.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-W9FNBLV');</script>
<!-- End Google Tag Manager -->
<!-- -->
<!-- Document Title-->
<!-- =============================================-->
<!--<title>Velosi | Asset Integrity Ltd.</title>-->
<title>#ViewBag.Title</title>
#RenderSection("head", false)
<!-- -->
<!-- JavaScripts-->
<!-- =============================================-->
#*<script src="~/Scripts/modernizr-2.8.3.js"></script>*#
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet" />
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
#*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*#
<link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
<!-- Template specific stylesheets-->
<link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="~/Content/Theme/css/style.css" rel="stylesheet">
<link href="~/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
#RenderSection("scripts", required: false)
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="~/Content/Theme/lib/CustomEase.min.js"></script>
<script src="~/Content/Theme/js/config.js"></script>
<script src="~/Content/Theme/js/zanimation.js"></script>
<script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="~/Content/Theme/js/core.js"></script>
<script src="~/Content/Theme/js/main.js"></script>
<script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
<!-- DataTable -->
<script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="~/Content/Theme/Toaster/toastr.js"></script>
<!-- Favicons-->
<!-- =============================================-->
</head>
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FNBLV"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<main>
<div class="loading" id="preloader">
<div class="loader h-100 d-flex align-items-center justify-content-center">
<div class="line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
#Html.Partial("_Header")
#*<button class="btn btn-md btn-round btnEmailUs RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>*#
<div style="display: flex; justify-content: flex-end;" class="m-2">
<button class="right btn btn-md btn-round btnEmailUs1 RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>
</div>
<div id='slider' class="card text-white bg-dark EnquiryLowerBody" style="max-width: 20rem; display:none;">
<div class="card-header header-callback">Request Callback</div>
#using (Html.BeginForm("EnquiryForm", "Home", null, FormMethod.Post, new { #class = "mt-3" }))
{
<div class="card-body CardBody">
<div class="form-group">
<div class="col-md-12">
<input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[0-9]/, '');" class="form-control" placeholder="Your name" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id=" mobileno" name="mobileno" class="form-control" placeholder="00971 XX XXXXXXX" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="email" id="email" name="email" class="form-control" placeholder="name#domain.com" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
<option selected value="m-None">-Select-</option>
<option value="m-SS">Software Services</option>
<option value="m-AIMS">Asset Integrity Management Services</option>
<option value="m-HSE">HSE & Environmental Services</option>
<option value="m-ES">Engineering Services</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div id="divSubServices" class="form-group">
<div class="col-md-12">
<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">
<option class="" selected value="s-None">-Select-</option>
<option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
<option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
<option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
<option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
<option class="AIMS" value="s-RBI">Risk Based Inspection (RBI)</option>
<option class="AIMS" value="s-RCM">Reliability Centered Maintenance(RCM)</option>
<option class="AIMS" value="s-SIL">Safety Integrity Level (SIL)</option>
<option class="AIMS" value="s-PIMS">Pipeline Inspection Management System (Onshore & Offshore)</option>
<option class="HSE" value="s-HSECES">Health, Safety & Environmental Critical Equipment Systems (HSECES)</option>
<option class="HSE" value="s-AM">Risk Assessment & Management</option>
<option class="HSE" value="s-OH">Occupational Health</option>
<option class="HSE" value="s-EMP">Emergency Management & Planning</option>
<option class="HSE" value="s-HS">HSEIA Studies</option>
<option class="HSE" value="s-ES">Environmental Services</option>
<option class="EngineeringServices" value="s-FFS">Fitness for Services(FFS)</option>
<option class="EngineeringServices" value="s-CDFDECS">Conceptual Design, FEED, Detailed Design and Engineering Consultancy Services</option>
<option class="EngineeringServices" value="s-OMP">Operating Manuals & Procedures</option>
<option class="EngineeringServices" value="s-DVA">Design Verification & Appraisal</option>
<option class="EngineeringServices" value="s-ABDS">As-Built Drafting Services</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div id="divDescription" class="form-group">
<div class="col-md-12">
<input type="text" id="Description" name="Description" class="form-control" placeholder="Description">
</div>
</div>
<div id="divDescription" class="form-group">
<div class="col-md-12">
<button id="btnSubmit" class="btn btn-primary BtnSubmitEnquiry">Submit</button>
</div>
</div>
</div>
}
</div>
#RenderBody()
<div id="cookieConsent">
<div id="closeCookieConsent">x</div>
We use tools, such as cookies, to enable essential services and functionality on our site and to collect data on how visitors interact with our site, products and services. <a class="cookieConsentOK">Got it</a>
</div>
#Html.Partial("_Footer")
</main>
<!-- -->
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#divDescription").hide();
$("#divSubServices").hide();
if (!localStorage.getItem('firstVisit')) {
localStorage.setItem('firstVisit', 'true');
setTimeout(function () {
$("#cookieConsent").fadeIn(200);
}, 4000);
$("#closeCookieConsent, .cookieConsentOK").click(function () {
$("#cookieConsent").fadeOut(200);
});
}
});
window.addEventListener('mousewheel', function (e) {
e.preventDefault();
}, { passive: false });
$("#trigger").click(
function()
{
$("#slider").show();
}
);
$("#slider").slideReveal({
trigger: $("#trigger"),
position: "right",
push: false,
overlay: true
});
$("#MainServices").change(function () {
var OptionSelected = $(this).find("option:selected");
var ValueSelected = OptionSelected.val();
if (ValueSelected == "Other") {
$("#SubServices").val("s-None");
$('#divSubServices').hide();
$('#divDescription').show();
}
else {
$('#divSubServices').show();
$('#divDescription').hide();
}
//Software Services
if (ValueSelected == "m-None") {
$("#SubServices").val("s-None");
$('#divSubServices').hide();
return;
}
if (ValueSelected == "s-None") {
$('#divDescription').hide();
return;
}
if (ValueSelected == "m-SS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').show();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//AIMS
if (ValueSelected == "m-AIMS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').show();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//HSE
if (ValueSelected == "m-HSE") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').show();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//Engineering Services
if (ValueSelected == "m-ES") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').show();
return;
}
});
$("#SubServices").change(function () {
var OptionSelected = $(this).find("option:selected");
var ValueSelected = OptionSelected.val();
if (ValueSelected == "Other") {
$('#divDescription').show();
}
else {
$('#divDescription').hide();
}
});
$("#btnSubmit").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var mobileno = $("#mobileno").val();
var MainServiceName = $("#MainServices").find(":selected").text();
var SubServiceName = $("#SubServices").find(":selected").text();
var Description = $("#Description").val();
var EnquiryForm = {
'name': name,
'email': email,
'mobileno': mobileno,
'MainServiceName': MainServiceName,
'SubServiceName': SubServiceName,
'Description': Description
}
//alert(EnquiryFormViewModel.name);
#*$.post("/Home/EnquiryForm", EnquiryForm, function(returnedData) {
//alert(returnedData.data);
window.location.href= '#Url.Action("Thankyou", "Others", new {message= "Thank you for contacting us. We'll get back to you soon." })';
});*#
});
</script>
Put all the link tags which are loading style sheets before script tag which are loading javascript file.
In fact you should take js file out of head and put it near closing end of body tag
This is the challenge when you create a page that has a fairly large set of added elements. Most often this is NOT an issue but ALL that needs to be parsed and processed as part of your page load. Start by fixing "basic" things, see how that goes and move to the next set of "things" that negatively impact load performance.
Let' start with some specific issues demonstrated here then move to some general.
NEVER EVER EVER put tags such AS SCRIPT or anything else outside the HTML document - you force the browsers to put/move it inside the body when doing so. Most browsers do something with this INVALID HTML but why not make valid HTML to start with.
Put CSS BEFORE script tags
Put CSS ordered by "library" first - you included a library for a reason, not the cascade sequence IS important - doing this may even make your OWN CSS simpler due to that "cascade" - think of this as a downhill slope with your stuff at the bottom of the hill. (jQuery, then bootstrap, then plugins, then yours etc)
Put JavaScript library code before YOUR code - try to put it ALL in the page bottom if at all possible, especially YOUR code.
General comments:
EVERY time you do something like drpSubServices.children(someselector').hide(); you hit the DOM, This is likely only PART of the issue but it definitely will contribute.
Typically, JavaScript libraries have ways to create "consolidated" bundles for things that go together - try to include those as one item instead of multiple .js files
Remove commented out code in JavaScript - that is what source control is for, do not force the browser to parse garbage out during the rendering process. Blanks lines to me also fall into this category.
Consider creating minimized versions of JavaScript code during the build process or BEFORE that.
"Modularize" your code - it appears you are using MVC so create partial views of stuff and include those only when/if you need it. Putting ALL the CSS and JavaScript on every page adds negative impact to pages where it is NOT used. (see the .min note in that case - even MORE important for re-used content)
Format better - do you REALLY need 6 blank lines in HTML? NO. - not likely a huge issue but WHY? (browser is forced to parse unneeded stuff)
IF it helps YOU to include blank lines, perhaps create a partial view? (modular code?) (more to help you, not the browser here)
don't use comments such as <!-- --> that are parsed consider "un-rendered" comments for example you ARE using MVC here, use those MVC comments instead How to write a comment in a Razor view?
HOW to consolidate DOM hits: (may not be specific to load but IF the event triggers it IS)
Hit the DOM once, not many times:
Cache the item: Here you DID but reverse those lines do NOT hit DOM twice:
$("#SubServices").show();
var drpSubServices = $('#SubServices');
new:
var drpSubServices = $('#SubServices');
drpSubServices.show();
DO STUFF ONCE not multiple
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
... more code like that
Better: (not all, just hit it ONE time), couple ways to do this
drpSubServices.children('option[class=HSE]').hide();// NOT a fast selector
drpSubServices.children('.HSE').hide();//faster selector but...still
Hit the DOM ONE time:
let options = drpSubServices.children('option');
options
.filter('.HSE,.AIMS,.EngineeringServices,.TPIs,.IIS,.NDTCM')
.hide();
options.filter('.SoftwareServices').show();
//OR better, just hide all and show the one
let options = drpSubServices.children('option');
options.hide();
options.filter('.SoftwareServices').show();
DO NOT keep re-creating an object:
if (ValueSelected == "m-SS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
Do it once
let drpSubServices = $('#SubServices');
//NOW all the conditionals
if (ValueSelected == "m-SS") {
drpSubServices.show();
Expose stuff LAST
let drpSubServices = $('#SubServices');
if (ValueSelected == "m-SS") {
let options =
//... (see above for that)
// THEN show it
drpSubServices.show();
Another example:
$("#divDescription")
.add("#divSubServices")
.hide();
OR consider a class like ".hidden{display:none;}on an element initially
I do not show`
Then when you need it toggle that class
$("#divDescription").toggleClass('hidden',conditional);
//or
$("#divDescription").toggleClass('hidden',false);
//or
$("#divDescription").removeClass('hidden');
I'm trying to use Bootstrap Colorpicker to control the color of text from an input field. I want the add-on field attached to an input field but not the default associated hex input box.
Specifically, I have a text input field for Title and I want an add-on Colorpicker box next to the field that will govern its color (as displayed elsewhere). I can't figure out how to just use the Colorpicker add-on box without the standard hex input field.
How do I properly code an add-on for an unrelated input field and still retain the value in JS for use elsewhere?
Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Style -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group">
<input type="text" class="form-control" name="title" id="title">
<!-- PROBLEM HERE: Doesn't show color box (and value doesn't seem to change) -->
<span id="cp1" class="input-group-addon colorpicker-component" value="#00AABB"><i></i></span>
</div>
</div>
</form>
</div>
</body>
JS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/js/bootstrap-colorpicker.js
<script type="text/javascript">
$('#cp1').colorpicker();
</script>
CSS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/css/bootstrap-colorpicker.css`
You want to apply the selected color DIRECTLY on the input field content.
(which contains user's text for a "title", not an hex color number).
Okay... But BootStrap's colorPicker actually uses the input field to select a color using the keyboard.
So we have to "hack it" a little...
The good thing is that we can unbind the input's keyup event from colorPicker.
We'll then have to ensure the user's text will remain on colorPicker's changeColor event... And get the color number directly from the API (using .data('colorpicker')) to apply it to the user's text.
So here is the code as you wished it to act: (Run the snippet)
$(function() {
// Initiate the colorpicker
$("#cp").colorpicker();
// Unbind the keyup event from the input (which normally changes the color.)
$("#title").off("keyup");
// Define a variable for the user's text at global scope.
var titleText;
// Get the text value inputed by the user as soon as the colorPicker is accessed.
$('#cp-icon').on("mousedown",function(){
titleText = $("#cp>input").val();
//console.log( titleText );
});
// On color selection, affect the input's text with it.
$("#cp").on("changeColor",function(){
//console.log("change event");
var colorPicked = $('#cp').data('colorpicker').input[0].value;
$("#title").val(titleText).css("color",colorPicked);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group" id="cp">
<input type="text" class="form-control" name="title" id="title">
<span class="input-group-addon colorpicker-component"><i id="cp-icon"></i></span>
</div>
</div>
</form>
</div>
</body>
Same on CodePen.
You should match the color inside input tag, not inside span
HTML:
<div class="input-group colorpicker-component ">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"></span>
</div>
JS:
$('.colorpicker-component').colorpicker();
I keep getting the following error when I try to create a Grid or a Chart using Kendo UI. A simple ComboBox will work, though. We are using the commercial lisence and downloaded the js and css from Telerik's website while authenticated.
Uncaught ReferenceError: kendo is not defined
Uncaught ReferenceError: $ is not defined
Config: _Layout.cshtml
<head>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
_ViewImports.cshtml
#using Microsoft.AspNetCore.Identity
#using Kendo.Mvc.UI
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
View.cshtml
<div class="invoice-charts-container">
<h3>Invoice History Week Totals</h3>
<div class="demo-section k-content wide">
#(Html.Kendo().Chart()
.Name("chart")
.HtmlAttributes(new { style = "height: 400px;" })
.Title("Site Visitors Stats /thousands/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Stack(true)
)
.Series(series =>
{
series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
<div class="box wide">
<div class="box-col">
<h4>API Functions</h4>
<ul class="options">
<li>
<input id="typeColumn" name="seriesType"
type="radio" value="column" checked="checked" autocomplete="off" />
<label for="typeColumn">Columns</label>
</li>
<li>
<input id="typeBar" name="seriesType"
type="radio" value="bar" autocomplete="off" />
<label for="typeBar">Bars</label>
</li>
<li>
<input id="typeLine" name="seriesType"
type="radio" value="line" autocomplete="off" />
<label for="typeLine">Lines</label>
</li>
<li>
<input id="stack" type="checkbox" autocomplete="off" checked="checked" />
<label for="stack">Stacked</label>
</li>
</ul>
<p>
<strong>refresh()</strong> will be called on each configuration change
</p>
</div>
</div>
<script>
$(document).ready(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
type = $("input[name=seriesType]:checked").val(),
stack = $("#stack").prop("checked");
for (var i = 0, length = series.length; i < length; i++) {
series[i].stack = stack;
series[i].type = type;
};
chart.refresh();
}
function updateTheme() {
$("#chart").getKendoChart().setOptions({ theme: kendoTheme });
}
</script>
</div>
Here is where the error occurs in the DOM:`
Uncaught ReferenceError: kendo is not defined
<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(
Uncaught ReferenceError: $ is not defined
<script>
$(document).ready
(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
EDIT - It seems the javascript files are loaded but the errors are happening anyway:
When I had this problem, after upgrading an existing project to 2017.2.504, it was because I had my scripts defined in the body... Like you.
They have to be in the head. Here's the response I got from support:
kendo.syncReady was introduced to address a major issue with jQuery 3.1.1 and the way Kendo UI widgets are generated on the client when using the MVC wrappers. This change, however, requires that Kendo UI script files are referenced in the page head section (this has been the default instruction for Kendo UI references in the past, as well). Please, try moving your Kendo UI references to the tag, after the jQuery files are referenced and let me know if the error keeps occurring.
Adding to what #Brian MacKay already mentioned, you have the possibility to defer script output:
#(Html.Kendo().DatePicker().Name("datepicker").Deferred())
When you're using .Deferred(), you'll store the rendered JavaScript and you'll have the possibility to place this deferred script wherever you want:
<head>
</head>
<body>
<!-- stuff -->
#(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
<!-- other stuff -->
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.web.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
#Html.Kendo().DeferredScripts()
</body>
If you're on a development box, prefix all src and href attributes that start with https:// to use //:. Chances are high that your development environment is not using SSL, so it can't use any resources over SSL links (javascript won't load at all!). The prefix change will make the urls inherit whatever the page is using.
See more here
I am having trouble resetting jQuery UI sliders.
I get this error:
MyProject.OrderInfo.Search.js:187 Uncaught TypeError: $(...).slider is not a function
I think our problem has something to do with having multiple jQuery/Javascript libraries, stepping over each other, but I am uncertain. Everything my team has been trying has not worked. We simply need to reset our sliders to have NULL values. We need to use NULL, so that we know the user has not touched the slider. That way, we can exclude it from our API call parameters.
How can I reset the slider values to NULL?
Here is what the code looks like:
[OrderInfo.cshtml] (script area, top section):
<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>
[OrderInfo.cshtml] (body):
<div class="col-sm-7" id="divslider">
<div class="row filterHeader">
<div class="col-md-3 paddingZero">
<b>Tuition and Fees</b>
</div>
<div class="col-md-2 paddingZero">
<div class="input-group">
Min:
<span class="input-group-addon" id="MinOrderPrice"> </span>
</div>
</div>
<div class="col-md-5">
<div id="SliderOrderPrice"></div>
</div>
<div class="col-md-2 paddingZero">
<div class="input-group">
Max:
<span class="input-group-addon" id="MaxOrderPrice"> </span>
</div>
</div>
</div>
<!-- MORE HTML BODY CODE HERE, UI/search elements, DIVS, ETC ETC -->
<div class="row filterHeader">
<div class="col-md-3 paddingZero">
</div>
<div class="col-md-2 paddingZero">
</div>
<div class="col-md-4">
</div>
<div class="col-md-3 paddingZero">
<button class="btn btn-info" id="btnSearch" type="button">Search</button>
<button class="btn btn-primary" id="btnReset" type="button" style="min-width:71px">Reset</button>
</div>
</div>
</div>
<!-- END OF [OrderInfo.cshtml] BODY, ** NOTICE THE BOTTOM HAS A JS SCRIPT, EEEK!! ** -->
<script src="~/Scripts/MyProject.OrderInfo.Search.js"></script>
[MyProject.OrderInfo.Search.js] (a .JS file for searching Orders REST API):
//Declare slider variables as null and assign only in change function, to distinguish 'dirty' slider from a 'clean' slider
var minorderprice;
var maxorderprice;
//Tution and Fees slider
$("#SliderOrderPrice").slider({
range: true,
min: 0,
max: 50000,
values: [0, 50000],
step: 500,
slide: function (event, ui) {
$("#MinOrderPrice").html("$" + ui.values[0].toLocaleString());
if (ui.values[1] == 50000) {
$("#MaxOrderPrice").html("> $50,000")
}
else ($("#MaxOrderPrice").html("$" + ui.values[1].toLocaleString()))
},
change: function (event, ui) {
minorderprice = ui.values[0];
maxorderprice = ui.values[1];
}
});
$("#MinOrderPrice").html("$ 0");
$("#MaxOrderPrice").html("> $50,000");
$("#SliderOrderPrice").draggable(); //this is a hack to make the slider responsive on mobile devices (see touch-punch.js)
// Get the values of search checkboxes and sliders, after search button click
$("#btnSearch").click(function () {
//do a bunch of nifty things to produce a dynamic URL string, for REST API calls here. This works fine and is left out on purpose.
});
$("#btnReset").click(function () {
$('input:checkbox').removeAttr('checked'); //clear all checkboxes
$('#orderTerritory').prop('selectedIndex',0); //reset State/Territory dropdown to 'All States'
RenderJSGrid(); //re-draw grid
//how to reset slider values here?
$("#SliderOrderPrice").slider('values', 0, 50000); //this throws the error like the slider doesnt exist?
$("#SliderOrderPrice").slider('values', null, null); //would this work?
});
Notice there are references to:
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
We have to do this because our BackgridJS implementation uses jQuery 2.2.
The sliders want to use 'jquery-ui.js', which I believe depends upon 'jquery-1.10.2.js'.
When the user clicks the Reset button, the error occurs and javascript acts like the slider isn't loaded. But it is, I can see it working in the UI. Could it be that the Reset button event needs to move somewhere else?
Any ideas? Help?
UPDATE #1:
I tried #Noctane's suggestion, but I still get the same error, no matter where I put the Reset function. I can put it inline, I can put it in other scripts but it just never works unfortunately.
Here is what I tried:
<link rel="stylesheet" href="~/Content/order.css" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<link rel="stylesheet" href="~/Content/backgrid-filter.css" />
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backbone.paginator.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script src="~/Scripts/backgrid-filter.js"></script>
<script src="~/Scripts/backgrid-select-filter.js"></script>
<script src="~/Scripts/MyProject.OrderInfo.js"></script>
<script src="~/Scripts/jquery.ui.touch-punch.js"></script>
I have prepared a demo using jsFiddle, that uses jquery UI while utilizing both jquery v2.2.0 and jquery version 1.10.2, please have a look, you will see that as you move the slider it will set its changed value to the console, when you click reset it will set the slider to null.
See DEMO
You can achieve this with the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style>
#resetButton {
margin-top: 15px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$( "#sliderTest" ).slider({
change: function( event, ui ) {
var s = ui.value;
console.log(s);
}
});
$("#resetButton").button({
icons: {
primary: "ui-icon-refresh"
}
});
$("#resetButton").click("click", function(event){
var s = $("#sliderTest").slider("value", null);
console.log(s);
});
</script>
<div id="sliderTest"></div>
<button id="resetButton">Reset</button>
You may need to re-arrange your includes in your application to get it to work. If you re-arrange the ones in the fiddle you will see the error you are getting, if you then switch them back to the way I have them arranged you will see it work.
I am using bootstrap popover to display if password is less then 6 character.
It works fine but when I click in text it display popover even value of text box is valid. how to hide popover when length of text box is valid
<head>
<title>popover example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password" data-toggle="popover" >
</div>
</div>
Here is my js code I remove div with popover when length is valid . But problem is text box displays popup when I click in text . I want to display popover only when length is less then 6 .
<script>
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").parent().removeClass('popover');
}
});
})();
</script>
Thanks for your help.
You should use the hide function of popover
$("#password1").popover('hide')
Use .popover('destroy') instead of .popover('hide') since if you click again on the textbox, it will keep showing you again even if the characters are more than 6.
$(function() {
debugger;
$('#password1').blur(function() {
debugger;
if ($('#password1').val().length < 6) {
$("#password1").popover({
title: "test",
content: "Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
} else {
$("#password1").popover('destroy');
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password">
</div>
</div>
Please check this
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").popover('destroy');
}
});
$('#password1').click(function(){
if($('#password1').val().length>5){
$("#password1").popover('destroy');
}
});
})();