Develop Reference

How to implement onfocus() with span tag onclick() event

I have one input type field which is google inspired input type with label animation which has onfocus event and In one of the Input fields has the Password field in which I have to apply eye-toggle functionality with onclick event. I am sharing a screenshot of the input type.
When I am trying to implement toggle functionality for passwords. onclick event is not able to trigger because of the onfocus event.
Here is the code for the toggle.
CSS and icon.
.form-row {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-3 {
max-width: 485px;
-webkit-box-flex: 0;
flex: 0 0 485px;
}
.inputfield {
margin-bottom: 24px;
margin-right: 20px;
position: relative;
}
.inputfield .form-label{
position: absolute;
top: 23px;
left: 20px;
cursor: text;
transition: top 250ms ease-in-out, left 250ms ease-in-out, font-size 250ms ease-in-out
}
.inputfield input{
margin: 8px 0;
}
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
}
.inputfield-control:focus {
border: 1.5px solid #2464E4;
}
.inputfield-control:focus ~ .form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.inputfield-control:not(:placeholder-shown).inputfield-control:not(:focus)~.form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.show-password-icn {
font-size: 22px !important;
margin-top: -40px;
margin-right: 30px;
color: #767676;
float: right;
}
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"></script>
Because of the Animation in the input field toggle click event is not even triggered.
$(document).on('click', '.toggle-password', function() {
$(this).toggleClass("icon ion-md-eye");
var input = $("#Password");
input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 inputfield">
<input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
<label class="form-label">New Password</label>
<div class="input-group-append custom">
<span toggle="#password-field" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
<br>
</div>
</div>
I have tried to perform another click event instead of the click event, but still, any of the click events are not working with Animation.

Please update some CSS as per below:
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
padding-right: 70px;
}
.input-group-append.custom {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
z-index: 1;
}
.show-password-icn {
font-size: 22px !important;
color: #767676;
}
Please let me know if you still have any issues.

Submit button not showing up in the same area on different screens

My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>

In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}

Issue with positioning of buttons

the gray buttons show on top of the gif image in mobile version also they are not responsive and show quite big. If you have any ideas i would highly appreaciate.
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox">
<img src="https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612" width="472px" height="423px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<button style="background-color:#CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;">Natural Silver</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 160px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px; ;">Night Blue</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Cardinal Red</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Coral Orange</button>
<br>
<p><b>Custom colors are available upon request.</b></p>
</div>
</div>

I think one way you could approach this is use flexbox. Based on your question, this should work for you:
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
Also, your buttons appear large likely because you have not adjusted their size in the media query. You will need to move the button styles out of your html and into your css file for the media query to work, since the inline css will override the referenced css file.

add position: absolute to tour class .imgbox
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: absolute; //ADD POSITION ABSOLUTE
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
I recommend you use one single class to your buttons, and dismiss the "style" attribute, to this way your code is more clean

How to get the text in the left-hand div flowing around the close button on the right (to work in IE8 as well!)

I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?

Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>

How to achieve a zooming effect on a carousel background using CSS3 and JQuery

I want to add a background zooming out effect same as in this website carousel.. I cannot figure out a solution for that as new to web-designing.
this is the code for the div I want to apply that effect:
MARKUP:
<div class="banner">
<div class="content block1 animated">
<h1>Ceramic Directory</h1>
<span>World's largest Ceramic hub, all the ceramic traders reside here!</span>
Register now
<span class="handler">→</span>
</div>
</div>
CSS:
.banner{
margin-bottom: 10px;
background-image: url("../images/png.jpg");
background-repeat: no-repeat;
height: 700px;
background-size: cover;
width: 100%;
}
.banner .block1{
background-color: rgba(256,256,256,0.7);
margin-top: 10%;
height: 300px;
position: absolute;
width: 90%;
padding-top: 7%;
animation-name: fadein;
-webkit-animation-name: fadein;
}
.banner .block1 h1{
text-align: center;
font-family: LatoWebLight;
font-size: 40px;
margin-bottom: 5px;
}
.banner .block1 span{
text-align: center;
font-family: LatoWebHairline;
font-size: 25px;
margin-bottom: 30px;
display: block;
}
.banner .block1 a{
text-align: center;
border-radius: 5px;
border: 1px solid black;
font-family: LatoWebMedium;
font-size: 18px;
margin-left: 45%;
margin-top: 5%;
padding: 10px;
text-decoration: none;
color: black;
}
.banner .block1 .handler{
text-align: center;
border-radius: 5px;
border: 1px solid black;
cursor: pointer;
font-size: 18px;
margin-left: 105%;
margin-top: -5%;
padding: 10px;
color: black;
width: 20px;
transition: color 0.2s;
-webkit-transition: color 0.2s;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
.banner .block1 .handler:hover{
font-weight: 900;
background: rgba(34,34,34,0.5);
color: white;
}
how did they make that?
Thanks for the help

The website you mentioned uses a jQuery plugin to animate the header image. You can find the plugin's page here and some detailed documentation here
If you don't plan on using a plugin, you can achieve the image scalling effect by using CSS3. Same example below:
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>