For some reason the ul gets display: none, and is not displayed even when the impute element is clicked.
This is the html
When this is clicked:
<input class="input country" type="text"/>
This html should show (but it doesn't):
<ul id='country-list'>
<li id="US">United States</li>
</ul>
This is the jQuery code:
function handleCountries() {
$('#country-list').hide();
$('#country').click(function () {
$("#country-list").show();
});
};
function handleTestOut() {
handleCountries()
};
$(handleTestOut)
This is the html:
<div class="container">
<input class="input country" type="text"/>
<ul id='country-list'>
<li id="US">United States</li>
</ul>
<button>explore</button>
</div>
This is some css:
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
}
.input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 18%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: blue;
top: 20px
}
Here is the full code
Edit: I removed the invalid html, but am getting the same results
You hide it with: $('#country-list').hide();
And what is with this functions calling each other?
You are using jQuery to call handleTestOut function in witch you call handleCountries function. It does not make much sense.
You will get absolutely same result if you just leave it out of functions:
But your main problem was you don't have #country id you have .country CSS class for click calling (or use input.country or .input class, or all of it input.country.input):
$('#country-list').hide();
$('.country').click(function() {
$("#country-list").show();
});
html {
height: 100%;
}
body {
font-family: 'Nunito', sans-serif;
color: #1b4639;
background: #cbe2e4;
height: 100%;
}
.wrapper {
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
p {
text-align: center;
margin: 0;
font-size: 24px;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
}
.input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 18%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: blue;
top: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<p>Hello World!</p>
<div class="container">
<input class="input country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
<li id="DZ">Algeria</li>
<li id="AS">American Samoa</li>
<li id="AD">Andorra</li>
<li id="AO">Angola</li>
<li id="AI">Anguilla</li>
<li id="AQ">Antarctica</li>
<li id="AG">Antigua and Barbuda</li>
<li id="AR">Argentina</li>
<li id="AM">Armenia</li>
<li id="AW">Aruba</li>
<li id="AU">Australia</li>
<li id="AT">Austria</li>
<li id="AZ">Azerbaijan</li>
<li id="BS">Bahamas</li>
<li id="BH">Bahrain</li>
<li id="BD">Bangladesh</li>
<li id="BB">Barbados</li>
<li id="BY">Belarus</li>
<li id="BE">Belgium</li>
<li id="BZ">Belize</li>
<li id="BJ">Benin</li>
<li id="BM">Bermuda</li>
<li id="BT">Bhutan</li>
<li id="BO">Bolivia, Plurinational State of</li>
<li id="BQ">Bonaire, Sint Eustatius and Saba</li>
<li id="BA">Bosnia and Herzegovina</li>
</ul>
<button>explore</button>
</div>
</div>
</body>
</html>
Related
I am working on sample blog design and trying to learn css & html with flex and grid. I am trying to set back ground image to the grid 1,3,5 . I tried giving the class and add url with image but unable to do. I have provided my code for your reference. it silly question but with grid I am unable to get it..
Code pen link : code pen link
I tried something like this :
.bg{
background: url(1.jpg);
}
tried to assign this bg class to div but didnt work. I tried removing the back ground color from inner grid but it didnt work..
CSS :
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
background: lightgreen;
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url(/image1.jpg);
border: crimson;
display: grid;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div>1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
assign bg class to div(1 , 3, 5) and remove the back ground color from inner grid :)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
/*background: lightgreen;*/
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url('https://picsum.photos/200/300') !important;
background-repeat: no-repeat;
background-size: cover;
border: crimson;
display: grid !important;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div class="bg">1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
I was making the responsive mobile version of a website, when I discovered that the body expands when resizing the window, here's a screenshot of it (the header is pink so I could spot where the error was in pixels, ah yes, it's in Italian but don't worry):
This is the code:
<head>
<meta charset="utf-8">
<title>
Ravenna | Home
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/zoom-marker.css"/>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/script.js" async></script>
</head>
<body id="body">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<section id="hd" class="header">
<h2>Ravenna</h2>
<nav>
<ul>
<li class="menu">
Storia
<ul class="ani-menu">
<li><a class="aestr1" href="antica.html">Antica</a></li>
<li><a class="a" href="esarcato.html">L'Esarcato</a></li>
<li><a class="a" href="medioevo.html">Medioevo</a></li>
<li><a class="aestr2" href="dal500aoggi.html">Dal 500 a oggi</a></li>
</ul>
</li>
<li class="menu">
Strutture
<ul class="ani-menu">
<li><a class="aestr1" href="santapollinareinclasse.html">Sant'Apollinare in Classe</a></li>
<li><a class="a" href="museoclassis.html">Museo CLASSIS</a></li>
<li><a class="a" href="portoanticoinclasse.html">Porto Antico in Classe</a></li>
<li><a class="a" href="sanvitale.html">San Vitale</a></li>
<li><a class="a" href="gallaplacidia.html">Galla Placidia</a></li>
<li><a class="a" href="battisteroneoniano.html">Battistero Neoniano</a></li>
<li><a class="a" href="museoarcivescovile.html">Museo Arcivescovile</a></li>
<li><a class="aestr2" href="strutture.html">Altro...</a></li>
</ul>
</li>
<li class="menu">
Banksy
<ul class="ani-menu">
<li><a class="aestr1" href="chie.html">Chi è</a></li>
<li><a class="a" href="cosacomunica.html">Cosa comunica</a></li>
<li><a class="aestr2" href="spuntiperchiacchierare.html">Spunti per chiacchierare</a></li>
</ul>
</li>
</ul>
</nav>
<div id="burgy" class="burgy">
<a id="onclickburgy" onclick="openSlideMenu()">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</a>
</div>
<div id="side-menu" class="side">
<div id="containerside" class="containerside">
Home
Storia
Strutture
Banksy
</div>
</div>
</section>
<section class="wall">
<img src="img/Ravenna.jpg" class="fitBg">
<div class="content">
<h2>Benvenuti a Ravenna!</h2>
<p>N.B. Per esplorare il sito rivolgersi ai punti di cui sopra, una guida più completa può essere trovata qui sotto</p>
<div class="animation">
^
</div>
</div>
</section>
</body>
</html>
and there is the css:
body {
font-family: 'Poppins', sans-serif;
min-height: 200vh;
background: #111;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
section {
position: relative;
padding: 20px;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 1000000;
display: flex;
justify-content: space-between;
width: 100%;
padding: 40px 60px;
transition: 0.35s;
}
.header .logo {
color: #fff;
font-size: 1.2em;
font-family: 'Acme';
margin-top: 8px;
}
.wall {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wall:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 400px;
z-index: 1;
background: linear-gradient(to top, rgb(17, 17, 17),transparent);
}
.wall .content {
position: relative;
max-width: 900px;
text-align: center;
z-index: 1;
}
.wall .content h2 {
color: #fff;
font-size: 5em;
font-family: 'Leckerli One';
}
.wall .content a {
position: absolute;
color: #fff;
font-size: 9em;
font-family: 'Leckerli One';
bottom: -140px;
left: 50%;
transform: translate(-50%, 70%) rotate(180deg);
font-weight: 900;
}
Add this to the top of your CSS and your problems will be solved:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
The issue is that the padding on the .header is making the element expand beyond where you want it to. Changing the box-sizing will modify the way the padding is interpreted and apply it inside the content area instead of expanding it.
Try using overflow-x like this:
html,body{
overflow-x: hidden;
}
Why does the ul element get the full width of the wrapper element when the container div is its parent? And how can I change this?
Structure of the HTML:
Wrapper
| container
| label
| input
| ul
| botton
HTML & CSS:
.wrapper{
margin: 20px auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
width: 80%;
margin: auto;
}
.country-input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 100%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: #F2F2F2;
top: 20px;
left: 0px;
}
<div class="wrapper">
<div class="container">
<label for="country">State</label>
<input class="input country-input" id="country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
</ul>
<button>explore</button>
</div>
</div>
Here is a link to the full code
This is how it looks:
here
On the left you can see the negative position the element gets:
here
Its just because your <ul> tag is using padding. Look at snippet and tell me is that what you're looking for?
.wrapper{
margin: 20px auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
width: 80%;
margin: auto
}
.country-input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 100%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: #F2F2F2;
top: 20px;
padding: 0;
}
li {
padding-left: 40px;
}
<div class="wrapper">
<div class="container">
<label for="country">State</label>
<input class="input country-input" id="country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
</ul>
<button>explore</button>
</div>
</div>
You may also consider using select + option tags instead of unordered list.
Example:
<select id='country-list'>
<option id="US">United States</li>
<option id="AF">Afghanistan</li>
<option id="AX">Åland Islands</li>
<option id="AL">Albania</li>
</select>
set in the ul tag - width: unset, left: 0 and right: 0
.wrapper{
margin: 20px auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
width: 80%;
margin: auto
}
.country-input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: unset;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: #F2F2F2;
top: 20px;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<label for="country">State</label>
<input class="input country-input" id="country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
</ul>
<button>explore</button>
</div>
</div>
please set the style of ul, padding:0px;
I am using the code for a Horizontal scroller
What I would like is to be able to add a panel /text at the bottom and a button in the top right-hand corner of each panel. But I can’t work out how to get it to fit.
How scroller look at the moment:
How I would like the panel to look like:
Code below
------
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Slider Template">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><a name="top"></a>
<script>
$(document).ready(function(){
$('#content').load("search-tab.html");
});
</script>
</script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script>
$(document).ready(function(){
$('.hamburger').css('cursor','pointer').click(function() {
var status = $('.home').attr('class');
if(status === "home") {
$('#layer_1').show();
$('.home').addClass('display_none');
}
if(status === "home display_none") {
$('#layer_1 , #layer_2 , #layer_3').hide();
$('.home').removeClass('display_none');
}
});
$('.show_layer_1').click(function() {
$('.close_all').hide();
$('#layer_1').show();
});
$('.show_layer_2').click(function() {
$('.close_all').hide();
$('#layer_2').show();
});
});
</script
><style>
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px;
grid-template-rows: minmax(50px, 1fr);
grid-auto-flow: column;
grid-auto-columns: calc(20% - var(--gutter) * 2);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
width: 1201px;
}
.hs:before,
.hs:after {
content: '';
width: 10px;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 1200px;
height: 234px;
/* [disabled]background-color: #DBD0BC; */
overflow-y: scroll;
}
.event-title {
font-size: 36px;
margin-bottom: -25px;
margin-top: -16px;
padding-top: 11px;
padding-left: 0px;
font-weight: 400;
font-style: italic;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: table;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #CBCBCB;
border-radius: 8px;
max-width: 1px;
background-image: url(../images/3.jpg);
}
.bottom-panel {
background-color: #FF0004;
width: 170px;
height: 42px;
margin-top: 74px;
}
.top-button {
background-color: #FB3437;
width: 29px;
height: 24px;
margin-left: 139px;
margin-top: 4px;
}
.item {
width: 220px;
min-width: 174px;
height: 145px;
margin-left: 1px;
}
.grey-panel {
background-color: #000000;
width: 169px;
height: 54px;
margin-left: 0px;
margin-top: 82px;
padding-top: var(;
padding-bottom: --gutter;
padding-right: --gutter;
}
.side-search-strip {
}
</style>
></head>
<body>
<div></div>
<div class="nav-menu-bar font">
<div class="nav-menu-bar-centre-panel"><div class="scrollable-nav-container">
<div>
<div><div class="scrollable-nav-container">
<div class="arrow-left"></div>
<div class="scrollable-nav-inner">
<nav class="scrollable-nav">
<ul>
<!-- Start main-nav -->
<nav class="main-nav"> </nav>
<!-- end main-nav --></div>
</div>
<div class="container">
</div>
</div>
<section class="content_wrapper">
<div class="home"> </div>
<!-- home -->
<div id="layer_1" class="close_all">
<div class="layer_1_content"> </div>
</div>
<!-- layer_1 --></main>
</div></main>
</div></div>
<!-- Carousel -->
<div class="main-container background-fade">
<div class="menu-strip"><div class="float-right"></div>
<div class="test clear-the-float main-area"> </div></div>
<div>
<div class="app">
<h1 class="event-title font">Event title...</h1>
<ul class="hs full">
<li class="item">
<div class="top-button"></div>
<div class="bottom-panel">
<p>text1</p>
</div>
</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
<li class="item">test1</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test1</li>
</ul>
</div>
</div>
</div>
<script src="js/modernizr-3.5.0.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
<!-- scroll menu bar script -->
$(document).ready(function(){
$( ".scrollable-nav" ).draggable({ axis: 'x' });
});
<!-- end menu scroll top bar script -->
</body>
</html>
------
Hope you can help
Thanks
Tim
You need below css
li.item {
position: relative;
overflow: hidden;
}
.item .bottom-panel {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
margin:0;
height: auto;
}
.item .bottom-panel p {
margin: 0;
padding: 7px 10px;
}
.top-button {
margin: 0;
position: absolute;
right: 14px;
border-radius: 6px;
}
see demo here
this is my button (this is my Scipt):
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats" >
<li class="seat">
<input type="button" id="1A" value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Fahrer'"; $query = mysql_query($sql,$connection); $result=mysql_fetch_assoc($query); echo $result['Name'];?>" />
</li>
<li class="seat">
<input type="button" id="1B" value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Beifahrer'"; $query = mysql_query($sql,$connection); $result=mysql_fetch_assoc($query); echo $result['Name'];?>" />
</li>
</ol>
</li>
I want to have the color stay red if the value is empty and green if there is any value ( value="" vs value="blasamplename" )
Is there a way?
EDIT:
I figured out that:
input[value=""]
{
background: #bada55;
}
Will make the text field greenish, is there a way to do that for the whole parent input?
Using the value atrribute which, I assume with be value=""
input[value=""] {
background: red;
}
input {
background: lightgreen;
}
ol {
list-style: none;
}
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats">
<li class="seat"> No Value
<input type="button" id="1A" value="" />
</li>
<li class="seat"> With Value
<input type="button" id="1B" value="I have a Value" />
</li>
</ol>
</li>
</ol>
Here is how you can do it.
Removed your php code. Link to Codepen: https://codepen.io/agamj474/pen/xamRZN
$(function(){
$('input[type="button"]').each(function(i, d){
var el = $(d);
var color = el.val() ? "red" :"green";
el.parent("li").css("background", color);
})
});
*, *:before, *:after
{
box-sizing: border-box;
}
html
{
font-size: 16px;
}
.car
{
margin: 20px auto;
max-width: 500px;
}
.caption
{
height: 250px;
position: relative;
overflow: hidden;
text-align: center;
border-bottom: 5px solid #d8d8d8;
}
.caption:before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 100%;
border-radius: 50%;
border-right: 5px solid #d8d8d8;
border-left: 5px solid #d8d8d8;
}
.caption h1
{
width: 60%;
margin: 100px auto 35px auto;
}
.fuselage
{
border-right: 5px solid #d8d8d8;
border-left: 5px solid #d8d8d8;
border-bottom: 5px solid #d8d8d8;
}
ol
{
list-style: none;
padding: 0;
margin: 0;
}
.seats
{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
input[type=button]
{
font-weight: bold;
color: #000000;
background-color: Transparent;
text-align: center;
border: none;
}
.seat,.seatlow:active
{
background: #bada55;
}
.seat , .seatlow
{
display: block;
position: relative;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0;
background: #F42536;
border-radius: 5px;
animation-duration: 300ms;
animation-fill-mode: both;
}
.seat:before, .seatlow:before
{
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat:hover , .seatlow:hover
{
cursor: pointer;
box-shadow: 0 0 0px 2px #5C6AFF;
}
.seatlow:nth-child(1)
{
margin-right: 12.5%;
}
.seatlow:nth-child(2)
{
margin-right: 12.5%;
}
.seat:nth-child(1)
{
margin-right: 50%;
}
<html>
<head>
<meta charset="ISO-8859-1">
<title>Autoreservierung</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="includes/style.css">
<script type="text/javascript">
</script>
</head>
<body>
<div class="car">
<div class="caption">
<h1>Please select a seat</h1>
</div>
<ol class="cabin fuselage">
<li class="row 1">
<ol class="seats" >
<li class="seat">
<input type="button" id="1A" value="" />
</li>
<li class="seat">
<input type="button" id="1B" value="" />
</li>
</ol>
</li>
<br/><br/>
<li class="row 2">
<ol class="seats" >
<li class="seatlow">
<input type="button" id="2A" value="xyz" />
</li>
<li class="seatlow">
<input type="button" id="2B" value="xyz"/>
</li>
<li class="seatlow">
<input type="button" id="2C" value=""/>
</li>
</ol>
</li>
</ol>
</div>
<script src="includes/index.js"></script>
</body>
</html>