Picture:
What I want:
I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.
Problem:
Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.
What I tried:
Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.
JSFiddle link
Working fiddle.
First of all, z-index can have a maximum value of 9999.
One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.
Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.
Change your CSS to:
.folder_path .right_arrow {
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
height: 35px;
width: 35px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
margin-left: -25px;
}
.folder_path .path_part {
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: middle;
min-width: 40px;
font-size: 20px;
padding: 0 10px;
z-index: 2;
}
$(".path_part").hover(function(){
$(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
}, function(){
$(this).next().css({"background": "unset"});
});
You can use jquery.This code will work for you.
Related
I am trying to create a banner in the top left corner that stays put and does not disappear or get cut off when the window shrinks. This is the site: indigolubricants.com and it can be accessed with the password: indigodenver . This is a squarespace site and some things behave differently than regular html and css.
HTML:
<div class="corner-ribbon top-left sticky red shadow">Hover over symbols to see product categories</div>
This is the css with the position as fixed. The problem with this is that I want the ribbon to scroll with the rest of the page. Please let me know of any solutions. Either css or javascript. I have already tried changing the position properties. If the element is absolute then I can't move it. Other elements get cut off when the page is resized.
CSS:
/* The ribbons */
.corner-ribbon{
width: 1000px;
background: #DAA520;
position:fixed;
top: 0px;
left: 100px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
top: 200px;
left: -300px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
Try applying these styles to the element you want to fix. You can change the height and width accordingly.
height: 20vh;
width: 10vw;
top: 0;
position: fixed;
I tried to recreate this transition that google uses for a couple of hours but I really don't know how to do it yet. The transition I'm talking about is that search bar bottom that becomes 2px thick from left to right. So: From that to a border-bottom of 2px with a nice transition.
A live preview of this transition can be found on: https://material.google.com/style/icons.html#
This is done via the :after-pseudo-element of the Search-label. This is it's CSS:
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.87);
bottom: 0px;
content: '';
height: 2px;
width: 10px;
left: 45%;
position: absolute;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
When you focus the box, the following CSS is applied:
left: 0;
width: 100%;
visibility: visible;
This gives the "center-based" animation you're looking for. I can build a fiddle to demonstrate the effect if you need.
EDIT:
Have a fiddle: https://jsfiddle.net/tf084pd1/
Here's the effect with the "double-border": https://jsfiddle.net/tf084pd1/1/
I've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?
The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>
I'm trying to create a sound control bar that shows the current position of playback with a loading bar that is underneath the control bar. example:
This is what it looks like when my window size is medium or large. but when it gets smaller, it turns into this:
not only is it no longer centered, but it shifts everything left and the position bar over flows. you will notice that the position bar is fine, the real problem comes from the play control div instantly shrinking and shifting left. is there a way to fix this?
HTML:
<div class="container">
<div class="playBar row"></div>
<div class="positionBar row"></div>
</div>
CSS:
.container { position: relative }
.playBar {
background-color: rgba(173, 173, 173, 0.55);
border-radius: 5px;
height: 50px;
font-size: 27px;
background: linear-gradient(to bottom, rgba(207, 207, 207, 0.58) 0%,rgba(134, 134, 134, 0.54) 100%);
z-index: 1;
position: absolute;
width: inherit;
}
.postionBar {
border-radius: 5px;
background-color: #CC5A5A;
z-index: 10;
height: 50px;
}
If you set a min-width on the bar, it won't shrink past a certain point.
min-width: 100%;
In CSS3, I can easily blur anything with this:
-webkit-filter: blur(5px);
-moz-filter: ...
Right now, I am trying to create a draggable circle on top of text so that anything inside the area of that circle will be blurred:
position:absolute;
-webkit-filter: blur(3px);
background: rgba(255, 255, 255, .3);
This technically should work, but this is what I see instead:
It looks buggy, and the most important part is that the text inside the semi-transparent circle is not blurred. Is there a way to fix it with CSS or JavaScript?
The example: http://jsfiddle.net/hSpHd/
The problem is that there is no suport for masking a filter.
That is, the filter is applied to all the element.
One workaround for this limitation is to have 2 elements, apply the filter to one, and mask it to transparency. Then you have the second (identical) element showing, unfiltered.
The CSS would be:
#one, #two {
position: absolute;
width: 200px;
height: 400px;
font-size: 18px;
}
#one {
top: 20px;
left: 20px;
background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px);
background-position: -20px -20px;
}
#two {
top: 0px;
left: 0px;
-webkit-filter: blur(2px);
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px);
background-color: white;
}
abd the HTML is
<div id="one">Lorem ipsum ...
<div id="two">Lorem ipsum ....
</div>
</div>
that is 2 div nested, and with the same content.
Fiddle
Things that I don't like about that:
You need 2 divs with the same content.
You need to synchronize the mask position (in div 2) with the background position (in div1).
You could set the circle in div 2 and maybe move everything at the same time, but then the circle is blurred.
But it's a start :-)
BTW, I have used everywhere the latest syntax of gradients. Since you are limited in compatibility from the beginning, I don't think you should care.
this might work -webkit-tap-highlight-color: transparent;