When hovering over 'Find a Hotel' in the menu in the middle of the page a hover menu appears using css only, no javascript.
http://dusit.syndacast.com/dusitthani/meetings/
however on the home page the hover menu is below other elements even though the z-index is 99999
http://dusit.syndacast.com/dusitthani/
Both pages are using almost identical templates but I cannot see what the difference would be?
Thank you
Adding z-index:0 to .relative-item and z-index:1 to .blueBar.brand should fix it.
.relative-item {
position: relative;
z-index: 0;
}
.blueBar.brand{
position: relative;
z-index: 1;
}
Just set z-index in the parent element instead.
Add or update your css to this:
/* currently this element has position:relative; set */
.cover-photo-div {
z-index: 1;
}
.blueBar.brand {
position: relative;
z-index: 2;
}
Following code will fix the issue.
.cover-photo-div {
z-index: 1;
}
.blueBar {
z-index: 2;
position: relative;
}
Related
So I wrote a CSS userstyle that moves the player controls for Youtube videos underneath the player.
#movie_player > div.ytp-chrome-bottom {
position: absolute;
bottom: 0px;
right: 0px;
z-index: -1;
opacity: 1 !important;
display:block
}
#movie_player > div.ytp-gradient-bottom {
display: none
}
#player-container-inner {
padding-bottom: 51px;
display:block
}
It works fine, the only issue is that the progress bar and time don't update if the video isn't being hovered over. Is there any way to force it to remain active/updating via CSS or a javascript userscript? This script is able to do so but I am having trouble parsing exactly what part of the script is doing that. https://greasyfork.org/en/scripts/11485-youtube-ui-fix
I have a toggle bar element I am working on and currently I have it working correctly to style the toggled button, but I want more animation.
The idea is to have the curent active button slide to whichever button is newly active. So visually the only thing I would be adding to the current code is the slide animation.
How to do that exactly is where I'm getting stuck. Now the active element isn't just getting a background and some styles, but a floating/sliding box will be needed (I think)
I don't want anyone to impliment it for me, but I am having trouble thinking of how to impliment it. Do I do something with a pseudoelements?
How do I make sure that the white button background element is as wide as the word it needs to be behind?
This is more or less a general CSS question, but I am not sure how to even start this process.
If anyone has any advice or tricks on how to make this work or just pointing me in the right direction, I would greatly appreciate it! Cheers!
This is what I've built so far in CodeSandbox
You could 'create a gap' for the white block to travel in so it is behind the text but in front of the backgrounds by putting the background colors onto the elements using pseudo elements with lower z index.
On click of a button you can look at the previously clicked button and work out how far the white block has to move to get to the current button, and also how its width has to change.
In this snippet the 'white block' is in fact a pseudo element on the currently clicked button. This makes it easy to work out its final resting place which is directly under the currently clicked button.
const buttons = document.querySelectorAll('button');
function clicked(e) {
const el = e.target;
const prevEl = document.querySelector('button.animate');
const x = (prevEl == null) ? '0%' : (prevEl.getBoundingClientRect().x - el.getBoundingClientRect().x) + 'px';
const w2 = window.getComputedStyle(el).width;
const w1 = (prevEl == null) ? 0 : window.getComputedStyle(prevEl).width;
buttons.forEach(button => {
button.classList.remove('animate');
});
el.style.setProperty('--x', x);
el.style.setProperty('--w1', w1);
el.style.setProperty('--w2', '100%');
el.classList.add('animate');
}
buttons.forEach(button => {
button.addEventListener('click', clicked);
}
);
nav {
display: inline-block;
position: relative;
}
nav::before {
content: '';
position: absolute;
background-color: gold;
width: 100%;
height: 100%;
left: 0 top: 0;
z-index: -3;
}
button {
margin: 2vmin;
background-color: transparent;
position: relative;
}
button::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: brown;
z-index: -2;
}
button.animate::after {
content: '';
position: absolute;
background-color: white;
width: 100%;
height: 100%;
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
top: 0;
left: 0;
z-index: -1;
}
#keyframes move {
0% {
transform: translateX(var(--x));
width: var(--w1);
}
100% {
transform: translateX(0);
width: var(--w2);
}
}
#keyframes animate {
0% {}
100% {
background-color: white;
}
}
<nav>
<button>AAAA</button>
<button>AA</button>
<button>AAAAAA</button>
<button>A</button>
</nav>
If you want to do it from scratch, and have the ability to control the position of the white box relative to the yellow box (position: relative or absolute), you could hardcode it by creating a function that takes the desired box coordinate, checks if the white box is in the correct place, and if not moves it x px in the right direction, then calls itself recursively with a timeout.
Essentially, move it a little bit every few milliseconds until it gets to the right spot. one move every (1000/24)ms or less should make it look fluid.
As for the size, you could either hardcode that and same idea, or make a function that finds the correct size based on the given text.
On this site in the search in the header I can't click the top two AJAX search results because I think they are under another layer. (Search for: condo). I have tried messing with the z-index. I changed the background color of the header to be able to see the top two search results. Here's what I put in the child CSS:
.fusion-sticky-header-wrapper {
display: block;
position: relative;
z-index: 2;
}
.fusion-header-v2 .fusion-header, .fusion-header-v3 .fusion-header,
.fusion-header-v4 .fusion-header, .fusion-header-v5 .fusion-header {
display: block;
background-color: rgba(255,255,255,0);
position: relative;
z-index: 1;
}
.search-in-place, .item {
z-index: 10000;
}
Same results with other plugins so I know it must be in the site CSS, right? Any help appreciated.
The header bar is over the search results because of this declaration:
.fusion-header-wrapper {
position: relative;
z-index: 10010;
}
To solve this you would need to remove the z-index declaration from the header wrapper or set the z-index for the search results higher than 10010, for example:
.search-in-place, .item {
z-index: 10020;
}
This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 8 years ago.
This is not a duplicate. While I was basically looking for the same result as the other post, I wanted to go about it in a different way. They were using background image, and I wanted to use a <span>.
I am trying to make a textbox so that when the user types into it, a "X" shows up on the right. However, I do not want the "X" to show up when there is no text in the box, like it does now.
I tried to make the "X" white, and have it transition it's color when it slides, but you can still select in when you drag the mousedown over it.
I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using overflow: hidden. I did also try to do this, but I couldn't get anywhere with it.
http://jsfiddle.net/qgy8Ly5L/16/
The <span> should be "behind" the white background when it's not showing. Mid transition should look like this:
(source: googledrive.com)
Is this possible in CSS, and if so, how can I do it?
Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.clearBtn {
position: absolute;
top: 0;
right: -15px;
transition: right 0.2s;
}
.show {
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<input type="text" onkeyup="checkInput(this.value)" />
<span id="clearBtn1" class="clearBtn">X</span>
</div>
Hide the X by default and use the show class when needed
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
display: none;
}
.show {
display: inline;
}
JS
function checkInput(text) {
if (text != ""){
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
http://jsfiddle.net/qgy8Ly5L/18/
Check out this updated fiddle:
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
visibility: hidden;
}
.show {
left: -18px;
visibility: visible;
}
http://jsfiddle.net/qgy8Ly5L/19/
By using visibility you get to keep the element in the DOM. This will keep things smooth when it reappears. Notice the use of a "truthy" if statement.
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..