How can I get the "select" element to open and show its option elements when I click inside "div" element?
In other words, I want to trigger the "select" element when I click to green zone.
HTML
<div>
<h3>Cities</h3>
<select>
<option>Berlin</option>
<option>Paris</option>
<option>London</option>
</select>
</div>
SCSS
body{
background-color: lightgray;
margin: 100px;
div{
display: inline-block;
padding: 50px;
background-color: green;
select{
width:300px;
&:focus{
outline: none;
}
}
}
}
https://codepen.io/mehmetguduk/pen/vYWVGPK
I would not recommend doing such thing but here you go:
$select-width: 400px;
$top-spacing: 100px;
$bottom-spacing: 50px;
$left-spacing: 30px;
body {
background-color: lightgray;
margin: 100px;
div {
display: inline-block;
background-color: green;
position: relative;
padding: $top-spacing 0 $bottom-spacing;
h3 {
left: $left-spacing;
position: absolute;
top: 40px;
}
select {
border-top: $top-spacing solid green;
border-bottom: $top-spacing solid green;
border-left: $left-spacing solid green;
border-right: $left-spacing solid green;
margin: -$top-spacing 0 (-$bottom-spacing);
cursor: pointer;
width: $select-width;
&:focus {
outline: none;
border-top: $top-spacing solid green;
// border has to stay 0 in order to keep options still
border-width: 0px;
width: $select-width - (2 * $left-spacing);
margin: -$top-spacing $left-spacing $bottom-spacing;
}
}
}
}
https://codepen.io/Gotzi/pen/LYejZJq
Related
I can change other elements on the page using Jquery, but i can't seem to be able to toggle back to the default css class when it is using ::before..
Default Checkbox css in action
Checkbox Checked css in action
Now i have a button, that when its clicked, should reset my css to the default Checkbox - but it doesnt seem to work for me... The button stays green and it doesn't move to the left..
**
After button clicked example
**
CSS -
<style>
.checkbox {
appearance: none;
border: 2px solid #ccc;
border-color: red;
border-radius: 20px;
cursor: pointer;
height: 24px;
outline: none;
position: relative;
transition: 0.3s;
width: 37px;
}
.checkbox::before {
background: red;
border-radius: 50%;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 2px;
transition: 0.3s ease-in-out;
width: 15px;
}
.checkbox:checked::before {
background: green;
transform: translateX(18px);
}
.checkbox:checked {
border-color: green;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.float-child-unknown {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
</style>
JS -
function outsideModalClick() {
$(document).ready(function() {
document.getElementById('button').onclick = function() {
$('.float-child').css('border', '2px solid red');
$('.iconShow').toggleClass('iconhide');
$('.checkbox:checked::before').toggleClass('.checkbox::before');
$('.checkbox:checked').toggleClass('.checkbox');
}
})
}
Edit - Still not working - css is not being applied
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
Currently, when I hide the #geolocation block in javascript, the #recenter button does not move.
What I want is that when I run the following jQuery command:
$('#geolocation').hide();
(or in js : document.getElementById('geolocation').style.display = 'none';)
the #recenter button moves to the bottom (where the #geolocation block was located)
How to do ?
Don't position elements the absolutely, take advantage of flexbox layout and alignment options.
div#content {
position: relative;
width: 80%;
margin: 1em auto;
border: 1px solid black;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
div#menu {
height: 50px;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
div#recenter {
line-height: 20px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
margin: 10px;
padding: 0px 10px;
background-color: aliceblue;
}
div#geolocation {
line-height: 20px;
text-align: center;
border: 1px solid black;
margin: 10px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
When you click the geolocation, and hide it, you can also move the recenter button to the bottom.
It's not a very nice way to do this, but it works.
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div>
</div>
wrap the geolocation and recenter div within a div and give it to them a class. then use calc and flex to achieve your requirement like below. don't need to use position and bottom CSS it's a very bad practice for this kind of situation. Happy Solution :)
div#content{
position:relative;
width:100%;
border:1px solid black;
height:500px;
bottom:0px;
}
div#menu{
position:absolute;
height:125px;
width:100%;
border:1px solid black;
bottom:0px;
line-height:125px;
text-align:center;
}
#recenter{
padding:10px;
border:1px solid #000;
max-width:120px;
border-radius:30px;
text-align:center;
background-color: aliceblue;
}
#geolocation{
line-height:50px;
text-align:center;
border: 1px solid black;
margin:10px;
background-color: aliceblue;
}
.upper_div{
height: calc(100% - 125px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div id="content">
<div class=upper_div>
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div>
</div>
Hi I tried to custom my button like Spotify.
When hover the table row show play button and click the play button change image.
I consulted from other fiddle and updated. Now I click one element and the other one will hide. However, I don't know how to hide one of them in the beginning.
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:hover {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
display: none;
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>
You can do following way using pure css without scripting.
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:hover {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
display: none;
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:nth-last-child(2){
display:none;
}
a:first-child:target + a:nth-last-child(2){
display:block;
}
<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>
You could use inline style and set css property display to none :
<a id="btn2" href="#btn2" style="display:none;">Pause</a>
Or using javascript :
document.getElementById('btn2').style.display = 'none';
Hope this helps.
You can use single line to achieve this by Jquery. Change the text when the link is clicked.
$('.play').click(function(){
var $this = $(this);
$this.toggleClass('active');
if($this.hasClass('active')){
$this.text('Pause');
} else {
$this.text('Play');
}
});
Demo
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
hi i wanted to make a similar dropdown div just like on facebook
here
the problem is the div doesnt stay when you hover out.how can i toggle it. like it will only disappear when you click outside the div? like facebook navigation bar?
CSS
.divs {
display: none;
}
a:hover + .divs {
display: block;
background-color:white;
}
HTML
<a><img src="someIconsButtons.png"></a>
<div class="divs">
Stuff here...
</div>
how can i attain that? thanks please be gentle guys im kinda newbie :))
Using CSS
.divs
{
display: none;
}
a:hover + .divs
{
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
LIVE DEMO
.divs {
display: none;
}
a:hover+.divs {
display: block;
position: absolute;
background-color: purple;
color: #FFFFFF;
width: 200px;
height: 200px;
}
.divs:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px solid purple;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<a><img src="http://i.stack.imgur.com/s7eOO.jpg?s=32&g=1" /></a>
<div class="divs">
Stuff here...
</div>
You can achieve this by using jQuery.
Try this:
HTML:
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
CSS
#divblock
{
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after
{
content:"";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
and here is a key what you want,
jQuery:
$('#divblock').hide();
$('#showdivblock').click(function(e){
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('#divblock').slideUp();
});
LIVE DEMO
$('#divblock').hide();
$('#showdivblock').click(function(e) {
e.stopPropagation();
$('#divblock').slideToggle();
});
$('#divblock').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#divblock').slideUp();
});
#divblock {
position: absolute;
background-color: blue;
color: #FFFFFF;
width: 300px;
height: 100px;
margin-top: 10px;
}
#divblock:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-bottom: 20px dashed blue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin: -40px 50px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="showdivblock">Show Div Block</a>
<div id="divblock">
here you go..
</div>
Hope it helps you!
Here is my jQuery solution,
I made your box of stuff display on hover and then if the body is clicked it is hidden.
$('img').hover(function(){
$('div#box').show();
});
$('body').click(function(){
$('div#box').hide();
});
Here is a fiddle to demonstrate. http://jsfiddle.net/joey6978/zLXK8/