I am trying to make web-based slides myself, but I stumble on making a toolbar appear above each slide: the buttons are not clickable.
I reproduced this problem on this quasi-minimum working example. If you click on the button, it will not do anything, except click on the slide. However, the z-index of the button is greater than of the slide.
How can I leave the elements where they are (in the tree) and have the button to be clickable?
#fullscreenbutton {
z-index: 1001;
}
.slides {
display: block;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
font-size: 1.5vw;
padding: 20px;
box-sizing: border-box;
z-index: 1000;
}
<div id="app">
<div class="slides" id="slides">
<button id="fullscreenbutton" onclick="this.style.color='red'">Make me red</button>
<div class="slide" ignore-position="current">
this slide overrides everything
</div>
</div>
</div>
One way to resolve this is by removing non-css actions from the underlying element:
.slide {
...
pointer-events: none
}
Fiddle Example
div.slide is in front of the button and captures all the events.
I think it would make sense to put all the controls in a separate, absolute .div that is positioned in front of the slides.
Ok I found it, I just needed to set up
position:absolute;
on the button #fullscreenbutton.
Related
I've set up a lightbox using only CSS and my images are longer than the viewport. The background is scrolling but the images won't.
Live site: https://hwestdesign.com
I've tried changing the overflow to various different settings and on different selectors and nothing is working. I'm really new to this and I don't know if I'm just making a simple mistake. I've read threads that have similar problems but the solutions provided aren't working either.
This is the CSS code I currently have active:
.thumbnail {
max-width: 100%;
}
.lightbox {
display: none;
width: 300px;
height: 300px;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding:10px;
text-align: center;
background: rgba(0,0,0,0.8);
}
.lightbox img{
max-width: none;
margin-top: 2%;
overflow-y: visible;
height: auto;
}
.lightbox:target {
outline: none;
display: block;
overflow: visible;
}
This is the HTML:
<div class="grid-item item1">
<img src="images/covers/hwest.jpg" class="thumbnail">
<img class="lightbox-content" src="images/hwestbranding.jpg">
</div>
When this loads the light box pops up and there is scrolling but it’s only the background underneath the light box that scrolls. The images are longer and I want to be able to scroll just the images vertically. Right now they are the right size but fixed. I’ve tried changing their position and the overflow but it does nothing
The combination of position:fixed and the overlay size is causing the issue. Setting an element to a fixed position removes it from the scroll context of the rest of the document. To resolve this you need to give the lightbox container a new scroll context by using the overflow property.
Note: you'll need to place the mouse cursor (pointer event) OVER the lightbox/modal specifically to cause the scroll. Otherwise, the "scroll" action will pass through to the document below
Here's an example:
And a link to codepen since its a bit difficult to see here.
body {
min-height:300vh;
background: url(https://images.unsplash.com/photo-1559291001-693fb9166cba) left top repeat;
}
.modal {
/* dark background overlay helps to position content */
position: fixed;
top:0; right:0; bottom:0; left:0;
background-color: rgba(0,0,0,0.6);
}
.modalInner {
/* put the white box in the right place */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* define how big it is before scrolling */
width: 80vw;
height: 80vh;
overflow-y: scroll;
/* look & feel */
background-color: #ffffff;
padding: 20px;
border: 1px solid #000;
}
<div class="modal">
<div class="modalInner">
<img src="https://images.unsplash.com/photo-1560010871-220685e68662" width="100%" />
</div>
</div>
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.
Desired effect will have the red block at the top, however scrolling down will reveal the blue block above
UPDATED: http://jsfiddle.net/cr8uj/1/
HTML
<div class="block">
block
</div>
<div class="content">
content
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
You are looking for: scrollTop
http://api.jquery.com/scrollTop/
Set the current vertical position of the scroll bar for each of the
set of matched elements.
Example:
$('body').scrollTo('#YourDiv');
There is a question related to this: jQuery scroll to element
A good library: http://mmenu.frebsite.nl/examples/responsive/index.html
Other options:
What you need is the JavaScript window.scrollTo method
window.scrollTo(xpos,ypos)
Insert the div position in there.
Or use the JQuery method ScrollTo, see an example here
$(...).scrollTo( 'div:eq(YourDiv)', 800 );
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}