Buttons don't slide down correctly

Buttons don't slide down correctly - javascript

I have 4 buttons which when i click it, it will slide down the content bar beneath it but when i do the, the 3 others button will slide down unintentionally as well. I wanted the buttons to stay onto the container, so how do i do it?
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
display: inline-block;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>

Just add vertical-align: top; to div which contains the button and the content (.btn1,.btn2,.btn3,.btn4 ... )
OR use float:left instead of display:inline-block;
Note: you could have used just one class and applied it to all the div instead of using for each div a different class
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
float: left;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>

Before addressing your question, you should note that you can make a couple of improvements to your HTML. Firstly, you're completely missing the point of classes. They are supposed to group elements together, yet making them incremental goes entirely against this. Give all the groups of elements the same class. You can then use DOM traversal to find the required element in the click event handler.
Secondly, you're also repeating the same id on several elements when they should be unique.
To fix your problem, place position: absolute on the .panbody in your CSS:
$(document).ready(function() {
$(".click").on("click", function() {
$(this).closest('.btn').find('.panbody').slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border-right: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody {
display: none;
position: absolute;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn {
display: inline-block;
}
.panhead {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn">
<div class="panhead">
<a class="click" href="#">News</a>
</div>
<div class="panbody">
Content 1
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Contact</a>
</div>
<div class="panbody">
Content 2
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">About</a>
</div>
<div class="panbody">
Content 3
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Forum</a>
</div>
<div class="panbody">
Content 4
</div>
</div>
</div>
</div>

Related

Show search results only when searching

How can I hide the list of products, and show the results only when searching using the search bar?
Every time I hide the list of products, when I search the entire list appears and not only the search result.
I want to show only the search result when searching using the search bar.
function search() {
var searchBar, ProductsList, Products, ProductsTitle, TextValue, Element
searchBar = document.getElementById('searchBar').value.toUpperCase()
ProductsList = document.getElementById('product-list')
Products = document.querySelectorAll('.product')
ProductsTitle = ProductsList.getElementsByTagName('h2')
for (let i = 0; i < ProductsTitle.length; i++) {
TextValue = Products[i].getElementsByTagName('h2')[0];
if (TextValue) {
Element = TextValue.textContent || e.innerHTML
if (Element.toUpperCase().indexOf(searchBar) > -1) {
Products[i].style.display = ""
} else {
Products[i].style.display = "none"
}
}
}
}
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 50px;
z-index: 2;
}
.product {
float: right;
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>

You can use classList in parent .products
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
When class is active the wrapper as display:flex
Note: I improved a bit your code
const searchBar = document.getElementById('searchBar')
function search() {
const searchBarValue = document.getElementById('searchBar').value.toUpperCase()
const productsList = document.getElementById('product-list')
const products = document.querySelectorAll('.product')
const productsTitle = productsList.getElementsByTagName('h2')
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
for (let i = 0; i < productsTitle.length; i++) {
const textValue = products[i].getElementsByTagName('h2')[0];
if (textValue) {
const element = textValue.textContent.toUpperCase()
products[i].style.display = element.indexOf(searchBarValue) > -1 ? "" : "none"
}
}
}
searchBar.addEventListener('keyup', search)
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: none;
position: absolute;
top: 50px;
z-index: 2;
}
.products.active {
display: flex;
flex-direction: column;
}
.product {
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>

Incorporate a function for all the buttons with specific class using vanilla JS

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Issues getting a show hide function to work right

I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>

here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle

1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID

We Keep Coding

JavaScript is the programming language of the Web.

Buttons don't slide down correctly - javascript

Related

Show search results only when searching

Incorporate a function for all the buttons with specific class using vanilla JS

jQuery: animating position isn't affecting DOM

Dropdown won't work when hovering nav bar

Issues getting a show hide function to work right

Categories

Resources