I was searching a few libraries for scroll animations and I found a very good npm package called #ashthornton/asscroll and I wanted to use the same on my react project.
But I am not been able to implement the same. It's not working the way it should. Can someone help me implement the same package in react?
Here, are the links for asscroll package and a Codesandbox for anyone to give it a try.
In order to run it with react you need to initialize ASScroll inside useEffect and also make sure to point out which div element is asscroll-container.
Since this is a little different in react you need to add to the div asscroll-container="true" (keep in mind that true has to be passed as string).
I have added this library to my codesandbox as you can see here
import React from "react";
import ASScroll from "#ashthornton/asscroll";
import "./styles.css";
class App extends React.Component {
componentDidMount() {
const pageEl = document.querySelector(".page");
this.asscroll = new ASScroll({
// containerElement: '.my-container',
scrollElements: pageEl,
ease: 0.1,
touchEase: 1,
customScrollbar: true,
scrollbarEl: ".my-scrollbar",
scrollbarHandleEl: ".my-scrollbar-handle",
scrollbarStyles: true,
disableNativeScrollbar: true,
touchScrollType: "scrollTop",
disableRaf: true,
disableResize: true,
limitLerpRate: true,
blockScrollClass: ".asscroll-block"
});
this.asscroll.enable();
requestAnimationFrame(this.onRaf);
}
onRaf = () => {
this.asscroll.update();
requestAnimationFrame(this.onRaf);
};
render() {
return (
<div asscroll-container="true">
<div class="page">
<img
src="https://raw.githubusercontent.com/ashthornton-gc/asscroll/master/docs/banner.jpg"
alt=""
/>
<div class="content">
<h1 class="title">
<span>A</span>
<span>S</span>
<span>S</span>
<span>C</span>
<span>R</span>
<span>O</span>
<span>L</span>
<span>L</span>
<span>🍑</span>
</h1>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
ornare quis nibh eget convallis. Nam aliquam tempus dolor, at
blandit elit vulputate eu. Mauris iaculis sem at nulla euismod
auctor. Duis dui risus, lacinia quis fringilla a, dictum a
lectus. Aliquam id dui a nisi dignissim aliquet nec sed augue.
Vestibulum congue felis sit amet iaculis scelerisque. Vivamus
facilisis lacus sit amet eros eleifend dapibus in eget neque.
Aliquam nisi urna, porttitor et nisi in, pretium lacinia orci.
Cras vitae leo posuere, condimentum magna et, vulputate mi.
Nullam maximus ullamcorper leo eu auctor. Quisque eget fermentum
est, aliquet cursus libero. Sed scelerisque mauris sed enim
tristique tempus ornare vestibulum quam. Etiam eget aliquam
augue. In nec lectus convallis, lobortis risus in, euismod
lorem. Sed eleifend nisi ut lorem convallis, nec blandit ante
egestas.
</p>
<p>
Quisque quis tincidunt nunc. In magna est, malesuada quis tempus
id, fermentum eleifend urna. Fusce facilisis rhoncus nibh, eget
pellentesque mauris rhoncus ut. Nulla congue vel lacus nec
pellentesque. Praesent eget elit nisi. Ut eu enim arcu. Duis et
nisi ligula. Maecenas eu ante eget augue pulvinar efficitur.
Aenean vitae luctus dolor. Ut iaculis orci ut orci tincidunt, id
efficitur nulla accumsan. Nullam feugiat porta hendrerit.
Pellentesque eget fringilla leo. Quisque laoreet ligula quis
consectetur aliquam.
</p>
<p>
Nam vel auctor nisl. Cras vel suscipit nibh. Donec nec massa
sagittis, vehicula magna ac, scelerisque velit. Etiam mollis
felis orci, id placerat ipsum egestas a. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Aenean faucibus vulputate feugiat. Nam condimentum
arcu urna, id tincidunt nisl rhoncus quis. Duis mauris mi,
dapibus et nisl at, facilisis tristique lectus. Nam vel felis in
metus hendrerit placerat ac quis massa. Nam eget turpis nunc.
Nullam at tincidunt lacus. Nulla viverra magna in nisi semper,
non interdum nunc tempus. In pellentesque porttitor bibendum.
Vestibulum blandit congue tempor.
</p>
<p>
Cras congue, nunc et imperdiet porttitor, dui nisl ultricies
ipsum, sed bibendum neque leo auctor sem. Nam velit ipsum,
dictum eget dolor pellentesque, pulvinar imperdiet purus.
Quisque leo dui, eleifend non porttitor quis, auctor convallis
tortor. Integer vel justo at odio suscipit gravida vitae ut
tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sapien urna, iaculis quis magna at, facilisis ultrices
elit. Maecenas ac elementum metus, sit amet congue nunc.
Maecenas vitae posuere lectus. Integer maximus neque at nunc
vestibulum imperdiet. Aenean imperdiet ligula semper nibh
dapibus facilisis. Pellentesque gravida dignissim lacus, et
vulputate sapien dapibus commodo. Etiam efficitur facilisis
sollicitudin. Quisque velit nulla, condimentum ac tellus eget,
rutrum placerat ipsum. Cras auctor auctor sem sed ullamcorper.
</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Example
Related
I have a Bootstrap modal with a scroll bar and I'd like that each time a user clicks on a button in the modal body, I execute a function that goes to the next step of a wizard within the modal. The issue is, I want that every time a button is clicked and I go to the next step, I want the scrollbar of the modal to return to the top of the modal.
I know you can achieve this easily within a web page using "window.scrollTo(0, 0)" but how do I achieve this within a Bootstrap modal.
Thanks
You can use the jQuery scrollTop function
$(document).ready(function() {
let $modal_body = $('.modal-body')
let $scroll_btn = $('.scroll-to-top')
$scroll_btn.click(function() {
$modal_body.scrollTop(0)
})
})
.modal-body {
max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada semper sem, at congue odio iaculis vitae. Morbi tempus ut quam at semper. Etiam ultrices nunc sed velit pellentesque, sit amet dignissim eros dapibus. Etiam laoreet eros eget
justo efficitur porttitor. Sed eget commodo eros. Nulla non eros ac nulla vestibulum placerat eu quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean tempor augue eget rhoncus luctus. Vestibulum metus quam, egestas
non justo ut, mattis pulvinar mauris. Donec eget nulla suscipit, lacinia libero in, rhoncus ex. Etiam consectetur tincidunt enim sed hendrerit. Suspendisse quis lobortis eros. Nulla sodales sagittis nisl, a malesuada nibh.
</p>
<p>
Ut dignissim metus vitae purus tempus, non suscipit dui dapibus. Nullam facilisis sapien sit amet nibh pulvinar gravida. Praesent quis mauris eu arcu aliquam rutrum. Nullam congue sodales nulla, in consectetur nibh. Donec feugiat, diam a congue dictum,
erat libero consectetur dui, ut iaculis nunc leo at metus. Aliquam pellentesque vehicula nisl et faucibus. Fusce vitae nulla vitae lectus consectetur semper eu vitae sapien. Morbi eu erat volutpat, tempus lorem non, rutrum mi. Duis tempus ipsum
vel placerat tincidunt. Quisque pellentesque suscipit nibh a congue. Sed malesuada, risus ac pellentesque viverra, odio eros ultricies elit, nec lobortis purus enim vitae ligula.
</p>
<p>
Sed ultricies, ante at commodo dignissim, nibh nunc pharetra augue, sit amet consequat ipsum nisl vitae urna. Etiam varius lacus sed ornare malesuada. Nullam pulvinar pharetra leo, at eleifend metus fringilla eu. Quisque eget fringilla turpis, malesuada
luctus turpis. Sed molestie laoreet porta. Mauris condimentum ut erat a tincidunt. Duis id vehicula ligula, ac congue neque. Mauris accumsan urna ac accumsan consectetur. Nunc sodales sem sed nulla imperdiet, in pharetra justo congue. Integer
ullamcorper sem quis quam mattis tristique. Nulla pretium congue dictum.
</p>
<p>
Nullam lectus massa, ornare vel dictum et, egestas in augue. Curabitur porttitor sem ex, et lacinia leo cursus quis. Morbi eu dapibus mauris. Fusce volutpat non ex eget lacinia. Vestibulum ex dui, sollicitudin a enim vel, volutpat varius turpis. Donec
volutpat, est non pharetra efficitur, purus neque consectetur tellus, vitae scelerisque quam felis eu quam. Fusce dictum ornare est, vitae facilisis metus fermentum et. Pellentesque porta purus nec tincidunt congue. Donec bibendum volutpat ligula
id ultricies. Vivamus non ante nec enim rutrum feugiat ut eget magna. Fusce justo quam, venenatis sed purus eget, ultrices consequat elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
Morbi pretium convallis eros non viverra. Integer lectus lectus, imperdiet eget erat in, lacinia pellentesque turpis.
</p>
<p>
Maecenas pulvinar justo at sodales fermentum. Pellentesque nec suscipit mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus arcu risus, consectetur vel pellentesque sed, accumsan in turpis. Nunc
quis enim aliquet, placerat ligula at, imperdiet mi. Morbi viverra pellentesque dolor, et fermentum metus vestibulum sit amet. Sed vel felis egestas, maximus libero id, tincidunt ante. Quisque sed risus quis magna auctor mattis. Etiam tempor
scelerisque augue non malesuada. Sed accumsan dui tellus. Mauris dignissim ante quis rhoncus lobortis. Mauris sollicitudin nunc nec mattis vehicula.
</p>
<p>
Proin non ex tellus. Etiam ornare neque sed nisi aliquet interdum. Nulla blandit tempor risus, at pharetra mi scelerisque eu. Suspendisse luctus sapien et tortor scelerisque facilisis. Nulla a augue pharetra, vehicula odio aliquam, venenatis ligula. Aenean
et odio odio. Morbi commodo viverra ipsum, consectetur aliquet dui dapibus vitae. Nunc egestas nec augue in mattis. Sed vehicula a tortor et blandit. Praesent augue ex, auctor vitae tincidunt vel, molestie dignissim lorem. Sed ligula urna, commodo
et finibus quis, laoreet vitae urna. Fusce feugiat nulla molestie, lobortis quam sit amet, vehicula mi. Aliquam eget tincidunt mi.
</p>
<p>
Proin dapibus consequat quam, sed tincidunt velit. Curabitur dolor tellus, gravida eu pretium ac, mattis eu turpis. Integer quis risus lobortis, consectetur magna in, rhoncus ipsum. Vestibulum ullamcorper lectus sed condimentum viverra. Nunc egestas lobortis
urna ut luctus. Integer nunc velit, mattis non sodales non, suscipit quis nibh. Integer vitae eros ligula. Integer gravida facilisis viverra. Maecenas interdum odio ut semper efficitur. In dapibus a lorem dapibus feugiat. Morbi non posuere lacus.
</p>
<p>
Maecenas facilisis luctus dapibus. Phasellus congue turpis magna, ut congue nisi fermentum sit amet. Fusce non risus ac metus posuere bibendum in sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec sed gravida ligula. Fusce rhoncus auctor dui, id mollis lectus porta eget. Donec ullamcorper non est et porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nam eu dolor in libero gravida commodo sit amet id nibh. Nam massa nisl, rhoncus eu tempus in, dignissim et turpis. Proin aliquam convallis accumsan. Maecenas in vehicula elit, a pellentesque mi. Maecenas feugiat purus nec euismod elementum. Nam vel purus
laoreet, facilisis tellus vel, vehicula odio. Pellentesque est elit, vulputate gravida felis vitae, consequat varius diam. Donec imperdiet aliquet lobortis. Donec nec dictum nisl. Pellentesque blandit ac est ut suscipit. Vivamus nec eros in
neque fringilla dictum eget non ligula. Pellentesque condimentum convallis dolor, non pharetra eros aliquet a. Donec nisl risus, pretium ut aliquam vitae, efficitur vel mauris. Praesent feugiat facilisis dolor, non aliquam lectus suscipit sed.
Aenean dictum nisi ut euismod lacinia. Quisque scelerisque ultricies viverra.
</p>
<p>
Aenean nibh ipsum, posuere sed aliquet ac, laoreet imperdiet lacus. Nunc tellus ex, cursus rutrum purus vitae, iaculis facilisis orci. Pellentesque vitae iaculis massa. Proin fringilla risus dui, ac pulvinar purus eleifend a. Duis at tellus non nulla
tempor vulputate. In dignissim, enim id bibendum condimentum, urna ante consequat odio, in varius augue massa eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor, nibh id hendrerit scelerisque, metus purus malesuada
nisl, quis bibendum mauris nibh at dui. Vestibulum viverra nulla faucibus, ornare felis a, rutrum nisl. Maecenas eu porttitor nulla. Nunc viverra urna eu ex rhoncus dapibus. Nulla non dignissim mi, nec facilisis ipsum. Integer vitae leo eget
velit consequat consequat nec sed dui. Pellentesque ipsum urna, egestas et ipsum eget, venenatis fringilla dui.
</p>
<p>
Nullam maximus risus ac sapien ullamcorper, ac euismod erat faucibus. Duis vel est quis leo malesuada porttitor. Nullam hendrerit sagittis commodo. Mauris finibus dictum orci, eget euismod nulla consequat eu. Integer ultricies nisl vel lorem pulvinar,
nec maximus massa efficitur. Donec venenatis dictum sem a elementum. Phasellus lectus augue, cursus at nulla in, scelerisque vulputate lorem. Pellentesque pellentesque laoreet lectus pulvinar ullamcorper. Phasellus faucibus risus ut augue rutrum,
et tempor urna dictum. Fusce id lacus urna. Etiam malesuada at ex a aliquet. Phasellus mollis mi non urna tristique, et vestibulum libero commodo. Phasellus tempor tellus at arcu tempor gravida.
</p>
<p>
Praesent laoreet tellus tempus orci sodales aliquet. Pellentesque aliquam faucibus quam, id aliquam velit condimentum vel. Etiam convallis leo at felis varius, vitae consectetur erat varius. Nullam ante nisl, sollicitudin non ornare sed, interdum ac nibh.
Curabitur sed vehicula dolor. Vivamus convallis arcu vel fermentum volutpat. Ut metus lacus, molestie sed condimentum ac, scelerisque vel neque. Pellentesque sed aliquam magna. Curabitur tempor ultrices magna eu ullamcorper. Vivamus ut nulla
in elit rhoncus finibus. Duis tristique tellus sit amet odio cursus, nec dignissim lacus euismod. Aliquam erat volutpat. Maecenas id mi imperdiet, maximus dolor in, feugiat metus. Donec mauris velit, euismod nec tellus sed, blandit facilisis
sem. Nulla facilisi.
</p>
<p>
Aenean augue felis, feugiat quis auctor ac, ultricies pellentesque justo. Proin ultricies id ante vitae porttitor. Proin porttitor lacinia erat. Donec eleifend condimentum justo, at tincidunt est. Quisque fringilla sollicitudin nisi, eget rhoncus sem
tincidunt in. Quisque faucibus placerat arcu et tempus. Duis sodales tincidunt lorem, at suscipit ex maximus ut. Donec efficitur diam et dui pharetra, quis condimentum ante iaculis.
</p>
<p>
Aliquam quis massa ex. Donec auctor dui quis est sodales fermentum. Aliquam nulla diam, venenatis maximus dui id, ultricies posuere risus. Nullam auctor rhoncus nibh at malesuada. Aenean at hendrerit orci, sed pellentesque metus. Maecenas porta ante sapien,
sit amet sollicitudin augue volutpat eu. In placerat ornare lorem, vel ullamcorper felis imperdiet sed. Ut pharetra luctus orci porttitor vestibulum. Morbi eu tortor at enim ornare rhoncus. Ut vitae enim posuere, tristique risus et, tempor orci.
Nam varius tellus eu magna scelerisque dignissim. Nunc auctor ligula in efficitur convallis. Nullam sed ligula enim. Nam ipsum ante, convallis vel malesuada at, congue ac tortor.
</p>
<p>
Vivamus gravida, magna eget lacinia consequat, quam libero feugiat quam, sit amet euismod lorem velit et nisi. Suspendisse ac pharetra dui. Nam venenatis viverra felis, id auctor nisl convallis id. Nunc dignissim rutrum nulla vel fermentum. Sed sagittis
gravida nibh ut facilisis. Curabitur quis faucibus arcu. Sed maximus tincidunt mattis. Suspendisse accumsan neque nec lorem consectetur fringilla. Nulla porta ante massa, quis sagittis sem mattis vel. Sed vitae nibh tincidunt, vehicula dolor
et, cursus sem.
</p>
<a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
I am attempting to navigate to a section of the same page using anchor tags without having the page refresh because I have a form that would lose data if the page refreshes.
For some reason, when searching for this question, all of the answers seem to address everything but this specific issue. I don't have a reference whether this can be done in pure HTML, Javascript, or JQuery or even using anchor tags. I would just like the ability to scroll to a section of the same page without having to refresh.
Page code:
<div>
Link Test
stuff here
<section id="faq">
</section>
</div>
Update
It seems like what I was looking for was scrollIntoView() and not an anchor tag
To get this affect you need to use AJAX request. When get response you can append or replace some element in current page. You can see this, or this
as examples.
It can be done with an anchor tag:
<div>
Link to some content
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae elit ultrices, ornare metus ac, vehicula magna. Morbi sem metus, vulputate sit amet nunc at, aliquet luctus nisl. Pellentesque congue commodo turpis non luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed velit et nibh congue faucibus. Suspendisse dapibus leo eget nisl tincidunt placerat. Sed gravida ante quis erat tincidunt, nec auctor sapien volutpat.</p>
<p>
Sed aliquet blandit purus sit amet viverra. Etiam semper, magna ac dapibus luctus, sapien purus vulputate risus, a aliquet magna lorem ac quam. Etiam sagittis pellentesque felis. Ut vitae accumsan mauris, eu facilisis sem. Maecenas viverra commodo odio, sed convallis felis elementum eget. Vivamus imperdiet euismod velit rutrum pulvinar. In gravida nisi tortor, id dignissim nibh malesuada id. Phasellus at commodo neque, pellentesque posuere felis. Mauris sed accumsan tellus, a ultricies est. Quisque arcu sapien, vehicula et eleifend eu, sollicitudin non nibh. Duis in convallis mi. Vivamus ut metus justo. Phasellus pharetra posuere felis eget maximus. Duis ut diam eros.</p>
<p>
Donec consectetur velit ut metus mattis convallis. Nullam eleifend scelerisque diam, vitae pharetra nunc varius et. Sed tortor dui, cursus fringilla maximus non, sollicitudin in justo. Mauris volutpat rutrum nisi, quis condimentum nisi maximus sit amet. Sed vitae lacus sit amet nisi ultrices aliquam. Vestibulum ut aliquet dolor. Aenean ullamcorper mi dolor, vel pharetra justo hendrerit id. Proin condimentum lacinia quam placerat pretium. Duis varius mi eget enim dignissim, vulputate condimentum justo congue. Proin quis interdum nunc. Duis et tellus justo.</p>
<p>
Ut vel nibh in erat cursus maximus a sed nisi. Aliquam vulputate tincidunt est. Praesent euismod nulla eu posuere bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur est eu felis porttitor hendrerit. Duis sollicitudin, dui pulvinar egestas scelerisque, turpis risus convallis risus, ut pharetra est erat vitae eros. Donec eu metus elementum, viverra nulla et, condimentum risus. Curabitur dapibus aliquet magna ut vestibulum. Donec in dui sit amet risus maximus consectetur.</p>
<p>
Quisque auctor commodo nulla ac condimentum. Duis maximus mauris lacinia malesuada pulvinar. Donec enim nibh, pharetra sed dolor ac, euismod imperdiet felis. Donec a nibh turpis. Nam blandit erat velit, ac rutrum risus dictum ut. Morbi et sollicitudin ligula. Aliquam id libero massa. Proin pellentesque tincidunt volutpat. Curabitur magna erat, auctor a magna vitae, eleifend viverra neque.</p>
<section id="contentId">
Some content far below
</section>
</div>
Or, with JS, using the location.hash property:
function navigateTo(id) {
window.location.hash = id;
}
<div>
<button type="button" onclick="navigateTo('contentId')">Link to some content</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae elit ultrices, ornare metus ac, vehicula magna. Morbi sem metus, vulputate sit amet nunc at, aliquet luctus nisl. Pellentesque congue commodo turpis non luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed velit et nibh congue faucibus. Suspendisse dapibus leo eget nisl tincidunt placerat. Sed gravida ante quis erat tincidunt, nec auctor sapien volutpat.</p>
<p>
Sed aliquet blandit purus sit amet viverra. Etiam semper, magna ac dapibus luctus, sapien purus vulputate risus, a aliquet magna lorem ac quam. Etiam sagittis pellentesque felis. Ut vitae accumsan mauris, eu facilisis sem. Maecenas viverra commodo odio, sed convallis felis elementum eget. Vivamus imperdiet euismod velit rutrum pulvinar. In gravida nisi tortor, id dignissim nibh malesuada id. Phasellus at commodo neque, pellentesque posuere felis. Mauris sed accumsan tellus, a ultricies est. Quisque arcu sapien, vehicula et eleifend eu, sollicitudin non nibh. Duis in convallis mi. Vivamus ut metus justo. Phasellus pharetra posuere felis eget maximus. Duis ut diam eros.</p>
<p>
Donec consectetur velit ut metus mattis convallis. Nullam eleifend scelerisque diam, vitae pharetra nunc varius et. Sed tortor dui, cursus fringilla maximus non, sollicitudin in justo. Mauris volutpat rutrum nisi, quis condimentum nisi maximus sit amet. Sed vitae lacus sit amet nisi ultrices aliquam. Vestibulum ut aliquet dolor. Aenean ullamcorper mi dolor, vel pharetra justo hendrerit id. Proin condimentum lacinia quam placerat pretium. Duis varius mi eget enim dignissim, vulputate condimentum justo congue. Proin quis interdum nunc. Duis et tellus justo.</p>
<p>
Ut vel nibh in erat cursus maximus a sed nisi. Aliquam vulputate tincidunt est. Praesent euismod nulla eu posuere bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur est eu felis porttitor hendrerit. Duis sollicitudin, dui pulvinar egestas scelerisque, turpis risus convallis risus, ut pharetra est erat vitae eros. Donec eu metus elementum, viverra nulla et, condimentum risus. Curabitur dapibus aliquet magna ut vestibulum. Donec in dui sit amet risus maximus consectetur.</p>
<p>
Quisque auctor commodo nulla ac condimentum. Duis maximus mauris lacinia malesuada pulvinar. Donec enim nibh, pharetra sed dolor ac, euismod imperdiet felis. Donec a nibh turpis. Nam blandit erat velit, ac rutrum risus dictum ut. Morbi et sollicitudin ligula. Aliquam id libero massa. Proin pellentesque tincidunt volutpat. Curabitur magna erat, auctor a magna vitae, eleifend viverra neque.</p>
<section id="contentId">
Some content far below
</section>
</div>
Is there a way to make all links within a page scroll smoothly via CSS and as a fallback JavaScript (but only as last resort).
I've seen this answer but it uses jQuery and JavaScript.
I'd prefer a pure CSS solution, something like:
link {
scrolling: smooth;
}
Use CSS scroll-behaviour (may not be supported on some browsers):
html {
scroll-behavior: smooth;
}
Last paragraph
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit erat id ex luctus facilisis et vitae enim. Vestibulum congue gravida quam, in mollis arcu varius in. Mauris imperdiet malesuada velit, id cursus eros vulputate nec. Sed congue sollicitudin nulla eget luctus. Integer ut quam a diam pellentesque ultrices quis a ligula. Quisque sed lorem suscipit, pulvinar risus nec, molestie est. Aliquam scelerisque scelerisque massa et scelerisque. Quisque leo urna, pharetra in sapien quis, lacinia dapibus nulla. Donec dignissim semper magna, sed fermentum quam luctus sed.
In venenatis dui sed condimentum varius. Ut sit amet semper elit, sit amet vulputate augue. Nulla facilisi. Donec sed consectetur dolor, at molestie tortor. Nulla facilisi. Proin scelerisque a nulla sodales efficitur. Praesent turpis erat, vestibulum vel efficitur id, porttitor vel arcu. Maecenas ex mauris, molestie nec nisi id, aliquet mattis eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie, leo in aliquet pretium, metus dolor congue ligula, sed porta arcu tortor at elit. Vivamus dapibus mauris venenatis enim finibus tempor.
Vivamus ultrices nibh pellentesque laoreet condimentum. Curabitur rutrum eget odio eget consequat. Ut vel lorem ullamcorper, congue tellus non, convallis felis. Integer vulputate blandit elementum. Praesent dapibus malesuada enim, nec suscipit nulla laoreet a. Nunc mauris purus, vestibulum vel nisl bibendum, pretium venenatis erat. Nulla ut orci sit amet neque fringilla tempus.
Aenean vel sodales metus. Sed tincidunt risus quam, non maximus mi dictum vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Pellentesque sollicitudin vulputate diam, non dignissim enim mattis blandit. In a scelerisque tellus. Nulla et urna varius, sodales nulla et, posuere justo. Vivamus in pharetra nibh. In vestibulum ante eget lacinia tincidunt. Aenean dignissim mauris in lacus vehicula, eu ultricies erat tristique. Ut nulla odio, venenatis vitae ornare quis, elementum non erat. Proin tristique massa id aliquet posuere.
Nam vitae eros non ante luctus volutpat ut eget est. Nulla pharetra odio nisl, at ultrices orci congue quis. Aliquam quis sem sed ligula tincidunt posuere quis sit amet nibh. Aenean arcu sapien, blandit in tristique vel, placerat vitae mauris. Mauris et mauris massa. Vivamus at nisl dictum, facilisis ligula ut, pharetra elit. Morbi scelerisque diam in diam posuere, id tempus ex ultrices. Praesent dictum ipsum in urna vehicula congue. Praesent lobortis lorem mauris, ut interdum risus convallis sit amet. Fusce vitae ultrices nunc. Integer at quam nibh. Praesent aliquet rutrum nisl sit amet interdum. Donec sodales metus vel lectus gravida ornare.
Nulla non augue efficitur, molestie neque ut, euismod augue. Sed nulla est, faucibus et augue eu, sodales finibus ante. Curabitur ex elit, laoreet nec porta vitae, rutrum vitae purus. Sed semper finibus pellentesque. Maecenas vel metus risus. Curabitur ut arcu cursus, dapibus velit varius, interdum massa. Donec aliquam libero at elit interdum hendrerit. Vivamus elementum quam ac porttitor euismod. Praesent ipsum elit, fringilla vel pharetra in, fringilla id tellus. Suspendisse et justo mattis tellus mollis suscipit eget quis ex. Proin sed faucibus mi. Maecenas viverra felis eget leo pharetra, non volutpat sem fermentum. Cras tincidunt ipsum non euismod elementum. Morbi in varius arcu, sit amet facilisis ipsum. Donec a justo a mauris tempus pharetra. Fusce suscipit ornare libero, consequat hendrerit nisi mattis sit amet.
Duis pulvinar justo non tellus lobortis, eu posuere orci rutrum. Praesent dignissim scelerisque enim, et mattis turpis sollicitudin sagittis. Fusce sodales nulla eu ex blandit, ac commodo quam ornare. Etiam in erat nisi. Duis porttitor hendrerit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at egestas mauris. Vivamus eleifend nulla facilisis augue porttitor, in sagittis enim gravida. Quisque eget magna a libero vulputate malesuada. Morbi sapien urna, mattis sit amet tellus quis, laoreet feugiat ipsum. Nullam vel augue vel orci convallis congue id sed ex. Proin luctus id elit et suscipit. Vestibulum ac mattis odio.
Donec velit sapien, mollis at vestibulum ut, venenatis non lectus. Nulla facilisi. Fusce sagittis elit commodo bibendum posuere. Nullam vitae nunc vestibulum, tempor erat quis, sagittis eros. Suspendisse lobortis nec leo in auctor. Donec sit amet purus ac ante imperdiet placerat non non lectus. Integer a massa sed ipsum congue faucibus. Integer erat dolor, maximus sed est non, tincidunt blandit nunc. In lobortis elit at mi molestie tempor.
Phasellus lacinia erat sit amet enim condimentum, vitae accumsan magna tincidunt. Integer imperdiet malesuada leo. Integer et mi ipsum. Proin nulla turpis, auctor in commodo ut, fermentum vitae risus. Morbi consequat ipsum libero, id finibus ante placerat id. Proin elementum luctus nunc id tristique. Proin tellus mauris, eleifend vitae hendrerit eget, varius vel ante. Ut dignissim metus at fermentum laoreet. Phasellus eu vestibulum mi, et tristique orci. Sed pulvinar porta commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id odio non purus suscipit congue vel ut nunc. Morbi porttitor sed ligula ac vehicula. In fermentum ipsum sit amet lacinia pharetra. Nunc sed neque vel mauris ultrices rhoncus.
<span id="last">In auctor in leo nec sollicitudin. Nam viverra lectus nibh, semper lacinia diam tristique ac. Vestibulum id mauris ac dui accumsan tempus. Donec feugiat augue sed felis facilisis porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla imperdiet auctor dui ut porta. Nullam fringilla mollis eros et ultricies. Maecenas cursus enim posuere sapien interdum sollicitudin. Aenean hendrerit nunc risus, sed rhoncus nisi tempus ut.</span></p>
I'm building a template and I want to move an element avoiding flexbox if it is possible, using pure css.
Here's my problem:
<div class="container-fluid health-details">
<div class="row">
<?php include 'sidebar.php';?>
<div class="col-md-8">
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque magna, volutpat ut scelerisque gravida, posuere nec diam. Fusce et ligula eget nisi malesuada dictum. Nunc et purus massa. </p>
<p>Curabitur vel fermentum nisi. Aenean elementum vel erat sit amet viverra. Ut quis sapien at dolor sollicitudin ullamcorper. Aliquam quis volutpat nisl, nec cursus tortor. Proin elementum magna nec erat ultricies, eu feugiat nunc convallis. Sed dapibus nec eros in porttitor. In finibus sed dolor vel ornare. </p>
<p>Aenean volutpat iaculis ullamcorper. Integer id nisi fringilla, feugiat est quis, hendrerit felis. Aliquam nunc justo, feugiat quis ligula ac, rhoncus pellentesque sapien. Pellentesque gravida dui elit, at egestas libero suscipit quis. Sed consectetur, tellus in faucibus rhoncus, nisl ipsum pulvinar magna, posuere pulvinar nulla urna a nisl. Quisque cursus ac metus et venenatis. </p>
<p>Pellentesque vehicula ornare quam, id tempus felis volutpat quis. Proin volutpat massa ac turpis dignissim, id consectetur eros sagittis. Pellentesque in interdum turpis. Maecenas eget nisi sit amet nisi pretium placerat. Maecenas luctus vel leo ut fermentum. Nullam ullamcorper ultrices scelerisque. Cras semper eros vitae nisi vulputate euismod. Suspendisse potenti. Etiam urna sem, vulputate in hendrerit a, imperdiet at ipsum. Integer aliquet arcu erat, interdum consectetur enim condimentum sed.</p>
<p>Integer egestas dolor eu sagittis pharetra. Phasellus non commodo magna. Maecenas sit amet libero pellentesque arcu posuere ultrices ut non augue. Donec aliquam pellentesque lectus, vel sollicitudin nisi viverra at. Fusce convallis velit eget urna ullamcorper finibus. Suspendisse potenti. Quisque ac eros vel ligula vulputate aliquet vestibulum sit amet nisl. Nunc rutrum blandit consectetur. Pellentesque vel rhoncus eros. Nam non vestibulum ex, sed cursus sem. Suspendisse ut porttitor erat, nec placerat ligula. Cras consequat ut ligula posuere interdum. Phasellus porta, nisi quis pharetra fringilla, nulla sem convallis sapien, ut faucibus ipsum mauris nec nibh. Maecenas efficitur hendrerit eros, vel vulputate nisi convallis nec. Aliquam pulvinar scelerisque mi, et placerat nisi egestas eget.</p>
</div>
</div>
</div>
</div>
My sidebar is really easy, something like:
<aside>
<nav>
<ul>
<li class="active">Ciao</li>
<li>Ciao Program</li>
<li>Program Outline</li>
<li>Tuition & Fees Guide</li>
<li>Admission Policy</li>
</ul>
</nav>
</aside>
What I'd like to do is, on mobile switch the position of the sidebar and put it within the blurb:
<div class="container-fluid health-details">
<div class="row">
<div class="col-md-8">
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque magna, volutpat ut scelerisque gravida, posuere nec diam. Fusce et ligula eget nisi malesuada dictum. Nunc et purus massa. </p>
<p>Curabitur vel fermentum nisi. Aenean elementum vel erat sit amet viverra. Ut quis sapien at dolor sollicitudin ullamcorper. Aliquam quis volutpat nisl, nec cursus tortor. Proin elementum magna nec erat ultricies, eu feugiat nunc convallis. Sed dapibus nec eros in porttitor. In finibus sed dolor vel ornare. </p>
<?php include 'sidebar.php';?>
<p>Aenean volutpat iaculis ullamcorper. Integer id nisi fringilla, feugiat est quis, hendrerit felis. Aliquam nunc justo, feugiat quis ligula ac, rhoncus pellentesque sapien. Pellentesque gravida dui elit, at egestas libero suscipit quis. Sed consectetur, tellus in faucibus rhoncus, nisl ipsum pulvinar magna, posuere pulvinar nulla urna a nisl. Quisque cursus ac metus et venenatis. </p>
<p>Pellentesque vehicula ornare quam, id tempus felis volutpat quis. Proin volutpat massa ac turpis dignissim, id consectetur eros sagittis. Pellentesque in interdum turpis. Maecenas eget nisi sit amet nisi pretium placerat. Maecenas luctus vel leo ut fermentum. Nullam ullamcorper ultrices scelerisque. Cras semper eros vitae nisi vulputate euismod. Suspendisse potenti. Etiam urna sem, vulputate in hendrerit a, imperdiet at ipsum. Integer aliquet arcu erat, interdum consectetur enim condimentum sed.</p>
<p>Integer egestas dolor eu sagittis pharetra. Phasellus non commodo magna. Maecenas sit amet libero pellentesque arcu posuere ultrices ut non augue. Donec aliquam pellentesque lectus, vel sollicitudin nisi viverra at. Fusce convallis velit eget urna ullamcorper finibus. Suspendisse potenti. Quisque ac eros vel ligula vulputate aliquet vestibulum sit amet nisl. Nunc rutrum blandit consectetur. Pellentesque vel rhoncus eros. Nam non vestibulum ex, sed cursus sem. Suspendisse ut porttitor erat, nec placerat ligula. Cras consequat ut ligula posuere interdum. Phasellus porta, nisi quis pharetra fringilla, nulla sem convallis sapien, ut faucibus ipsum mauris nec nibh. Maecenas efficitur hendrerit eros, vel vulputate nisi convallis nec. Aliquam pulvinar scelerisque mi, et placerat nisi egestas eget.</p>
</div>
</div>
</div>
</div>
I don't have to necessarily use php to do the trick, I can do it with simple html. The thing is that I want to avoid to use flexbox, I would be nice if I can only add a class to my sidebar with php. The other thing that I have to avoid is to repeat myself (DRY). Of course I can create the same bar and display:none and block on mobile (so I will have the same two sidebars), but if it is possible I'd rather avoid it.
Is there any solution to solve my problem?
I would avoid to use a script to, like something with javascript (append the element based on the size of the viewport, that's the only method that I know that it will work for sure, something like):
$('.sidebar').insertAfter( '.information p:last-child' );
I mean, it will work just fine but I don't love to style with javascript.
Thanks
The scriptaculous shaking effect somehow produce some bugs for Webkit browsers, including Chrome and Safari. When shaking, the element will shift to the top left of the screen covering everything. An example code is given as below, are there any ways of solving this?
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects'></script>
</head>
<body>
<div style="z-index: 20000; position: fixed; display: block; bottom: 10px; right: 10px; background-attachment: scroll; background-color: white;" id="floating_text">
<p>This should be some floating text.</p>
<p>Some more floating text.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ligula, tempus adipiscing posuere id, sollicitudin sed nulla. Sed neque diam, volutpat non interdum vel, pellentesque vitae lorem. Vivamus et leo risus. Fusce at nunc nulla, non ultricies elit. Aliquam erat volutpat. Aliquam pulvinar mi at purus laoreet eu varius nisl laoreet. Mauris lobortis sapien diam. Maecenas arcu est, ullamcorper fringilla placerat nec, semper ut arcu. Curabitur metus nisl, ornare nec posuere at, tincidunt tempor nisi. Ut ut est risus. Curabitur elit urna, sagittis sagittis cursus quis, accumsan eget nulla. Donec odio ante, rutrum at fermentum vel, tempus gravida odio. Quisque a ante a urna vehicula posuere ac ut orci. Integer luctus sem et justo condimentum consequat. Phasellus pharetra malesuada velit, et commodo arcu imperdiet vitae. Suspendisse vitae risus orci. Maecenas massa tortor, sodales ut luctus ac, lacinia vitae sapien. Vestibulum sit amet rutrum est. Nullam magna erat, semper a volutpat id, porta sed nisl.</p>
<p>Praesent nec consectetur sapien. Integer mollis libero a odio pharetra vulputate. Donec mattis consequat arcu, vel ultricies orci imperdiet sit amet. Mauris sit amet tellus libero. Morbi ac venenatis ligula. Cras tellus neque, porttitor sit amet hendrerit nec, ornare quis tellus. Nam iaculis mi at mi bibendum at commodo justo pretium. Ut in nibh non diam hendrerit fermentum a ut odio. Curabitur lorem turpis, tincidunt et rhoncus et, pulvinar a metus. Vestibulum a quam sit amet arcu condimentum cursus vitae feugiat lectus. Sed ut lorem tellus, non sagittis enim. Curabitur lectus eros, commodo a elementum et, molestie eget est. Donec ullamcorper, arcu nec volutpat auctor, sem odio interdum tellus, nec volutpat lacus libero at nisl. Aliquam metus sapien, aliquam a rutrum ac, tincidunt at purus. Donec in erat mi. Quisque semper mauris in massa bibendum sed tincidunt augue facilisis. In tempus lacinia urna ac tristique.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique urna sem. Etiam iaculis aliquam dui nec porta. Proin tristique diam non augue mattis tristique. Phasellus nulla erat, adipiscing sed cursus sed, pulvinar eget nisl. Maecenas blandit nibh eu nisl facilisis et semper turpis posuere. Pellentesque auctor sem in massa sollicitudin congue. Vivamus quis lacinia massa. Aliquam sodales dictum magna, eget ullamcorper eros placerat at. Quisque gravida diam sit amet nunc porta aliquam. Ut quis aliquet est. Maecenas risus tellus, euismod id porttitor at, porta id turpis. Phasellus id molestie ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean purus nibh, egestas vestibulum aliquet eget, luctus nec eros. Nulla facilisi. Quisque molestie, sem interdum posuere lacinia, nisl purus ornare lectus, id dapibus lacus dolor in ipsum. Aenean pharetra leo nulla.</p>
<p>Curabitur nisi quam, iaculis eget pellentesque vel, pretium sed massa. In viverra, tellus at sollicitudin fringilla, orci eros blandit elit, a bibendum mauris dolor ut metus. Vivamus pellentesque suscipit diam, vitae euismod mi pellentesque vitae. Nullam neque libero, vehicula ut iaculis at, tincidunt eget leo. Suspendisse vitae velit justo. Nullam vitae sem tincidunt nulla tincidunt mollis in id massa. Duis rhoncus elementum turpis quis mollis. Vivamus egestas urna in velit commodo iaculis. Aenean quis dolor eu odio porttitor rhoncus nec vel eros. Donec ut est eu nisl vehicula pulvinar et id dolor. Donec a dolor neque. Morbi tempus mattis tortor ut rutrum. Phasellus orci metus, pellentesque vel tincidunt nec, pulvinar eu ante. Duis faucibus felis et diam ullamcorper in feugiat urna dignissim. Quisque nec diam mauris, vel viverra arcu. Cras sagittis dignissim nisl in sagittis. Fusce venenatis rhoncus est, nec elementum libero dapibus eget. Donec eu velit metus. Sed sollicitudin felis a diam condimentum in suscipit neque varius. Nulla nec tortor tristique elit malesuada luctus luctus quis leo.</p>
<p>Nullam at quam dui. Ut gravida, tellus malesuada faucibus gravida, purus nulla consequat lorem, pellentesque egestas justo quam et enim. Suspendisse fringilla tellus id odio tristique varius. Cras et metus elit. Etiam interdum adipiscing mollis. Aliquam aliquet vestibulum imperdiet. In consectetur, nunc cursus sodales scelerisque, tellus eros tristique nisl, ut luctus augue dolor vel nibh. Fusce eget dui sed eros tristique varius lacinia id sapien. Nullam ac lorem ac lacus cursus ultricies id a risus. Ut eget dolor sem. Aliquam euismod consequat euismod. Duis sit amet neque et massa ullamcorper tempor.</p>
<p>Quisque rutrum, ipsum ac volutpat dictum, urna diam facilisis enim, ac vestibulum justo metus eu mi. Curabitur nunc sem, consequat a mollis non, bibendum vitae dolor. Mauris pulvinar pellentesque tellus, vel aliquet mauris vulputate vel. Morbi eu ante id nulla ultricies tincidunt. Proin porta, felis nec tincidunt iaculis, justo nibh laoreet dolor, eu sollicitudin arcu justo et odio. Sed suscipit tellus lobortis est tristique semper fermentum magna laoreet. Sed eget ante nunc, vitae varius purus. Mauris nec viverra neque. Morbi et lectus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lobortis magna.</p>
<p>Phasellus elementum iaculis sem in consectetur. Curabitur nec dictum enim. Nunc at pellentesque augue. Nulla sit amet sapien neque, et molestie augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin non elit ante. Mauris justo tellus, feugiat at dapibus a, placerat id felis. Nullam lobortis vehicula rutrum. Fusce tristique pharetra urna, ac scelerisque ipsum consequat eget. Morbi at ipsum in tellus luctus volutpat. Duis placerat accumsan lacus, dictum convallis elit porttitor eu.</p>
<p>Sed ac neque sit amet neque luctus rhoncus. Vestibulum sit amet commodo ante. Duis ullamcorper est id dui ullamcorper cursus. Maecenas fringilla ultricies turpis, nec pulvinar libero faucibus a. Quisque bibendum aliquam sapien, in fermentum arcu iaculis at. Mauris bibendum, metus sed rhoncus fringilla, nisl purus interdum eros, vitae malesuada felis est rhoncus magna. Phasellus elit justo, sagittis nec interdum tincidunt, mollis quis justo. Suspendisse rhoncus rutrum vestibulum. Aliquam ut nunc lectus, quis aliquam risus. Aliquam vel nulla sed odio blandit sagittis. Nulla facilisi. Vivamus ullamcorper, lectus facilisis eleifend accumsan, purus massa sollicitudin nunc, in sodales tellus dui eget est. Morbi ipsum nisi, semper sit amet vehicula sit amet, semper at mauris. Nam mollis massa sed risus scelerisque quis congue mauris tempus. Vestibulum nec urna magna, vitae ornare massa. Aenean adipiscing tempor rutrum.</p>
<p>In hac habitasse platea dictumst. Etiam in dolor eros, eleifend volutpat magna. Sed blandit gravida feugiat. Sed eu dolor in odio sagittis molestie eget ac orci. Phasellus tellus erat, scelerisque tincidunt lacinia sed, placerat eu sapien. Curabitur lobortis feugiat cursus. Nam eu egestas justo. Nullam dignissim enim ipsum, sed semper orci. Donec nulla dui, viverra vel viverra eu, eleifend nec justo. Sed in ultricies turpis. Maecenas ullamcorper, erat ac scelerisque mattis, augue magna laoreet mauris, nec sagittis tellus enim eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum urna eu magna ultricies adipiscing. Phasellus sed urna at nibh euismod vestibulum at eget dui. Nulla ullamcorper viverra tellus ut volutpat. Praesent hendrerit, purus a imperdiet tempus, turpis est suscipit felis, ut commodo diam orci ac augue. Quisque consectetur varius sapien, vel lobortis ante porttitor sit amet. Proin fermentum blandit justo, id faucibus elit feugiat ut. Nulla quam elit, tristique gravida ultrices in, imperdiet et enim.</p>
<p>Aliquam malesuada, nibh eget laoreet malesuada, lorem ligula gravida eros, a consectetur dui odio id urna. Vivamus tincidunt porttitor facilisis. Maecenas vitae lacus at lorem porttitor sodales. Duis et velit ac ipsum cursus ornare. Aliquam eu rhoncus est. Cras nec facilisis tellus. Nunc in felis odio. Nam facilisis dui eu lacus egestas sit amet malesuada dolor volutpat. In placerat dictum turpis ac vulputate. Suspendisse neque odio, elementum sagittis sollicitudin quis, eleifend ac orci. Proin suscipit molestie orci non venenatis. Sed metus mauris, laoreet id lobortis at, tempor eu erat. Mauris tempor, nisi id interdum tempor, tellus ligula pretium mi, a viverra nibh neque vitae est. Integer mattis, lorem ac congue fermentum, quam ipsum gravida erat, in egestas lorem eros ac massa. Vestibulum lobortis ante libero, vel fermentum ante. Aliquam augue ipsum, ullamcorper sit amet dictum id, commodo sit amet lacus. Vivamus elit purus, elementum a vestibulum quis, iaculis id metus. Cras facilisis orci in nulla consequat gravida. Integer blandit, felis at lacinia porta, lacus velit pretium magna, ut eleifend diam magna a justo. Donec scelerisque diam quis nisi molestie vel egestas urna condimentum. </p>
<script type="text/javascript">
Effect.Shake('floating_text');
</script>
</body>
</html>
The DIV takes 100% of the screen once it is "absolutized" by the animation function. If you supply a height and width to "floating_text", it works fine.