I am on this problem for 24h now...
I try to fix a theme, to see the problem, go on : https://mysandbox.cf/
Hover the tab called "More", and then, you can see other tab called "Age", "Jeux", "Collections"... Under this, you can see a sub-sub menu (who shouldn't be displayed except if you hover Age, jeux or Collections)
I tried to fix the problem with this code (add it in browser console):
#category-92 .popover {
opacity: 0;
}
li#category-92:hover > .popover {
opacity: 1;
}
#category-20 .popover {
opacity: 0;
}
#category-20 .dropdown-item:hover ~ .popover{
opacity: 1;
}
#category-162 .popover {
opacity: 0;
}
#category-162 .dropdown-item:hover ~ .popover{
opacity: 1;
}
It fixes the dropping action when hover tab, however, it disappears immediately if you unhover the tab. I hope you can help. Thanks.
I solved with :
#category-92 .popover {
opacity: 0;
margin-top: 500px;
}
li#category-92:hover > .popover {
opacity: 1;
margin-top: -20px;
}
#category-20 .popover {
opacity: 0;
margin-top: 500px;
}
li#category-20:hover > .popover {
opacity: 1;
margin-top: -20px;
}
#category-162 .popover {
opacity: 0;
margin-top: 500px;
}
li#category-162:hover > .popover {
opacity: 1;
margin-top: -20px;
}
Related
this code changes the background of the div every time a button is pressed but the new background is supposed to fade in so I set an animation. If you press red, and then another color, it makes the transition the first time, but not from the second on. The background will just appear without animation.
function changit(color) {
document.getElementById('cont').classList = color;
}
#keyframes appear {
0% {opacity:0;}
100% {opacity:1;}
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before, .blue::before, .black::before { transition: opacity 2s ease;animation:appear 2s; }
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
isnt the animation supposed to play again if the element changes class? How can I reset the animation to start again every time the element changes class to achieve this effect?
The animation property value actually never changes, with all the classes it's always the same and there is no point in time where it's unset, so it won't fire again.
You need to force the CSS engine sees that it did change. For this you can remove the class altogether force what is called a "reflow", which is when the CSS engine recalculates all the element's boxes in the page, and then only, set the class back:
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}
#keyframes appear {
0% {opacity:0;}
100% {opacity:1;}
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before, .blue::before, .black::before { transition: opacity 2s ease;animation:appear 2s; }
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
Or, since you're using JS anyway, use the WebAnimations API:
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = color;
elem.animate(
[ { opacity: 0 }, { opacity: 1 } ],
{ duration: 2000, repeat: 1 }
);
}
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = color;
elem.animate(
[ { opacity: 0 }, { opacity: 1 } ],
{ duration: 2000, repeat: 1 }
);
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
I try to make the alert boxes overlap on my content but every time it always shows and pushes down my content.
I do not have a z-index anywhere else also change position everything absolute, relative, and fixed but nothing working One time it was working then when I saved it's gone.
here is my code.
return (
<Alert
dismissible
show={this.state.show}
variant={variant}
onClose={this.handleClose}>
<div className='container'>
<Alert.Heading>{heading}</Alert.Heading>
<p className='alert-body'>{message}</p>
</div>
</Alert>
)
}
}
.alert {
align-items: center;
animation: .5s ease-in-out 0s 1 light-bounce-in;
bottom: 1rem;
display: flex;
// left: 0;
margin: auto;
max-width: 30rem;
position: absolute;
top: 30px;
left: 20px;
right: 20px;
// right: 0;
z-index: 1;
.alert-body {
margin: auto 0;
}
}
.close {
&:active,
&:focus {
outline: none;
}
}
#keyframes light-bounce-in {
0% {
opacity: 0;
transform: translateY(20%);
}
50% {
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
z-index: 1 seems to be a low value. Try something like z-index: 100 or z-index: 1000 or more. I'd check names of classes also.
The following hides the element, but I cannot recover when I hover over it.
I've checked devtools to see that it is indeed rendered on the screen, I just can't see the contents of the div.
How do I make it so the div is visible only on hover?
.visible-on-hover {
visibility: hidden;
}
.visible-on-hover:hover {
visibility: visible !important;
}
Elements with visibility: hidden; don't receive any mouse events, so :hover never triggers on such an element.
Instead of visibility, you can work with opacity:
div {
background-color: orange;
height: 200px;
width: 400px;
padding: 50px;
}
.visible-on-hover {
opacity: 0;
transition: opacity .3s ease;
}
.visible-on-hover:hover {
opacity: 1;
}
<div class="visible-on-hover">visible only on hover</div>
you can not hover, focus or select a hidden element.
you can use opacity
.visible-on-hover {
opacity: 0;
}
.visible-on-hover:hover {
opacity: 1;
}
Got this script and it works fine, the problem is that it show´s the video on the playlist, ive tried to visibility:hidden; and display:none; and it doesnt work, anyone knows how to hide this?
var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
vidDir = "http://demosthenes.info/assets/videos/",
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");
(function() {
function playVid(index) {
video_links.children[index].classList.add("currentvid");
source[1].src = vidDir + link_list[index] + ".webm";
source[0].src = vidDir + link_list[index] + ".mp4";
currentVid = index;
video.load();
video.play();
}
for (var i = 0; i < lnkNum; i++) {
var filename = allLnks[i].href;
link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
(function(index) {
allLnks[i].onclick = function(i) {
i.preventDefault();
for (var i = 0; i < lnkNum; i++) {
allLnks[i].classList.remove("currentvid");
}
playVid(index);
}
})(i);
}
video.addEventListener('ended', function() {
allLnks[currentVid].classList.remove("currentvid");
if ((currentVid + 1) >= lnkNum) {
nextVid = 0
} else {
nextVid = currentVid + 1
}
playVid(nextVid);
})
video.addEventListener('mouseenter', function() {
video.setAttribute("controls", "true");
})
video.addEventListener('mouseleave', function() {
video.removeAttribute("controls");
})
var indexOf = function(needle) {
if (typeof Array.prototype.indexOf === 'function') {
indexOf = Array.prototype.indexOf;
} else {
indexOf = function(needle) {
var i = -1,
index = -1;
for (i = 0; i < this.length; i++) {
if (this[i] === needle) {
index = i;
break;
}
}
return index;
};
}
return indexOf.call(this, needle);
};
var focusedLink = document.activeElement;
index = indexOf.call(allLnks, focusedLink);
document.addEventListener('keydown', function(e) {
if (index) {
var focusedElement = document.activeElement;
if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
var nextNode = focusedElement.nextElementSibling;
if (nextNode) {
nextNode.focus();
} else {
video_links.firstElementChild.focus();
}
}
if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
var previousNode = focusedElement.previousElementSibling;
if (previousNode) {
previousNode.focus();
} else {
video_links.lastElementChild.focus();
}
}
}
});
})();
#video_player {
display: table;
line-height: 0;
max-width: 100%;
margin: 0 auto;
}
#video_container {
position: relative;
}
#video_player div,
#video_player figcaption {
display: table-cell;
vertical-align: top;
}
#video_container video {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
}
#video_player figcaption {
width: 25%;
}
#video_player figcaption a {
display: block;
}
#video_player figcaption a {
opacity: .3;
transition: 1s opacity;
}
#video_player figcaption a img,
figure video {
width: 100%;
height: 100%;
}
#video_player figcaption a.currentvid,
#video_player figcaption a:hover,
#video_player figcaption a:focus {
opacity: 1;
}
<figure id="video_player">
<div id="video_container">
<video controls poster="vid-glacier.jpg" autostart>
<source src="http://thenewcode.com/assets/videos/glacier.webm" type="video/webm" autostart>
<source src="http://thenewcode.com/assets/videos/glacier.mp4" type="video/mp4" autostart>
</video>
</div>
<figcaption>
<a href="http://thenewcode.com/assets/videos/lake.mp4" class="currentvid">
<img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
</a>
<a href="http://thenewcode.com/assets/videos/mountain.mp4">
<img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
</a>
<a href="http://thenewcode.com/assets/videos/glacier.mp4">
<img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
</a>
</figcaption>
</figure>
Thanks in advance
Okay, this CSS should work for you. I've marked all the important items. But before we get to that, lets look at what was wrong. This is what you had:
#video_container video {position: absolute; top: 0;}
#video_player figcaption {width: 25%;}
The position, and its top, code were overriding all forms of hiding the playlist. Even if #video_player figcaption was set to display: none; or visibility: hidden; this had no effect on hiding the playlist because of width: 25%;. The width was overriding the display/visibility, which we all know that display: none; should override everything. But the width was still visible because position: absolute; from #video_container video said "I don't care what everything else says, you're staying put". These things have been fixed. The correct CSS to use is below.
#video_player {display: table;
margin: auto;
background: #000000;
width: 500px; /*The space you want occupied.*/
}
#video_container {position: relative;}
#video_player div, #video_player figcaption {display: table-cell; vertical-align: top;}
#video_container video {display: block;
width: 100%; /*How big you want the video to be.*/
height: ---; /*Whatever you want*/
/*width: 350px;*/ /*Use with visible playlist.*/
/*height: 100%;*/ /*Use with visible playlist.*/
}
#video_player figcaption {display: none; /*Hides the playlist from view.*/
}
#video_player figcaption a {display: block; opacity: .3; transition: 1s opacity;}
#video_player figcaption a img {width: 100%;}
#video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus {opacity: 1;}
New Post: To hide the current video, look at #video_player figcaption a.currentvid ... a:focus. Change opacity: 1; to opacity: 0;, add visibility: hidden; (which will hide the area, but not remove the space that it occupies), or add display: none; (which is the best solution). If you want to have the playlist appear on several pages, then make sure to place class="currentvid" in the correct <a> each time.
Old Post: You need to add display: none; or display: none !important; to #video_container. The problem is that you might. To have display: none; work correctly, move #video_container below #video_container video. If you want everything to stay where it is, then use display: none !important;` which will override everything else and hide your video.
#video_container {
position: relative;
display: none !important;
}
I have created a template that contains a panel and a content. Depending on the template's class (Top, Left, Right, or Bottom) the panel will have a different position. The expand and collapse animations are performed using transition and classes.
EDIT:
Here is a fiddle: http://jsfiddle.net/ckkVx/2/
/EDIT
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link href="../Css/reset.dev.css" type="text/css" rel="stylesheet">
<link href="../Css/V_PanelTemplate.dev.css" type="text/css" rel="stylesheet">
<script src="../Js/jquery-1.9.1.min.js" type="text/javascript">
<script src="../Js/V_PanelTemplate.dev.js" type="text/javascript">
</head>
<body class="PanelTemplate Bottom">
<div class="Panel AutoHide Collapsed">PANEL</div>
<div class="Content Expanded">CONTENT</div>
</body>
</html>
And here is the CSS code:
#CHARSET "UTF-8";
.PanelTemplate {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.PanelTemplate > .Panel,
.PanelTemplate > .Content {
position: absolute;
-webkit-transition: ease-in-out 400ms;
-moz-transition: ease-in-out 400ms;
-ms-transition: ease-in-out 400ms;
-o-transition: ease-in-out 400ms;
transition: ease-in-out 400ms;
}
.PanelTemplate.Top > .Panel,
.PanelTemplate.Bottom > .Panel {
height: 100px;
left: 0;
right: 0;
}
.PanelTemplate.Left > .Panel,
.PanelTemplate.Right > .Panel {
width: 200px;
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Content,
.PanelTemplate.Bottom > .Content {
left: 0;
right: 0;
}
.PanelTemplate.Left > .Content,
.PanelTemplate.Right > .Content {
top: 0;
bottom: 0;
}
.PanelTemplate.Top > .Panel {
top: -90px;
}
.PanelTemplate.Left > .Panel {
left: -190px;
}
.PanelTemplate.Right > .Panel {
right: -190px;
}
.PanelTemplate.Bottom > .Panel {
bottom: -90px;
}
.PanelTemplate.Top > .Panel.Expanded {
top: 0;
}
.PanelTemplate.Left > .Panel.Expanded {
left: 0;
}
.PanelTemplate.Right > .Panel.Expanded {
right: 0;
}
.PanelTemplate.Bottom > .Panel.Expanded {
bottom: 0;
}
.PanelTemplate.Top > .Content {
top: 100px;
bottom: 0;
}
.PanelTemplate.Left > .Content {
left: 200px;
right: 0;
}
.PanelTemplate.Right > .Content {
right: 200px;
left: 0;
}
.PanelTemplate.Bottom > .Content {
bottom: 100px;
top: 0;
}
.PanelTemplate.Top > .Content.Expanded {
top: 10px;
}
.PanelTemplate.Left > .Content.Expanded {
left: 10px;
}
.PanelTemplate.Right > .Content.Expanded {
right: 10px;
}
.PanelTemplate.Bottom > .Content.Expanded {
bottom: 10px;
}
/* Test CSS */
.PanelTemplate > .Panel {
background: #777;
color: #FFF;
}
.PanelTemplate > .Content {
background: #333;
color: #FFF;
}
And, if needed, the JavaScript code:
(function($) {
$(document).ready(function() {
var CLOSE_DELAY = 1000;
var $panel = $('.PanelTemplate > .Panel.AutoHide').first();
$content = $('.PanelTemplate > .Content').first();
$panel.mouseenter(function() {
$panel
.addClass('Expanded')
.removeClass('Collapsed')
.data('isMouseOver', true);
$content
.removeClass('Expanded')
.addClass('Collapsed');
}).mouseleave(function() {
$panel.data('isMouseOver', false);
// Waiting a short time in case the mouse accidently leaves
var timeout = setTimeout(function() {
// If it's no longer over after time out, closing
if( ! $panel.data('isMouseOver')) {
$panel
.removeClass('Expanded')
.addClass('Collapsed');
$content
.addClass('Expanded')
.removeClass('Collapsed');
}
clearTimeout(timeout);
}, CLOSE_DELAY);
});
});
})(jQuery);
When I'm using the classes Top or Left on my template, everything works as intended, but when I use either Right or Bottom, the panel, while moving out of the body, expends the window and causes scroll bars to appear.
I read in another question related to overflow:hidden than it could be due to a relatively positioned element, but I don't have any. I also tried to position the html tag and add overflow:hidden to it too, but it didn't help either.
What can I do to prevent this ?
This should fix your issue-
body {
max-width:100%;
}
The problem is in the CSS. Vector's answer with max-width: 100%; is great, but if that doesn't work then use the !Important override feature. For Example:
.PanelTemplate {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden; !Important
}
That will help override the other rules on overflow!