There are 2 problems when running this search.
1: When clicking the magnifier, instead of just opening the search bar, it searches immediately. 2: if more than 2 characters are typed and then the search bar is closed (by click off it) then reopened (by clicking back on it) the search button and search text doesn't align properly. https://jsfiddle.net/mkLj7dap/
HTML:
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<div class=" top-search">
<div class="ty-search-block">
<form action="www.example.com/" name="search_form" method="get" class="cm-processed-form">
<input type="hidden" name="subcats" value="Y">
<input type="hidden" name="pcode_from_q" value="Y">
<input type="hidden" name="pshort" value="Y">
<input type="hidden" name="pfull" value="Y">
<input type="hidden" name="pname" value="Y">
<input type="hidden" name="pkeywords" value="Y">
<input type="hidden" name="search_performed" value="Y">
<input type="text" name="hint_q" value="" id="search_input" title="" class="ty-search-block__input cm-hint"><button title="" class="ty-search-magnifier" type="submit"><i class="material-icons">search</i></button>
<input type="hidden" name="dispatch" value="products.search">
</form>
</div>
</div>
</body>
</html>
CSS:
.cm-processed-form{
position:relative;
min-width:50px;
width:0%;
height:50px;
float:right;
overflow:hidden;
-webkit-transition: width 0.1s;
-moz-transition: width 0.1s;
-ms-transition: width 0.1s;
-o-transition: width 0.1s;
transition: width 0.1s;
}
.ty-search-block__input{
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:100%;
height:50px;
margin:0;
padding:0px 55px 0px 20px;
font-size:20px;
color:red;
}
.ty-search-block__input::-webkit-input-placeholder {
color: #d74b4b;
}
.ty-search-block__input:-moz-placeholder {
color: #d74b4b;
}
.ty-search-block__input::-moz-placeholder {
color: #d74b4b;
}
.ty-search-block__input:-ms-input-placeholder {
color: #d74b4b;
}
.ty-search-magnifier{
width:50px;
height:50px;
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding-top:10px;
margin:0;
border:0;
outline:0;
line-height:30px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}
.cm-processed-form-open{
width:100%;
}
JS:
$(document).ready(function(){
var submitIcon = $('.ty-search-magnifier');
var inputBox = $('.ty-search-block__input');
var searchBox = $('.cm-processed-form');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('cm-processed-form-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('cm-processed-form-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.ty-search-magnifier').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.ty-search-block__input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.ty-search-magnifier').css('display','none');
} else {
$('.ty-search-block__input').val('');
$('.ty-search-magnifier').css('display','block');
}
}
Change the script as bellow to prevent the default click event, when search box not expanded:
submitIcon.click(function (event) {
if (isOpen == false) {
event.preventDefault();
searchBox.addClass('cm-processed-form-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('cm-processed-form-open');
inputBox.focusout();
isOpen = false;
}
});
Related
Could anyone help me by adding a simple play/pause button to my text scrolling animation?. I need the button to work as an icon only using <i class="fa-regular fa-circle-play"></i> and <i class="fa-regular fa-circle-pause"></i> but display only one icon at a time according to the animation state.
I'm using the js code for flipping from #guradio
// for selecting the input field on clicking over the flip text
function selectText() {
const input = document.getElementById('searchInput');
input.focus();
input.select();
}
// for flipping the text
$('#searchInput').keyup(function() {
if ($(this).val().length == 0) {
$('#text-flip').show();
} else {
$('#text-flip').hide();
}
}).keyup();
#text-flip {
height:20px;
overflow:hidden;
margin-top: -20px;
}
#text-flip > div > div {
color: rgb(43, 43, 43);
padding-left: 60px;
height:45px;
margin-bottom:45px;
display:inline-block;
font-size: inherit
}
#text-flip div:first-child {
animation: show 10s linear infinite;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="get">
<input id="searchInput" placeholder="Search: "/>
<div id="text-flip" onclick="selectText()">
<div><div>Third Text</div></div>
<div><div>Second Text</div></div>
<div><div>First Text</div></div>
</div>
</form>
I updated your code.
let isPlayed=true;
// for flipping the text
$('#searchInput').keyup(function() {
if ($(this).val().length == 0) {
$('#text-flip').show();
} else {
$('#text-flip').hide();
}
}).keyup();
function btnClicked() {
if(isPlayed)
$(".controlBtn").html("<i class='fa-solid fa-circle-play' onclick='btnClicked()'></i>");
else
$(".controlBtn").html("<i class='fa-solid fa-circle-pause' onclick='btnClicked()'></i>");
$("#text-flip div:first-child").toggleClass("flip-animation");
isPlayed = !isPlayed;
}
function selectText() {
const input = document.getElementById('searchInput');
input.focus();
input.select();
}
#text-flip {
height:20px;
overflow:hidden;
margin-top: -20px;
}
#text-flip > div > div {
color: rgb(43, 43, 43);
padding-left: 60px;
height:45px;
margin-bottom:45px;
display:inline-block;
font-size: inherit
}
#text-flip div:first-child {
animation: show 10s linear infinite;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
.controlBtn {
margin-top: 10px;
}
#text-flip div.flip-animation:first-child {
animation-play-state: paused !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="get">
<input id="searchInput" placeholder="Search: "/>
<div id="text-flip" class="flip-animation" onclick="selectText()">
<div><div>Third Text</div></div>
<div><div>Second Text</div></div>
<div><div>First Text</div></div>
</div>
</form>
<div class="controlBtn"><i class="fa-solid fa-circle-pause" onclick="btnClicked()"></i></div>
when I click in the button the backgrounf color of the change but after one seconde it disappear
this is the code
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
<script>
function changerCouleur() {
document.bgColor= "#FFFggF";
}
</script>
</head>
<body>
<form>
couleur <input type="text" > <br>
<button onclick="changerCouleur()">changer couleur </button>
</form>
</body>
</html>
I see you already have an answer, but there is no localStorage mechanism with that example. You may want to study the following structure.
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{ // load
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = function(){
const a = [...arguments];
a.shift().classList.add(...a);
return aC;
}
rC = function(){
const a = [...arguments];
a.shift().classList.remove(...a);
return rC;
}
tC = function(){
const a = [...arguments];
a.shift().classList.toggle(...a);
return tC;
}
// small Library above - magic below can be put on another page using a load event *(except the // end load line)*
const bg = I('bg'), ch_bg = I('ch_bg'), gut = I('gut'), gutS = gut.style;
bg.oninput = function(){
if(this.value.trim().length < 3){
rC(this, 'good');
}
else{
aC(this, 'good');
}
}
ch_bg.onclick = ()=>{
if(hC(bg, 'good')){
let color = bg.value.trim();
bg.value = color; gutS.backgroundColor = color; localStorage.bgColor = color;
}
}
if(localStorage.bgColor){
gutS.backgroundColor = localStorage.bgColor;
}
else{
localStorage.bgColor = '#aaa';
}
}); // end load
//]]>
/* css/external.css */
*{
padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
-moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none;
}
html,body,.main{
width:100%; height:100%;
}
.main{
background:#aaa;
}
.bar{
position:relative; width:100%; height:39px; background:#ccc; padding:3px; border-bottom:1px solid #333;
}
.bar>*{
position:relative; display:inline-block; height:32px;
}
.bar>*>img{
width:32px; height:32px;
}
.bar h1{
font:bold 27px Tahoma, Geneva, sans-serif; margin-left:3px;
}
.guts{
width:100%; max-height:calc(100% - 39px); background:#aaa; padding:7px 7px 0; overflow-y:auto;
}
.guts *{
font:bold 22px Tahoma, Geneva, sans-serif;
}
label>span{
cursor:pointer; display:inline-block; height:27px; color:#fff; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; float:left;
}
label>input,label>select,label>textarea{
width:100%; height:38px; background:#fff; color:#000; padding:5px; border:1px solid #c00; border-radius:3px; box-shadow:none; margin:2px 0 5px 0; -moz-user-select:text; -ms-user-select:text; -webkit-user-select:text; user-select:text;
}
label>input.good,label>select.good,label>textarea.good{
border-color:#0c0;
}
label>textarea{
height:auto;
}
label>input[type=button],label>button{
cursor:pointer; height:auto; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; border:1px solid #007; border-radius:10px;
}
#ch_bg{
margin-bottom:7px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div class='bar'><h1>Color Change Example</h1></div>
<div class='guts' id='gut'>
<label><span>couleur</span><input id='bg' type='text' value='' /><input id='ch_bg' type='button' value='changer couleur' /></label>
</div>
</div>
</body>
</html>
#FFFggF is not a valid color code.
Please try this code:
function changerCouleur() {
document.body.style.background = "#ff9933";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
</head>
<body>
<form onSubmit="return false">
couleur <input type="text" > <br>
<button onclick="changerCouleur();">changer couleur </button>
</form>
</body>
</html>
I added the attribute onSubmit="return false" to the form because otherwise every time you click on the button the page is reloaded
I want the progress bar working. On each input(First Name, Last Name, Full Name, Type your password, Retype your password), the progress should go from 0% to 20%, 40%, 60%, 80%, 100%. if a input field is blank, for each input it will not add 20% from the progress-bar. You can see the progress-bar at top of the web page.
*{margin:0; padding:0;}
#Black{
width:100%;
height:100%;
background:black;
color:white;
position:fixed;
}
#White{
width:600px;
height:auto;
background:rgba(255,255,255,0.1);
color:white;
margin:100px auto;
}
#Prog{
width:100%;
height:20px;
background:rgba(255,255,255,0.1);
color:white;
}
#Pro{
width:0%;
height:20px;
background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
}
#FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
background:white;
color:black;
}
#FirstName, #LastName, #FullName, #PSW, #MPSW{
width:400px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
margin:20px 80px;
border:2px solid white;
}
#FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
user-select:none;
}
#Register{
width:200px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
border:2px solid white;
margin-left:200px;
margin-bottom:20px;
cursor:pointer;
}
#Register:hover{
background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
color:white;
border:2px solid white;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
<div id="Black">
<div id="Prog">
<div id="Pro">0%</div>
</div>
<div id="White">
<form action="http://www.freelancer.com" method="POST">
<input type="text" placeholder=" First Name" id="FirstName"/>
<input type="text" placeholder=" Last Name" id="LastName"/>
<input type="text" placeholder=" Full Name" id="FullName"/>
<input type="text" placeholder=" Type your password" id="PSW"/>
<input type="text" placeholder=" Retype your password" id="MPSW"/>
<input type="submit" value="Register" id="Register"/>
</form>
</div>
<script>
var prog=document.getElementById("Prog");
var pro=document.getElementById("Pro");
var fname=document.getElementById("FirstName");
var lname=document.getElementById("LastName");
var full=document.getElementById("FullName");
var psw0=document.getElementById("PSW");
var mpsw0=document.getElementById("MPSW");
var firstname=document.getElementById("FirstName").value;
var lastname=document.getElementById("LastName").value;
var fullname=document.getElementById("FullName").value;
var psw=document.getElementById("PSW").value;
var mpsw=document.getElementById("MPSW").value;
document.getElementById("FirstName").value="";
document.getElementById("LastName").value="";
document.getElementById("FullName").value="";
document.getElementById("PSW").value="";
document.getElementById("MPSW").value="";
var width=0;
var i;
</script>
</div>
</body>
</html>
Thanks
You can add an event listener for the keypress event of each of the inputs to increase the progress by 20% (keypress is only fired when a character is outputted).
You can also add an event listener for the keydown event of each of the inputs and check if the keyCode is 8 (backspace) and if the current length of the value of the input is 1 (in which case that character will be deleted) to remove 20% from the progress.
JSFiddle: http://jsfiddle.net/p0kg4sb9/13/embedded/result
*{margin:0; padding:0;}
body{
overflow-y: auto;
}
#Black{
width:100%;
height:100%;
background:black;
color:white;
position:fixed;
}
#White{
width:600px;
height:auto;
background:rgba(255,255,255,0.1);
color:white;
margin:100px auto;
}
#Prog{
width:100%;
height:20px;
background:rgba(255,255,255,0.1);
color:white;
}
#Pro{
width:0%;
height:20px;
background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
}
#FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
background:white;
color:black;
}
#FirstName, #LastName, #FullName, #PSW, #MPSW{
width:400px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
margin:20px 80px;
border:2px solid white;
}
#FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
user-select:none;
}
#Register{
width:200px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
border:2px solid white;
margin-left:200px;
margin-bottom:20px;
cursor:pointer;
}
#Register:hover{
background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
color:white;
border:2px solid white;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
<div id="Black">
<div id="Prog">
<div id="Pro">0%</div>
</div>
<div id="White">
<form action="http://www.freelancer.com" method="POST">
<input type="text" placeholder=" First Name" id="FirstName"/>
<input type="text" placeholder=" Last Name" id="LastName"/>
<input type="text" placeholder=" Full Name" id="FullName"/>
<input type="text" placeholder=" Type your password" id="PSW"/>
<input type="text" placeholder=" Retype your password" id="MPSW"/>
<input type="submit" value="Register" id="Register"/>
</form>
</div>
<script>
var prog=document.getElementById("Prog");
var pro=document.getElementById("Pro");
var progress = 0;
var firstNameInputted = false;
var lastNameInputted = false;
var fullNameInputted = false;
var pswInputted = false;
var mpswInputted = false;
var firstName = document.getElementById("FirstName");
firstName.addEventListener("keypress", function(e){
if(!firstNameInputted){
firstNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
firstName.addEventListener("keydown", function(e){
if(e.keyCode == 8&&firstName.value.length==1){
firstNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var lastName = document.getElementById("LastName");
lastName.addEventListener("keypress", function(e){
if(!lastNameInputted){
lastNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
lastName.addEventListener("keydown", function(e){
if(e.keyCode==8&&lastName.value.length==1){
lastNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var fullName = document.getElementById("FullName");
fullName.addEventListener("keypress", function(e){
if(!fullNameInputted){
fullNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
fullName.addEventListener("keydown", function(e){
if(e.keyCode==8&&fullName.value.length==1){
fullNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var psw = document.getElementById("PSW");
psw.addEventListener("keypress", function(e){
if(!pswInputted){
pswInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
psw.addEventListener("keydown", function(e){
if(e.keyCode==8&&psw.value.length==1){
pswInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var mpsw = document.getElementById("MPSW");
mpsw.addEventListener("keypress", function(e){
if(!mpswInputted){
mpswInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
mpsw.addEventListener("keydown", function(e){
if(e.keyCode==8&&mpsw.value.length==1){
mpswInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
</script>
</div>
</body>
</html>
I have created a HTML form which has two buttons (instead of a submit button), each programmatically sending the form to a unique form action address.
<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>
The scripts:
form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
form.submit();
}
function form2() {
form.action="example2.php";
form.submit();
}
Work well, responding to which button you press. However, the same html form validation that worked before (when using a 'submit' button), no longer shows a hint and the form sends regardless of whether there is input or not.
I have read that because I am calling the form.submit() programmatically, it bypasses the onSubmit() function of a form, which is where the validation takes place.
My question is: Can I programmatically force the onSubmit() so that I get the validation pop up? I must make clear that I am NOT wanting to create a JavaScript form validation, i.e. using an alert; rather, use JavaScript to enforce the HTML validation as found here, when you click submit: https://jsfiddle.net/qdzxfm9u/
You can merely change your button's type to submit and drop the form.submit() from your JS part.
So the HTML part becomes:
<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>
This way, clicking any button does submit by itself, but before is executed the JS part:
form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
}
function form2() {
form.action="example2.php";
}
EDIT
Warning: I originally based my solution on a copy of the OP HTML part, where the "pseudo-buttons" used a strange element <label type="input"...>, so I read (too quickly) as if it was <button type="button"...> and simply changed type from input to submit!
This way, it couldn't work as expected.
It is now corrected in the above code.
Maybe something like this :
var form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
}
function form2() {
form.action="example2.php";
}
<form id="formExample">
<input type="text" id="input1" required>
<input type="submit" onClick="form1()" value="Form Action 1" />
<input type="submit" onClick="form2()" value="Form Action 2" />
</form>
How about making a dropdown list - could be radio buttons instead - containing the form two actions with one submit button like in this JS Fiddle, then having one function on form submit
var form = document.getElementById("formExample"),
select = document.getElementById("slct");
form.addEventListener('submit', function() {
if (select.value == 1) {
form.action = "example1.php";
} else {
form.action = "example2.php";
}
// alert for demo only
alert(form.action);
form.submit();
});
<form id="formExample">
<input type="text" id="input1" required>
<select id="slct" required>
<option></option>
<option value="1">Form Action 1</option>
<option value="2">Form Action 2</option>
</select>
<button type="submit">Submit</button>
</form>
function togglePassword(el){
var checked = el.checked;
if (checked) {
document.getElementById("password").type = 'text';
document.getElementById("toggleText").textContent= "Hide";
} else {
document.getElementById("password").type = 'password';
document.getElementById("toggleText").textContent= "Show";
}
}
function login()
{
var uname = document.getElementById("uname").value;
var password = document.getElementById("password").value;
if(uname === '')
{
alert("Please enter the user name.");
}
else if(password === '')
{
alert("Enter the password");
}
else
{
alert('Login Successful. Thank You!');
}
}
function clearFunc()
{
document.getElementById("uname").value="";
document.getElementById("password").value="";
<script type="text/javascript">
function togglePassword(el){
var checked = el.checked;
if (checked) {
document.getElementById("password").type = 'text';
document.getElementById("toggleText").textContent= "Hide";
} else {
document.getElementById("password").type = 'password';
document.getElementById("toggleText").textContent= "Show";
}
}
function login()
{
var uname = document.getElementById("uname").value;
var password = document.getElementById("password").value;
if(uname === '')
{
alert("Please enter the user name.");
}
else if(password === '')
{
alert("Enter the password");
}
else
{
alert('Login Successful. Thank You!');
}
}
function clearFunc()
{
document.getElementById("uname").value="";
document.getElementById("password").value="";
}
</script>
/* heading */
h1 {
display: block;
font-size: 2em;
font-weight: bold;
/* padding: 0% 1% 3% 6.5%; */
margin: 0% 35% -10% 36%;
}
h1:hover{
color:#4499d9 ;
transform: translateY(-5px);
}
/* bg image */
body {
background-image: url('img/bg4.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
/* Bordered form */
form {
/* border: 13px solid black; */
width: 27%;
height: auto;
position: absolute;
left: 10%;
margin-left: -3px;
top: 18%;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #17234b;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 49%;
}
/* Add a hover effect for buttons */
button:hover {
background-color: #4499d9;
transform: translateY(-5px);
box-shadow: 1px 3px 7px #6f6d72;
}
#toggleText {
display: block;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 30%;
border-radius: 20%;
box-shadow: 1px 3px 9px #6f6d72;
}
img.avatar:hover{
transform: translateY(-5px);
box-shadow: 7px 9px 9px #6f6d72;
}
/* Add padding to containers */
.container {
padding: 16px;
}
span.buttons{
width: 100%;
display: flow-root;
}
#toggleText{
float: left;
}
#toggle{
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>LOGIN PANEL</h1>
<!-- Login Form -->
<div class="form">
<form >
<div class="imgcontainer">
<img src="img/Login.jfif" alt="Login Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" id="uname" name="uname"/>
<label for="password"><b>Password</b></label>
<input type='password'placeholder="Enter Your Password" name="password" id='password'/>
<input type='checkbox' id='toggle' onchange='togglePassword(this)'><span id='toggleText'>Show</span>
<span class="buttons">
<button type="submit" value="Reset" onclick="clearFunc()" class="btn">Reset</button>
<button type="submit" value="Login" class="btn" onClick="login()">Login</button>
</span>
</div>
</form>
</div>
</body>
</html>
So I have a plus/minus divs, which, when the buttons are clicked, will either add or subtract a value. My issue is that when I place two of these on a page, they conflict with each other.
How can I adjust these so that they won't conflict?
You can see the working code here: http://codepen.io/maudulus/pen/yjnHv
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$('#middle').val(eval(inputVal) +1)
}
}
function subtractInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(-1)
} else {
$('#middle').val(eval(inputVal) -1)
}
}
You are using #middle as an ID in two places, the IDs need to be unique (I updated the IDs to something unique, they are arbitrary). So, jQuery finds the first ID it sees and updates it, that is why the top one gets updated when you click the bottom one. A simple fix is to use $(thisDiv).parent().children('input') when you want to update the value. That way you ensure you find the proper input to update.
Here is a working codepen that I forked of your original.
Also, you should not be using eval. There are better ways to convert a string into an int. Here is a good explanation as to why eval is a bad idea.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle1" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle2" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$(thisDiv).parent().children('input').val(eval(inputVal) +1) // change it here
}
}
To extend tokyovariable's answer
The easiest way to find the input element would be:
$(thisDiv).closest('.doors').find(':input');
and forget about eval. You can use $.isNumeric to check if it's a number.
This is a simplified version:
$(function(){
$('.left').on('click',function() {
calculateValue(this, -1, -1);
});
$('.right').on('click',function() {
calculateValue(this, +1, 1);
});
});
function getInput(thisDiv)
{
return ($(thisDiv).closest('.doors').find(':input'));
}
function calculateValue(thisDiv, op, defaultValue)
{
var elem = getInput(thisDiv);
var value = elem.val();
elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}
$(function(){
$('.left').on('click',function() {
calculateValue(this, -1, -1);
});
$('.right').on('click',function() {
calculateValue(this, +1, 1);
});
});
function getInput(thisDiv)
{
return ($(thisDiv).closest('.doors').find(':input'));
}
function calculateValue(thisDiv, op, defaultValue)
{
var elem = getInput(thisDiv);
var value = elem.val();
elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}
.miniDoor {
font-style: bold;
height:30px;
width:30px;
background:#333;
padding:10px;
font-size:20px;
text-align:center;
color:#fff;
line-height:1.5em;
/* transition: all .3s ease-in-out;*/
transition:all .3s;
transition-timing-function: cubic-bezier(0,0,0,1);
transform-style: preserve-3d;
float:left;
}
.miniDoor.right {
-webkit-transition: background .7s;
-moz-transition: background .7s;
transition: background .7s;
}
.miniDoor.right:hover {
background: #6B6A6A;
background: rgba(107, 106, 106, 0.8);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.miniDoor.left {
-webkit-transition: background .7s;
-moz-transition: background .7s;
transition: background .7s;
}
.miniDoor.left:hover {
background: #6B6A6A;
background: rgba(107, 106, 106, 0.8);
-webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
#middle1, #middle2{
border:0;
height:50px;
width:75px;
background:#333;
padding:10px;
font-size:20px;
text-align:center;
color:#fff;
line-height:1.5em;
/* transition: all .3s ease-in-out;*/
transition:all .3s;
transition-timing-function: cubic-bezier(0,0,0,1);
transform-style: preserve-3d;
float:left;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle1" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle2" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>