I have built a div container with HTML and jQuery, where when you hover over it another panel slides over the top. But I am experiencing the sliding panel "yoyo" about. I think this is because when the panel slides over the div the hover state is triggered then lost and so the panel pops up and down again continuously.
What I want to happen is while you are hovering over anywhere in the square the panel shows and when you are not in the square it doesn't.
Here is a fiddle so you can see what the problem is, maybe it is easier explained this way.
https://jsfiddle.net/xa5gtd2u/3/
Also here is the code
HTML
<div class="container">
<div class="services-blocks">
<img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
<h3>title here</h3>
</div>
<div class="services-slide-panel">
<h3>title here</h3>
Some text here
Some text here
Some text here
Some text here
</div>
</div>
CSS
.services-slide-panel {
background: #f3535e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 0;
display: none;
color: #ffffff;
}
.services-slide-panel h3 {
color: #ffffff;
}
.services-blocks h3 {
text-align: center;
position: absolute;
bottom: 5%;
width: 100%;
color: #ffffff;
}
.container {
width: 250px;
height: 250px;
position: relative;
}
jQuery
$(document).ready(function() {
$(".services-blocks").hover(function() {
$(this).next(".services-slide-panel").slideToggle("slow");
});
});
CSS3 transition is always a better pick to do these kind of effects. Moreover you have to hover() on .container otherwise the slided in div will take the hover instead and the will invoke hoverout part of the hover() function.
$(document).ready(function() {
$(".container").hover(function() {
$(this).find(".services-slide-panel").addClass("slow");
}, function() {
$(this).find(".services-slide-panel").removeClass("slow");
});
});
.services-slide-panel {
background: #f3535e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
top: 110%;
color: #ffffff;
transition: all 0.3s ease;
}
.services-slide-panel.slow {
top: 0%;
}
.services-slide-panel h3 {
color: #ffffff;
}
.services-blocks h3 {
text-align: center;
position: absolute;
bottom: 5%;
width: 100%;
color: #ffffff;
}
.container {
width: 250px;
height: 250px;
position: relative;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="services-blocks">
<img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
<h3>title here</h3>
</div>
<div class="services-slide-panel">
<h3>title here</h3> Some text here Some text here Some text here Some text here
</div>
</div>
Fiddle here
Related
I have a simple HTML and CSS overlay that triggers at certain actions. I would like to display the overlay on certain part of the page.
I have side-bar menu on the left attached to it the main body. using position: fixed; is good to create an overlay that covers all the page but I want overlay to cover only the page in where its displayed beside that it has to set on top of the current content as if I am using position: fixed; How can I do this.
HTML Code that is placed in the body content of the page:
.backdrop {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.3;
background-size: 100% 100%;
}
.loadingSpan {
display: inline-block;
align-items: center;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
}
<div class="backdrop" id="LoadingContainer">
<div class="loadingSpan">
<h1 id="LoadingText">Loading</h1>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
<span class="sr-only"></span>
</div>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading</span>
</div>
</div>
</div>
The overly works fine but it covers the whole page alongside with the side menu so I want to fix this just to cover the page that its current its code placed at.
Side Menu:
<section class="sidebar">
<ol class="quickinfo">
<li class="quickinfo_item">
<span class="quickinfo_text">Menu1</span>
<span class="quickinfo_text">Menu2</span>
</li>
</ol>
</section>
CSS:
.sidebar {
background: #222d32;
flex: 1;
max-width: 15%;
height: 100%;
color: white; }
.sidebar_item {
display: flex; }
Layout:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="container_body container-fluid">
#{ Html.RenderAction("Sidebar", "Ui"); }
<section class="content container-fluid">
#RenderBody()
</section>
</section>
</body>
</html>
Use position: relative for the container and position: absolute for the overlay. Then put the overlay inside the container. Example:
body {
font-family: sans-serif;
margin: 0;
}
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: white;
}
<h1>Outside the Container</h1>
<div class="container">
Container Content
<div class="overlay">
Overlay Content
</div>
</div>
Change .backdrop position: absolute; and set its container to position: relative;
fixed means that it's position is relative to the view port (usually). absolute means relative to the containing block
I have several divs with absolute position on top of primary div which has relative position (duh). I am trying to make one div change its background-color etc when hovering another div within same parent div.
Now, I'm aware of adjacent-div classes but they don't seem to work (maybe because of absolute positioning).
Below is an example of my code (actual is a lot bigger). What would be best way to change for e.g. m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?
P.S. If CSS alone ain't an option, a jQuery solution can also work.
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
</style>
You can not do it with pure css and your current html structure, need javascipt or jquery to do this.
Example:
$('.m2wrap-hover').hover(function() {
$(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
$(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-back.hover {
width: 120px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
</div>
Or if you want to use just css, you need to change the order of your elements (because it has position: absolute so the order doesn't matter):
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-hover:hover + .m2wrap-back {
width: 120px;
color: red;
}
<div class="m2wrap">
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
</div>
I'm trying to get the text in the fixed div to change as you scroll past the main divs that contain the images. I tried following the solution in Changing div content based on scroll position but it won't work. Here is my attempt using that method: http://jsfiddle.net/st6q1Lmo/5/.
I'm a beginner so it's hard for me to write code from scratch. I must be doing something wrong... I would appreciate any help. Thank you!
This is my HTML and CSS without any JS (http://jsfiddle.net/7tdnw1eb/6/):
UPDATE: Thanks to the lead #tera_789 gave me, I've almost got it to work. For the first and third div it works, but for the second the content won't update in the fixed div. I know it could be because the video is only 90vh and the video itself won't scroll in the container... However I need it to be 90vh. How can I get around this? jsfiddle.net/7tdnw1eb/12
body {
background-color: #797979;
color: black;
font-family: serif;
font-size: 2vw;
line-height: 1.1em;
}
#about {
padding-bottom: 1em;
}
#wrapper {
max-width: 100vw;
max-height: 100vh;
overflow: scroll;
padding-top: 1em;
padding-bottom: 1em;
}
.project {
background-color: transparent;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
padding: 0 2em;
overflow: scroll;
}
.content__container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#count {
color: black;
width: 20%;
display: block;
position: fixed;
top: 0;
right: 0;
padding: 1em 2em 2em 0;
z-index: 99999999999;
}
img {
max-width: 100%;
}
<div id="wrapper">
<div id="count">
<p>1/3</p>
</div>
<div id="about">
Wassup everyone
</div>
<div class="project">
<div class="content__container">
<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
</div>
</div>
</div>
Take a look at this: onscroll event
I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link
You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
I have this code:
HTML
<div id="wrapper">
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image1.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image2.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image3.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
</div>
CSS
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
position: absolute;
left: 0;
}
.box span {
position: absolute;
width: 100%;
height: auto;
color: #FFF;
left: 0;
background-color: #FF0000;
}
You can find it here:
http://jsfiddle.net/v2Vk3/3/
Just want the caption to be the same height and width as the image, overlaping it and without changing the automatic resizing for images.
Is there any way to get this working with CSS?
Thx
I guess you have asked for this http://jsfiddle.net/6hgCj/
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
}
.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}