I have a simple div which fills the header's height but for test purposes, it has a fixed height of 400px.
It looks like this:
I use a type-it library so it writes the text itself. For now, the overflow property is set to hidden and it hides the text behind the bottom border.
What I want to achieve is to push the text upwards so it hides behind the top border, not the bottom one (scrolls automatically).
Is this even possible with built-in CSS things, or I have to write custom JS tools? Thanks for any tips!
Here's the current div's code:
.header-code {
position: absolute;
width:300px;
height:400px; /* 100% */
float: left;
padding: 50px 50px 50px 50px;
color: yellow;
border: 1px dotted blue;
overflow: hidden;
text-align: left;
}
I'm not familiar with type-it, but this may give you something to start with.
div {
width: 300px;
height: 200px;
overflow: hidden;
background-color: lightgray;
}
.scroll {
animation: scroll-it 10s linear forwards;
display: inline-block;
margin-top: 0;
}
#keyframes scroll-it {
from { margin-top: 0px; }
to { margin-top: -600px; }
}
<div><span class="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas
odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam
euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio,
ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat
ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec
consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra.
Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula.
</span></div>
Could be a good use case for the marquee tag! You can also use the scrollamount attribute to control the speed at which it will move!
You can read more about this wonderful feature of html4 here: https://www.quackit.com/html/codes/html_marquee_code.cfm
.container {
background-color: black;
width:300px;
height:400px; /* 100% */
overflow: hidden;
border: 1px dotted blue;
}
.header {
width: 94%;
height: 94%;
padding: 3%;
color: yellow;
overflow: hidden;
text-align: left;
}
<div class="container">
<marquee class="header" behaviour="scroll" direction="up">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas
odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam
euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio,
ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat
ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec
consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra.
Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula.
</marquee>
</div>
Related
I'm looking to have a fixed sidebar that works on mobile with a fixed header and a scrollable content section. I'd like to have the sidebar itself fill 100% of the view height, but be a certain % of the overall screen width.
I have a solution with 100vh that works on desktop, but on mobile the bottom 'navigation' links of the browser overlap the content.
Is there a known solution to make this work? At this point, I don't care if I have to use JavaScript to make it work right.
If the only problem with your current sidebar styling is that it overlaps bottom nav links on mobile devices, you can address that with a media query:
#media screen and (max-height: 450px) {
.sidebar
height: calc(100% - 50px);
}
}
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
.sidenav {
margin-top: 100px;
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Style the header */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
margin: 0px;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 100px;
}
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
<div class="content">
<div class="sidenav">
About
Services
Clients
Contact
</div>
<!-- Page content -->
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Auctor urna nunc id cursus metus aliquam. Netus et malesuada fames ac turpis egestas integer. Amet mattis vulputate enim nulla aliquet. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Risus viverra adipiscing at in tellus integer. Eget nulla facilisi etiam dignissim diam quis. In hendrerit gravida rutrum quisque. Viverra nam libero justo laoreet sit amet cursus. Fringilla urna porttitor rhoncus dolor purus non enim praesent.
Tellus in metus vulputate eu scelerisque. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Mauris in aliquam sem fringilla ut morbi tincidunt. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ac tortor vitae purus faucibus ornare suspendisse. Velit euismod in pellentesque massa placerat duis ultricies lacus. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Nec ultrices dui sapien eget mi proin sed. Nisi scelerisque eu ultrices vitae. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Facilisi cras fermentum odio eu feugiat. Lorem donec massa sapien faucibus et molestie. Nunc non blandit massa enim nec dui nunc mattis. Sapien eget mi proin sed libero. Libero justo laoreet sit amet cursus sit. Elit ullamcorper dignissim cras tincidunt.
Facilisi cras fermentum odio eu feugiat pretium nibh. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Nisl nisi scelerisque eu ultrices vitae auctor. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. In hac habitasse platea dictumst quisque sagittis purus sit amet. At erat pellentesque adipiscing commodo elit at imperdiet dui. Ornare quam viverra orci sagittis eu volutpat odio. Feugiat nisl pretium fusce id. Tortor dignissim convallis aenean et. Tincidunt id aliquet risus feugiat in ante metus dictum. At tempor commodo ullamcorper a. Leo vel fringilla est ullamcorper eget nulla. Felis eget nunc lobortis mattis aliquam. Ut tellus elementum sagittis vitae et leo duis. Quis commodo odio aenean sed adipiscing. Adipiscing diam donec adipiscing tristique.
Sit amet massa vitae tortor condimentum lacinia quis vel. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Scelerisque viverra mauris in aliquam. Ut tortor pretium viverra suspendisse. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Quis hendrerit dolor magna eget est lorem ipsum dolor. Tincidunt tortor aliquam nulla facilisi cras. Massa eget egestas purus viverra accumsan in nisl nisi. Et tortor at risus viverra adipiscing at in. Dui id ornare arcu odio ut sem.
Quis hendrerit dolor magna eget est lorem. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Velit egestas dui id ornare arcu odio ut. Eget velit aliquet sagittis id consectetur purus. Fermentum et sollicitudin ac orci phasellus egestas. Nulla pellentesque dignissim enim sit. In vitae turpis massa sed elementum tempus. Arcu odio ut sem nulla pharetra diam sit. Nisl purus in mollis nunc sed id semper risus. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Morbi blandit cursus risus at ultrices mi tempus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Iaculis at erat pellentesque adipiscing. Faucibus turpis in eu mi bibendum. Augue mauris augue neque gravida in fermentum. Vel turpis nunc eget lorem. Suspendisse in est ante in nibh mauris cursus mattis. Placerat in egestas erat imperdiet sed euismod nisi porta.
Augue neque gravida in fermentum et sollicitudin ac orci. Et netus et malesuada fames ac turpis egestas sed. Habitasse platea dictumst vestibulum rhoncus. Nec ultrices dui sapien eget mi proin. Suspendisse sed nisi lacus sed. Lacus luctus accumsan tortor posuere ac ut. Pulvinar neque laoreet suspendisse interdum consectetur libero. Eros in cursus turpis massa tincidunt. Eget duis at tellus at urna condimentum mattis pellentesque. Magna etiam tempor orci eu lobortis elementum nibh. Pellentesque id nibh tortor id aliquet lectus proin. Amet purus gravida quis blandit turpis. Facilisis mauris sit amet massa vitae tortor condimentum. Leo in vitae turpis massa sed elementum tempus egestas sed. Neque egestas congue quisque egestas diam in arcu cursus. Cursus metus aliquam eleifend mi in nulla. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum.
Malesuada bibendum arcu vitae elementum. Odio euismod lacinia at quis risus sed vulputate. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in. Nascetur ridiculus mus mauris vitae. Condimentum vitae sapien pellentesque habitant morbi tristique. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Et ultrices neque ornare aenean euismod elementum nisi quis. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Adipiscing bibendum est ultricies integer quis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Sit amet risus nullam eget felis. Scelerisque purus semper eget duis. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Feugiat scelerisque varius morbi enim nunc faucibus a. Ornare arcu dui vivamus arcu felis bibendum.
Arcu non sodales neque sodales ut etiam sit amet. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Ac turpis egestas maecenas pharetra convallis posuere morbi. Massa tempor nec feugiat nisl pretium fusce. Pretium quam vulputate dignissim suspendisse. Amet purus gravida quis blandit turpis cursus. Nunc eget lorem dolor sed viverra ipsum nunc. Eu feugiat pretium nibh ipsum consequat nisl. Sit amet venenatis urna cursus. Accumsan sit amet nulla facilisi morbi. Lorem donec massa sapien faucibus et molestie. Donec enim diam vulputate ut pharetra sit amet aliquam id.
Ornare massa eget egestas purus viverra accumsan in. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Risus sed vulputate odio ut enim. Est pellentesque elit ullamcorper dignissim. Tincidunt vitae semper quis lectus nulla at volutpat diam. Mattis rhoncus urna neque viverra justo nec ultrices. Aliquet nec ullamcorper sit amet risus. Mauris vitae ultricies leo integer malesuada nunc vel risus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Sed odio morbi quis commodo odio. Ornare aenean euismod elementum nisi quis. Placerat vestibulum lectus mauris ultrices eros in cursus turpis.
Tortor at risus viverra adipiscing at in tellus integer feugiat. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Mauris nunc congue nisi vitae suscipit tellus mauris a. Sed blandit libero volutpat sed cras ornare arcu dui. Maecenas pharetra convallis posuere morbi leo urna molestie at. Tellus at urna condimentum mattis pellentesque id nibh tortor. Interdum velit euismod in pellentesque massa placerat. Mauris sit amet massa vitae tortor condimentum lacinia quis. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Viverra mauris in aliquam sem fringilla ut. Velit euismod in pellentesque massa placerat duis. Ultrices tincidunt arcu non sodales neque sodales. Sit amet tellus cras adipiscing enim eu. Arcu cursus vitae congue mauris rhoncus aenean vel. Leo in vitae turpis massa sed elementum tempus egestas sed. Mattis rhoncus urna neque viverra justo nec ultrices. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Ut porttitor leo a diam sollicitudin. Eget gravida cum sociis natoque penatibus et magnis.
</div>
</div>
https://www.w3schools.com/howto/howto_js_sticky_header.asp
https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>
I have the following jsfiddle (I sampled a little).
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
I'm trying to center the text and trying to scroll the text when it overflows. I'm not exactly sure whats wrong. I tried changing the position from absolute to fixed or relative but nothing worked. What am I doing wrong.
You are using in html overflow:hidden so change it overflow:auto; and your text is already centered.
Update css part
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto; /*Add this or remove it */
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
Removed position: absolute; from .title and removed overflow: hidden; from html
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
Of course so easy!
change
<div id="val">
to
<div id="val" align="center">
and move from you css html {}
overflow: hidden;
to you css body
body {
overflow: hidden;
}
and add a new object in you css with, val
#val {
overflow: y;
}
enjoy of this code.
I've a blogspot website. But I got in a problem of copycats. Some people steals contents from my blog. From my site of view, its not legal. I disabled Right Click with javascript and Disabled Selection of content with CSS. But There are some contents thats are open source. I want to make a text appear after the blockquote tag like "Use Ctrl+C to Copy the following text from the blockquote" Is it possible?
You can use the CSS :after pseudo selector to add content after matches of a selector, in this case blockquote.
blockquote:after {
content: "Use Ctrl+C to copy the text";
display: block;
font-size: .75em;
margin: .5em 0 0;
color: #aaa;
}
JSFiddle: https://jsfiddle.net/eznzcxfj/1/
body {
font: 400 18px/1.4 Georgia;
}
blockquote {
border-left: 3px solid #ccc;
padding-left: 1em;
}
blockquote:after {
content: "Use Ctrl+C to copy the text";
display: block;
font-size: .75em;
margin: .5em 0 0;
color: #aaa;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet aliquet facilisis. Duis sed lacinia erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper, enim vitae semper dictum, turpis
dolor dictum risus, nec posuere nulla libero quis nibh. Etiam tristique, orci sit amet finibus ornare, justo mi convallis velit, vitae vehicula risus est quis justo. Sed mollis pellentesque sem ac interdum. Quisque non convallis arcu. Cras arcu justo,
pharetra sed mattis quis, tempor vitae quam.
</p>
<blockquote>Aenean sit amet lobortis leo, in euismod diam. Donec placerat non augue quis finibus. Integer ligula magna, porttitor at libero eget, hendrerit luctus sapien. Curabitur laoreet neque arcu, dictum molestie nunc sagittis non.</blockquote>
<p>
Praesent lacinia sem non egestas fermentum. Nunc in sapien et elit congue blandit. Aenean interdum, velit ut varius dapibus, eros elit pulvinar magna, congue tincidunt massa lorem id metus. Nam vel sollicitudin ante. Nunc eu lectus orci. Donec finibus
ultricies eros non fringilla. Donec finibus, ante vel maximus ornare, velit nibh pretium quam, et sollicitudin velit velit id eros.
</p>
<p>
Nulla facilisi. Pellentesque tristique libero sit amet ex efficitur egestas. Etiam porta, velit sit amet consequat scelerisque, nibh augue ornare urna, nec efficitur enim dolor ut ex. Cras vel enim metus. Morbi vitae venenatis odio. Nam in ultrices quam.
Integer ante diam, semper a egestas pharetra, bibendum vitae mi. Praesent tincidunt, ante id ullamcorper rhoncus, enim nisi consectetur ligula, eget auctor tortor dui ac risus. In varius neque auctor dui eleifend tincidunt et in libero. Proin viverra,
lacus imperdiet posuere feugiat, eros eros molestie nunc, et euismod ligula ligula a ex. Mauris rhoncus augue vitae dui condimentum tempus pulvinar nec massa. Sed efficitur orci nec mauris molestie, ac tempus erat aliquam. Suspendisse vitae purus dolor.
Donec porta eros ac iaculis vestibulum. Quisque convallis at eros sit amet egestas.
</p>
<p>
Morbi quis sodales mauris, bibendum dapibus nunc. Nunc sed posuere ante, nec malesuada felis. Ut nisi mi, pellentesque nec tempor sed, porta ut enim. Donec tincidunt lacus vitae blandit tempus. Donec gravida, erat sed accumsan commodo, nulla urna fringilla
purus, suscipit semper ipsum mauris pharetra massa. Donec congue euismod dui, ac porttitor metus tincidunt non. Aliquam ut bibendum ante, nec semper risus. Nunc sed tempor tortor, ac eleifend ante. Nunc posuere suscipit risus. Nam orci tortor, tristique
nec sapien ac, tempus maximus mi. Ut pellentesque bibendum felis dapibus consequat. Mauris consectetur dictum nisl, vitae tristique risus egestas quis. Curabitur eu ullamcorper ex. Morbi tincidunt ipsum non mi gravida, et suscipit urna hendrerit. Vestibulum
dignissim fermentum pharetra.
</p>
<p>
Nunc a vulputate velit. Vestibulum sed nunc in libero placerat pharetra. Etiam vel mi sagittis, ultrices felis non, venenatis tellus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non condimentum nisl. Donec tellus turpis,
tempus sit amet semper vitae, viverra aliquam eros. Phasellus aliquam arcu elit, eget sollicitudin arcu vulputate sit amet. Integer vel neque viverra leo tempus suscipit id porttitor nulla. Mauris efficitur aliquam lectus vitae auctor.
</p>
You can use the jquery after function. example
$("blockquote").after("Use Ctrl+C to Copy the following text from the blockquote");
blockquote {
background-color: #ccc;
border-left: 5px solid gray;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<blockquote><p>Here is you blockquote content</p></blockquote>
<blockquote><p>Here is you blockquote content 2</p></blockquote>
If you don't want to use JavaScript and you don't care about Google not being able to read the "Use Ctrl+C to Copy the following text from the blockquote" text you could use the after element in CSS like so:
blockquote:after
{
font-size: 80%;
content:'Use Ctrl+C to Copy the following text from the blockquote';
}
<blockquote cite="http://www.example.com">
<p>This is a cite.</p>
</blockquote>
the problem:
I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..
In conclusion:
Transparent fixed navbar with gap
Dynamic images background
It has to be global scrolling (can't use scrolling for div content)
I'am using bootstrap 3
Drawings:
WRONG: [How its looks now][1]
RIGHT: [How it should be][2]
[1]: http://i.stack.imgur.com/Iwc1h.png
[2]: http://i.stack.imgur.com/f1Sbd.png
Sorry for problems with understanding me, here is code:
http://jsfiddle.net/5myw4e26/
if you're using a position fixed at your navbar you can do a top div empty with float left and a height with the size of your navbar.
I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.
Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.
There's more than enough to finetune, so you can adjust it to your needs.
JQuery
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.
Example:
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
body {
margin: 0px;
font-family: Arial;
font-size: 12px;
min-height: 2000px;
}
nav {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
p.content {
margin: 12px 0px 0px 0px;
background: yellow;
}
p:first-of-type {
margin: 44px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
<nav>
Navigation Bar
</nav>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
<p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
<p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
blandit arcu non varius ornare.</p>
<p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
laoreet dui mollis, scelerisque auctor metus.</p>
</div>