i want to show only 300 characters-long paragraph, below is the code im using to hide/show the full text, what should i do to make it show only 300 characters and then show full text when user clicks "show more" button?
TPL file:
<div id="tab-description">
<div id="more-1" class="fulltext">
<p><?php echo $description; ?></p>
</div>
<button aria-expanded="false" aria-controls="more-1" class="toggle-content" hidden><span class="text">Show more</span></button>
</div>
JavaScript:
if ('querySelector' in document &&
'addEventListener' in window) {
var toggleButtons = document.querySelectorAll('.toggle-content');
var fullTextWrappers = document.querySelectorAll('.fulltext');
var fullText;
var toggleButtonText;
[].forEach.call(fullTextWrappers, function(fullTextWrapper) {
// hide all full text on load
fullTextWrapper.setAttribute('hidden', true);
});
[].forEach.call(toggleButtons, function(toggleButton) {
// show toggle more buttons
toggleButton.removeAttribute('hidden');
// add listener for each button
toggleButton.addEventListener('click', function () {
fullTextWrapper = this.parentElement.querySelector('.fulltext');
toggleButtonText = this.querySelector('.text');
// change attributes and text if full text is shown/hidden
if (!fullTextWrapper.hasAttribute('hidden')) {
toggleButtonText.innerText = 'Show More';
fullTextWrapper.setAttribute('hidden', true);
toggleButton.setAttribute('aria-expanded', false);
} else {
toggleButtonText.innerText = 'Show Less';
fullTextWrapper.removeAttribute('hidden');
toggleButton.setAttribute('aria-expanded', true);
}
});
});
}
What I would do is split on each letter and then splice the first 300 items out.
let para = p.textContent.split('')
let first300 = para.splice(0, 300)
Here is a basic usage example:
// Get the div content
Array.from(document.querySelectorAll('div')).forEach(div => {
let para = div.textContent.split('')
let first300 = para.splice(0, 300)
div.innerHTML = `<p>${first300.join('')}<span class="hidden">${para.join('')}</span></p><p>Show More/Less...</p>`
div.querySelector('.more').addEventListener('click', function(e) {
e.preventDefault()
this.closest('div').querySelector('p span:last-child').classList.toggle('hidden')
})
})
.hidden { display:none; }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
Something like this may help:
var desc = "";
document.getElementById("showText").onclick = showText;
function showText() {
document.getElementById("desc").innerHTML = desc;
}
function minifyText(len) {
var textElem = document.getElementById("desc");
desc = textElem.innerHTML;
textElem.innerHTML = desc.substring(0, len) +"...";
}
minifyText(11); // Shorten the text when page loads
<p id="desc">This is some text, for example your description</p>
<button id="showText">Show text</button>
Related
I want to get the text selected and also the DOM element along with where the ending of the text selection offset was in the webpage some seconds after the selection completed.
So like you highlight some text and if in 3 seconds that text is still highlighted, then I want to run some code that has as parameters the highlighted text and the DOM element that was nearest ancestor of the text.
I found there is this selectstart event,
https://developer.mozilla.org/en-US/docs/Web/API/Document/selectstart_event
and also the selectionchange event but I don't see a selectend event.
Some ideas were along these lines:
document.addEventListener('selectionchange', () => {
// if (Math.abs(Date.now().getTime() - process_request_start.getTime()) / 1000 <= 5
// if (is_processing_request === true) {
// return;
// }
setTimeout(() => {
if (is_processing_request === true) {
return;
} else {
is_processing_request = true;
console.log(document.getSelection());
is_processing_request = false;
}
}, 5000);
});
So I am looking for elegant code examples that provide/emulate a selectend, I had some working ideas using setTimeout but looking for any other solutions, prefer working code and not assuming any Jquery/libs, just native DOM environment.
For this particular problem, clearTimeout is your friend! You just cancel the timeouts until the time has elapsed (I shortened it to 2 seconds for this example):
let waiting = null;
document.addEventListener('selectionchange', () => {
if (waiting) clearTimeout(waiting);
waiting = setTimeout(() => {
console.log(document.getSelection().toString());
waiting = null;
}, 2000);
});
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra diam quis aliquet pulvinar. Donec fringilla feugiat elit, vitae pretium turpis suscipit et. Integer tempus massa pellentesque arcu sagittis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis faucibus vestibulum tempus. Morbi at dolor rutrum, malesuada ex sed, tempor nisl. Aenean viverra accumsan accumsan. Suspendisse dignissim augue tellus, quis sollicitudin enim dignissim nec. Nunc mollis vehicula nibh, sed suscipit diam tristique vitae. Nam efficitur massa quis ultrices lacinia. Nunc consequat interdum nunc, vel luctus risus faucibus vel. In arcu diam, bibendum ac enim vel, dignissim vehicula quam. Donec non justo scelerisque, hendrerit est rhoncus, consectetur mi. Pellentesque a lorem eget ex placerat sodales eget sit amet metus. Phasellus aliquam vitae neque vel suscipit.
In in nisl tristique, dictum justo ut, consectetur risus. Suspendisse congue dignissim orci, scelerisque accumsan massa ornare vel. Sed finibus ultrices felis, eu ultrices magna consectetur nec. Proin eu fringilla risus. Cras id posuere ex, sed porta dui. Integer id dolor massa. Cras dui ante, congue a odio non, pulvinar faucibus nisi. Nunc in ex non quam rutrum tempus sit amet ac neque. Vestibulum blandit vulputate massa, ut tincidunt magna dictum id. Vivamus laoreet auctor sollicitudin. Duis eu quam ac lacus faucibus imperdiet sodales eu nisl. Integer auctor commodo turpis, a ultricies sem lacinia iaculis.
Quisque id mattis neque, ut dignissim lectus. Curabitur ex libero, rutrum sed massa a, ultricies fringilla justo. Pellentesque in interdum felis, et aliquet ante. Praesent mauris leo, pretium quis lectus non, ultricies elementum neque. Nam suscipit ullamcorper neque sed iaculis. Maecenas placerat nisl et convallis hendrerit. Suspendisse molestie erat non leo cursus, in maximus sem facilisis. Ut non magna quis purus pellentesque auctor sed sed lorem. Aenean sed iaculis metus, at bibendum libero. Pellentesque in est nec ipsum maximus rutrum in vel dui. Duis porta laoreet dolor, aliquet eleifend mi dapibus consequat.
Mauris posuere tempus libero ut ullamcorper. Aenean ac accumsan enim. Quisque ex felis, pretium euismod dui et, euismod malesuada sapien. Etiam et tempus nulla. Quisque aliquet aliquet risus dapibus vestibulum. Etiam blandit leo odio, ac fringilla ante molestie nec. Sed commodo ex a finibus commodo.
Fusce sed fringilla tellus. Fusce id sagittis ipsum. Vivamus lacus neque, interdum et enim et, ultricies consectetur quam. Aenean lacus augue, placerat id odio vitae, imperdiet sodales mauris. In ornare est sit amet vestibulum interdum. Fusce ultrices, mi non mollis condimentum, est ligula dictum arcu, sed hendrerit magna dolor et ex. Morbi faucibus interdum mattis. Duis vel luctus sem, vitae porta elit. In gravida, leo at laoreet iaculis, mi odio ultrices nulla, sed dictum metus enim ac mauris. Sed odio est, consequat vel turpis et, accumsan accumsan libero. Maecenas nec luctus quam. Aenean et lobortis libero, quis pulvinar felis. Vestibulum sed dolor ornare, ultrices justo non, aliquam felis. Mauris sagittis rutrum mi, sit amet imperdiet lorem luctus non. Praesent ac tortor maximus, facilisis diam sit amet, rutrum nunc. Fusce sit amet lectus pretium, vehicula arcu laoreet, elementum justo.</div>
I want to make this image to be on the bottom of this section (section 18) of one page website (which has 21 section) for all devices heights using jQuery.
I made it by using position: absolute etc. but just on my screen size. When I check that on other devices that have different heights, it's not stuck to the bottom.
You can try this.
.imagebottom{
position:fixed;
bottom:0px;
left:50%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
Use position: sticky instead of position: fixed. A sticky element always sticks to its nearest ancestor element which in your case is the 18th section of your website.
.imagebottom{
position: sticky;
bottom:0px;
height: 50px;
}
<div>
<h2>Section 17</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<br />
<hr />
<br />
<div>
<h2>Section 18</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</p>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
</div>
<br />
<hr />
<br />
<div>
<h2>Section 19</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.
I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.
You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/
Please i want to compare my div with id = message old document height to new document height.
If there is a difference, then it should scroll to bottom automatically, else nothing should happen. I wish to do this in pure javascript.
This is what i have so far but confused on how to get things done.I know there is surely a way but not succeeding.
function Scroll(){
var elem = document.getElementById('message');
elem.scrollTop = elem.scrollHeight;
}
Thanks for quick response.
If you just want a one-step 'jump' scroll, you can use
window.scrollTo(0, document.body.scrollHeight):
function Scroll() {
var elem = document.getElementById('message');
if (elem.scrollHeight > window.innerHeight) {
window.scrollTo(0, document.body.scrollHeight);
}
}
Scroll();
<div id="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lorem efficitur eros fringilla vestibulum vel in nisl. Nullam porttitor auctor euismod. Duis efficitur eu ipsum sit amet porta. Etiam sagittis velit id urna ultricies, id semper nisi
ornare. Donec ullamcorper orci dui, et eleifend metus dictum quis. Donec libero nisl, sodales at odio sit amet, dignissim egestas enim. Pellentesque consectetur erat eget tellus vehicula efficitur. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Vivamus suscipit, lacus id maximus fermentum, erat velit venenatis diam, ac viverra mi erat in nunc. Aenean eu urna dignissim, elementum dui quis, elementum eros. Duis eleifend metus sed risus sodales efficitur. Fusce sit amet ipsum et magna
luctus tristique. Mauris vitae libero et odio aliquet rhoncus. Donec sed dui ac massa volutpat elementum. Nullam et nibh sit amet nisl accumsan placerat. Morbi at tortor non metus tempor euismod. Nam eget mi at diam sodales tristique non et lacus. Aenean
non nunc imperdiet, consectetur nibh egestas, semper orci. Sed tristique sem odio. Phasellus ultrices lorem venenatis purus pellentesque, in vestibulum augue congue. Vestibulum eu maximus mauris. Nulla facilisi. Etiam in semper velit, nec accumsan nunc.
Curabitur vel fermentum velit, quis blandit velit. Cras eu scelerisque est. Nunc vel dictum ipsum. Maecenas eleifend efficitur metus nec auctor. Donec ut enim hendrerit, gravida urna eu, hendrerit mauris. Proin orci nulla, tristique vitae pharetra ut,
blandit eget erat. Sed lectus mauris, fringilla ut felis nec, feugiat faucibus sapien. Morbi est felis, suscipit at tellus pharetra, interdum gravida lectus. Praesent molestie euismod sagittis. Sed blandit dictum magna, ac ornare elit dignissim eget.
Morbi varius libero sit amet est fermentum, id convallis quam interdum. Praesent posuere eros id dignissim euismod. Sed urna quam, facilisis quis lacinia sit amet, pellentesque et lacus. Vivamus faucibus sagittis dictum. Duis posuere, ipsum elementum
molestie pulvinar, elit odio lobortis ipsum, non finibus velit urna vel neque. Aliquam vehicula augue non sapien fringilla varius. Suspendisse at pellentesque nibh. Vestibulum sollicitudin lacus quis lectus hendrerit venenatis at ut lacus. Donec condimentum
fringilla tellus id bibendum. Donec facilisis elit erat, at varius velit dictum vel. Vivamus bibendum tincidunt justo, lobortis euismod tortor semper vel. Morbi non felis tortor. Aliquam vitae elementum ligula. Praesent sem risus, gravida vitae neque
iaculis, interdum maximus nibh. Etiam eu ullamcorper dui. Etiam mauris lectus, bibendum quis semper eget, egestas a nunc. Maecenas maximus pharetra mi id egestas.</div>
Hope this helps!
I'm new to JavaScript and jQuery. I have this accordion html / js which works great but it's for mobile and I need to make it so when title is clicked, it will scroll down to the top of that clicked element / content. I assume I need to wrap it with an ID and use JS to wrap it in an anchor linking to that ID, but I am not sure how.
Codepen: http://codepen.io/anon/pen/QNdGGL
var accordionContent = $('.accordion p');
$('.accordion h6').click(function() {
// Check if current accordion item is open
var isOpen = $(this).next().is(":visible");
// Hide all accordion items
accordionContent.hide();
// Open accordion item if previously closed
if (!isOpen) {
$(this).nextUntil('h6').show();
}
});
$('.accordion h6').first().trigger('click');
.accordion h6 {
display: block;
cursor: pointer;
background: black;
padding: 10px;
color: #fff;
}
.accordion p {
display: none;
margin: 0;
padding: 0 0 1em;
}
.accordion * {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<h6>heading 1</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
<h6>heading 2</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
<h6>heading 3</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium leo sed erat dapibus, eget sollicitudin risus maximus. Maecenas id arcu in diam fermentum dictum vel id ligula. Nullam purus augue, aliquam pulvinar sodales cursus, luctus
vel arcu. Nunc vestibulum volutpat leo in viverra. Maecenas ullamcorper, erat vitae tempus semper, nibh urna feugiat ipsum, vitae vulputate tortor nibh in neque. Maecenas et pretium enim, non rhoncus nisi. Nam convallis, nisi vitae consectetur convallis,
lorem nunc efficitur lacus, eu feugiat ex elit quis urna. Nullam ut urna venenatis, iaculis mauris eu, porta est. Etiam vestibulum dictum mi at aliquam. Cras id euismod quam. Maecenas a egestas nunc. Praesent ullamcorper ipsum metus, ut blandit est
consequat id. Aliquam turpis eros, condimentum ac magna ut, sollicitudin interdum odio. Pellentesque nec cursus ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus risus, imperdiet ut dignissim
vitae, vestibulum aliquam augue. Proin tristique ipsum faucibus convallis semper. Ut tempus felis ante, in posuere augue malesuada sed. Maecenas feugiat velit sit amet ultricies ornare. Ut feugiat nec erat elementum commodo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eleifend mauris sit amet ipsum sollicitudin, a efficitur urna malesuada. Ut venenatis rutrum leo, a condimentum augue pulvinar non. Nunc vitae elementum neque, eu ullamcorper
nisl. Curabitur eu aliquet augue. Fusce id maximus magna. Phasellus ac porttitor metus. Suspendisse dapibus nunc vitae diam pellentesque iaculis. Curabitur mattis rutrum massa, vitae interdum est sollicitudin vitae. Donec gravida felis a est condimentum,
quis ultricies magna maximus. Aenean convallis ligula a dolor hendrerit, quis imperdiet leo accumsan. Morbi id blandit justo, sit amet viverra augue. Fusce urna mi, ullamcorper quis ultricies congue, maximus ut ante. Aliquam enim purus, tempor non
semper sit amet, porta at urna. Donec venenatis, metus a aliquam tincidunt, mauris felis molestie dolor, sed elementum sapien tortor a purus.</p>
</div>
use anchor tag instead of h6
<a href="#heading1" id="heading1">
heading 1
</a>
check out here:
http://codepen.io/prakash_kumar/pen/MyJbmy#0
If scroll animation is not needed, then remove the animate jquery code.
I worked it out myself and here was the solution:
var headers = $("#tab_description h6");
var accordionContent = $('#tab_description p, #tab_description ul, #tab_description iframe, #tab_description div');
$(headers).each(function(i) {
$(this).append('');
});
$('#tab_description h6').click(function() {
// Check if current accordion item is open
var isOpen = $(this).next().is(":visible");
// Hide all accordion items
accordionContent.hide();
// Open accordion item if previously closed
if (!isOpen) {
$(this).nextUntil('h6').show();
}
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
$('#tab_description h6').first().trigger('click');