This is my code:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#wrap {
width: 1000px;
margin: 0 auto;
}
.out_box {
float: left;
margin: 20px 20px 20px 20px;
border: 1px solid black;
padding: 0 5px 0 5px;
min-width: 280px;
}
input {
margin: 10px;
}
input {
vertical-align: -3px;
}
h1 {
font-size: 400%;
color: black;
margin: 0 0 10px 0;
text-align: center;
}
h2 {
font-size: 100%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
h3 {
font-size: 95%;
color: black;
margin: 5px 0 5px 0;
}
h4 {
font-size: 200%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<div id=wrap>
<h1>Login</h1>
<form class="form1" action=”index3.htm”>
<div class="formtitle">
Enter the password to proceed
</div>
<div class="input nobottomborder">
<div class="inputtext">
Password:
</div>
<div class="inputcontent">
<input type="password" id="password" /><br />
</div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == ’smurfsmurf’) location.href='index3.htm'; else alert('Wrong Password!');" />
</div>
</form>
</div>
</body>
</html>
When I make it redirect it does like this with the adress: file:///Volumes/ETHERNET/"index3.htm".
There is a file in that directory named index.htm, and that's the file I am trying to access. How do I fix it adding the "" signs?
Best Regards
Oskar
You have the wrong type of quotes in your form's action. Change this line:
<form class="form1" action=”index3.htm”>
for this:
<form class="form1" action="index3.htm">
Also, because your javascript is on a button that will, according to standards, submit the form, your javascript will not react as you expect. You should add a return false; into the code, and add your curly braces around your if statements, and remove the curved single quotes:
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'smurfsmurf') {location.href='index3.htm';} else {alert('Wrong Password!');}return false;" />
Although, personally, I would recommend against inline JavaScripting like that. Instead, use EventTarget.addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Scroll down to the example to see how it works.
Explanation:
Straight quotes are not technically necessary for HTML attribute values (I highly recommend using them anyway). You have not used straight quotes ("), but instead curved quotes (”), which never were valid for wrapping HTML attribute vales. Thus, the browser interprets your action on your form to be ”index3.htm” instead of index3.htm.
When you click your submit button, the default action is to submit the form to it's action attribute. So your browser is redirected to /”index3.htm”. Your JavaScript won't have time to kick-in and change your browser's location before you are redirected to the form's action's value.
Let me know if that explanation makes since.
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I have a media query that makes my container go to 90% width when the screen goes lower than 550px and when the password generator overflows it pushes the width to 500px instead of the 90%. How can i fix this? The overflow happens when I select one of the password options and set the length to 50.
Oof this website is hurting my eyes a bit,
Well it is because you are using flexbox on the body, to fix this try:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
#media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html>
I've added a flex div around the generator and added a class for flex as well... Try to avoid much styling on standard generated elements like html, body, script etc etc.. And please try start styling at a mobile perspective (most web users are commonly mobile users), so instead of using media-queries with max-width, use min-width: 551px; In your case you eventually dont need a media-query instead. If you are just using max-width: 500px; on your #generatorContainer its enough.
Happy coding!!
The problem concerning hosting a web app on the GitHub page. I am fully aware that GitHub page is only for hosting static web page and do not support PHP. The problem is I only want the people with my correct login id and password to access my web app. But people can simply access the content pages with URL without logging in. How to preclude direct access? Is it possible to do it without PHP?
Desired case:
home.html==> correct id and psw ==> contents.html
Current case:
URL for contents ==> contents.html
You can use a Javascript Validator
Check This one Username = Gaurav and Password = password
.buttonlo {
padding: 14px 20px;
background-color: red;
}
.buttonre {
padding: 14px 20px;
background-color: blue;
}
.buttonre,
.buttonlo {
float: left;
width: 50%;
}
.box {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
p {
margin-top: 50px;
text-align: center;
display: inline-block;
}
<html>
<head>
<title>Login page</title>
</head>
<body>
<h1>Login Page</h1>
<form name="login">
Username<input class="box" type="text" name="userid" /> Password
<input type="password" class="box" name="pswrd" />
<input class=buttonlo type="button" onclick="check(this.form)" value="Login" />
<input class="buttonre" type="reset" value="Cancel" />
</form>
<script language="javascript">
function check(form) {
if (form.userid.value == "Gaurav" && form.pswrd.value == "password") {
alert("Access Granted");
} else {
alert("Error Password or Username")
}
}
</script>
<p>username and password is in javascript section</p>
</body>
</html>
I have an HTML tag like below :
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
I must give style with CSS to this tags without any changing in the HTML tags to make an input like below picture. The id="Code_F" must be converted to an input tag. How can I do this only with CSS ?
The most important thing is that this job must be done without any adding element to the HTML tags or any direct changing in the HTML tags and all the changes must be done with CSS!
Any help will be appriciated!
No, you can use the css content property to generate / replace content like this.
p:after {
content: "lorem";
}
If you want to alter the html, you would have to use javascript.
There is not a way you could programmatically create/delete/replace DOM elements using using HTML/CSS. Such requires Javascript, or creating the elements manually, even the pseudo elementlike after can only do so much since there is no way you could add a working input inside the content property, here is a way you could use in javascript
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a basic input field</p>
<button onclick="myFunction()">create</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "this is a simple input");
document.body.appendChild(x);
}
</script>
</body>
</html>
#Code_G {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #d9d3d3;
text-align: center;
position: relative;
}
#Code_L {
position: absolute;
right: 15px;
top: 16px;
background: #fff;
padding: 0 10px;
color: #000;
}
#Code_F {
min-height: 46px;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 15px 15px 10px 15px;
font-size: 16px;
font-weight: 400;
color: #495057;
text-align: right;
margin-top: 8px;
}
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
You can use fieldset and legend for this purpose.
legend {
text-align:right
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
border:none;
width:100%;
outline:none;
}
fieldset {
border-radius:5px;
width:400px;
}
input::placeholder {
text-align:right
}
<div>
<fieldset>
<legend>editor-field</legend>
<input type="text" id="monster" name="monster" placeholder="editor-field">
</fieldset>
</div>
I'm looking for some help. I'm in a project where i need to upload images to a freemarker template(.ftl) which is coded with html. I'm using hippo cms console to create sitemaps, etc. I need to use local images in my project (from the project directory) but the URL they take is from localhost:8080/site/images. But I don't know where localhost:8080/site is in my project or where it refers.
Here is the code:
So,
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
here I was using an Internet image and it works correctly, but I need to use the image at my site/freemarker/images/agoraLogo.PNG.
Here is the project structure:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
font-family: Verdana;
}
.login {
color: white;
padding: 1%;
background-color: #2B516B;
}
.contButton {
padding: 0.5%;
padding-left: 4%;
padding-right: 4%;
color: white;
background-color: black;
text-align: center;
font-family: Verdana;
border-radius: 10px;
}
.agoraIcon {
height: 50px;
width: 200px;
}
.content {
text-align: center;
}
.credentials {
padding: 0.5%;
font-family: Verdana;
border-radius: 10px;
}
#year {
text-align: center;
}
</style>
</head>
<body>
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon" />
<div class="login" id="year">2018</div>
<div class="content">
<p><b>Inicia sesión con tu <br>cuenta de concesión</b></p>
<input type="text" class="credentials" placeholder="Email" />
<input type="password" class="credentials" name="psw" placeholder="Contraseña" />
<div>
<a href="http://localhost:8080/site/welcome" type="button">
<button class="contButton" type="submit"> Continuar </button>
</a>
</div>
</div>
</body>
</html>
Directory to the image
Change this :
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
to :
<img src='../images/agoraLogo.PNG' class="agoraIcon"/>
It is best to have binary links generated. You can use the #hst.link tag to do this.
I think you need:
<#hst.link path="/freemarker/images/agoraLogo.PNG" var="image"/>
The var image will contain the link.
See the documentation for more details:
https://www.onehippo.org/library/concepts/links-and-urls/hst-2-urls.html
May I also suggest you work through our tutorials?
https://www.onehippo.org/trails/demo-tutorials-and-download.html