I tried to find some solution for the following scenario:
Header height is all different
Mouse scroll down
Fixed headers
Does anyone know how to make multiple sticky headers like this?
(1) init
(2) scroll down (using mouse)
(3) scroll down (using mouse)
hmm...
DEMO
$(window).scroll(function() {
var $headers = $(".header");
var scrollTop = $(this).scrollTop();
if (scrollTop <= 0) {
// reset all
$headers.css({
position: "relative",
top: "0px"
});
} else {
$headers.each(function(index, $el) {
var $curHeader = $($headers).eq(index);
var curTop = $curHeader.offset().top;
var curHeight = $curHeader.height();
// scroll up
var isRelative = ($el.isFixed && scrollTop <= $el.exTop);
// scroll down
var isFixed = (curTop <= scrollTop);
var position = "";
var top = 0;
if (isRelative) {
// reset
positon = "relative";
top = 0;
$el.isFixed = false;
} else if (isFixed) {
position = "fixed";
if (0 < index) {
for (var i = 0; i < index; i++) {
top += $($headers).eq(i).height();
}
}
scrollTop += curHeight;
if (!$el.isFixed) {
$el.isFixed = true;
$el.exTop = curTop;
}
}
$($el).css({
position: position,
top: top + "px"
});
});
}
});
body {
height: 10000px;
}
div {
height: 200px;
background: gray;
width: 100%;
}
.header {
height: 50px;
background: green;
}
div.header:nth-child(7) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>content 0</div>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>
Here is a simple example:
I'm calculating the height of the headers and setting the top property.
DEMO
$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
$headers.each(function (index, el) {
var height = 0;
if (index == 0) {
height = "0px";
} else {
for ( var x = index - 1; x >= 0; x--) {
height += $headers.eq(x).height();
}
}
height = height + "px";
$(el).css({
"position": "fixed",
"top": height
});
});
} else {
$headers.css({
position: "relative",
top: "0"
});
}
});
body {
height: 10000px;
}
div {
height: 100px;
background: green;
width: 100%;
}
.header {
height: 50px;
background: red;
}
.header:first-child {
height: 20px;
}
div.header:nth-child(5) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>
With only css
Codepen-FollowMe Headers
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
height: 10rem;
}
.second {
height:50px;
background:blue;
height: 10rem;
}
.third {
height:50px;
background:green;
height: 10rem;
}
.stickyContainer {
.sticky {
position: sticky;
top: 0;
height: 2rem;
background: white;
}
}
<div class="first stickyContainer">
<div class="sticky"><h1>1</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="second stickyContainer">
<div class="sticky"><h1>2</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="third stickyContainer">
<div class="sticky"><h1>3</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
Related
I'm using CSS and Javascript.
I'm trying to generate a toggle button to switch the brightness.
Why can't the code below switch styles?
◆ Toggle button Javascript ◆
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body")
.insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" />
<label for="L_D_check" onclick="Light_dark_Switch()" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
////////////////////////////////////////////////////////
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch() {
let _css = document.body.appendChild(document.createElement('style'));
let html = document.documentElement;
// if( ( Number % 2 ) !== 0 ) {
if (!(_css.textContent).length) {
// if( _css.textContent !== null ){
// if(_css.style.display=="none"){
// _css.textContent.style.display = "block";
_css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(_css);
// _css.disabled = true;
// _css.disabled = false;
// html.classList.toggle(_css);
// }
} else
// if (Number % 2 === 0) {
if ((_css.textContent).length) {
// if( _css.textContent % 2 === 0){
// if( _css.textContent !== null ){
// _css.textContent = null;
// if(_css.style.display=="block"){
// _css.textContent.style.display = "none";
document.head.removeChild(_css);
_css.textContent = undefined;
// }
}
}
◆Toggle button CSS ◆
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
When switching by key down, you can switch with the above capacity, but you can not switch in the same way.
Why can't I switch? What am I missing?
please tell me.
// Successful switching of key events
window.addEventListener("load", () => {
let css = document.body.appendChild(document.createElement('style'));
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
if (!css.textContent) {
css.textContent = `
html{
filter: sepia(25%) brightness(90%);
}
body{
background-color:#F9F9F9;
}
`;
document.head.appendChild(css);
} else {
if (css.textContent) {
document.head.removeChild(css);
css.textContent = undefined;
}
}
}
});
});
I think the simple way you can do this that move onclick="Light_dark_Switch(this)" to check box. Get check box value inside Light_dark_Switch and add CSS per your need to HTML and Body using javascipt getElementsByTagName.
Check the below snippet.
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
and for e.ctrlKey && e.keyCode == 122 you can simply trigger checkbox by using click().
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
//---------- javascript ----------//
// Generate toggle button element
window.addEventListener('load', l => {
document.querySelector("body").insertAdjacentHTML('beforebegin', `
<div class="L_D_switch" id="makeImg2" >
<input type="checkbox" id="L_D_check" checked="" onclick="Light_dark_Switch(this)" />
<label for="L_D_check" >
<span></span>
</label>
</div>
`);
// </label> // checked="" //onclick="Light_dark_Switch()"
});
// Switching (processing) setting when the toggle button is pressed
function Light_dark_Switch(cb) {
var checkedValue = document.querySelector('#L_D_check').value;
if( !cb.checked ){
document.getElementsByTagName("html")[0].style.filter = "sepia(25%) brightness(90%)";
document.getElementsByTagName("body")[0].style.backgroundColor = "#F9F9F9";
}else{
document.getElementsByTagName("html")[0].style.filter = "";
document.getElementsByTagName("body")[0].style.backgroundColor = "";
}
}
// Successful switching of key events
window.addEventListener("load", () => {
window.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.keyCode == 122) { // CTRL+F11
var link = document.getElementById('L_D_check');
link.click();
}
});
});
/*------------ CSS -----------*/
.L_D_switch {
zoom: 45%;
left: 7px;
top: 7px;
position: fixed;
}
.L_D_switch input[type="checkbox"] {
display: none;
}
.L_D_switch label {
display: block;
box-sizing: border-box;
text-align: center;
border: 2px solid #ccc;
border-radius: 100px;
height: 50px;
line-height: 50px;
font-weight: bold;
width: 45px;
font-size: 22px;
background: #78bd78;
box-shadow: 3px 3px 6px #888;
transition: .3s;
cursor: pointer;
background: #600;
color: #fbff01;
}
.L_D_switch label span:after {
content: "on";
/* color : #aaa;*/
background: #eee;
}
.L_D_switch #L_D_check:checked+label {
background: #eee;
/* box-shadow : none; */
}
.L_D_switch #L_D_check:checked + label span:after {
content : "off";
color :#9a9a9a;/* : #fff; */
}
.L_D_switch:active{
height: 48px;
margin-top: -2px;
transition: none;
}
<html>
<body>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </body>
</html>
I have my .jsp page set so each textarea element, when clicked, expands in size to show its full contents. The code that enables this is shown below.
But how do I modify this so all the textarea elements are pre-expanded on visit to the page?
My existing requires requires you click the specific textarea itself. I want to modify this so all textarea elements are expanded accordingly on page load, rather than a click event on the textarea itself.
js
<script type="text/javascript">
...
var elements = document.querySelectorAll('textarea');
elements.forEach(function(element) {
element.onclick = function() {
this.style.height = (this.scrollHeight > this.clientHeight) ? (this.scrollHeight) + 'px' : "1.5em";
}
});
...
</script>
css
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
textarea:focus {
height: 8em;
width: 98%;
overflow:hidden
}
I cobbled my existing code together from tips from here and here. Maybe this could be done in css alone, which would be even better.
You just need to use the same code (replacing this with element) without the click handler. Also, the CSS textarea:focus seems redundant, so it can be elimintated.
document.querySelectorAll('textarea').forEach(function(element) {
//element.classList.add("focused");
element.style.height = (element.scrollHeight > element.clientHeight) ? (element.scrollHeight) + 'px' : "1.5em";
});
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
<div>Lorem Ipsum
<textarea>Area 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem Ipsum</textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 2 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 3 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>
I'm wanting to have a number of elements stacked, and when an element is clicked, content is revealed - which pushes the element below it down
Codepen for example here -
http://codepen.io/ashconnolly/pen/bEZzmj?editors=1100
is this possible in flexbox? I've seen masonry but not sure if it can do what I need it to as it doesn't seem to have an ordering system, nor do I know if changing heights of elements and rerunning masonry is efficient.
I could manually select every element below it (with nth child) and do a transform:translateY() to move it down, and do this for every responsive layout (and add margin to the bottom of the container). But I suspect there is a better way with less manual tweaking.
Important factors
- in the order seen in the Dom (could have lots of elements 20)
- the columns amount / block width to change responsively
- can change height but keep their respective column like order
html -
<div class="box">1<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">2<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">3<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">4<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">5<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">6<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
css-
body { margin: 0; padding: 0; width: 100%; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.box {width:33%; height:200px; position:relative;
background:salmon; float:left;border:10px solid grey;
&:nth-child(1) {background:red;}
&:nth-child(2) {background:blue;}
&:nth-child(3) {background:green;}
&:nth-child(4) {background:orange;}
&:nth-child(5) {background:brown;}
&:nth-child(6) {background:yellow;}
&:nth-child(2) .text {display:block;color:white;}
.text {display:none; position: absolute; top:100%;z-index:2;width:100%; background:blue; border: 1px solid grey}
}
#media (max-width:600px) {
.box {width:50%;}
}
I'm looking to achieve an affect like you can see here: http://www.nearme.co.il/Code/index.htm (if it's not working in Chrome try IE).
This is what I achieved so far: http://jsfiddle.net/yuvalsab/op9sg2L2/
HTML
<div class="trasition_wrapper">
<div class="trasition">1</div>
<div class="trasition">2</div>
<div class="trasition">3</div>
<div class="trasition">4</div>
<div class="trasition">5</div>
<div class="trasition">6</div>
<div class="trasition">7</div>
<div class="trasition">8</div>
<div class="trasition">9</div>
<div class="trasition">10</div>
<div class="trasition">11</div>
<div class="trasition">12</div>
<div class="trasition">13</div>
<div class="trasition">14</div>
<div class="trasition">15</div>
</div>
<div class="pagewrap">
<div class="some_text_1">Lorem ipsum dolor sit amet.</div>
<div class="some_text_2">Lorem ipsum dolor sit amet.</div>
<div class="some_text_3">Lorem ipsum dolor sit amet.</div>
<div class="some_text_4">Lorem ipsum dolor sit amet.</div>
<div class="some_text_5">Lorem ipsum dolor sit amet.</div>
<div class="some_text_6">Lorem ipsum dolor sit amet.</div>
<div class="some_text_7">Lorem ipsum dolor sit amet.</div>
<div class="some_text_8">Lorem ipsum dolor sit amet.</div>
<div class="some_text_9">Lorem ipsum dolor sit amet.</div>
<div class="some_text_10">Lorem ipsum dolor sit amet.</div>
<div class="some_text_11">Lorem ipsum dolor sit amet.</div>
<div class="some_text_12">Lorem ipsum dolor sit amet.</div>
<div class="some_text_13">Lorem ipsum dolor sit amet.</div>
<div class="some_text_14">Lorem ipsum dolor sit amet.</div>
</div>
CSS
div[class^="some_text"] {
padding:50px 0;
border-bottom:1px solid;
}
div.trasition_wrapper {
width:100%;
position: fixed;
left:100%;
background:red;
}
.trasition {
background: red;
position: absolute;
width:100%;
}
jQuery
function animate(element) {
var lastScrollTop = 0;
window_width = $(window).innerWidth();
$(window).scroll(function(event){
var scrolltop = $(this).scrollTop();
var stcalc = $(this).scrollTop()*3; // 3 -> Sets the speed of the animation
if(stcalc >= window_width) {
stcalc = window_width;
}
if(stcalc < window_width) {
element.animate({
left:-stcalc
}, 10);
}
else {
stcalc = window_width;
element.animate({
left:-stcalc
}, 10);
}
lastScrollTop = scrolltop;
});
}
jQuery(document).ready(function(){
jQuery('.trasition_wrapper .trasition').each(function() {
var element = jQuery(this);
pos=0;
position = pos+40;
animate(element);
element.css('top',position+'px');
});
});
Here's a decent solution. It could be cleaned up a bit, but it works.
http://jsfiddle.net/scheda/4tsokks7/
$(document).on('scroll', function(e) {
var bodyHeight = $(document).height()
var windowHeight = $(window).height();
var scrollTop = $(document).scrollTop();
var whereAmI = scrollTop + windowHeight
//we need to make sure we're calculating the percentage correctly
if (scrollTop < windowHeight) {
var heightPercentage = scrollTop / bodyHeight * 100;
} else {
var heightPercentage = whereAmI / bodyHeight * 100;
}
$('.scroll-progress').css('width', heightPercentage + '%');
$('.progress').text(Math.round(heightPercentage));
});
It's pretty simple. Basically it just calculates where you are in your scroll and then updates .scroll-progress with a new width and text.
I have a div with some p's inside and want to put buttons to the side of some p's. Only some of the buttons show up, and I will control which ones through Javascript. Usually, I would put each p in a different wrapper div, which would also contains the corresponding button. BUT I want a background image around all p's, so I need to put all p's inside the same div and can't have separate div's for each p. I also don't want the background to appear around the buttons, which will be round. How do I align the buttons with the p's? Should I use jQuery to get the top properties of each p and pass them on to the buttons?
JS fiddle: http://jsfiddle.net/bw22yht1/
HTML:
<body>
<div class="content">
<div class="p-wrapper">
<!--there is a background image here-->
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
</body>
CSS:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
}
.p-wrapper
{
background-image:url('bg/old-paper-texture.jpg');
background-size:cover;
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
}
actual page: http://cin.ufpe.br/~rvcam/map/
EDIT: An image that shows what I need:
I took a look to your page, and you simply need to change your approach
<div class="content">
<ol class="p-wrapper">
<!--there is a background image here-->
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
</ol>
</div>
You'll have what you need AND no need for that additional span, you'll have automatic numering
EDIT: See code below to fit your needs.
HTML mostly remains the same, just change <ol class="p-wrapper"> to <ol class="bible"> and add buttons
<div class="content">
<ol class="bible">
<!--there is a background image here-->
<li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>
</ol>
</div>
CSS as follows:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
background:url('bg/old-paper-texture.jpg') repeat-y;
background-size:700px; /* your current .bible width */
}
.bible
{
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
color: white;
/*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}
Then you'll need some adjustments to fit your taste, but this will work just as you want
You can absolutely position a <div> with white background containing the <button> aside the <p> in a common <div> as follows:
<div class="demo">
<p>lorem ipsum lorem ipsum</p>
<div class="right">
<button>Button</button>
</div>
</div>
<div>'s are transparent by default so having a common parent <div> won't hide the background of the wrapper.
You can then align the button using following:
CSS:
p {
margin-right:200px;
}
.demo {
position:relative;
}
.right {
position:absolute;
top:0;
bottom:0;
right:0;
width:200px;
background:white;
}
.demo button {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100px;
height:20px;
margin:auto;
}
Demo