I want to make the body appear when the website loads. I tried lots of things but didn't work. I would be grateful for help.
var celyLogin = $(".container");
$(document).ready(function(){
/*! Fades in page on load */
$(".container").css('display', 'none');
$(".container").fadeIn(5000);
});
I tried changing from class to id, didn't work. I asked this question once but I had another issue with not putting . before "container". I don't know where's the issue. Please help. Here are CSS and HTML:
h1 {
display: block;
color: aliceblue;
text-align: center;
}
body {
background-color: #0c0c0c;
font-family: 'Fira Code', monospace;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.submit {
display: block;
margin: auto;
background-color: black;
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container">
<div>
<div>
<h1>WELCOME USER</h1>
<div id="UandP">
<h3>
Username: <input class="username" type="text" name="username">
</h3>
<h3>
Password: <input class="password" type="password" name="password">
</h3>
</div>
<input type="button" class="submit" value="Log In" name="submit" onclick="validate()">
</div>
</div>
</body>
<script scr="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script scr="script.js"></script>
</html>
You have a typo in both of your JavaScript imports. You typed scr instead of src.
Related
So I want to imitate a Survey where a Survey has:
Question Name
Options
The question name is basically just some text which can be changed on clicked.
Initially there is one option and it's checkbox to tick it. This option should also change when clicked.
Also there's is this button where should add a new option to a specific question and there will be one question with let's say 4 options and you can check any amount of them.
Now after the first question has been edited (put whatever text you want for the question name and as many different options you need) you should be able to add more questions and do the same thing.
I tried to do this and I managed to find some code which edits text on click but I don't know how I can add another option or another question. My code is as follows:
function help() {
// code to add another option
}
body {
background-color: #00ffaa;
font-family: Verdana;
text-align: center;
}
.questionName {
margin-top: 15px;
font-size: 20px;
}
.optionName {
margin-top: 8px;
font-size: 15px;
font-style: italic;
margin-left: 605px;
}
.box {
margin-top: 12px;
}
.option {
display: flex;
}
<html>
<head>
<title>Your Survey Form</title>
<link rel="stylesheet" href="DemoSurveyStyle.css">
</head>
<body>
<form>
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="question">
<div class="questionName" contenteditable="true">Question</div>
<div class="option">
<div class="optionName" contenteditable="true">Option</div>
<input type="checkbox" class="box">
</div>
<button id="addOpButton" onclick="help()">Add Option</button>
</div>
</form>
<script src="DemoCode.js"></script>
</body>
</html>
If you could help me to how I should do this I would really appreciate. I think it's not very complicated just I have never done it and don't know how to do it.
here you can appendChild to your element
I have also update HTML
function help() {
// code to add another option
var q = document.getElementById('question');
const node = document.createElement('div');
node.classList.add("option");
node.innerHTML = '<div class="optionName" contenteditable="true">Option</div><input type="checkbox" class="box">';
q.appendChild(node);
}
help()
body {
background-color: #00ffaa;
font-family: Verdana;
text-align: center;
}
.questionName {
margin-top: 15px;
font-size: 20px;
}
.optionName {
margin-top: 8px;
font-size: 15px;
font-style: italic;
margin-left: 605px;
}
.box {
margin-top: 12px;
}
.option {
display: flex;
}
<html>
<head>
<title>Your Survey Form</title>
<link rel="stylesheet" href="DemoSurveyStyle.css">
</head>
<body>
<form>
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="question">
<div class="questionName" contenteditable="true">Question</div>
</div>
<button type="button" id="addOpButton" onclick="help()">Add Option</button>
</form>
<script src="DemoCode.js"></script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
Whenever I print any text to the console that is being printed successfully. But when I try to print the HTML line to the console even with ID or class name. That is not working and giving me the output null.
I have this HTML code:
<!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>Number Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
The CSS code is:
* {
font-family: Raleway, sans-serif;
box-sizing: border-box;
}
h1 {
margin-top: 30px;
font-size: 150%;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
.play-again {
padding: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: fit-content;
display: block;
border: none;
background-color: rgb(38, 194, 64);
border-radius: 3px;
}
.result {
text-align: center;
}
.left-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
input {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
border-radius: 50%;
display: block;
}
.right-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
.check-result {
padding: 5px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: rgb(38, 194, 64);
border-radius: 3px;
border: none;
}
.check-result:hover,
.play-again:hover {
box-shadow: 0px 0px 10px black;
}
And the JavaScript code is:
"use strict";
console.log(document.querySelector("#message"));
console.log("hi");
The "hi" text printed successfully to the console, but the second line gives me "null" in Chrome. I have also reinstalled Chrome.
image link= "https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing"
Your Javascript code is running before the HTML finishes loading, to prevent this, add the defer attribute to your <script> tag as follows
<!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>Number Game</title>
<link rel="stylesheet" href="style.css" />
<!-- Adding the defer attribute -->
<script src="script.js" defer></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
You have added <script> tag in the head section that means your javascript load before the <p id="message"> tag which you want to get and log in console.
Solution - add you script file just before </body> tag closing.
You have to remove the -script- tag to the -head- and put it to the end of the -body-
I am trying to add trix editor in a form. It appears but the toolbar is disabled its not working. After some research i found that was in the header of my layout file so i moved it in the end of the body and removed "defer" and now trix editor is disappeared.
layout file
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</body>
</html>
field where i want trix editor
<div class="form-group">
<label for="content">Content</label>
<input id="content" type="hidden" name="content">
<trix-editor input="content"></trix-editor>
</div>
trix js and css
#section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
#endsection
#section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
#endsection
--> composer require te7a-houdini/laravel-trix
--> php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
--> php artisan migrate
In your page use like
<html>
<head>
#trixassets
</head>
<body>
<form method="POST" action="route('article.store')">
#csrf
#trix(\App\Article::class, 'content')
<input type="submit">
</form>
</body>
</html>
Here i made demo trix editor and it's working fine in laravel 5.8.14 v
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<trix-editor input="content"></trix-editor>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
</body>
</html>
Did you forget to add jquery ?
The link of js of trix code that you have mentioned in your section('scripts'), instead of including in 'scripts' section. Directly paste the link in your main HEAD section of html, may be its in layouts.app.
or you can also do the same as you have done but just change some code as like:
In your html, head section, add yield as like #YIELD('CSCRIPTS') just below other mentioned SCRIPT tag, make sure you use new name in yield.
In html, head section, you will also see other SCRIPT tag, there remove DEFER if it is there.
And finally, go to the blade where your SECTION belong and change it to #SECTION('CSCRIPTS').
Works well.
But also you will see the other script tag, there and remove DEFER keyword.
Other keep as it, works perfectly
I've written a fairly simple form to be sent to my Firebase database, but my database doesn't seem to be updating with the new data from my submit.html page. I'm quite new to Firebase, and I've referenced the documentation, but I'm sure I've overlooked something. For testing purposes, the web application at this stage is meant to simply send a first and last name to my database, listed under a collection named graduate.
I also want to assign it a unique documentID/Auto-ID. Per the Firebase documentation:
[...] the Firebase JavaScript clients provide a push() function that
generates a unique ID, or key, for each new child. By using unique
child keys, several clients can add children to the same location at
the same time without worrying about write conflicts.
This seems to be exactly what I'm looking for, and so I've included the push call with my function below.
I should also probably mentioned that I've written the following rule for my database:
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}
Anyway, here is my code:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Student Tracking</title>
<script src="authentication.js"></script>
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<div id="container">
<header>
<img src="logo.png" class="logo">
<h1 class="englogo">Department of English</h1>
<div class="nav">
<ul>
<li>Home</li>
<li>Submit</li>
<li>Query</li>
</ul>
</div>
<div id="contentform">
<form id="newUserForm">
<h3>Complete the following form to add your student information
to the database.
</h3>
<label for="Field1">First Name:</label><br>
<input id="userfName" name="Field1" type="text" value=""><br><br>
<label for="Field2">Last Name:</label><br>
<input id="userlName" name="Field2" type="text" value=""><br><br>
<label for="Field3"></label><br>
<input id="saveForm" name="saveForm" type="button" value="Submit Form">
</form>
</div>
</header>
</div>
</body>
</html>
My app.js:
var config = {
apiKey: "apiKey",
authDomain: "authDomain",
databaseURL: "url",
projectId: "proID",
storageBucket: "SB",
messagingSenderId: "sendID"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref().child('graduate');
$('#saveForm').click(function(){
rootRef.push().set({
firstName:$('#userfName').val(),
lastName:$('#userlName').val()
});
})
My CSS:
.logo {
display: inline-block;
margin: auto 0;
}
.google {
color: #0099CC;
background: transparent;
border: 1px solid #0099CC;
border-radius: 6px;
}
.nav {
position: relative;
float: right;
padding: 60px 20px 15px 10px;
text-align: right;
z-index: 1;
background: white;
margin: 0 auto;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3em;
}
.nav li a {
text-decoration: none;
color: black;
margin: 4px;
}
h1.englogo {
display: inline-block;
padding-left: 1%;
font-family: 'Cormorant', serif;
position: relative;
bottom: 15px;
}
header {
height: 100px;
width: 100%;
z-index: 10;
position: fixed;
border-bottom: solid thin;
background-color: white;
}
#content {
width: 100%;
text-align: center;
position: relative;
top: 200px;
height: 1500px;
font-family: 'Roboto', sans-serif;
}
#contentForm {
widows: 100%;
position: relative;
top: 150px;
height: 1500px;
}
form {
width: 100%;
position: relative;
top: 90px;
height: 1500px;
font-family: 'Roboto', sans-serif;
border: none;
}
I suspect your root reference might be off. Maybe try this:
var ref = firbase.database().ref(<ROOT_REF>)
var rootRef = ref.child('graduate')
You have changed the authorization in the database, by default it only allows writing when the user is logged in.
I was able to make my program work. Per this site, I needed to move my .js files outside of the head. I moved them right before the closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Department of English | Student Tracking</title>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<img src="olemiss.png" class="logo">
<h1 class="englogo">Department of English</h1>
<div class="nav">
<ul>
<li>Home</li>
<li>Submit</li>
<li>Query</li>
</ul>
</div>
<form id="newUserForm">
<h3>Complete the following form to add your student information
to the database.
</h3>
<label for="Field1">First Name:</label><br>
<input id="userfName" name="Field1" type="text" value=""><br><br>
<label for="Field2">Last Name:</label><br>
<input id="userlName" name="Field2" type="text" value=""><br><br>
<fieldset>
<legend>Program</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="undergraduate" name="title" value="Undergraduate" >
Undergraduate
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="graduate" name="title" value="Graduate">
Graduate
</label>
</li>
</ul>
</fieldset><br>
<label for="Field3">Graduate Year (XXXX):</label><br>
<input id="gradDate" name="Field3" type="text" value=""><br><br>
<input id="saveForm" name="saveForm" type="submit" value="Submit Form">
</form>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<script src="authentication.js"></script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to use jquery knob plugin
to display a circle through which the user can post a rating. But I cannot get it to display. I'm posting my code here, please tell me whats wrong.
PS : I'm using JQuery Mobile. So the page is being loaded via Ajax. Please keep that in mind.
<html>
<head>
<title>Rate and Review</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="flatUI/jquery.mobile.flatui.css" />
</head>
<body>
<div data-role="page" id="pageRate">
<script src="jQueryKnob/jquery.knob.js"></script>
<script src="jquery-2.1.3.min.js"></script>
<style type="text/css">
#ratingHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 18vw 0 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#reviewHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 2% 2% 2% 10vw;
text-align: left;
width: 90%;
}
#ratingCircleDiv {
width: 50vw;
overflow: hidden;
position:relative;
margin-left:25vw;
}
.dial {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #ff8800;
font: bold 3em Arial;
height: 80px;
left: 0;
margin: 0; !important
padding: 0;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 124px;
}
#header1 {
color: white;
font-family: arial;
font-size: 1.4em;
margin: 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#textarea {
margin-left: 3vw;
width: 93%;
}
</style>
<div data-role="header" style="width:100%;position:fixed;z-index:1" data-theme="a">
<div class="ui-grid-a" style="width:100%">
<div class="ui-block-a" style="min-height:10vw;width:20%;overflow:hidden;margin-left:2%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:5%;padding:0;border:0">
<img src="images/logo.png" style="max-height:100%;max-width:100%">
</div></div>
<div class="ui-block-b" style="min-height:10vw;width:70%;overflow:hidden;margin-left:0%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:0;padding:0;border:0">
<h2 class="removeShadow" id="header1">Rate & Review</h2>
</div></div>
</div><!-- /grid-a -->
</div><!-- /header -->
<div data-role="content" style="padding:0;z-index:0;position:relative;height:100vh" data-theme="a">
<label id="ratingHeader">
Your Rating : </label>
<div id="ratingCircleDiv">
<input class="dial" data-width="200" data-min="-100" data-displayPrevious=true value="2.5" style="margin:0">
<script>
$("#pageRate").on("pageinit",function(e)
{
$(".dial").knob({
'min':0,
'max':5,
'step':0.5,
'fgColor':'#ff8800',
'bgColor':'#BBBBBB',
'width':'100%'
alert('initialized Knob');
});
$('.dial').css('margin','11vw 0 0 10vw');
});
</script>
</div>
<label id="reviewHeader">
write a review : </label>
<div data-role="fieldcontain">
<!-- <label for="textarea">review:</label> -->
<textarea name="textarea" id="textarea"></textarea>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Wrap you code in pagecreate event delegated to #pageRate. You also need to add data-role="none" to input to prevent jQM from styling it.
<input class="dial" data-role="none">
$(document).on("pagecreate", "#pageRate", function () {
$(".dial", this).knob({
'min': 0,
'max': 5,
'step': 0.5,
'fgColor': '#ff8800',
'bgColor': '#BBBBBB'
});
});
Demo
I solved it. Looks like it was a minor mistake
in the (".dial").knob function, i accidentally added a "width:100%" which was not defined for the jQuery knob plugin. It was supposed to go in the css. i removed that line and everything works properly.
Thanks