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
Related
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>
I have a background image and another image element as needle. So you will see 3 tabs above the snippet page. My goal is to change the position of the needle when you click to the buttons. But there are some problems like if you click 2nd or 3th tab first, the needle moves wrong direction.
And if you move between 3th and 1st tabs the bottom of needle is moving out of the black little circle.
How can I achieve my purpose without any visual errors? Maybe some other way to achieve this?
function asama3() {
document.getElementById("ibre").style.transform = "rotate(-68deg)";
document.getElementById("ibre").style.left = "210px";
document.getElementById("ibre").style.top = "178px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(-107deg)";
document.getElementById("ibre").style.left = "157px";
document.getElementById("ibre").style.top = "180px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(-145deg)";
document.getElementById("ibre").style.left = "113px";
document.getElementById("ibre").style.top = "211px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 258px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>
As it rotates at the center, you can create a hidden div and wrap them both in an outer div and makes sure the center lines up with the black dot:
function asama3() {
document.getElementById("outer").style.transform = "rotate(68deg)";
}
function asama2() {
document.getElementById("outer").style.transform = "rotate(107deg)";
}
function asama1() {
document.getElementById("outer").style.transform = "rotate(145deg)";
}
#outer {
display: flex;
width: 300px;
height: 5px;
position: absolute;
left: 108px;
top: 278px;
transition: all 1s;
}
#ibre {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: #070707;
}
#hidden {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: transparent;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama1()">1. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama2()">2. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama3()">3. aşama</h1>
</div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div id="outer">
<div id="ibre"></div>
<div id="hidden"></div>
</div>
</div>
This way it pivots on that dot to wherever you need it pointing.
Something like this, i think
function asama3() {
document.getElementById("ibre").style.transform = "rotate(140deg)";
document.getElementById("ibre").style.left = "250px";
document.getElementById("ibre").style.top = "220px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(80deg)";
document.getElementById("ibre").style.left = "165px";
document.getElementById("ibre").style.top = "190px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(40deg)";
document.getElementById("ibre").style.top = "220px";
document.getElementById("ibre").style.left = "120px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 270px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>
I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:
JS fiddle code
and image of what I want to achieve:
Is this possible? If yes, then what should I add or change in my code?
Thanks.
Best regards,
Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.
https://jsfiddle.net/m3zoz34f/8/
.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}
.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
Please check below:
P.S.: No Js, Just Css
.container{
position:relative;
}
.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="container">
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="line">
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
</div>
please fiddle I work on for you ... its little advance JS
but you can reuse it every where .
https://jsfiddle.net/m3zoz34f/6/
if you want to add new lines over here in html add
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
<path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555; fill:none; " />
##### over here add new <path like the one up and put special name ID
</svg>
</div>
then in the JS
function connectAll() {
// connect all the paths you want!
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
}
see this
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
#myNewPath : path name you put in html
#fromLine : ID or class of the first block
#toLine : ID or class of second block ....
and you can link as much blocks as you want
its responsive BTW .
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
I must have a little design in javascript.
I have a menu with 5 entrys and only 1 HTML-page.
So I will have a content-div and enabled and disabled different static content in it, each menu-entry is another content.
I tried with 5 divs and disable 4 of them and enable 1, but the element under each other means every div is like a - enabled or not, so the "content" is moving then.
Hope its understandable.
Here is the code so far:
<html><head><title>Des Einsame-Katerchen's kleine Homepage</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:blue; text-decoration:none; }
a:focus { font-weight:bold; color:blue; text-decoration:none; }
a:hover { font-weight:bold; color:blue; text-decoration:line-through; }
a:active { font-weight:bold; color:blue; text-decoration:none; }
h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
<script>
function an(id)
{
document.getElementById('start').style.visibility = 'hidden';
document.getElementById('start').style.height = '0px';
document.getElementById('me').style.visibility = 'hidden';
document.getElementById('me').style.height = '0px';
document.getElementById('rpg').style.visibility = 'hidden';
document.getElementById('rpg').style.height = '0px';
document.getElementById('musik').style.visibility = 'hidden';
document.getElementById('musik').style.height = '0px';
document.getElementById('screens').style.visibility = 'hidden';
document.getElementById('screens').style.height = '0px';
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.height = '500px';
}
</script>
</head>
<body style=" " >
<div style="width=100%; text-align:center; border: 1px red solid; height:40px;">
<div style="float:left; width:100px;"><a href="#" OnClick="an('start')" >Startseite</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('me')" >Über mich</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('rpg')" >RPG-Chars</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('musik')" >Musik</a></div>
<div style="float:left; width:150px;"><a href="#" OnClick="an('screens')" >Knuddels-Screens</a></div>
</div>
<br>
<div id="start" style="border:1px red solid; width:500px; height:500px; overflow: visible; " >
a
</div>
<div id="me" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
b
</div>
<div id="rpg" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
c
</div>
<div id="musik" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
d
</div>
<div id="screens" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
e
</div>
</body>
Try
style.display = 'none';
It will stop affecting other elements place and layouting.
If you haven't already, I would recommend checking out jQuery for DOM manipulation: http://jquery.com/. In your case, the html() method, http://api.jquery.com/html/, or the hide() method, http://api.jquery.com/hide/.
Good luck!
Take a look at Tabtastic for a decent implementation of this.