Well there are two cards and an ellipsis within it , onclicking the ellipsis it should show the div i.e. div with id = report.But it is not working for me. i tried the following as mentioned below in the code but it didn't work for me. Please have a glance and hope experts will help me in this regard.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.querySelector("#report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag #report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag #report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
#report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
The currentTarget in the event handler will hold the .ellipsis button and the subsequent querySelector searches for the “report” div underneath the button (when it is actually a sibling).
MDN on Element.querySelector():
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Quick and dirty fix would be invoking parentElement.querySelector instead.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.parentElement.querySelector(".report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
I also changed “report” from being an ID to being a class as already noted since there is more than one instance.
You have a few bugs.
<div id="report"> you can't use the same id more than one time.
Javascript should be fired after page is loaded.
Read about function https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling
Try this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
</style>
</head>
<body>
<script>
window.addEventListener ( 'DOMContentLoaded', ()=>{
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) => {
console.log ( el );
el.addEventListener("click", (event) => {
const report = event.target.nextElementSibling;
report.classList.toggle("show");
console.log ( report );
});
});
} );
</script>
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
</body>
</html>
Your snippet leaves an opened .report visible until the user clicks .ellipsis again. It might be advantageous to use the MDN: The Details disclosure element as this element has a built-in 'open'/'close' mechanism, whithout the need for extra Javascript manipulation.
The pseudo code for your .card:
<card>
<details>
<summary></summary>
<report></report>
</details>
<content></content>
</card>
card { position : relative }
details { position : absolute; z-index: 1 }
summary { list-style: none } /* remove default marker */
summary::after { content : '\22ee' } /* custom ellipsis marker */
content { /* whatever fits the card*/ }
All you have to do is position the report (absolute) over the content (z-index: 1) when opened, while the browser handles the 'open/close' toggling. All <details> will retain their current [open] state until the user toggles it again by clicking the summary.
No specific Javascript required, however, should you decide that only one .report can be open at a time, you will need to implement Javascript to handle the closure of already opened .report. Below snippet shows how that could be implemented (with a checkbox to toggle the behavior on/off).
FYI, I removed the duplicate ID mentioned by others...
Here's how I would implement the above, using your example:
/*
When only one .report can be open at a time use
below Javascript, otherwise it can be safely removed.
*/
var currentDetail;
document.querySelectorAll('.card .flag summary').forEach(el => {
// this event triggers before <details> 'toggle' event
el.addEventListener("click", event => {
// if only one can be open, close the currently opened details
if (getComputedStyle(document.body).getPropertyValue('--only-one') == '1') {
const closest = event.currentTarget.closest('.card details');
if (closest.open) {
currentDetail = null; // all summaries closed
}
else { // not null and a different summary
if ((currentDetail) && (currentDetail != closest)) {
currentDetail.removeAttribute('open'); // close current open summary
};
currentDetail = closest; // save new opened summary
};
};
});
});
/* Just for checkbox operation: simply remove all 'open' attributes */
function collapseDetails() { document.querySelectorAll('.card details').forEach(el => { el.removeAttribute('open') }) };
body {
cursor: default; /* just the default arrow everywhere */
--only-one: 0; /* default false: all <details> can be [open] */
}
.main {
display: flex; flex-flow: row wrap; justify-content: center;
gap: 20px;
}
.card {
position: relative; /* new stacking context for '.report' */
/* For easy centering of content */
display: grid; place-items: center;
width: 150px; height: 200px;
background-color: coral; color: #fff;
border: 1px solid #000;
}
.flag { /* details */
position: absolute; z-index: 1; /* inside .card, on top of content */
inset: 0 10px auto 55px; /* shorthand for top/right/bottm/left */
/* .report 80px wide (given the .card width, margin, etc.) */
}
.flag[open] { /* details 'open' specific styling */ }
.ellipsis { /* summary */
list-style: none; /* remove HTML default triangle marker */
width: max-content; /* HTML default is equal to <details> width */
margin-left: auto; /* force to right side of .flag */
margin-right: -5px;
font-size: 25px;
text-align: right; /* only relevant when width is set to a value */
cursor: pointer;
}
.ellipsis::after { content: '\22ee' } /* the vertical 'ellipsis' */
/* hex unicode as dec shows an Asian character */
.report { /* disclosed details content */
background-color: #fff; color: #000;
padding: 5px 0;
}
.report p {
margin: 0; /* remove HTML default margin */
padding: 2px 5px;
font-size: 10px; line-height: 1.1;
cursor: pointer;
}
/* demo stuff */
label {
display: inline-block;
margin: 1rem;
cursor: pointer;
}
/* All these still get overridden by Firefox */
summary:where(::before, ::after, ::marker, :active, :focus, :focus-visible),
::-moz-focus-inner, ::-moz-focus-outer {
outline: none !important;
border : 0 !important;
outline-color: transparent !important
}
<label>only one 'report' open at a time <input type="checkbox"
oninput="document.body.style.setProperty('--only-one', (this.checked) ? '1' : '0');
collapseDetails();">
</label>
<div class="main">
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
</div>
Related
The main problem is that my logo that is positioned next to the title with a negative margin and when a user fills in a username and proceeds the logo jumps down probably because text is inserted in the paragraph. But I can't find a solution to fix this.
HTML:
#logo{
display: flex;
flex-flow: row;
margin-top: -2.9rem;
margin-left: 11rem;
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
justify-content: space-between;
float: left;
vertical-align: top;
position:absolute;
}
#logo>img{
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<header>
<div id="hoofding">
<div id="titel">
<h1>Sudoku</h1>
</div>
<div id="home" >
<div id="Welkom">
<p id="afmeldennaam" class="hidden"></p>
</div>
<a id="afmelden" class="hidden">Logout</a>
</div>
</div>
<nav class="hidden" id="navigatie">
<ul>
<!--<li>Home</li>-->
<li>Sudoku</li>
<li>Highscores</li>
</ul>
</nav>
</header>
<div id="logo">
<img src="assets/media/logo.png" alt="logo" class="visible-lg">
</div>
You should locate the logo/image in the same containing element (#hoofding) as the title. Then use relative positioning to position it outside of the element.
Here's a contrived example.
function locate( selector, base ) {
base = base && 1 === base.nodeType ? base : document;
return base.querySelector( selector );
}
var btn = locate( 'button' ),
hb = locate( '.header-bottom' ),
user = locate( '.user' );
btn.addEventListener( 'click', function ( e ) {
hb.classList.toggle( 'hide' );
user.classList.toggle( 'hide' );
} );
body {
margin: 0;
}
header {
}
.header-top,
.header-bottom {
display: flex;
height: 75px;
align-items: center;
}
.header-top {
padding: 0 1rem;
color: white;
background-color: black;
}
.header-top a {
color: white;
}
.user {
flex-grow: 1;
text-align: right;
}
.header-bottom {
justify-content: center;
}
.hb-item {
margin: 0 1rem;
padding: 0.5rem 1rem;
color: white;
background-color: teal;
border-radius: 0.25rem;
}
h1 {
margin: 0;
color: teal;
}
.logo {
display: block;
transform: rotate( -13deg );
position: relative;
top: 25px;
left: 15px;
}
.hide {
display: none;
}
<header>
<div class="header-top">
<h1>Sudoku</h1>
<img class="logo" src="http://placehold.it/100x100/fc0">
<div class="user hide">
<span>Welcome User!</span>Logout
</div>
</div>
<div class="header-bottom hide">
<div class="hb-item">One</div>
<div class="hb-item">Two</div>
</div>
</header>
<main>
<button>Click Me!</button>
</main>
Use the id='logo' inside the id="hoofding".
Put the id='logo' after the id="titel".
The id='logo' doesn't need flex attributes.
The id='logo' doesn't need the float attribute.
The id='logo' doesn't need the flex-flow attribute.
Use the transform: rotate(-15deg); in the img tag, not in the id='logo'.
Delete the margins left and top from the id='logo'.
You can use about margin-top: 15px; in the img tag.
If you place the logo into the title div then it will work, all you have to do then is just adjust the margins and padding.
example:
HTML
<nav>
<div class="brand">
<h3>LogoName</h3>
<img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt="">
</div>
</nav>
CSS
nav{
background-color: black;
height: 50px;
}
.brand{
position: relative;
}
.brand h3{
display: inline;
color: white;
}
https://jsfiddle.net/q24L6ct4/2/
I have 3 issues I would like help with.
Issue 1.
I have a navigation bar with numerous elements inside of it. The div with the ID shopcartbar will display the the div with ID shoppingTab once it is hovered over. I did initially set a onmouseout on the shopcartbar div but then when I tried to move the cursor on to the shoppingTab div, it would disappear. I would like to be able to keep the shoppingTab div visible whilst hovering over either of these divs and for the onmouseout to work on either of these as well, or at least be able to hover from the shopcartbar div on to the shoppingTab div to keep it visible because right now it disappears as there is a tiny gap between the two which even when I used CSS to close, didn't fix the problem. Before you read the code and say that I have set it to constantly be fixed on the page, I intentionally set it to have no onmouseout event otherwise it would vanish as soon as I moved my cursor therefore for debugging purposes, I made it appear permanently forcing me to refresh the page every time I wanted it gone.
Issue 2
When I set the height of the shoppingTab div to 100%, it only covers the span tags within it and not the 9 divs just underneath those tags, leaving the content overflowing out of the div. So I want the shoppingTab div to actually extend with ALL of the content and not just stop after the span tags. Please note: the amount of content changes so it can't be a fixed pixel height or percentage.
Issue 3
I have a cookie that just places the user's name in the topnavbar div which is placed before the shopcartbar div. When I hover over the shopcartbar div to show the shoppingTab div, it makes the persons name disappear whilst leaving the text inside the shopcartbar div. I would like the text from the topnavbar div to remain as well even when the shoppingTab div is displayed upon hover. Please note: the persons name must be placed before the shopcartbardiv.
Here is the HTML that contains everything needed to solve the 3 issues.
#charset "utf-8";
/* CSS Document */
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:black; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:#323232;
color:white; /* The sets the colour of the font */
}
.body{
width:100%;
height:1100px;
background-color:white;
color:black;
text-align:center; /* Determines the positioning of the text alignment */
}
.footer{
width:100%;
height:50px;
background-color:#323232;
color:white;
text-align:center;
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:#323232;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:#ed1c24;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
.button{
display: inline-block;
border-radius: 4px; /* Specifies the radius of each corner */
background-color: #ed1c24;
border:none; /* Specifies the border type */
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s; /* Specifies the the interval over which an animation occurs */
cursor: pointer; /* Specifies the cursor type */
margin: 5px;
height:60px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after{
content: '»'; /* Specifies the content of the div */
position: absolute;
opacity: 0; /* Specifies the opacity or transparency level */
top: 0; /* Specifies the distance from the top */
right: -20px; /* Specifies the distance from the right */
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:block;
}
#loginScreen{
height:300px;
width:400px;
z-index:10;
background-color:white;
no-repeat; border:7px solid #cccccc;
border-radius:10px;
margin-left:35%;
margin-top:12%;
position:relative;
padding-top:10px;
font-family:"Myriad Pro";
font-size:18px;
}
.cancel{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:32px;
width:32px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
border-radius:36px;
cursor: pointer;
}
p1{
font-style: italic;
overflow: hidden;
text-align: center;
}
p1:before, p1:after{
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 40%;
}
p1:before{
right: 0.5em;
margin-left: -50%;
}
p1:after{
left: 0.5em;
margin-right: -50%;
}
#searchbar{
background:url(../images/searchbarbg.png) no-repeat scroll;
padding-left:30px;
height:24px;
width:180px;
border-radius:36px;
}
.product{
height:290px;
width:200px;
float:left;
border: 5px solid black;
border-radius:10px;
margin-left:3%;
margin-top:3%;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:5px solid #ed1c24;
}
table{
border-collapse: collapse;
}
table, td, th{
border: 0px solid black;
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.plusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:5px 0px 0px 5px;
color:white;
cursor:pointer;
}
.minusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:0px 5px 5px 0px;
color:white;
cursor:pointer;
}
.quantityBox{
height:23px;
width:25px;
border-top:1px solid black;
border-bottom:1px solid black;
background-color:white;
float:left;
text-align:center;
line-height:24px;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 5px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:5px solid #ed1c24;
}
/* #ed1c24 is red, #323232 is grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="document.getElementById('shoppingTab').style.display='block';" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<div id="one" class="item"><div class="inside">Home</div></div> <!-- This is just one of the buttons -->
<div id="two" class="item"><div class="inside">About Us</div></div>
<div id="three" class="item"><div class="inside">Shop</div></div>
<div id="four" class="item"><div class="inside">Contact</div></div>
</div>
</div>
</div>
<div class="body"> <!-- This is the body --><br />
<span style="font-size:50px">Welcome to the store.</span><br />
<table width="90%" style="margin-left:5%; margin-bottom:2%">
<tr>
<td style="width:20%; border-right:solid black 1px; border-bottom:solid black 1px"><b>Search Tools</b></td>
<td style="border-bottom:solid black 1px"><b>Products</b></td>
<td style="border-bottom:solid black 1px"><span style="float:right; margin-bottom:1%">Search for products... <span style="color:#666"><i>(e.g. Mirage Sedan)</i></span> <input type="text" id="searchbar" onkeyup="searchProducts(this.value)"/></span></td>
</tr>
<tr>
<td style="border-right:solid black 1px; padding-top:3%" valign="top">
<b>Sort Type:</b><br /><br />
<select id="sortType">
<option value="AtoZ">A to Z</option>
<option value="ZtoA">Z to A</option>
<option value="LowtoHigh">Price (low to high)</option>
<option value="HightoLow">Price (high to low)</option>
</select>
<br /><br /><form><b>Price range:</b><br /><br /><input id="priceRange" step="100" value="42000" min="12000" max="42000" type="range"/><div id="rangeVal">0</div><br /><br /><b>Model Type:</b><br /><br /><input type="radio" name="model"/>Car<br /><input type="radio" name="model"/>SUV</form></td>
<td colspan="2">
<div class="product" id="product0"></div>
<div class="product" id="product1"></div>
<div class="product" id="product2"></div>
<div class="product" id="product3"></div>
<div class="product" id="product4"></div>
<div class="product" id="product5"></div>
<div class="product" id="product6"></div>
<div class="product" id="product7"></div>
<div class="product" id="product8"></div>
</td>
</tr>
</table>
</div>
<div class="footer"> <!-- This is the footer -->
<br />This is the footer</span>
</div>
</div>
<div id="cover">
<div id="loginScreen">
<center id="content"><br />
<span style="font-size:45px" id="popuptitle">Welcome!</span><br />
<span id="popupdescription">Please log in or sign up.</span><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="logInMenu()"><span>Log In</span></button><br /><p1>OR</p1><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="signUpMenu()"><span>Sign Up</span></button>
</center>
<a onclick="document.getElementById('cover').style.display = 'none'" class="cancel">×</a>
</div>
</div>
Desired functionality for issue 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container{
width:960px;
margin:auto;
}
.header{
width:960px;
height:100px;
background-color:#06F;
float:left;
}
.trolley{
width:150px;
height:30px;
background-color:white;
float:right;
border-radius:10px;
color:black;
border:1px solid black;
line-height:30px;
font-family:"Calibri";
cursor: pointer;
}
.shop{
width:960px;
height:700px;
background-color:white;
float:left;
font-family:"Calibri Light";
padding:20px;
}
#shoppingTab{
display:none;
height:400px;
width:400px;
background-color:#CCC;
color:black;
position:relative;
margin-top:1px;
border-radius:10px;
color:black;
border:1px solid black;
padding-left:10px;
float:right;
}
html{
background-color:#00F;
}
.product{
height:200px;
width:150px;
float:left;
border: 1px solid black;
border-radius:10px;
margin-right:20px;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span id="name"></span><div class="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>¤</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
</div>
</div>
<div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
<div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
</div>
</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []
for(var a = 1; a <= 3; a++){
stat[a] = false;
}
function update(){
document.getElementById("NOI").innerHTML = numberOfItems;
document.getElementById("NOI2").innerHTML = numberOfItems;
document.getElementById("totalPrice").innerHTML = total;
document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
function addToCart(productName, productID, price){
items[productID] = productName;
total += price;
numberOfItems++;
update();
}
function removeFromCart(productName, productID, price){
items.splice(productID, 1);
total -= price;
if(stat[productID]){
numberOfItems--;
}
update();
}
function change(i){
if(stat[i] == false){
stat[i] = true;
}else{
stat[i] = false;
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("customer");
if (user != "") {
customerName = getCookie("customer");
document.getElementById("name").innerHTML = customerName;
alert("Welcome again, " + user + ".");
} else {
document.getElementById("name").innerHTML = "please set up an account";
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
document.getElementById("name").innerHTML = user;
}
}
}
function changeCookie(){
var user = getCookie("customer");
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
}
document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>
For issue 1, you could try a setTimeout() function in the onmouseout() function linking to the actual code (to make it disappear) with a delay (in milliseconds e.g: 500)
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
If it doesn't work, try putting both shoppingtab and shopcartbar in a single div and use onmouseover of that div to display and hide shoppingTab
I have designed a simple modal box in HTML.
Now in the modal I tried creating 2 sections horizontally using a hr tag.It worked fine and sections were created.
After this I tried putting a text area in the upper section. I was able to successfully place the text area. However placing the text area there caused the seperator (hr tag line) to be moved further down.
However when I put the text area part of the code in a div element and provided a width and height it worked fine.
Please can anyone explain me the reason why it was not working without a div element.
Also if could be made to work without a DIV tag , how is that possible ?
HTML Code :
<html>
<link href="showTutorial.css" rel="stylesheet"/>
<body >
<script src="showTutorial.js" type="text/......script"></script>
<div id="left1">
<ol>
<li>
<a href="#">What is ....</li>
<li>
<a href="#">What </li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
</ol>
</div>
<div id="centre1">
<h1 id="centre1Label1">What is .....</h1>
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<div id="upperModal">
<textarea id="textAreaId" rows="14">Hello</textarea>
</div>
<hr id="seperator"/>
<div>
<p>Some text in below.</p>
</div>
</div>
</div>
</div>
<div id="right1" >
</div>
</body>
</html>
JavaScript Code :
var modal,btn,span;
window.onload=function(){// Get the modal
modal = document.getElementById('myModal');
// Get the button that opens the modal
btn = document.getElementById('myBtn');
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display="none";
}
}
CSS code :
#left1 {
width:170px;
background:#EDD8B3;
float:left;
position:relative;
top:180px;
left:5px;
border: 3px solid grey;
font-size: 1.2em;
padding:0;
margin:0;
}
body
{
background-color:#EDD8B3;
margin:0;
padding:0;
}
#centre1 {
width:620px;
height:800px;
left:10px;
background:white;
float:left;
position:relative;
top:180px;
box-shadow: 3px 3px grey;
margin:0;
padding-right: 450px;
}
#right1 {
margin:0;
padding:0;
}
ol {
list-style-type:none;
background: #EDD8B3;
padding-top:2px;
margin-top:0.1px;
}
ol li {
border-bottom: 2px solid #f0f0f0;
display:list-item;
padding:5px;
margin-left:2px;
margin-right:0.2px;
margin-bottom:2px;
margin-top:10px;
}
ol li a {text-decoration:none;
color:#008080;
}
#centre1Label1{position:relative;left:480px;padding:0; margin-right:30px;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 1300px; /* Full width */
height: 1000px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 1000px;
height:450px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#seperator{
margin-top:180px;
padding:0;
}
#textAreaId{
padding:0;
margin:0;
min-width:100%;
}
#upperModal{
height:50px;
}
You have:
#seperator {
margin-top: 180px;
padding: 0;
}
That margin push hr down when you don`t have the 50px height of #upperModal.
I am not entirely clear on what you are asking however I have ported your code to JsFiddle ( https://jsfiddle.net/pscott_au/5wLassmw/ )
I cleaned up some of your mismatched hrefs and was able to get the 2 textareas without any problem .. https://jsfiddle.net/pscott_au/5wLassmw/7/
can you clarify what you are asking?
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<div id="upperModal">
<textarea id="textAreaId" rows=14>Hello</textarea>
</div>
<hr id="seperator"/>
<p>Some text in below.</p>
<textarea id="textAreaId" rows=14>Hello</textarea>
</div>
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}