So I'm working on a small desktop app for myself, and for some reason I can't get the buttons to do anything. I am using skeleton CSS. I was able to get buttons working using this method previously, but for some reason it's no longer working.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="skeleton.css" type="text/css">
<head>
<h3>Which Term is Correct?</h3>
</head>
<body>
<div class="form">
<label>First Search Term</label>
<input type="text" name="name">
<label>Second Search Term</label>
<input type="text" name="email">
<input id="subButton" type=submit value="Submit">
<input id="histButton" type=submit value="History">
<input id="exitButton" type=submit value="Terminate">
</div>
<script>
const remote = require('electron').remote;
document.querySelector('#exitButton').addEventListener('click', () => {
let w = remote.getCurrentWindow()
w.close();
})
</script>
</body>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
text-align:center
}
.form label{
display: inline-block;
text-align: right;
margin-left: auto;
margin-right: auto
}
.form input{
display: inline-block;
text-align: left;
margin-left: auto;
margin-right: auto
}
</style>
</html>
You typed
<input id="subButton" type=submit value="Submit">
You should be typing
<input id="subButton" type="submit" value="Submit">
Notice the quotation marks around submit. See if this solves it.
Related
I'm having troubles centering my HTML form submit buttons in CSS.
Right now I'm using:
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
with this CSS content
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
Input elements are inline by default. Add display:block to get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <div> with text-align: center as suggested by others to get them on the same line.
I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:
HTML:
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
table input[type="submit"] {
display: block;
margin: 0 auto;
}
Try this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
This has 2 examples, you can use the one that fits best in your situation.
use text-align:center on the parent container, or create a container for this.
if the container has to have a fixed size, use auto left and right margins to center it in the parent container.
note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
Also Check this jsfiddle
I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':
CSS:
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (after removing the margin properties from your buttons' CSS):
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
If you want to take it to the next level, use flexbox:
.form {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
gap: 1em;
}
#btn_s {
width: 100px;
}
#btn_i {
width: 125px;
}
<div class="form">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One simple solution if only one button needs to be centered is something like:
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
Although I've used an inline example, for production, the code should be placed in a CSS file using a class.
You can do it with text-align: center.
.form-1 {
text-align: center;
}
#btn_s {
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
<div class="form-1">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Buttons are by default an inline-block style element. They will not respond to auto. You have to indicate a specific number.
button {
margin: 6px 50px;
}
(I prefer percentages, they seem to work better)
If, in the case, it must respond to margin: auto, you have to change it to be a block element.
button {
display: block;
margin: 6px auto;
}
I am trying to make an HTML, CSS, and JavaScript tutorial and I can handle the js needed... I have 2 fieldsets on each side of the page but I need the button in between them... I can't figure out how to do that. Here is my code:
body {
display: inline;
font-family: "Bradley's Hand", cursive
}
#left {
float: left;
width: 40%;
line-height: 450px
}
#right {
float: right;
width: 40%;
line-height: 450px
}
#input {
display: block
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="html.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<fieldset id="left">
<p id="output">TEST</p>
</fieldset>
<div id="input">
<input type="button" id="doctype" value="<!DOCTYPE html>">
<input type="button" id="html" value="<html>">
<input type="button" id="head" value="<head>">
<input type="button" id="title" value="<title>">
<input type="button" id="css" value="<link rel='stylesheet'>">
</div>
<fieldset id="right">
<p id="lesson">TEST</p>
</fieldset>
<script src="html.js"></script>
</body>
</html>
This is what it looks like now:
What my code looks like!
I need the buttons between the fieldset.
To achieve this I would use flex. The closest to what you have would be to make the input div a flex display with flex-direction set to column. Additionally I used box-sizing: border-box on the floated divs so that their widths are actually 40%. Read more here:
Why does my float elements not working properly at 40% + 60% width settings?
It's not perfect but it's a start:
body {
display: inline;
font-family: "Bradley's Hand", cursive
}
#left {
float: left;
width: 40%;
line-height: 450px;
box-sizing: border-box;
}
#right {
float: right;
width: 40%;
line-height: 450px;
box-sizing: border-box;
}
#input {
display: flex;
flex-direction: column;
width: 18%;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="html.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<div style="position: relative">
<fieldset id="left">
<p id="output">TEST</p>
</fieldset>
<fieldset id="right">
<p id="lesson">TEST</p>
</fieldset>
<div id="input">
<input type="button" id="doctype" value="<!DOCTYPE html>">
<input type="button" id="html" value="<html>">
<input type="button" id="head" value="<head>">
<input type="button" id="title" value="<title>">
<input type="button" id="css" value="<link rel='stylesheet'>">
</div>
</div>
<script src="html.js"></script>
</body>
</html>
--- EDIT ---
Personally I would use flex both all three columns. It would look like this:
body {
display: inline;
font-family: "Bradley's Hand", cursive
}
#columns {
display: flex;
}
#left {
flex: 1;
min-width: 40%;
line-height: 450px;
}
#right {
flex: 1;
min-width: 40%;
line-height: 450px;
}
#input {
flex: 1;
flex-direction: column;
width: 18%;
box-sizing: border-box;
}
#input input {
flex: 1;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="html.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<div id="columns">
<fieldset id="left">
<p id="output">TEST</p>
</fieldset>
<div id="input">
<input type="button" id="doctype" value="<!DOCTYPE html>">
<input type="button" id="html" value="<html>">
<input type="button" id="head" value="<head>">
<input type="button" id="title" value="<title>">
<input type="button" id="css" value="<link rel='stylesheet'>">
</div>
<fieldset id="right">
<p id="lesson">TEST</p>
</fieldset>
</div>
<script src="html.js"></script>
</body>
</html>
This has the advantage of having the middle column always perfectly fill the space between the outer columns
I'm trying to make a login form, and I can't figure out how to put an image in with the placeholder. The current code I have is
<span class="material-icons" style="font-size:20px; color: gray; float: left;">person
<input placeholder="username" type="text">lock
</span>
<span class="material-icons" style="font-size:24px; color: gray; float: left;">lock
<input placeholder="Password" type="text">
</span>
...But none of that has worked to do what I need.
I would like the image to be inside of the input, not in front of it.
Try using this code
It will show an image as a placeholder in the text field, and it will hide when you click on the text field.
input#search {
background-image: url('https://cdn0.iconfinder.com/data/icons/very-basic-2-android-l-lollipop-icon-pack/24/search-512.png');
background-size:contain;
background-repeat: no-repeat;
text-indent: 20px;
/* Extra Styling */
padding: 5px 3px;
transition:0.3s;
}
input#search:focus {
background-image:none;
text-indent:0px
}
<input type="text" id="search" name="search" Placeholder="Search" />
Just use the background property with class in your CSS.
<html>
<head>
<title></title>
<style type="text/css" media="screen">
input.test{
padding: .5em;
}
input.icon[value="SEARCH WORDS"]{
padding-left:48px;
background:
url(https://material.io/icons/static/images/icons-180x180.png) no-repeat 8px center;
}
</style>
</head>
<body>
<input class="icon" value="NOT SEARCH WORDS">
<input class="icon" value="SEARCH WORDS">
</body>
hope that helps
Basically I'm trying to make a form validation using jQuery etc..
I'm trying to use the event.preventDefault(); function to prevent the form from submitting the default way.
It doesn't seem to be working.
I am also trying to make an if statement that checks if its a valid email adress but it's giving be syntax error for some reason.
Hoow do I fix these issues?
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<style>
#wrapper {
margin: 0 auto;
width: 600px;
font-family: helvetica;
font-size: 1.2em;
}
input {
width: 300px;
height: 30px;
padding: 7px;
border-radius: 5px;
font-size: 1.2em;
border: 1px solid grey;
margin-bottom: 10px;
}
label {
width: 200px;
float: left;
padding-top: 10px;
}
#submitButton {
height: 50px;
margin-left: 200px;
width: 100px;
}
</style>
<body>
<div id="wrapper">
<form id="validationForm">
<label for="email">Email</label>
<input name="email" id="email" />
<label for="phone">Telephone</label>
<input name="phone" />
<label for="pass">Password</label>
<input name="pass" type="password" />
<label for="pass">Confirm Password</label>
<input name="pass" type="password" />
<input id="submitButton" type="submit" value="Submit" />
</form>
</div>
<script type="text/javascript">
$("#validationForm").submit(function(event) {
// this is the preventdefault that isn't working.
event.preventDefault();
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
// It's giving me syntax error for the '{' in the beginning of this if //statement.
if (!isValidEmailAddress($("#email").val()) {
alert("hello");
}
});
</script>
</body>
</html>
You're missing a closing ) in this line:
if (!isValidEmailAddress($("#email").val()) {
Should be:
if (!isValidEmailAddress($("#email").val())) {
Notice you have 4 ( and only 3 )? That's the issue. Look into using an IDE when editing code, it would have picked up this issue instantly.
Edit
Also, the syntax error was causing the event.preventDefault() to not fire, so this fix will solve that as well.
It looks like your code syntax needs some correction:
<script type="text/javascript">
$("#validationForm").on('submit', function(event) {
event.preventDefault();
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
if (!isValidEmailAddress($("#email").val())) {
alert("hello");
}
});
</script>
Here is DEMO
I want to make a js to replace desire text within an iframe. Here is my code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style>
.header{
width:100%;
height:30px;
background:#f1f1f1;
position: fixed;
z-index: 100;
margin-top: -20px;
font-family:Calibri, Arial;
}
.urlBox{
margin-top: 4px;
vertical-align: middle;
width: 600px;
}
.btn{
margin-top: 4px;
vertical-align: middle;
}
#iframe1{
margin-top:20px;
}
#newifrm{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
margin-top: 20px;
}
.txt{
margin-top: 4px;
vertical-align: middle;
}
button{
margin-top: 4px;
vertical-align: middle;
height:24px;
width:33px;
}
</style>
<script>
function goAction(){
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", document.getElementById("url1").value);
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
ifrm.frameBorder=0;
ifrm.id="newifrm";
document.getElementById("iframe1").appendChild(ifrm);
}
</script>
</head>
<body>
<div class="header">
<span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
<span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
<span><input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<div id="content">
<div id="iframe1"></div>
</div>
</body>
</html>
I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.
You can find this example about how to modify an iframe content in jQuery Documentation:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
You should use .contents() function.
Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.
First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="header">
<span>
<input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span>
<input id="go" class ="btn" type="button" value="GO"></span>
<span>
<label for="search">Search for:</label>
<input name="search" id="search" class="txt"></span>
<span>
<label for="replace">Replace with:</label>
<input name="replace1" id="replace1" class="txt"></span>
<span>
<input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>
<script>
$(document).ready(function(){
$("#go").click(function(){
$("#newifrm").attr('src', $("#url1").val());
})
});
</script>
</body>
</html>