How to make top and bottom of div transparent - javascript

I am making a div with a content longer than what I want to view in height, so I used a height of 20em, and made overflow:scroll. This work great, but I want to add some effect to it.
How can I do so the top and bottom 50px have a opacity of 0.7? so it gets a effect when the content is scrolled "away".
Thanks!
<div>
<ul>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
</ul>
Style:
height:25em;
overflow:scroll;

DEMO
DEMO:
#wrapper {
position: relative;
}
#wrapper:before, #wrapper:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 30px; /* Height of the effect */
}
#wrapper:before {
top: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
bottom: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
background: red;
height: 20em;
overflow: auto;
border: 0 solid transparent;
border-width: 10px 0; /* 10px to be able to read first and last lines */
}
<div id="wrapper">
<div id="mydiv">
Your content
</div>
</div>

You can add two layers at top and bottom, note it will cover your content so I suggest it takes no more than 20px. Here is an example with transparent covers, but you can use nice PNG gradient instead:
.fixed_height {
position: relative;
}
.fixed_height_content {
padding: 20px 0;
height: 100px;
overflow-y: scroll;
}
.cover_top {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
.cover_bottom {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Opacity</title>
<style type="text/css">
</style>
</head>
<body>
<div class="fixed_height">
<div class="fixed_height_content">
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
</div>
<div class="cover_top"></div>
<div class="cover_bottom"></div>
</div>
</body>
</html>

I think you may like this. Try this one.
<style>
#boxBorder {
height: 3em;
overflow: hidden;
}
#boxBorder:hover {
height: 5em;
overflow: hidden;
}
#boxBorder:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 100px;
bottom: 0;
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(256,256,256,0));
}
</style>
and my div is like
<div id="boxBorder">
Vis meis ipsum cu, est ad modus facilis, ut est modus alienum consulatu. Mel ut primis dissentias. Doming omittam necessitatibus eam ei, simul vocibus complectitur at eam. Aliquid dolorem laboramus pri et. Porro utroque facilis ex has, pro eripuit ullamcorper te, an audiam civibus voluptaria mei.
Consul iuvaret te eam. Eu usu modus nonumy nostrud, his ne facilis maiestatis. Nec clita nonumes ea, solet noluisse vix cu. Te vel altera verterem sapientem, quo corrumpit theophrastus ne.
Quo iusto exerci assentior cu, ius erat velit timeam ea. Te modo offendit consectetuer has, id ius utamur quaerendum. Ut choro neglegentur nec, ea iusto feugait est. Feugait reprimique mel id, mel ad indoctum definitionem, nostrum apeirian ad pro.
an discere delenit.

Related

How to make scrollbox responsive?

Hi I'm trying to make a scrollbox in React responsive. It works on web view but when I go to mobile, it doesn't resize. How can I fix this? Here is the CSS code:
.frame {
background-color: rgba(0, 0, 0, 0.349);
padding-top: 10px;
/* margin-top: 20px; */
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
position: relative;
display: table-cell;
}
and the scrollbox HTML code is:
<div class= "frame"
style={{width:"1100px",
height: "415px",
overflow:"auto",
padding:"2px",
paddingTop: "10px"}}>
Thank you!
The issue is that you're hardcoding the width of the scrollbox by applying a fixed pixel width value via the style attribute on the element.
We'd need to see more of your code in action to give precise advice, but here are a few things to try:
width: "100%"
Remove width, and instead use maxWidth: "1100px"
Also, if you're using non-inline CSS to style the element via the .frame classname, consider moving all your other styling properties to the non-inline CSS as well, instead of mixing inline and non-inline styling techniques.
<div id="box">
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
</div>
#box {
position: absolute;
width: 50%;
height: 50%;
top: 10;
left: 10;
overflow: auto;
border: solid red 2px;
}

Scrolling to the bottom of a span automatically with javascript

I have a span defined, to which I am occasionally adding text and I am trying to get it to scroll to the bottom of the "box" but without success.
I have the span defined as:
<tr>
<td style="height:130px; border: 1px solid black;">
<div class="scrollable">
<span id="infoWindow"></span>
</div>
</td>
</tr>
With
div.scrollable
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
And I am adding to it as follows:
document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>";
var objDiv = document.getElementById("infoWindow");
I have tried two different approaches:
objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
and
objDiv.scrollTop = objDiv.scrollHeight;
But neither work. What am I doing wrong? Many thanks!
scrollHeight and clientHeight are properties which are calculated when DOM has been fully painted. You should subscribe to event DOMContentLoaded to be sure the calculations are done.
There is a function scrollIntoView which you can use on any element which does exactly the name suggests. MDN - scrollIntoView. You can also define some options for scrolling like smoothness and position where to scroll exactly on element.
Here is an example I wrote to test this.
Keep in mind that scrollIntoView triggered by code example will impact SO scroll behavior.
const paragraphs = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim nosmet ipsos nosse non possumus. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quis autem de ipso sapiente aliter existimat, quin, etiam cum decreverit esse moriendum, tamen discessu a suis atque ipsa relinquenda luce moveatur? Duo Reges: constructio interrete. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Id quaeris, inquam, in quo, utrum respondero, verses te huc atque illuc necesse est.',
'Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Hanc in motu voluptatem -sic enim has suaves et quasi dulces voluptates appellat-interdum ita extenuat, ut M. Hunc ipsum Zenonis aiunt esse finem declarantem illud, quod a te dictum est, convenienter naturae vivere. Suo enim quisque studio maxime ducitur. Manebit ergo amicitia tam diu, quam diu sequetur utilitas, et, si utilitas amicitiam constituet, tollet eadem.',
'Partim cursu et peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Hic nihil fuit, quod quaereremus. Stoici restant, ei quidem non unam aliquam aut alteram rem a nobis, sed totam ad se nostram philosophiam transtulerunt; Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Tibi hoc incredibile, quod beatissimum. Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Ne vitationem quidem doloris ipsam per se quisquam in rebus expetendis putavit, nisi etiam evitare posset.'
];
const container = document.getElementById('infoWindow');
const paragraphElements = paragraphs.map((paragraphText, index) => {
const newParagraph = document.createElement('p');
newParagraph.innerHTML = paragraphText;
newParagraph.style.animationDelay = `${.8 * index + 1}s`;
return newParagraph;
});
const demostrateScrolling = () => {
const scroller = document.getElementById('scroller');
const scrollerOptions = {
behavior: 'smooth',
block: "start",
inline: "nearest"
};
scroller.addEventListener('click', () => {
container.querySelector('p:last-child').scrollIntoView(scrollerOptions);
});
paragraphElements.map(p => {
container.appendChild(p);
});
}
document.addEventListener('DOMContentLoaded', demostrateScrolling);
body {
font-family: 'Tahoma';
}
#infoWindow {
height: 200px;
overflow-y: auto;
margin: 10px;
}
#infoWindow p {
padding: 10px;
margin: 10px;
background-color: navy;
color: white;
border-radius: 5px;
animation-name: FadeIn;
animation-duration: .4s;
animation-fill-mode: backwards;
}
#keyframes FadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#scroller {
width: auto;
background-color: lightblue;
border-radius: 24px;
padding: 5px;
margin: 5px;
font-size: 10px;
cursor: pointer;
}
<h2>Scroll To Bottom</h2>
<div id="infoWindow"></div>
<span id="scroller">Scroll to bottom</span>
refer this https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
scrolling is applicable only to scrollable elements
var i= 0;
while(i<10){
document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>";
i++;
}
//get the total height of your element
var bottomPosition = document.getElementById("infoWindow").offsetHeight;
//set scroll of container element
document.querySelector(".scrollable").scrollTop = bottomPosition;
div.scrollable
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
/* height is no defined for inline-elements so make span inline-block or block*/
#infoWindow{
display:inline-block;
}
<table>
<tr>
<td style="height:130px; border: 1px solid black;">
<div class="scrollable">
<!-- added style for span element -->
<span id="infoWindow"></span>
</div>
</td>
</tr>
</table>

My navigation disappears when the browser is resized

So, this is a site that i'm currently working on and everything is fine except this:
As i got warned by one of the guys reviewing my current code, my menu/navigation disappears after being open and closed in its media-querie state, and resized back to monitor-width.
Simplified - follow these steps to see the problem:
Open the code snippet (i would suggest CodePen since the result is shown properly in it) and briefly admire my design. Tthat's it, thank you for your help. Just kidding, next step: resize the browser to the mentioned size (width 480px or less) so that you see the hamburger menu icon on top right, open the menu clicking on the icon, close it, and than change the browser back to full screen size! Do you see the navigation bar on the left?!
What am i missing here? I suppose that it should be a few more lines of JavaScript for some after state (just started learning JS so i dont know), but please look into it and teach me about possible solution(s).
And yes i know, it shouldn't affect any of those mobile users that i'm targeting with my media-queries 'cause nobody will resize it like that and barely anyone will see this, BUT...first thing - i want to make it perfect, and second - if there is something i missed or did wrong i want to hear about it and learn how to fix it/make it right.
Here is the CodePen link: https://codepen.io/anon/pen/VxmMrJ
And here is the code snippet:
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
#media only screen and (max-width: 480px) {
.networks, .sidenav, .image-row, .foot1, .foot3 {
display: none;
}
body {
display: block;
width: 100%;
height: 100%;
background-color: #e1e1e1;
}
.page-wrap {
display: block;
margin-top: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.logo {
display: inline-block;
float: left;
width: 75%;
margin-left: 2.5%;
}
.logoImg {
width: 200%;
}
.menuIcon {
display: inline-block;
float: right;
width: 10%;
margin-top: 6%;
margin-right: 5.5%;
border: none;
z-index: 3;
}
.navButton {
display: block;
width: 100%;
background-color: #e1e1e1;
border: none;
z-index: 3;
}
.navButton:focus {
outline: none;
}
#menu {
display: none;
position: relative;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2.5%;
padding-bottom: 2.5%;
z-index: 3;
}
.main {
display: block;
width: 90%;
height: auto;
padding-bottom: 7.5%;
margin-top: 2.5%;
margin-left: 5%;
margin-right: 5%;
z-index: 1;
}
.textbox {
display: block;
width: 95%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
font-size: 1.25em;
text-align: justify;
}
.myPhoto {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.foot2 {
display: block;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25em;
color: #324B64;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<script src="myScript.js"></script>
<title>Luka Novak</title>
</head>
<body>
<div class="page-wrap">
<div class="header">
<div class="logo">
</div>
<div class="networks">
<img src="facebook-symbol.svg" class="socialnet" alt="facebook">
<img src="instagram-symbol.svg" class="socialnet" alt="instagram">
</div>
<div class="menuIcon">
<button onclick="myFunction()" class="navButton">
<img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png"
alt="menu"
class="iconImg">
</button>
</div>
</div>
<div class="sidenav col-5" id="menu">
about us
services
contact
</div>
<div class="main col-18">
<article class="textbox">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</article>
<div class="image-row">
<div class="image1">
</div>
<div class="image2">
</div>
<div class="image3">
</div>
</div>
</div>
<div class="footer col-24">
<p class="foot1">Some info</p>
<p class="foot2">design by me</p>
<p class="foot3">More info</p>
</div>
</div>
</body>
</html>
It would be better to do this with a CSS class that it only changed in your mobile media query.
https://codepen.io/anon/pen/KRmYVR
CSS
#media only screen and (max-width: 480px) {
.mobileshow {
display: block !important;
}
}
JS
function myFunction() {
var x = document.getElementById("menu");
if(x.classList.contains("mobileshow")) {
x.classList.remove("mobileshow");
}
else {
x.classList.add("mobileshow");
}
}
Those attributes of "element.style" can only be set a value rather than get their value(you can run "console.log(x.style.display)" to prove it). if you must to get styles of an element, try "getComputedStyle"
Usually, I would hide an element by add a class, and show it by remove that class
const el = document.querySelector('.some-element')
function hideElement() {
if (!el.classList.contains('hidden')) {
el.classList.add('hidden')
}
}
function showElement() {
if (el.classList.contains('hidden')) {
el.classList.remove('hidden')
}
}
.hidden {
display: none;
}
/* you can try this, if you don't want that element to really disappear
.hidden {
opacity: 0;
}
*/
<div class="some-element"></div>
PS: My English is poor, hope you could understand it :)

JQuery Grab Content from Page Anchors and Replace Hover State Titles

I have a set of page anchors that using JQuery are set where the anchor links show a pop-up tool tip to say what the anchor is called.
I want to be able to take the h4 title of the page anchor and replace the title of the anchor link using JQuery.
Here is the mark up of the one of the anchors:
<a name="section1">
<h4 id="sectiontitle1">Overview</h4>
</a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Here are the links to said page anchors:
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
Script for the solution:
$(document).ready(function() {
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name=" + title + "] h4").html());
$(this).data('tipText', title)
$('<p class="tool-tip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
$('.tool-tip')
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
$('.tool-tip').fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
so the pop ups tool tips when hovering over should show:
section 1 = Overview
section 2 = Main Structure
section 3 = Support
section 4 = Contact
final UI
what would be the best way to achieve this? I have tried :contains, but this has brought me no joy.
TIA.
This is the fiddle for the problem: fiddle link
to mention, that the jquery that drives the pop-up tool tip is heavily dependent on the css and doesn't seem to want to play ball, but if you hover over the numbered bullets on the right, the titles show up and need to match the titles of each section, 1 will be overview, 2 will be main structure etc.
$(function(){
var popupTitle = $('<p class="tool-tip"></p>').appendTo($('body')).hide();
// Find your links, but we could have generated your links from the client side
$('div.article-anchors ul li a[href^="#"]').each(function(){
var ref = $(this),
anchor = ref.attr('href') || '', // Find the #anchor
pound = anchor.indexOf('#'); // Find the location of #
// Verify
if (pound >= 0 && (pound + 1) < anchor.length) {
// Remove the # sign
anchor = anchor.substring(pound + 1);
// Find and set the title from the first h4 tag
ref.attr('floatTitle', $('a[name="'+anchor+'"] h4:first').text());
ref.attr('title', '');
}
}).mouseenter(function() {
var title = $(this).attr('floatTitle');
popupTitle.stop().hide()
.text(title)
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
popupTitle
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
popupTitle.fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
/*article anchors*/
.article-anchors {
display: block;
position: fixed;
right: 20px;
top: 50%;
}
.article-anchors ul {
list-style: none;
}
.article-anchors ul li:first-child i,
.article-anchors ul li:last-child i {
padding: 0;
text-align: center;
display: block;
font-size: 39px;
width: 46px;
height: 46px;
color: #0485c2;
margin: 0 0 20px 0;
}
.article-anchors ul li {
padding: 0;
margin: 0;
}
.article-anchors ul li a {
position: relative;
right: 0px;
z-index: 9999;
display: block;
width: 36px;
margin: 0 0 20px 0;
background-color: #E9F2F7;
border: 3px solid #0485c2;
color: #0485c2;
border-radius: 100px;
text-align: center;
padding: 8px 2px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.tool-tip {
display: none;
position: absolute;
margin-bottom: 20px;
width: auto;
padding: 6px 8px;
font-size: 16px;
font-weight: bold;
line-height: 24px;
color: #9EC483;
background-color: #CFE5BF;
border: 1px solid #9EC483;
border-radius: 3px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
<a name="section1"><h4 id="sectiontitle1">Overview 1</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section2"><h4 id="sectiontitle2">Overview 2</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section3"><h4 id="sectiontitle3">Overview 3</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section4"><h4 id="sectiontitle4">Overview 4</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Full-page the snippet to see it better.
Your mouseenter function should look like this
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name="+title +"] h4").html());
})

Text Box Resizing to Stay within Background Picture

Click here for photo of the text overrunning the pictureI have a text box with a background picture as I resize the picture changes appropriately (using percentages) but the text box overflows. I am using the overflow function in CSS but I need the text box to resize it`s length as it runs out of room so that the picture stays behind. Any ideas? Thanks in advance.
P.S. Any more elegant solutions to replace the use of CSS overflow function welcome!
P.P.S. I am currently researching the jquery function "resize" and I think the solution could be in linking the text box to this function.
HTML code is as follows
<main id="about">
<img src="images/Lace Eckhardt 1425.jpg" alt="" id="laceBike">
<section class="lace">
<h2>About Lace</h2>
<div id="aboutText">
<p>Lace Eckhardt has never done things by halves and her latest venture Sidekicks is certainly no exception. Eckhardt, 31 leads a dynamic life, a self-confessed ‘kidult’ she can be found on her BMX heading for an early morning surf, or practicing her skate tricks on the custom half pipe built in her garden.</p>
<p>Having spent half her life trashing numerous pairs of shoes she started to take the search for sturdy, well-made kicks seriously. “I spent so much time on-line looking for stylish skate shoes but most of what I found were either poorly made or way too commercial. When I did find a style that suited my lifestyle and my taste I’d tell everyone how great they were…then someone suggested I set up a shop. I listened, and the rest is history!” </p>
<p>Starting off with twenty of her top styles, Eckhardt set up a successful eBay shop and is now launching this new site Sidekicks, concentrating predominantly on her six feature shoes. “I have so much faith in the brands and styles I’m selling, as long as I have one of each of them in my wardrobe I honestly don’t need anything else. Although new colours and fabrics are released every season and I’m a sucker for those.” Eckhart has some loyal customers who won’t buy their shoes anywhere else. “One guy in Ecuador bought his first pair from me just a month after I’d set up the eBay store and now owns at least one of each style. He sends me photos of him when he gets a new pair, I love seeing my customers wearing my shoes and doing what they love. It’s like a cool little like-minded community…one of my long standing customers even sent me a skateboard she’d designed, how awesome is that?!’</p>
</div>
</section>
</main>
Current Relevant CSS
main {
width: 100%;
margin-left: auto;
margin-right: auto;
clear: both;
}
.lace {
position: absolute;
width: 500px;
margin-left: 22px;
float: left;
background-color: rgba(248,246,246,0.50);
margin-top: -79%;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
overflow: auto;
margin-bottom: 20px;
}
#aboutText {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 20px;
color: rgba(75,1,3,1.00);
}
#laceBike {
position: relative;
margin-top: 0px;
width: 100%;
}
use VH or VW units for all sizing of that box AND the font. see example here https://jsfiddle.net/5rkxkq62/
VH or VW units are in range 0-100, and stands for VIEWPORT HEIGHT/WIDTH. If you use only one of units for both sizing (width and height), you can keep the sizing ratio always the same
But I reccomend to copy it and try it in plain html page, because on jsfiddle you cannot work with resizing window well, and also vh and VW units does not have correct behaviour in that output frame.
<div class="box">
<div class="text">
Lorem ipsum dolor sit amet......
</div>
</div>
.box{width:80vh; height:50vh; position:relative; margin:auto;
background:url("http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg"); background-size:100% auto;}
.text{background: rgba(255,255,255,.3); color:white; font-size:5vh; position:absolute; top:10px; left:10px; height:40%; width:calc(100% - 20px);}
Hi I have found a complete solution by posting the picture as a background image and then using percentages, media queries and overflow: scroll; in CSS.
#charset "UTF-8";
/* CSS Document */
#media (max-width: 1500px){
#main {
background-image: url(images/Unknown.jpeg);
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height: 100vh;
margin-left: auto;
}
#text {
width: 55%;
margin-left: auto;
margin-right: 1%;
float: right;
overflow: scroll;
height: 483px;
background-color: rgba(233,226,227,0.50);
padding-left: 13px;
padding-top: 13px;
padding-right: 13px;
padding-bottom: 13px;
text-align: center;
font-size: 19px;
}
h1 {
width: 50%;
margin-left: auto;
margin-right: 4.5%;
text-align: center;
float: right;
}
}
#media (max-width: 980px){
#text {
height: 300px;
}
}
#media (max-width: 700px){
#text {
height: 108px;
font-size: 18px;
}
}
#media (max-width: 470px){
h1 {
font-size: 20px;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Contained To Pic</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main">
<h1>Where is the Picture in the Background?</h1>
<div id="text">
<p>Lorem ipsum dolor sit amet, posse nusquam ne vix, justo sensibus at has. Ius dicat congue doctus id. Vim ornatus antiopam ea, ea sensibus accusamus mediocritatem has. Ne mollis ullamcorper voluptatibus eos, eum choro virtute facilis eu, cum iusto oratio democritum ad. Pri tacimates adolescens ei, eum augue suscipit interesset an.</p>
<p>Mei ea clita nullam, ea nullam deserunt vulputate cum, tale invidunt eam id. Vidisse honestatis ius ad, in duo facilis definitionem, ea nec equidem sanctus petentium. Mea te evertitur consequuntur. Ex his justo dignissim definitionem, est mutat consequat te, ne dicunt prodesset vix. Percipit electram rationibus ius cu, audire dolorum veritus eu eam.</p>
<p>Lorem imperdiet constituto eu est. No usu quis fabulas verterem. Eirmod volumus electram qui id. Porro oratio at pro, illud sententiae omittantur eum ut. An qui vide summo, vis ex animal impetus. Deserunt sensibus definitionem at eam, in nam hinc rebum dolores.</p>
<p>Te omnis denique probatus est, ex pri justo melius incorrupte. Ex posse euripidis has, nec no vidit invenire. Nam cu hinc possit omnium. Ei clita perpetua pertinacia has, ad eum modo saperet appellantur. Assum adipisci in eum, an clita animal vis, vis id postulant consulatu. Pri eu exerci detracto iudicabit.</p>
<p>Te velit posidonium sed, libris postea per ut. Democritum abhorreant appellantur ad nec, periculis torquatos consetetur pro te. Ex vis tritani alterum rationibus. Sea ex feugiat constituto dissentiet. Sapientem voluptatibus ad his, vix cibo accusam ei.</p>
</div>
</div>
</body>
</html>
This is just a random image I pulled in from the web for the example.
So if you put all this together you will have a site that contains the text within a background image. I hope this helps, happy coding!

Categories

Resources