I'am actually new with CSS, and have no idea to create a input like stackoverflow search form, I think it can be done with jquery trigger by button and change width value of that form?? Any suggestion or solutions?
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.form-control{
width:100px;
}
.form-control:focus{
width:400px;
outline:none;
transition: all 600ms cubic-bezier(.165, .84, .44, 1);
}
</style>
</head>
<body>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</body>
</html>
some idea for you, this codepen link:
http://codepen.io/hdl881127/pen/EmyRaG
or use the following, check in full page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
list-style: none;
font-family: helvetica, arial, sans-serif;
font-size: 14px
}
div#bar {
height: 40px;
background: #ccc;
box-shadow: inset 0 40px 40px -20px #eee;
padding-right: 200px;
}
div#bar > div {
position: relative;
padding-top: 5px
}
div#bar input, div#bar ul {
float: right;
}
div#bar input {
height: 30px;
width: 275px;
border-radius: 5px;
border: none;
padding: 5px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
background: #eee;
color: #333;
transition: all .7s
}
div#bar input:focus {
width: 625px;
background: white;
position: relative;
z-index: 20
}
div#bar input:focus + ul {
position: absolute;
right: 300px;
opacity: 0
}
div#bar ul {
width: 400px;
height: 30px;
position: absolute;
right: 300px;
opacity: 1;
transition: opacity .35s
}
div#bar ul li {
float: right;
line-height: 30px;
margin-left: 20px;
}
<div id="bar">
<div>
<input type="text" placeholder="search" />
<ul>
<li>Questions</li>
<li>Jobs</li>
<li>Documentation</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
</div>
Related
Situtation: I am trying to make the div (contains a textbox and button) to be always in the center of the white space left after the design of clip path (as you can see in the image attached).
knowing that clip path is based on percentage it keep changing when the webpage size change
ISSUE: When the webpage size change, the element is no more centered!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Check-in</title>
</head>
<body>
<header>
<h1 id="title">MOUS AIRWAY | <span id="check-in">CHECK-IN</span></h1>
</header>
<div class="userInfo">
<span id="tooltip">É neccessario inserire un codice <br>fiscale (16 caratteri).</span>
<input type="text" id="codiceFiscale" placeholder="cf" oninput="CloseToolTip()">
<button onclick="CheckIn()" id="checkIn">Check-in</button>
</div>
<script src="js.js"></script>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header{
font-family: bebas;
color: gold;
height: 100vh;
background-color: #00008B;
clip-path: polygon(100% 0, 30% 50%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
#title{
position: absolute;
margin-left: 50px;
margin-top: 150px;
font-size: 60px;
}
#check-in{
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.userInfo{
display: flex;
position: absolute;
margin-top: -450px;
margin-left: 50%;
}
button{
width: 170px;
height: 60px;
background-color: transparent;
font-size: 20px;
color: #00008B;
cursor: pointer;
font-weight: bold;
transition: background-color 0.5s ease;
}
button:hover{
background-color: #00008B;
color: white;
transition: background-color 0.5s ease;
}
#codiceFiscale{
width: 450px;
height: 60px;
margin-right: 30px;
padding-left: 10px;
border: solid 1px black;
font-size: 30px;
text-transform: uppercase;
border-color: #00008B;
}
#codiceFiscale:focus{
outline: none;
box-shadow: 0px 3px 10px #00008B;
}
P.S: i need a solution using only html, css or js. no jquery or bootstrap library.
Thanks!
To keep content always in verticaly center like in my case. here is the solution i found. make it independently from clip-path, the solution was easiest than i was overthinking...just give it position absolute! and of course make sure it always in center by using percentage.
SOLUTION:
.userInfo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0%,-50%);
align-items: center;
}
I want to tick mark on my button on the right corner. I set the input value to it gives me a buttoner text with tick mark I wanted to it should be placed on the right corner.
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
}
<input type="button" class="buttoner" value="buttoner✓"/></input>
i want like this:
.my-btn {
position: relative;
display: inline-block;
}
.buttoner {
background-color: #66bb6a;
border: none;
cursor: pointer;
height: 48px;
border-radius: 3px;
width: 120px;
text-align: center;
color: white;
line-height: 48px;
font-size: 14px;
font-weight: bold;
}
.my-btn .fa-check {
position: absolute;
top: 5px;
right: 10px;
color: #fff;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="my-btn">
<input type="button" class="buttoner" value="Button"/>
<i class="fa fa-check"></i> </div>
</body>
</html>
try like this
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
padding:12px 30px;
display:inline-block;
border-radius: 5px;
color:#fff;
}
.tick{
display:inline-block;
position:relative;
}
.tick:after{
content: '';
position:absolute;
right:11px;
top:8px;
display: block;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<span class="tick"> <input type="button" class="buttoner" value="button"/></input></span>
</body>
</html>
Check this i added..
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.button_box{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
position: relative;
}
.buttoner {
background-color: transparent;
border: none;
display: block;
width: 100%;
height: 100%;
}
.button_box span {
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="button_box">
<input type="button" class="buttoner" value="buttoner"/>
<span>✓</span>
</div>
</body>
</html>
I'm working on a mobile web application and I have a problem with the Android soft keyboard when an input field is focused.
When I focus the input field, the soft keyboard appears. On Windows Phone (tested on 7.8) the whole page, so the entire DOM goes up to make room for the softkeyboard. With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. How can I get the whole DOM, or actually, the hole body of the page to go up to make room for the soft keyboard on Android (I haven't tested this on iOS yet).
Here are a few screenshots on Android when the keyboard is opened:
Here is what the page looks like when it's normal:
And this is what it looks like when the soft keyboard is opened:
How can I get this effect?:
Here's my source code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex" />
<!-- CSS -->
<style>
#charset "UTF-8";
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
input, textarea, button {
outline: none;
}
#appMain {
position: absolute;
width: 100%;
max-width: 640px;
height: 100%;
background: url(static/img/static/main_bg.fw.png) no-repeat;
background-size: cover;
}
#appHeader {
position: absolute;
margin: 0;
width: 100%;
height: 50px;
background: #007EA8;
}
#headerUnderline {
position: absolute;
margin-top: 50px;
width: 100%;
height: 5px;
background: #CCC;
}
#headerLogo {
position: absolute;
left: -50px;
width: 125px;
height: 72px;
background: url(static/img/static/sprite.fw.png);
background-position: 0 0;
}
#mainLogo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 100px;
}
#mainSlogan {
width: 100%;
text-align: center;
font: 20px sans-serif;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
#facebook {
margin: 0;
padding-left: 30px;
float: left;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #003A75;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#signIn {
margin: 0;
float: right;
width: 50%;
height: 100%;
font: 14px sans-serif;
color: #FFF;
background: #007900;
border: 0;
text-shadow: 1px 1px 1px #000;
}
#facebookLogo {
position: absolute;
left: 4%;
top: 10px;
width: 16px;
height: 30px;
background: url(static/img/static/sprite.fw.png);
background-position: -160px -30px;
}
#fieldHolder {
position: absolute;
width: 100%;
bottom: 100px;
}
.accountField {
margin-bottom: -2px;
padding-left: 5px;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font: 14px sans-serif;
color: #333;
}
.accountField:focus {
background: #FFF;
}
.accountField::-webkit-input-placeholder {
color: #FFF;
}
.accountField2::-moz-placeholder { /* Firefox 19+ */
color: #FFF;
}
.accountField:-ms-input-placeholder {
color: #FFF;
}
#subFooter {
position: absolute;
bottom: 65px;
width: 100%;
}
#signUpButton {
margin-left: 10px;
float: left;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
#forgotButton {
margin-right: 10px;
float: right;
background: none;
border: 0;
font: 14px sans-serif;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
</style>
<!-- JS -->
<script src="static/js/includes/jquery_m.js"></script>
<script src="static/js/includes/jquery.js"></script>
</head>
<body>
<div id="appMain">
<div id="appHeader">
<div id="headerUnderline"></div>
<div id="headerLogo"></div>
</div>
<img id="mainLogo" src="static/img/static/main_logo.fw.png" alt="Welcome to Scrapll!" />
<h1 id="mainSlogan">The Private Social Network<h1>
<form action="login.php" method="post">
<div id="fieldHolder">
<input type="email" class="accountField" name="email" placeholder="Email Address" />
<input type="password" class="accountField" name="password" placeholder="Password" />
</div>
<div id="subFooter">
Sign Up
Forgot password
</div>
<div id="footer">
<input type="submit" id="signIn" value="Sign In" />
</form>
<button type="button" id="facebook">Login with Facebook</button>
<div id="facebookLogo"></div>
</div>
</div>
</body>
</html>
I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).
Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!
I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.
From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?
Any help would be greatly appreciated. an example of what I want to do is here at
http://www.andersenwindows.com/
and here is what I have so far:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >About</a></li>
<li><a href="#" >Home</a>
<ul>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width: 970px;
height:40px;
background: #f1f2f3;
color: #fff;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
Thanks,
C
I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/
Here's the JS... it's pretty generic but you should be able to edit to suit.
$(document).ready(function () {
$('a').on('click', function(event){
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(this).closest('li').find('ul').slideToggle();
});
});
});
Are you looking for something like:
$('#div1').click(function() {
if( /* check if already visible */)
$('div1').toggle(); //also do-able with $('div1').slideToggle();
$('div2').hide();
}
but first you would hide all your divs first and check the current div