Unable to an element

Unable to an element - javascript

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

Related

want to push the data from images alt to another div according to Active Class

Here are five columns in the body part, named single, double, number pair, all pair, and alphabet pair, and four chips below.Every chip has it's value in the "alt" attribute. When we click any of these chips, I want to push that value(alt) to the "chipMoney" and it will only show when the columns have the "activeBet" class. If there's no active class in the columns, then the value from the chips images "alt" attribute will not appear in "chipMoney". Only the chips image "alt" value will be added to the "chipMoney" when the columns of this "chipMoney" have the "activeBet" class.
If the second column has the "activeBet" class, then the value will
be displayed in the "chipMoney"; if the third column has the
"activeBet" class, the value will be shown there. That means only
the value will be shown in the "activeBet" class; other classes will
be empty.
let selectChipsDiv = document.getElementById("selected-chips");
//All items declared in a single object
const allChips = [
{
name: "1",
img: "https://i.im.ge/2022/11/28/S0jFH4.image.png",
},
{
name: "50",
img: "https://i.im.ge/2022/11/28/S0j11C.image.png",
},
{
name: "1000",
img: "https://i.im.ge/2022/11/28/S0j2wq.image.png",
},
{
name: "5",
img: "https://i.im.ge/2022/11/28/S0jSZp.image.png",
},
];
let data = "";
allChips.map((value, key) => {
data += `
<img src="${value.img}" alt="${value.name}"/>
`;
}, "");
selectChipsDiv.innerHTML = data;
// active class for bet selection
var activeDiv = document.getElementById("SlctBetActvClsDiv");
var activeClass = activeDiv.getElementsByClassName("SlctBetActvCls");
for (var i = 0; i < activeClass.length; i++) {
activeClass[i].addEventListener("click", function () {
var current = document.getElementsByClassName("activeBet");
current[0].className = current[0].className.replace(" activeBet", "");
this.className += " activeBet";
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Arial Regular";
}
body {
width: 100%;
overflow-x: hidden;
color: #fff;
background: #400df0;
background-size: cover;
background-position: center center;
height: 100vh;
}
body img {
width: 100%;
}
body button {
background: transparent;
border: none;
cursor: pointer;
}
.mainimg img {
-o-object-fit: cover;
object-fit: cover;
}
.activeBet .snglimg .mdlsc {
display: block;
}
.snglimg {
position: relative;
}
.snglimg .mdlsc {
position: absolute;
bottom: -9px;
display: none;
}
.snglimg button {
width: 95%;
margin: auto;
}
.snglimg button .btnimg {
position: relative;
}
.snglimg button .btnimg span {
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.clsebtn img {
width: 120px;
}
.mdlsc {
margin-left: 8px;
}
.grypnk {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 18px 5px;
width: 80%;
margin: auto;
}
.grypnk img {
width: 100%;
}
.wrapper {
width: 62%;
margin: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 11px 0px 40px;
}
.wrapper img {
-o-object-fit: cover;
object-fit: cover;
}
.wrapper .mainimg {
width: 90%;
margin: auto;
}
.wrapper .mainimg .mngrd {
margin-top: 13px;
margin-bottom: 12px;
}
.wrapper .mainimg .mngrd .mdlsc {
top: 81%;
margin-left: 2px;
}
.coinsc {
display: flex;
align-items: center;
width: 85%;
margin: auto;
gap: 8px;
justify-content: center;
margin: 10px auto;
}
.coin {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
align-items: center;
}
#media screen and (min-width: 668px) {
main {
width: 650px;
margin: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://static.staticsave.com/naymurcss/responsive.css"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<section class="wrapper">
<div>
<div class="mainimg">
<div class="row" id="SlctBetActvClsDiv">
<div class="col-6 SlctBetActvCls activeBet">
<div class="snglimg">
<img
src="https://i.im.ge/2022/11/29/SweLxm.dfojdf.png"
alt=""
class="betActiveImg"
/>
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img
src="https://i.im.ge/2022/11/29/Swem9L.prctg.png"
alt=""
/>
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<div class="col-6 SlctBetActvCls">
<div class="snglimg">
<img
src="https://i.im.ge/2022/11/29/Swew8G.wertedsfsd.png"
alt=""
class="betActiveImg"
/>
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img
src="https://i.im.ge/2022/11/29/Swem9L.prctg.png"
alt=""
/>
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img
src="https://i.im.ge/2022/11/29/SweNQx.dsfd.png"
alt=""
class="betActiveImg"
/>
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img
src="https://i.im.ge/2022/11/29/Swem9L.prctg.png"
alt=""
/>
<span id="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img
src="https://i.im.ge/2022/11/29/SwetxJ.allpair.png"
alt=""
class="betActiveImg"
/>
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img
src="https://i.im.ge/2022/11/29/Swem9L.prctg.png"
alt=""
/>
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img
src="https://i.im.ge/2022/11/29/SweCqS.alphabet.png"
alt=""
class="betActiveImg"
/>
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img
src="https://i.im.ge/2022/11/29/Swem9L.prctg.png"
alt=""
/>
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="coinsc">
<div class="coin" id="selected-chips"></div>
</div>
</section>
</main>
<script src="./js/script.js"></script>
</body>
</html>

I think I understood your question requirements (perhaps) but found one little mistake (?). Within the NUMBER PAIR portion of HTML you had <span id="chipMoney"></span> but I think that should be <span class="chipMoney"></span>?
With that said perhaps the following is what you were trying to accomplish?
FYI: I added the bright colours in CSS to identify the regions more clearly only
let selectChipsDiv = document.getElementById("selected-chips");
let active = document.getElementById("SlctBetActvClsDiv");
let col = document.querySelectorAll('.SlctBetActvCls');
let stake=1;
const allChips = [{
name: "1",
img: "//i.im.ge/2022/11/28/S0jFH4.image.png",
},
{
name: "50",
img: "//i.im.ge/2022/11/28/S0j11C.image.png",
},
{
name: "1000",
img: "//i.im.ge/2022/11/28/S0j2wq.image.png",
},
{
name: "5",
img: "//i.im.ge/2022/11/28/S0jSZp.image.png",
},
];
allChips.forEach(obj => {
let oImg = new Image();
oImg.src = obj.img;
oImg.alt = obj.name;
oImg.className='chip';
selectChipsDiv.append(oImg)
});
// classnames used in javascript
const css = {
active: 'activeBet',
img: 'betActiveImg',
container: 'SlctBetActvCls',
chip:'chip',
money:'chipMoney'
};
// set the display of the default stake value in the initially active slot
document.querySelector(`.${css.active} span.${css.money}`).textContent=stake;
// assign delegated listener to the wrapper object
document.querySelector('main > .wrapper').addEventListener('click', e => {
let el = e.target;
// if the click was on an element that is NOT the delegated object (ie: a child of it)
// process the event to find out more.
if (el != e.currentTarget) {
// click originates within 1 of the 5 "bet" type DIV elements
// or on a child element of such.
if (
el.classList.contains(css.container) ||
el.parentNode.classList.contains(css.container) ||
el.classList.contains(css.img)
) {
if (el instanceof HTMLImageElement) {
el=el.closest(`div.${css.container}`);
}
// clear the "activeBet" class from all elements
col.forEach(n => n.classList.remove(css.active));
// add "activeBet" to current element that invoked the event
el.classList.add(css.active);
// set the "stake" amount in the respective SPAN element
if( stake )el.querySelector(`span.${css.money}`).textContent=stake;
}
// if the element is one of the "stake" amount images...
if( el instanceof HTMLImageElement && el.className==css.chip ){
let span=document.querySelector(`div.${css.container}.${css.active} span.${css.money}`);
if( span ){
stake=Number(el.alt);
span.textContent=stake;
}
}
}
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Arial Regular";
}
.SlctBetActvCls {
border: 5px solid yellow;
background: lime;
}
body {
width: 100%;
overflow-x: hidden;
color: #000000;
background: #400df0;
background-size: cover;
background-position: center center;
height: 100vh;
}
body img {
width: 100%;
}
body button {
background: transparent;
border: none;
cursor: pointer;
}
.mainimg img {
-o-object-fit: cover;
object-fit: cover;
}
.activeBet .snglimg .mdlsc {
display: block;
}
.snglimg {
position: relative;
}
.snglimg .mdlsc {
position: absolute;
bottom: -9px;
display: none;
}
.snglimg button {
width: 95%;
margin: auto;
}
.snglimg button .btnimg {
position: relative;
}
.snglimg button .btnimg span {
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.clsebtn img {
width: 120px;
}
.mdlsc {
margin-left: 8px;
}
.grypnk {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 18px 5px;
width: 80%;
margin: auto;
}
.grypnk img {
width: 100%;
}
.wrapper {
width: 62%;
margin: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 11px 0px 40px;
}
.wrapper img {
-o-object-fit: cover;
object-fit: cover;
}
.wrapper .mainimg {
width: 90%;
margin: auto;
}
.wrapper .mainimg .mngrd {
margin-top: 13px;
margin-bottom: 12px;
}
.wrapper .mainimg .mngrd .mdlsc {
top: 81%;
margin-left: 2px;
}
.coinsc {
display: flex;
align-items: center;
width: 85%;
margin: auto;
gap: 8px;
justify-content: center;
margin: 10px auto;
}
.coin {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
align-items: center;
}
#media screen and (min-width: 668px) {
main {
width: 650px;
margin: auto;
}
}
<link rel="stylesheet" href="https://static.staticsave.com/naymurcss/responsive.css" />
<main>
<section class="wrapper">
<div>
<div class="mainimg">
<div class="row" id="SlctBetActvClsDiv">
<!-- SINGLE -->
<div class="col-6 SlctBetActvCls activeBet">
<div class="snglimg">
<img src="https://i.im.ge/2022/11/29/SweLxm.dfojdf.png" alt="" class="betActiveImg" />
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img src="https://i.im.ge/2022/11/29/Swem9L.prctg.png" alt="" />
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<!-- DOUBLE -->
<div class="col-6 SlctBetActvCls">
<div class="snglimg">
<img src="https://i.im.ge/2022/11/29/Swew8G.wertedsfsd.png" alt="" class="betActiveImg" />
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img src="https://i.im.ge/2022/11/29/Swem9L.prctg.png" alt="" />
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<!-- NUMBER PAIR -->
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img src="https://i.im.ge/2022/11/29/SweNQx.dsfd.png" alt="" class="betActiveImg" />
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img src="https://i.im.ge/2022/11/29/Swem9L.prctg.png" alt="" />
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<!-- ALL PAIR -->
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img src="https://i.im.ge/2022/11/29/SwetxJ.allpair.png" alt="" class="betActiveImg" />
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img src="https://i.im.ge/2022/11/29/Swem9L.prctg.png" alt="" />
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
<!-- ALPHABET PAIR -->
<div class="col-4 SlctBetActvCls">
<div class="snglimg mngrd">
<img src="https://i.im.ge/2022/11/29/SweCqS.alphabet.png" alt="" class="betActiveImg" />
<div class="mdlsc">
<button class="opnBtn">
<div class="btnimg">
<img src="https://i.im.ge/2022/11/29/Swem9L.prctg.png" alt="" />
<span class="chipMoney"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="coinsc">
<div class="coin" id="selected-chips"></div>
</div>
</section>
</main>

how can i change main image by clicking other thumbnail image

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>

How to make two column and input box below them ? Like that:

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 ;)

The `mouseout` hover event is triggered when hovering over the text within a <td>. Is this a propagation issue?

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

Why doesn't the gallery work?

Hi I'm trying to make a simple JS image viewer all it needs to do is change the image source for my mainImage to the source of an image I click on from the gallery. for some reason it doesn't work any ideas? I just left the css in that is necessary for you to view the gallery that's why it looks a bit crazy. When I paste the code in here and click on the image it gives me an error which I'm guessing is the problem. Also ignore the fact that the link for the jscript is missing as I just put it inline to rule out that it just wasn't comminucation properly.
Any help would be greatly appreciated.
here's a link to the page as it stands now it's in very early dev so it's not very good http://stevengamedev.com/page5.html
#charset "utf-8";
/* CSS Document */
#containerImg{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#Gallery{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
z-index: -7;
background-color:;
}
#padding{
width:25%;
height:100%;
background-color:;
float: left;
}
#padding2{
width:18.75%;
height:100%;
background-color: ;
float: left;
}
#boundry{
background-color: ;
width:50%;
right: 0px;
height: 100%;
float: left;
margin-left: auto;
align-content: center;
}
#mainImage{
float:left;
width: 90%;
height: auto;
margin-left: 10%;
margin-top: 10%;
margin-right: auto;
background-color:rgba(0,0,0,0.65) ;
align-content: center;
}
#imagedescription{
color: white;
}
#contentcontainerimage{
width:75%;
margin-left: 25%;
height:100%;
z-index: 2;
float: left;
overflow-y: auto;
background-color: ;
z-index: inherit;
}
#Gallerybounds{
float: left;
height: auto;
z-index: inherit;
}
#Imagebounds{
float:left;
width: 25%;
height: 100%;
padding-left: ;
z-index: inherit;
background-color: rgba(0,0,0,0.50);
}
#Imagebounds img{
margin-left: 5%;
}
.gallery{
}
.imgStyle{
margin:auto;
align-content: center;
margin-bottom: 20px;
float: left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<link rel="stylesheet" type="text/css" href="Image.css"/>
<link type="text/javascript" href=""/>
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="images/softwares/nav.png">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="Gallery">
<div id="padding"></div>
<div id="padding2"></div>
<div id="boundry">
<div id="mainImage"><img id ="mainImg" src="images/background/bridge4.jpg" alt="bridge" width="100%" height="auto">
<div id="imagedescription">
<h1>description!</h1>
<a>this is a description of the picture etc! lots more words need more words words words words words words.</a>
</div>
</div>
</div>
</div>
<div id="containerImg">
<div id="contentcontainerimage">
<div id="Gallerybounds">
<div id="Imagebounds" onClick="changeImage(event)">
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/Blog/help6.png" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == IMG){
document.getElementById("mainImg").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>

Try wrapping IMG in either double or single quotation marks so the if statement condition reads:
if (targetElement.tagName == 'img') {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}

We Keep Coding

JavaScript is the programming language of the Web.

Unable to an element - javascript

I show you snippet just remove position: absolute; from css where you write id #efi. and check it again

Related

want to push the data from images alt to another div according to Active Class

how can i change main image by clicking other thumbnail image

How to make two column and input box below them ? Like that:

The `mouseout` hover event is triggered when hovering over the text within a <td>. Is this a propagation issue?

Why doesn't the gallery work?

Categories

Resources