Hi
I am sorry for inconveniences again but I need to come back. I made a new version of the suggested matter, but again, the falling back labels. I used w3schools bootstrap 3 form default, applying css flexbox on it. the hover element helped me to to float up the labels (mostly jumping) the fals back no matter if the input is empty or any blabla is in it. can you help me with this thing? thank you, frank.
I am not back until later this afternoon and will reply when I am back at the computer.
I thought you were pretty close with one of your earlier demos but will double check when I get back
Using one of the examples you posted here is a working version for you to play with.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<style>
.form-group {
position: relative;
margin:1.5rem 0 2rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
left:0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}
.form-control.error ~ .form-control-placeholder, .form-control:focus ~ .form-control-placeholder, .form-control:valid ~ .form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
.form-control.error ~ .form-control-placeholder {
color:red;
}
.error {
color:red;
}
</style>
<script>
$(document).ready(function() {
$("#myform").validate({
rules: {
name: "required",
password: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
},
messages: {
name: "Please enter your full name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address"
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form id="myform" action="/action_page.php">
<div class="form-group">
<input type="text" id="name" class="form-control" name="name" required>
<label class="form-control-placeholder" for="name">Name</label>
</div>
<div class="form-group">
<input type="text" id="email" class="form-control" name="email" required>
<!-- placeholder="Enter email"-->
<label class="form-control-placeholder" for="email">Email:</label>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" name="password" required>
<label class="form-control-placeholder" for="password">Password</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
You seem to have missed out the link to the validation plugin and had incorrect ids on your form.
When the validations plugin produces an error it appends an extra label to the input and therefore the adjacent sibling combinator (+) used for the floating label misses its target. Instead you need to use the general sibling combinator ( ~).
As the floating label technique requires the use of the :valid pseudo class and the required attribute in order to work it would probably be better to utilise the js valid class instead which is dynamically added to the input by the plugin.
e.g.
.form-control.error ~ .form-control-placeholder,
.form-control:focus ~ .form-control-placeholder,
.form-control.valid ~ .form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
Use the devtools to see what classes the js adds so that you see how this works and how to utilise the code properly.
Thank you for help, I’ll try. meanwhile I was waiting for your answare I made another experiment with hamburger icon, this my idea but I’got a problem. If I put the bars in a div with class icon all is frosen, if I paste icon class beside navbar-toggle: button class="navbar-toggle icon " it works but the icon is visible after navbar is restored stretching window I’ll post my experiment.this is nightmare, sorry, I need to learn more. thank you, frank
I can’t see anything wrong with that demo?
Can you explain in more detail what is going wrong:)
as I click on the hamburger icon it should change it into x but it doesn’t. I placed it in a div. if I place it in buttons class=“” it works, but as I expand the window the hamburger doesn’t disappear as it supposed to do.thank you, frank
It changes into an X for me although its a couple of pixels out which can easily be rectified.
I just adjusted the translate values to 6px, -6px as you can see from the screenshot.
The hamburger disappears as I open the window?
You will need to provide more detailed information as I am obviously not seeing what you are seeing.
Hi
for me doesn’t change to x, I don’t understand why, neither on ie nor on firefox. can you help me with it?
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#myNavbar">
<div class="icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</button>
if I place icon class beside navbar-toggle (button) it works but it will be visible after collapse turn back to normal navbar, beside brand name. teoreticly it should work as it is now as you showed me in your example, but in my browser looks frosen and I don’t understand it.
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#myNavbar">
<div class="icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</button>
this is the mentioned part
I would like to ask, how can I add confirming simbols: ok, x for failure, star for required fields? thank you, frank
You see you have to be more specific with your questions as it takes me about 5 goes to get the right details.
The X works in Chrome.
I now look in Firefox and see that it does not work. If you remove the class of .icon from the button and apply it to the button itself then it should start working.
Also note that a div cannot be a child of a button. It has to be an inline element like a span.
Like this:
<button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</button>
Then change the styles for .icon to .inner-icon.
.inner-icon{
/*
position:absolute;
top:5%;
right:5%;*/
display:flex;
flex-direction: column;
}
I changed it and still frosen, do not change. can you help me?thank you
interesting in chrome works but firefox endie doesn’t. why? is it version related? what can I do? thank you , frank
If you look at the example I gave you you will see that the js is adding classes to determine the valid states (use devtools to see this in action). You could use these classes as hooks to show your symbols assuming you place them in the current context.
Back tomorrow as going offline now.
thank you
Your codepen hasn’t changed?
Update the codepen and I will take a look. It will work if you do what I say.
You can’t really detect a click inside a button as that would indicate multiple actions and a button can only be clicked once which is why other browsers don’t like you doing it. Apply the click event to the button itself as directed above.
AsI said I’m back tomorrow now.
thank you, then we continue tomorrow, frank
You still haven’t updated the codepen so I can’t see if you are doing what I suggested. Post a link to the codepen with the problem and has the updated code.
As I mentioned above you can tie into the validation plugin’s dynamically added classes and provide some more feedback.
Here’s a quick codepen example:
Hi
this is my latest version of my hamburger animated experiment. as you mentioned it works in chrome, giving funy shape, but ie11 and firefox is frosen, doesn’t work. please have a look. I made a similar experiment in the library of richmond adult community college, it was working fine, on my laptop with ie11 and firefox didn’t. I don’t understand. thank you frank
also I noticed a strage thing: as I click on the hamburger icon sometimes changes it’s work: The hamburger will be on the dropdown and x when it is closed. I have to refresh it.