i have problem with my code. I can't make the design who i will upload here. I can't make two column and below them input box who will be show when the button is pressed.
Design that i want to be:enter image description here
Here is my code HTML:
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="raboti.css">-->
<h1>Calculator</h1>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="withbootstat.css">
</head>
<body>
<div class="row">
<div class="dropDown" style="background-color: #efefef;">
<h2>Брой служители:</h2>
<select id="mySelect">
<option value="1">1-10</option>
<option value="2">11-30</option>
<option value="3">31-80</option>
<option value="4">81-150</option>
<option value="5">151-300</option>
<option value="6">300+</option>
</select>
</div>
<div class="dropDown" id="monthCost" style="background-color: #efefef;">
<h2>Месечен разход(лв.):</h2> <input type="text" id="ourSum">
</div>
</div>
<div class="row1">
<div class="sum" id="finalSum">
При нас цената ще е: <input class="hide type="text" id="result" >
<br><button type="button" onclick="sum()">Изчисли</button>
</div>
</div>
</body>
</html>
This is code that i got from w3school for two columns..
And here is my CSS code:
* {
box-sizing: border-box;
}
.dropDown {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width:600px) {
.dropDown {
width: 100%;
}
}
h1 {
text-align: center;
}
.row1 {
margin-top: -200px;
margin-left: 100px;
}
.hide{
display:none;
}
.show{
display:block;
}
Based on your photo, you can achieve what you want with flexbox:
.flex-center {
justify-content: center;
align-items: center;
}
.flex-column {
flex-direction: column;
}
.flex-justify-around {
justify-content: space-around;
}
.w-100 {
width: 100%;
}
.mr-50 {
margin-right: 50px;
}
.ml-50 {
margin-left: 50px;
}
.round-box {
border: 2px solid #ccc;
border-radius: 150px;
padding: 20px;
}
.d-flex {
display: flex;
}
.grow {
flex: 1 0 0;
}
.flex-wrap {
flex-wrap: wrap;
}
.p-40 {
padding: 40px;
}
.pt-0 {
padding-top: 0 !important;
}
.pr-40 {
padding-right: 40px;
}
.pl-40 {
padding-left: 40px;
}
.bg-blue {
background-color: #00B6FD;
color: white;
}
.text-blue {
color: #00348C;
}
.font-weight-bold {
font-weight: bold;
}
<div class="d-flex flex-center flex-column flex-wrap text-blue">
<div class="d-flex flex-center flex-column">
<h1>Calculator</h1>
</div>
<div class="d-flex flex-center flex-justify-around w-100 flex-wrap">
<div class="d-flex flex-column grow p-40 pt-0">
<h4>Question</h4>
<input type="text" class="round-box " id="bx-1"/>
</div>
<div class="d-flex flex-column grow p-40 pt-0">
<h4>Answer</h4>
<input type="text" class="round-box" id="bx-1"/>
</div>
</div>
<input type="button" value="Submit" class="round-box pl-40 pr-40 bg-blue font-weight-bold"/>
</div>
Also, here's a working example :)
On a side note, this one should be responsive as well ;)
Related
I want multiple radio checkboxes. In one line it should be private or shared and in the second line, it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<div>
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</body>
</html>
Hi, I want multiple radio checkboxes. In one line it should be private or shared and in the second line it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
edited
i did what you said in comment it looks like this and its not same as private and shared
The name tags on your ATV checkboxes should be changed from "occupancy" to something else like "atv". You could also wrap each group of inputs in separate divs if you want them to appear in separate rows. Finally you should also make your ids unique and update you label for tags so:
<div class="container style1" style="padding-left: 0;padding-top: 5px;">
<div class="">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
I added a style1 class to your container but maybe you might want to add that style directly to .container. Anyway add these styles:
.style1{
flex-direction:column;
}
label[for="private"], label[for="shared"] { {
display: inline-block;
}
as you can see I have one main image and another image below the main one but when I click any of them my main image doesn't change to any of them what can be the issue, please identify. if you can edit and send me an amende code will be helpful pls.I don't see any sort of error maybe you can find out , to be honest, i am not techy doing this to learn something new
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group{
display: flex;
justify-content: space-between;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up, .down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover, .down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"]{
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked + label{
background-color: orangered;
color: white;
}
input[type="radio"]:checked + label:before{
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
</script>
<script>
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
basically your script works, you just need to move your script (the one with the images onclick functions) to the bottom of your file, that way the html dom elements load on the page before the script does allowing it to attach the onclick event functions to the dom elements.
You're trying to retrieve the img element with id "MainImg" which doesn't yet exist since your javascript code loads before your html code, so you get something like MainImg[0] is undefined... Try to put your last script (preferably all scripts) just before the closing body tag
i have created this slider separate from your code just to show you an easy way to make one
i have used tailwind here
here's an example below hope it will help
var main = document.querySelector(".main"),
big = main.querySelector(".big"),
smalls = main.querySelectorAll(".each")
big.setAttribute("src",smalls[0].getAttribute("src"))
smalls.forEach(each=>{
each.onclick = function(){
smalls.forEach(ss=>ss.classList.remove("active"))
each.classList.add("active")
big.setAttribute("src",each.getAttribute("src"))
}
})
.active{opacity:1 !important;border:3px solid gray;}
.each{opacity: 0.5;}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="main">
<img class="big w-50">
<div class="smalls flex">
<img class="each cursor-pointer w-16 active" src="https://images.unsplash.com/photo-1557673272-b16d3b6c5a58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-6ef51494f677?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-89e58247f2d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1439668462223-e88f0ad95063?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.
What happens:
div1
div2
div3
What I want to happen:
div1 div2 div3
<div class="jar-lists-wrapper slide-in">
#foreach($folders as $folder)
<div class="jar-lists hidden" data-name="{{$folder}}">
<div class="jar-list box" data-name="{{$folder}}">
<div class="box-header with-border">
<h1 class="box-title">{{$folder}}</h1>
</div>
<div class="box-body">
<div class="jar-children">
#foreach($jars as $jar)
#if(strpos($jar, strtolower($folder)) !== false)
<div>
<h3 class="jar-title">Version:
{{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
</h3>
<form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
#if(str_replace('.jar', '', $jar) == $currentJar)
<br><button class="btn btn-success" type="submit">Installed</button>
#else
<br><button class="btn btn-primary" type="submit">Install</button>
#endif
</form>
<br>
</div>
#endif
#endforeach
</div>
</div>
<div class="box-footer">
View More<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
#endforeach
</div>
And this is my css:
.main {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 2em
}
.jar-lists-wrapper {
position: relative;
display: block
}
.jar-lists {
position: relative;
margin-bottom: 60px;
margin-top: 30px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 32.5%);
justify-content: space-between;
z-index: 1
}
.jar-lists.hidden {
display: none
}
.jar-list {
text-align: center;
}
.jar-title {
font-size: 16px;
color: #5e5e5e
}
.jars-more {
display: block;
width: 100%;
text-decoration: none;
text-align: center
}
.jars-more {
padding: 10px 0;
font-size: 18px;
color: gray;
cursor: pointer
}
.jars-more i {
margin-left: 10px
}
#media screen and (max-width:1250px) {
.jar-lists {
grid-template-columns: repeat(2, 47%)
}
.jar-list {
margin-bottom: 30px
}
}
#media screen and (max-width:900px) {
.jar-lists {
grid-template-columns: repeat(1, 100%)
}
}
div are block level element so they appears horizontally. So use display:inline-block and width
.child {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use flex
.parent {
display: flex;
flex-direction: row;
}
.child {
border: 2px solid green;
width: 150px;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.child {
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div
Try specifying gird-template-spacing from 32.5% to 1fr.
Here is a link to my CodePen Project
If you preview the index.html page and hover over the white space within a <tr>, the edit and delete tools appear as expected. However, if you hover over the text within a <td>, the mouseout event is triggered.
Here is the relevant code:
index.js
var tableBody = $('#tableBody');
$(document).ready(() => {
updateTable();
tableBody.on('mouseover', 'td', displayTools).on('mouseout', 'td', hideTools);
});
// async function getRecords(){
// }
function updateTable(){
prodData.forEach(record => {
tableBody.append(`<tr>
<td>
<div class="icons">
<i class="icon edit"></i>
<i class="icon trash"></i>
</div>
<div class="record-details" onmouseover="displayTools(this)">
<div class="item-name">${record.name}</div>
<div class="item-type">${record.type}</div>
</div>
</td>
<td>Active</td>
</tr>`);
});
}
function displayTools(e){
var iconDiv = $($(e.target).children()[0]);
if(!iconDiv.hasClass('visible')){
iconDiv.addClass('visible');
}
}
function hideTools(e){
var iconDiv = $($(e.target).children()[0]);
iconDiv.removeClass('visible');
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Sentinel Project</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div class="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">Statistics</div>
<div class="nav-item">Contact</div>
</div>
<div class="splash"></div>
<div class="container">
<div class="content">
<div class="cps-bar">
<div class="cps-item active">Producers</div>
<div class="cps-item">Consumers</div>
<div class="cps-item">Statistics</div>
</div>
<div class="content-body">
<table class="ui basic celled table">
<thead>
<tr>
<th class="fifteen wide">Producer</th>
<th class="one wide">Status</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/producerData.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
index.scss
#import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700,900');
#import url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css');
body{
margin: 0;
font-family: 'Raleway', sans-serif;
}
.splash {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1506371466305-dbad31f2b998?ixlib=rb-0.3.5&s=b09238e202f7a227a0f5376c4154dd2c&auto=format&fit=crop&w=2850&q=80");
background-size: cover;
background-position: center;
filter: grayscale(80%) opacity(80%);
}
.nav-bar {
display: flex;
justify-content: space-around;
height: 52px;
align-items: center;
}
.container {
position: absolute;
width: 100vw;
top: 0;
}
.content {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
transform: translateY(120px);
background-color: white;
border-radius: 2px;
}
.cps-bar {
display: flex;
justify-content: space-around;
}
.cps-item {
font-weight: 400;
padding: 12px 0;
}
.cps-item.active {
font-weight: 700;
}
.table {
width: 96% !important;
margin: 0 auto !important;
}
.icons {
float: left;
width: 0px;
margin: auto;
visibility: hidden;
opacity: 0;
transition: width 0.2s, opacity 0.1s 120ms;
}
.record-details {
float: left;
}
.visible {
visibility: visible;
width: 50px;
opacity: 1;
}
Is this a propagation issue? Also, I'm sure there is a much more elegant solution than what I'm attempting.
Thank you very much. I hope this question is formatted correctly.
Matthew
find bellow code (HTML/CSS) that I´m trying to move a specific DIV but not able to - note that I used Bootstrap
HTML - The issue is with the div id "PlayerMain" that is unable to move to the page center
body {
background-image: url('../images/dis_bg.png');
background-repeat: no-repeat;
text-align: center;
align-content: center;
}
.whiteBorder {
display: inline;
background-color: white;
}
.allPage {
text-align: center;
}
.blueFont {
color: blue;
}
#efi {
max-width: 100%;
height: auto;
display: block;
position: absolute;
bottom: 20%;
top: 20%;
right: 10%;
z-index: 30;
}
.h1Border {
width: 1500px;
background-color: white;
border: none;
}
.loginButtonImg {
margin-top: 10px;
}
.loginButtonImg:hover {
cursor: pointer;
}
#media (max-width: 768px) {
.mobile-only {
display: none !important;
}
}
<script src="SCRIPT/JS/site.js"></script>
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/site.css" rel="stylesheet" />
<script src="SCRIPT/Jquery/jquery-3.1.1.js"></script>
<script src="SCRIPT/JS/site.js"></script>
<script src="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<div class="container-fluid">
<div class="row whiteBorder">
<section class="col-xs-12">
<div>
<h1 class="blueFont">דודי,<br /> text, <br /><b>text</b>text</h1>
</div>
</section>
<section class="col-xs-12">
<div>
<img src="images/efi.png" id="efi" class="mobile-only center-block" />
<div id="treepodiaPlayerMain" class="center-block"></div>
</div>
<img src="images/login.png" class="img-responsive center-block loginButtonImg" />
</section>
</div>
<section class="row">
<div class="col-xs-12">
<img src="images/bottom_icons.png" class="img-responsive center-block" />
</div>
</section>
</div>
<script type="text/javascript" src="//someScript.js"></script>
Many thanks in advance!
I show you snippet just remove position: absolute; from css where you write id #efi. and check it again