I'm trying to display a modal, the issue is the modal is inside a navbar which has the 'overflow-y' property set to 'scroll', which is making the value 'overflow-x' to 'auto', thus not allowing overflowing children on the x-asis, to be displayed. I'm looking for a way around this other than just moving the modal out of the navbar (It's not something that I can do for now). Is there a way via css to ignore the overflow-y property on the parent?
I made a fiddle with a similar case to the one I'm looking for: https://jsfiddle.net/aje31y7L/2/
<div class="background">
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
</div>
</div>
</nav>
</div>
Currently the modal will appeared trimmed as part of it is hidden by the navbar. Any help is appreciated.
.background {
width: 100vw;
height: 100vh;
background-color: red;
position: relative;
}
.navbar {
display: block;
width: 400px;
left: -400px;
top: 0;
position: relative;
background: black;
max-height: 100%;
overflow-y: scroll;
transform: translateX(400px);
min-height: 100%;
}
.modal-wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.modal-main {
display: flex;
height: auto;
background-color: grey;
}
h1{
font-size: 100px;
}
<div class="background">
<p>
lorem<br>
ipsum<br>
</p>
<nav class="navbar">
<div class="modal-wrapper">
<div class="modal-main">
<h1>
Lorem Ipsuim lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</h1>
</div>
</div>
</nav>
</div>
I have modified the code a little bit. As you run the snippet you will be able to see some text written in the div navbar in "p" tags but as soon as you erase the text inside "p" tags the div will go back in the background. Now as for the modal is concerned, I have modified the code too. The black background in the modal will not be visible but all the text inside it will be visible. It won't be chopped like before.
Related
I want to add alt tags to images on my website to improve SEO. The problem is I'm embedding them using CSS background-image: url(...).
It creates the desired scrolling effects (see below), but is not good for SEO.
Current code:
.text {
margin: 200px 20px;
}
.image-background {
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100%;
display: block;
height: 800px;
margin-bottom: 150px;
margin-left: -1500px;
margin-right: -1500px;
margin-top: 150px;
width: 3500px;
}
.image1 {
background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
}
.image2 {
background-image: url(http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg);
}
<div class='text'>
Lorem ipsum dolores...
</div>
<div class='image-background image1'></div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class='image-background image2'></div>
<div class='text'>
Lorem ipsum dolores...
</div>
The question is: how do I add <img> tags with alt properties without breaking the visual appearance?
Edit:
I tried using <img> with css position:fixed but can't get it to work well with more than one image (my broken jsfiddle here).
Edit 2:
These images are part of website content, not layout. They deserve alt tags, I'm not trying to stuff more keywords in a "bad" way. I originally put them as backgrounds to achieve a visual effect. Now I want to fix the mistake, but without changing how the website looks like.
I'm talking about my photos on this blog.
Edit 3:
I'm not trying to use only CSS here. Any code modification, JS library or pretty much anything is fine!
Method 1
This method doesn't change the visibility of the images, so I think there's no issues about SEO at all. But it is more complex and have the caveat that only one image can appear per once. So the text's div must to fill the entire screen resulting in a big padding.
$(function(){
var texts = $('.text');
var oldY = 0;
$(document).scroll(function(){
var y = window.scrollY;
texts.each(function(){
var text = $(this);
if(y >= text.offset().top)
text.next().addClass('active');
else
text.next().removeClass('active');
});
});
});
body{
padding: 0;
margin: 0;
}
.text{
padding: 20px;
margin: 0 0 600px;
position: relative;
z-index: 3;
background-color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
}
.background-img img{
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.background-img.active img{
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img active">
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
Method 2
This is simpler, and to say the truth it's almost the same idea from your original code. The difference is that as soon as the page loads, the images are hidden and then copied as background images for their parent divs. The advantage is that you can have more then one image visible at the same time, which is a better effect.
$(function(){
$('.background-img img').each(function(){
var img = $(this).hide();
img.parent().css('background-image', 'url(' + img.prop('src') + ')');
});
});
body{
padding: 0;
margin: 0;
}
.text{
padding: 200px 20px;
position: relative;
z-index: 3;
background-color: #fff;
}
.background-img{
height: 400px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Image 1">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
<div class="background-img">
<img src="http://media1.santabanta.com/full1/Animals/Cats/cats-149a.jpg" class="background-img" alt="Image 2">
</div>
<div class='text'>
Lorem ipsum dolores...
</div>
HTML
<div class="container">
<div id="setter">
<span>some variable content</span>
</div>
<div class="wrap">
<span>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</div>
</div>
CSS
.container {
max-width: 200px;
}
.wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The case:
I need to set the width of a span inside .wrap class based on the width of a span inside #setter div dynamically. As you can see in css I'm using ellipsis overflow on the second div. The setter div content length is going to vary. So the goal is to make the lorem ipsum text be not wider than the content of the first div.
Codepen: http://codepen.io/jacek213/pen/pbPkmQ
I want to achieve this with pure css, is that possible? If not, an angular-friendly solution in js (jquery usage is ok) is welcome, however I need it to be efficient because I'm going to display a large number of records built with this structure at once.
It's a little bit gimmick but it can be done with pure CSS
#setter {
display: inline-block;
}
.container {
max-width: 200px;
position: relative;
display: inline-block;
padding-bottom: 1.125em;
}
.wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 0;
right: 0;
}
<div class="container">
<div id="setter">
<span>some variable content</span>
</div>
<div class="wrap">
<span>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</div>
</div>
I don't really think you can accomplish this with CSS. Try a jquery solution like this:
var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");
I'm developing a site built with Ribosome theme. What I would like are 3 divs outside the main container which has a responsive width, but I'm not sure how to get this done properly.
I want it to look something like this
I accomplished the above image by creating an invisible div between the left and right divs, that pushes them to the sides. I feel like this is a bad way to do it as it requires JavaScript or CSS to set the right width of the invisible div between them. The top div is placed inside the container, so it uses its width. This was the code:
<div class="outside-mid" style="background-color:#333;width:100%;height:300px;">Lorem ipsum dolor sit amet.</div>
<div id="outside-container" style="position:absolute;text-align:center;height:0;width:1144px;">
<div class="outside-left" style="background-color:#333;width:300px;height:600px;float:left;margin-left:-310px;">Lorem ipsum dolor sit amet.</div>
<div class="outside-right" style="background-color:#333;width:300px;height:600px;float:right;margin-right:-310px;">Lorem ipsum dolor sit amet.</div>
</div>
I set the width of outside-container using JS:
<script>
var width = document.getElementById('main').offsetWidth;
document.getElementById("outside-container").style.width = width + "px";
</script>
What I'm asking is if there's a way to just put the left and right divs inside the container and then, without using any invisible div to push them, just float them to the left and to the right outside the container. This way it would end up being responsive as it would always use the container width.
Set your html to look like this..
<div id="outside-container">
<div class="outside-left"></div>
<div class="main-div"></div>
<div class="outside-right"></div>
</div>
and try this css..
#outside-container { width: 100%; }
.outside-left { width: 20%; float: left; }
.outside-right { width: 20%; float: right; }
.main-div { width: 60%; float: left; }
please you can use this code.
Lorem ipsum dolor sit amet.
<div id="outside-container" style=" background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;display: table; height: 0; margin: 0 auto; text-align: center; width: 1144px;">
<div class="outside-left" style=" background-color: #333333;float: left; height: 600px; transform: translateX(-100%); width: 300px;">Lorem ipsum dolor sit amet.</div>
<div class="outside-right" style="background-color: #333333; display: inline-block; float: right; height: 600px; margin: 0 auto; transform: translateX(100%); width: 300px;">Lorem ipsum dolor sit amet.</div>
</div>
A lot of good answers here, but I found them quite hard to implement with the use of the same theme I already had installed. After looking through more solutions I found a way that worked for my case. I put the following inside the container, and it worked without altering the current layout.
<style>
#left:before, #right:before, #top:before {
position:absolute;
content: "Ads";
top:-20px;
color: #fff;
}
#left:before {
right:0;
}
.site {
overflow:visible;
position:relative;
top:340px;
}
</style>
<div id="top" style="position: absolute; width:100%; height:300px; top:0; background-color:#888;margin-top:-310px;"></div>
<div id="left" style="position: absolute; width:300px; height:600px; left: 0; top: 0; background-color:#888;margin-left:-310px;"></div>
<div id="right" style="position: absolute; width:300px; height:600px; right: 0; top: 0; background-color:#888;margin-right:-310px;"></div>
Note: .site refers to the parent (container)
I created this code, click on a picture and you'll come out the description below the image.
I would like to improve this code, so I want to be active only one description of a time, so if I click on a image see the description of that just clicked, and hide the last activated.
maybe with the code is more clear http://codepen.io/mp1985/pen/qOrpQX
$( ".spec").click(function() {
$(this).find(".image, .details-spec").toggle();
$(this).find(".block-content").toggleClass('white');
});
I tried with toggle(), toggleClass() and not() but without success.
any idea?
thanks
You can use not() here to avoid clicked element from selector
var $spec = $(".spec").click(function() {
// caching selector $(".spec") for future use
$spec
.not(this)
// avoiding clicked element
.find(".image")
// getting image selector
.show()
// showing back image
.end()
// back to previous selector
.find(".details-spec")
// getting details
.hide()
// hiding it
.end()
// back to previous selector
.find(".block-content")
// getting block content
.removeClass('white');
// removing class white
$(this)
.find(".image, .details-spec")
// getting elements by class
.toggle()
// toggling visibility
.end()
// back to previous selector
.find(".block-content")
// getting block content
.toggleClass('white');
// toggling class white
});
.block {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
background: #f9bda1;
margin-bottom: 1em;
}
.one-thirds > .block {
background-color: #484343;
cursor: pointer;
}
.block .image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one-thirds {
width: 32%;
float: left;
margin-right: 1%;
}
.full {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
h3 {
font-size: 20px;
}
.details-spec {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.white {
color: white;
}
.active > .image {
visibility: hidden;
}
.active .details-spec {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div class='one-thirds'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
<div class='one-thirds'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/1/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
<div class='one-thirds last'>
<div class="block square spec">
<div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/3/');"></div>
<div class="block-content full">
<h3>Title:</h3>
<div class="details-spec">
Lorem Lorem Lorem Lorem LoremLorem
</div>
</div>
</div>
</div>
</div>
You don't need that over complex jQuery. Set the styles with css and toggle a single class on the root element.
CSS
.spec.active .image {
display: none;
}
.spec.active .details-spec {
display: block;
}
.spec.active .block-content {
color: white;
}
JavaScript
var $spec = $('.spec');
$spec.click(function() {
$spec.not($(this)).removeClass('active');
$(this).toggleClass('active');
});
DEMO: http://codepen.io/anon/pen/VvpXXe
First close all ($spec). Second open current.($this)
var $spec = $(".spec").click(function() {
$spec.find(".image, .details-spec").show();
$spec.find(".block-content").removeClass('white');
$(this).find(".image, .details-spec").hide();
$(this).find(".block-content").addClass('white');
});
I want to do exactly the same as this page. http://www.googleventures.com/
It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?
I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.
HTML
<div class="fixed">
<img src="http://placekitten.com/800/300" />
This is some text that will be static as well
</div>
<div class="scroll">
Lorem ipsum dolor sit amet
</div>
CSS
.fixed{
position: fixed;
}
.scroll{
background: #eee;
height: 700px;
position: relative;
top: 350px;
}
Working example: http://jsfiddle.net/3vxBA/
That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.
Sample HTML:
<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>
Sample CSS:
body {
padding-top: 100px; /* #header height */
}
#header {
position: fixed;
top: 0px;
z-index: -1;
background-color: #ccccff;
height: 100px;
width: 100%;
}
#pagecontent {
background-color: #ccffcc;
height: 1000px;
width: 100%;
}
Here's this as a working example: http://jsfiddle.net/Nv7Ku/