i am attempting to show the same header (menus) at all my webpages. There is a youtube video on this. (same title as above).
but i cannot seem to get it going.
With reference to my code (mainmenu.js), if i attempt to enclose the part after this.innerHTML, i would get a error display of my VS Code.
Could this be the issue?? why the VS code error display?
index.html
!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.0">
<title>Login</title>
</head>
<body>
<div class="center">
<h1 align="center">Please Login </h1>
<form action='mainpage.html' method="post">
<!-- <label for="useremail">Email :</label>
<input type='email' id='useremail' name='useremail'><br></br>
<label for="userpw">Password :</label>
<input type='password' id='userpw' name='userpw'>
<br><br> -->
<table align="center">
<tr>
<td>
<input type="email" placeholder ='Email Address' name='' autofocus size="30" required>
</td>
</tr>
<tr>
<td>
<input type='password' placeholder ='Password' name='' size = "30" required>
</td>
</tr>
<tr>
<td>
<input type='submit' value = 'Login' size="30">
<input type='submit' value ='Forget' width='30'>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
mainpage.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<!--<link rel="stylesheet" href="style.css"> -->
<script type=module scr=mainmenu.js></script>
<mainheader></mainheader>
</html>
mainmenu.js
class mainmenu extends HTMLElement {
connectedCallback() {
this.innerHTML =
<h1>
test
</h1>
// <header>
// <nav>
// <ul>
// <li>Lists</li>
// <li>Sales</li>
// <li>Purchases</li>
// <li>Received</li>
// <li>Payments</li>
// <li>Adjustments</li>
// <li>Reports</li>
// </ul>
// </nav>
// </header>
}
}
customElements.define('mainheader',mainmenu)
this is what you want to do
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML =
`
<header>
<nav>
<ul>
<li>Lists</li>
<li>Sales</li>
<li>Purchases</li>
<li>Received</li>
<li>Payments</li>
<li>Adjustments</li>
<li>Reports</li>
</ul>
</nav>
</header>
`
}
}
customElements.define('my-header', MyHeader)
<!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.0">
<title>Document</title>
</head>
<body>
<my-header></my-header>
</body>
</html>
Related
I've been studying Angular.js for my term exams and was working on the following code related to Angular.js forms.
<!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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Practical 12</title>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<form name="festForm" novalidate ng-submit="sendForm(x)">
<h2>Registration form for tech event</h2>
<table>
<tr>
<td>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" ng-model="x.fname" >
<!-- <span ng-show="festForm.fname.$error.required">*enter first name</span> -->
</td>
</tr>
<tr>
<input type="submit" value="SUBMIT">
</tr>
</table>
</form>
<p>{{userdata}}</p>
</div>
<script>
var app=angular.module("formApp",[])
app.controller("formCtrl",function($scope){
$scope.userdata="";
$scope.sendForm=function(fest){
$scope.msg="Form Validated"
$scope.userdata=angular.copy(fest);
console.log(fest)
}
})
</script>
</body>
</html>
Following is the output of the following code
I am not able to understand the flow how my argument fest passed in the sendform function gets converted into javascript object.
My date time picker is not working properly. I have no idea what is wrong. I have used following syntax:
Layout:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<title>#yield('title')</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link rel="stylesheet" href="{{ asset("assets/stylesheets/styles.css") }}" />
</head>
<body>
#yield('body')
<script src="{{ asset("assets/scripts/frontend.js") }}" type="text/javascript"></script>
</body>
</html>
View:
<div class="form-group">
<label>Date of Birth</label>
<div class='input-group date' id='dob' >
<input type='text' class="form-control" name="dob"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dob').datetimepicker();
});
</script>
When i try to click on date icon. It just turns into text editor symbol. I cannot click on the icon. What's the problem here? Can anyone help me?
You need to be create custom click event for glyphicon-calendar.
Assign dob ID to text field.
Try This:
$(function() {
$('#dob').datetimepicker();
});
$(".glyphicon-calendar").click(function() {
$("#dob").datepicker("show");
});
<div class="form-group">
<label>Date of Birth</label>
<div class='input-group date'>
<input type='text' class="form-control" name="dob" id='dob' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
I don't know what's wrong. This code is correct but when I run it in my local machine I recognize that the input field is missing!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
You need to set protocol because by default browser will set file://
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
IMPORTANT - it is a bad practise to specify the protocol, use this only on local machine
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
I am new to BootStrap 3 and am having problems with my divs overlapping. I'm probably missing something simple, but can't seem to find the problem. Here is the html.
You can also find a working copy of what I am trying to do in Bootstrap at wibberding.info/SolarTime.
Thanks for any help you can give.
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Solar Time</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<div class="jumbotron">
<div class="container clearfix">
<h1 id="clock">Solar Time</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>This web app allows you to find Solar Time in two ways:</p>
<p> 1. Find Solar Time by reading the location data from your device. You will have to have this turned on. </p>
<p> 2. By entering a longitude. You can find the longitude of your zipcode here.</p>
</div>
<div class="col-md-4">
<form id="form">
<input id="device" type="radio" name="locationData" value="device" checked onchange="solarTime.checkLocationMethod()">
<label for="device">Use my device location.</label><br>
<input id="latLong" type="radio" name="locationData" value="latLong" onchange="solarTime.checkLocationMethod()">
<label for="latLong">Enter Longitude</label>
<input type="text" size="10" maxlength="30" id="longitude" onFocus="solarTime.changeToLong()"></input> (Enter postive longitude for East and negative for West. All of the United States is negative.) <br>
<input type="button" onclick="solarTime.checkLocationMethod()" value="Find Solar Time" />
</form>
</div>
</div>
</div>
</body>
</html>
So it looks like I missed a closing DIV tag. It now works :-) Thank you everyone for your help . . .
I am attempting to populate a form field prior to it being submitted however the function appears to be disregarded and am unsure whether I am doing it incorrectly. Why is the form allowed to be submitted even though I am returning false?
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<meta name="robot" content="noindex, nofollow" />
<title> sample form</title>
<base href="" />
<link rel="stylesheet" type="text/css" media="all" href="" />
<style type="text/css">
</style>
<script type="text/javascript">
function formDetails() {
var name = document.forms["sampleform"]["name"].value = "test"
return false;
}
</script>
</head>
<body>
<form id="sampleform" name="sampleform" action="" method="get">
<p><label for="name">Name</label>
<input type="text" name="name" id="name" maxlength="50" /></p>
<p><input type="submit" name="submit" value="submit" onClick="formDetails();" /></p>
</form>
</body>
</html>
You have to pass the return value on to the event handler itself:
<input ... onClick="return formDetails();" ... />