In my webpage I have have a block with an background and below I have a button that should continue the background.
Here is an example. The left image is what my webpage is now, and the right image is what the webpage should be. You can see that the background continues on the button.
My code structure is something like:
<div id="section-1">
<div class="shown-content">
<div class="background"></div>
<div class="content">
... here are shown contents ...
</div>
</div>
<div class="hidden-content">
... here are hidden contents ...
</div>
<div class="button-content">
<span class="button">FOLD OUT</span>
</div>
</div>
The functionality is that when you click on the button, it triggers the JQuery slideToggle and it shows/hides the hidden-content div.
My idea is to set the button background the same width and height than the content background and then position it where appropriate. But I'm a bit lost because I don't find any way of doing this, and maybe you know a better way.
Let's say your placeholder for the image is 100px in height and the button is 30px.
Let's say your button always are in the center of the main image div.
Then you need an image that is 130px high, where the background position is set to center top and the buttons background position is set to center bottom.
Sample
.imgdiv {
background-position: center top
}
.buttdiv {
background-position: center bottom
}
If your button isn't in the center you need to adjust the "center" part of background position to make it match the main image
Your initial idea is probably the best solution.
Use background position to correctly position you div.
.button-content{
background: url('') no-repeat 200 100%;
}
Numbers afer no-repeat are X position Y position of background image.
I've found this solution, hope it will help you.
Place the fold out button absolute in the relative positioned #section-1.
While placing it absolute, it will only take the width it needs. Then we use the pseudo-classes :before and :after to fill the space on the left and the right with the background color of the body (in my example white).
The HTML looks like this (expandable with your rest code):
<div id="section-1">
<div class="hidden-content">
hidden content
</div>
<div class="button">
Fold out
</div>
</div>
And the CSS:
#section-1 {
min-height: 100px; /*use min-height so it will expand */
background: url('pic.jpg');
position: relative;
padding-bottom: 30px; /* height of .button */
overflow: hidden; /* to hide the :before and :after */
}
.button {
position: absolute;
bottom: 0;
right: 20px;
height: 30px;
width: 75px;
text-align: center;
}
.button:before, .button:after {
content: ' ';
background: white;
position: absolute;
width: 1000px;
left: -1000px;
height: 30px;
}
.button:after {
left: 100%;
}
.hidden-content {
display: none;
}
And a demo.
Related
I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?
I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>
You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.
Say I have an image that has width
width: 100vw;
Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?
Thanks
Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?
I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:
div {
position: relative;
}
img {
width: 100vw;
height: auto;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div>
<img src="https://unsplash.it/200/100/?random">
<p>SOME TEXT</p>
</div>
https://jsfiddle.net/fjh6msqL/
Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html
div {
display: inline-block;
position: relative;
}
div:after {
content: 'here is your title';
color: white;
background: black;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
img {
width: 100vw;
}
<div class="parent">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:
<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
<h2 class="title"></h2>
</div>
Vertical positioning can be tricky, but there are ways, for example:
CSS Vertical align middle
With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.
body{
margin:0;
padding:0;
}
.img-placeholder{
position:relative;
}
.img-placeholder img{
width:100vw;
height:auto;
}
.img-placeholder h2{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
max-height:0px;
text-align:center;
}
<div class="img-placeholder">
<img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
<h2>Image Title</h2>
</div>
I made an example. How to make that green div to have fixed position in the container?
<div class="container">
<div class="row">
<div class="col-xs-4">hey hou</div>
<div class="col-xs-8">
<div>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
<div id="fixed">This div should aligned to the left like yellow div and fixed</div>
</div>
</div>
</div>
Please not all elements must stay at same positions as they are now and green div should be fixed!
So it should looks like this:
and when the user scrolls the site:
Please note that this only works on specific dimensions. You will need (a lot) of media queries and/or JavaScript/jQuery to get it working on all window sizes.
You can use translateX to reposition your div.
This is the CSS for the #fixed div:
#fixed {
position: fixed;
top: 100px;
background: green;
width: 100px;
transform: translateX(-265px);
}
Here is the updated JSFiddle
Just change your fixed div to `absolute and position accordingly like this:
#fixed {
position: absolute;
left: -300px;
top: 100px;
background: green;
width: 100px;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/uLa02c62/2/
I have my logo (an image inside a div) with these properties in jade-
style="opacity:1;filter:alpha(opacity=100);display:block;border-bottom: thick solid #000000;background:rgba(255, 255, 255, .8)"
This div is on the page top and a report displayed as the main content. I am using stickyjs to keep the logo fixed on scrolling down the page.
But, when i scroll down, the page content behind the logo is not hidden and is visible as text behind the image as,
How can i set options for background-color, to hide the text contents lying underneath?
Ok, without knowing your site architecture, here's a sample of what you could do...
Working CodePen Demo
HTML
<div id="main">
<div id="header">
<img src="http://www.myiconfinder.com/uploads/iconsets/256-256-1c93adf1d2e3c02dcb629a40fb065e81.png" />
</div>
<div id="content">
<p>This is the body content.</p>
...
<p>
<p>This is the body content.</p>
</div>
</div>
CSS
#header {
height: 60px;
width: 100%;
position: fixed; /* Keeps the header fixed at the top of the page */
top:0;
z-index: 10;
background-color: #fff; /* opaque background to hide text */
margin: 0;
padding: 0;
}
#header img {
height: 100%;
}
#content {
position: absolute; /* begin content beneath header */
top: 55px;
z-index: -1; /* hide the body text */
}
You don't need JS to fix a header at the top of the page. I'd suggest simplifying and using CSS positioning to make sure the header bar stays at the top of the page.
I have a main image and little callout buttons on top of the main image. I'm trying to get the callout buttons to stay in position when the screen size changes while the main image size resizes with max-width and background-size: contain, but right now, the callout button's position changes.
Here is the CSS:
.main_image
{
background: red;
height: 400px;
background-size: contain;
position: relative;
max-width: 100%;
}
.callouts
{
background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
height: 70px;
width: 40px;
height: 30px;
position: absolute;
top: 70px;
right: 180px;
}
Here is the HTML:
<div>
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>
Here is the link to the fiddle: http://jsfiddle.net/Nem2C/
As you resize the image, the callout button changes position, but I need it to stay where it's at when the image resizes.
is there a jquery solution or a javascript solution to this as well?
I tried to fix this. I didn’t finish, but I got closer to the solution.
See this jsFiddle. I put div.callouts inside the div with the image and positioned it relative to that with percentage values.
<div class="image_wrapper">
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
<div class="callouts"></div>
</div>
.image_wrapper {
position: relative;
}
.callouts{
top: 15.5%;
right: 24.1%;
}
To calculate the correct percentage value from, for example, the top, use the formula (image_height_in_pixels / pixels_from_the_top) * 100.
The problem with what I have now is that the callout x-position doesn’t scale with the width properly for some reason.