The select dropdown won't show up on my materialize web page using a parallax container.
I've tried changing the heading and using different examples. I've also noticed that I may be using a different version that is preventing my page from showing up.
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$('select').select();
});
</script>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col lg12 m12 s12">
<div class="row">
<form class="col s12">
<div class="row">
<label>Materialize Select</label>
<select>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<div class="col lg3 m3 s12">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">The Story of Wine</h5>
<p class="light">Find out more about the drink we all know and love. Explore
interesting
findings that the
data show us about wine.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the code for the dynamic dropdown I was trying to go for:
<script>
function change_wine_type(type, taste) {
var type = document.getElementById(type);
var taste = document.getElementById(taste);
taste.innerHTML = "";
console.log(type.value)
if (wine_type.value == "Red") {
var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
} else if
(wine_type.value == "White") {
var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
} else if
(wine_type.value == "Rose") {
var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
} else if
(wine_type.value == "Sparkling") {
var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
console.log(optionArray)
newOption.value = pair[0];
newOption.innerHTML = pair[1];
taste_notes.options.add(newOption);
}
}
</script>
<div class="row">
<form class="col s12">
<div class="row">
<label>Wine Type</label>
<select id="wine_type" name="wine_type"
onchange="change_wine_type(this.id,'taste_notes')">
<option value="" disabled selected>select wine type</option>
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Rose">Rose</option>
<option value="Sparkling">Sparkling</option>
</select>
</div>
<div class="row">
<label>Taste Notes</label>
<select id="taste_notes" name="taste_notes">
</select>
</div>
</div>
Here you go:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- Icon Section -->
<div class="row">
<div class="col lg12 m12 s12">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<select>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
<label>Materialize Select</label>
</div>
</div>
<div class="row">
<div class="col lg3 m3 s12">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">The Story of Wine</h5>
<p class="light">Find out more about the drink we all know and love. Explore
interesting
findings that the
data show us about wine.
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</body>
</html>
With regards to your second question about filling in options dynamically - here is a fully working demo. The things I think you need to watch for:
1. Look at where I loaded the CSS and javascript files for Materialize and Jquery. I used the CDN's, which is actually preferred.
2. You should only initialize the select into which you load the options dynamically after you have filled in the options. Therefore, you will see I initialized the select with id taste_notes after the for loop like so: $('#taste_notes').formSelect();. If you do it before filling in the options dynamically, it will not work. Hope this helps.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Wine example</title>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<label>Wine Type</label>
<select id="wine_type" name="wine_type"
onchange="change_wine_type(this.id,'taste_notes')">
<option value="" disabled selected>select wine type</option>
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Rose">Rose</option>
<option value="Sparkling">Sparkling</option>
</select>
</div>
<div class="row">
<label>Taste Notes</label>
<select id="taste_notes" name="taste_notes"></select>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('#wine_type').formSelect();
});
</script>
<script>
function change_wine_type(type, taste) {
var type = document.getElementById(type);
var taste = document.getElementById(taste);
taste.innerHTML = "";
console.log(type.value)
if (wine_type.value == "Red") {
var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
} else if
(wine_type.value == "White") {
var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
} else if
(wine_type.value == "Rose") {
var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
} else if
(wine_type.value == "Sparkling") {
var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
console.log(optionArray)
newOption.value = pair[0];
newOption.innerHTML = pair[1];
taste_notes.options.add(newOption);
}
$('#taste_notes').formSelect();
}
</script>
</body>
</html>
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 used .style.backgroundColor = '#58eaa1' to change the background color of the dropdown list () but it changes the appearance of the dropdown list to 3d. I want the same appearance as in 'initial appearance' even after the change of background color.
Sample code (html)
function changecolor(){
var dropdownlist = document.getElementById('dropdownlist');
dropdownlist.style.backgroundColor = 'green';
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" onchange="changecolor()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
try it , i think this will solve your problem
<select style="background:#58eaa1 !important; border:1px solid #abadb3">
<option>hdd</option>
</select>
Here a working link: http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview
here the html:
// Code goes here
var changeBack = function (){
// select your select tag
var selectStatus = document.getElementById("selectStatus");
// get the number of the option currently selected
var optionSelected = selectStatus.selectedIndex;
// set his background-color to the class'name of the option
selectStatus.style.background = selectStatus.options[optionSelected].className;
//Then color each option in her proper class
for (var option in selectStatus.options){
selectStatus.options[option].style.background = selectStatus.options[option].className;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<!-- Just to color the select on page load -->
<body onload="changeBack()">
<tr>
<td>
<form action="">
<select id="selectStatus" onclick="changeBack()" name="statusApproved">
<!--Set your options a class with the color you want-->
<option class="green" value="Current:Approved">Current: Approved</option>
<option class="red" value="ChangeTo:Rejected">Change to: Rejected</option>
</select>
</form>
</td>
</tr>
</body>
</html>
var buton=document.getElementById("dropdownlist");
var allchar="0123456789ABCDEF";
buton.addEventListener("change",myFun,true);
function myFun(){
var randcol= "";
for(var i=0; i<6; i++){
randcol += allchar[Math.floor(Math.random()*16)];
}
document.getElementById("dropdownlist").style.background="#"+randcol;
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" >
<option class="col_color">0</option>
<option class="col_color">1</option>
<option class="col_color">2</option>
<option class="col_color">3</option>
<option class="col_color">4</option>
<option class="col_color">5</option>
</select>
</div>
</body>
</html>
I am trying to get the selected drop down printerType to alert user when the printer type value is not selected but only when the user selects request the printertype box shows up. The issue I have is that it doesn't alert the user that it is not filled. The others work fine. I hope this is understanding may be little confusing. the JavaScript code is at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systems Request</title>
<!--bootstrap-->
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../Assets/javascript/html5shiv.min.js"></script>
<script src="../Assets/javascript/respond.min.js"></script>
<![endif]-->
<!--custom css-->
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/responsive.css">
<script src="Assets/Javascript/jquery-1.11.1.min.js" type=
"text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Assets/javascript/bootstrap.js"></script>
<script src="Assets/Javascript/textboxname_autocomplete.js" type=
"text/javascript"></script>
<style type="text/css">
.dropdown{
width: 292px;
height: 45px;
font-size: 16px;
margin-left: 30px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body style="background-image: url('../Systems/Assets/images/background.jpg')">
<?php include("includes/createHeader.php");?>
<section id="container">
<h2>Systems Request</h2>
<form name="systems" id="systems-form" action="Pages/InsertProcess.php" method="post"onsubmit="return formCheck(this);">
<div id="wrapping" class="clearfix">
<section id="aligned">
<label class="label">LanID</label><br><br>
<input type="text" name="lanId" id="lanId" autocomplete="off" tabindex="1" class="txtinput" >
<label class="label">Employee Name</label><br><br>
<input type="text" name="name" id="name" autocomplete="off" tabindex="1" class="txtinput">
<!--manager access db list info located in the includes folder-->
<label class="label">Manager</label><br><br>
<?php include("includes/accessDB_ManagerData.php");?>
<!--department dropdownlist located in the includes folder-->
<label class="label">Department</label><br><br>
<?php include("includes/departmentDropdownList.php");?>
<!--Request Issue list info located in the includes folder-->
<label class="label">Request Issue</label><br><br>
<!-- #start of Request Issues-->
*<select name ="request" id="request" onchange="if (this.selectedIndex==3){this.form['printerType'].style.visibility='visible'}else {this.form['printerType'].style.visibility='hidden'};">
<option value =""><?php echo ' Select Request Issue...'?></option>
<option value ="RESET CASE"><?php echo ' Reset Case'?></option>
<option value ="RESET WM PASSWORD"><?php echo " RESET WM PASSWORD"?></option>
<option value ="REPLACE TONER"><?php echo " REPLACE TONER"?></option>
<option value ="FIX PRINTER"><?php echo " FIX PRINTER"?></option>
<option value ="FIX DEVICES"><?php echo " FIX DEVICE"?></option>
<option value ="SAFETY HIGH REQUEST"><?php echo " SAFETY HIGH REQUEST"?></option>
<option value ="OTHER"><?php echo " OTHER"?></option>
</select><br>
<!-- #end of Request Issues-->*
***<select class="dropdown" style="visibility:hidden;" name="printerType" id="printerType" >
<option Value="">Please select Printer Type</option>
<option Value="FS 4200DN">Kyocera FS4200DN</option>
<option Value="FS 3040MFP">Kyocera FS3040MFP</option>
<option Value="Kyocera ">Kyocera FS1370DN </option>
<option Value="OKI MPS710C">OKI MPS710C</option>
<option Value="OKI MPS711C">OKI MPS711C</option>
<option Value="Sharp MX450N">Sharp MX450N</option>
</select>***
<br/>
<label class="label">Request Description </label><br><br>
<textarea name="request_comments" id="message" placeholder="Enter Description of Issue" tabindex="5" class="txtblock"></textarea>
<input type="submit" name="submit" id="submitbtn" class="btn btn-primary btn" tabindex="7" value="Submit">
<br style="clear:both;">
<?php #Hidden inputs for Status, tech comments, tech completed, tech completed date?>
<input name="status" type="hidden" value="RECEIVED">
<input name="comments" type="hidden" value="No Comment ">
<input name="compUser" type="hidden" value="Unassigned">
<input name="compDt" type="hidden" value="Not Completed">
</section>
</section>
</div>
</form>
</section>
<?php include("includes/footer.php");?>
<script src="Assets/Javascript/gen_validatorv4.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var frmvalidator = new Validator("systems");
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
</script>
</body>
</html>
I had to change a few things like getElementbByName to getElementById. also added a function called updateValidation to add to the onchange part of the selected box and added frmvalidator.clearAllValidations();to the function along with added the two other textboxes lanId and request_comments to the if statement.
<select name ="request" id="request" onchange=" if (this.selectedIndex==3){this.form.printerType.style.visibility='visible'} else {this.form.printerType.style.visibility='hidden'};updateValidation()">
<script type="text/javascript">
function updateValidation (){
frmvalidator.clearAllValidations();
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
}
</script>
I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.
Javascript (inside head tag)
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
And this in body tag
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
......
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
I choose an option but I can't alert this option. I don't know what is the problem here.
You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.
$("#cd-dropdown").on("click", function() {
alert($(this).val());
});
<section class="main">
<div class="fleft">
<p><br />Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......
<div class="cont_btn">
<a data-type="submit" class="btn">send</a>
</div>
Your code shoud work, when you click the button the checkbox is already created, try the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
</script>
</head>
<body>
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>
When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:
<head>
<script>
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>
<!-- etc -->
<title>Your Title</title>
</head>
<body>
<section class="main">
<div class="fleft">
<p></br>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
......
<div class="cont_btn">
<a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>
The second Select element cannot display the countries dynamically, I have follow the tutorial exactly but wonder why it simply won't work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<script type="text/javascript">
var citieslist=document.classic.subj2
var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]
function updateSubj(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
<div id="template">
<div id="links">
<li>Home</li>
<li>Contact Us</li>
<li>Request</li>
<li>Cloud</li>
<li>Pricing</li>
</div>
<img id="tta" src="tta/tta.png"></img>
<div id="picture"></div>
<div id="search">
<img id="tta" src="tta/search.jpg"></img>
<form name="classic">
<p>LEVEL</p>
<select onChange="updateSubj(this.selectedIndex)">
<option>Select A City</option>
<option>USA</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
<p>SUBJECT</p>
<select name="subj2"></select>
<p>TYPE</p>
<select name="sasd"></select>
</form>
</div>
<div id="gradient_bg"></div>
<?php
echo "ssssss";
?>
</div>
</body>
</html>
While this tutorial work.
<form name="classic">
<select onChange="updateSubj(this.selectedIndex)">
<option>Select A City</option>
<option>USA</option>
</select>
<select name="subj"></select>
</form>
<script type="text/javascript">
var clist=document.classic.subj
var cities2=new Array()
cities2[0]=""
cities2[1]=["New York|newyorkvalue"]
cities2[2]=["Vancouver|vancouvervalue"]
function updateSubj(ssg){
clist.options.length=0
if (ssg>0){
for (i=0; i<cities2[ssg].length; i++)
clist.options[clist.options.length]=new Option(cities2[ssg][i].split("|")[0], cities2[ssg][i].split("|")[1])
}
}
</script>
var citieslist=document.classic.subj2 is declared before the element exists, it's also a lot better to do the following instead.
var citiesList = document.getElementById( "subj2" );
And make sure that the script runs once your needed HTML elements are available. An easy (and just best) way to do this is to include all javascript at the bottom of your document before the </body> tag.
Here is a modified version. Note that I do not need to save the select before the script runs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
var cities=new Array()
cities[0]=[];
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]
function updateSubj(countrySel){
var selectedcitygroup = countrySel.selectedIndex;
var citieslist = countrySel.form.citieslist;
citieslist.options.length=0;
if (selectedcitygroup>0){
for (var i=0; i<cities[selectedcitygroup].length; i++) {
var parts = cities[selectedcitygroup][i].split("|");
citieslist.options[citieslist.options.length]=new Option(parts[0], parts[1])
}
}
}
</script>
</head>
<body>
<div id="template">
<div id="links">
<li>Home</li>
<li>Contact Us</li>
<li>Request</li>
<li>Cloud</li>
<li>Pricing</li>
</div>
<img id="tta" src="tta/tta.png"></img>
<div id="picture"></div>
<div id="search">
<img id="tta" src="tta/search.jpg"></img>
<form name="classic">
<p>LEVEL</p>
<select name="country" onChange="updateSubj(this)">
<option>Select a country</option>
<option>USA</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
<p>SUBJECT</p>
<select name="citieslist"></select>
<p>TYPE</p>
<select name="sasd"></select>
</form>
</div>
<div id="gradient_bg"></div>
<?php
echo "ssssss";
?>
</div>
</body>