Load html elements from separate urls in menu list

Load html elements from separate urls in menu list - javascript

I have a site with navigation like:
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
When a user clicks on any of the links, the main content from each of the urls will be loaded onto one page, and the page scrolls down to the relevant section. I've tried something like below but it doesn't seem like the best solution. Is there a better way of doing this? Thanks. Should also point out that the code below doesn't work correctly, it loads the content more than once and in a random order.
$( "ul > li > a" ).each(function(index) {
var newhref = $(this).attr('href');
$.get(newhref).done(function (html) {
$(".main-copy").append($(html).find(".main-copy"));
});
});

To begin with I would suggest that each link should be inside it's own -li- like this:
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
As for the JQuery, something like this should do the trick:
$( "ul > li > a" ).click(function(){
$(".main-copy").load($(this).attr('href'));
});
I hope that sets you on the right path

Are these links hard-coded or dynamically generated?
In either case, get all these links into a JavaScript Array:var links=['link1','link2'...]
Since you want to dump all the content by navigating through each of these links, you can loop-through links and append content
for(i=0;i<links.length;i++) {
var link = links[i];
$.ajax(link).done(function(htmlContent){
//set contents to some section or div
});
}
Now the links themselves can be a #href tags with-in the page.
My suggestion would be not to navigate using Jquery on UL -> LI path to get the list of links.

If the load thing is working, are you simply looking at the scrolling thing? Try something like this:
// Creating a dummy namespace, as I don't have content to actually load via ajax.
var myNameSpace = {
"link1": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link2": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link3": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link4": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>"
};
// Take each of the navigation elements, and use them to create the content sections
$("nav a").each(function() {
/***
* This would be where you'd first want to load
* your HTML content, rather than using the namespace.
***/
// Get the actual text of the anchor, we'll use that later
var target = $(this).attr("href").substring(1);
// create the section tag...
var myTargetEl = document.createElement("section");
// set the id for the link to use as a target
$(myTargetEl).attr("id", target).append("<h2>" + target + "</h2>").append(myNameSpace[target]);
// Add the section we've created to the content pane
$(".content-pane").append(myTargetEl);
// AND CHANGE THE ACTUAL LINK -- I don't want to reload
// this content every time!
$(this).attr("href", "#" + target);
});
$("nav a").click(function() {
var target = $($(this).attr("href"));
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
})
nav {
position: fixed;
left: 10px;
top: 10px;
float: left;
width: 100px;
background-color: #ccc;
}
.content-pane {
position: relative;
left: 120px;
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
Content 1
Content 2
Content 3
Content 4
</nav>
<div class="content-pane">
</div>
As far as the load thing goes, simply load each link into its own section tag. In fact, use the link list to create the section blocks, so that if you add more navigation elements, they'll load dynamically.
Modified the code so that there are no sections being inserted manually, they're created by the link tags themselves. As to how you'd load them, you seem to be doing that all right -- all you're missing is the changing the link's HREF to point to the appropriate section each time.

Related

How to vertically slide off layers of an image off as the user scrolls down?

If anyone remembers the Apple product page for the cylindrical Mac Pro, the site had a feature that had each layer of the Mac Pro slide off as you continue to scroll down.
I have been looking everywhere for possible indication as to how to code this dynamic page, but I have been unsuccessful.

You can create the animation with CSS class and #keyframes rule, then add the class to your element once it reaches the scroll threshold you set in the conditional within a scroll event listener. Below is not an exact replica of Apples animation, however it will illustrate how one could achieve this with vanilla JS and CSS animations tween.
I further explain how I have done this in the code below...
// get the selector nodes we wish to animate
const images = document.querySelectorAll('#main img');
// create a function and pass in the selector node and the top
// fold position (how far off the top fold you wish to slideOut) as a param
const slideOut = (images, foldPos) => {
// run each element in the nodeList through a loop
images.forEach((el) => {
// add a scroll eventlistener on the window
window.addEventListener('scroll', () => {
// define each elements position using the forEach loop
// el.getBoundingClientRect and get the top position
let elPos = el.getBoundingClientRect().top;
// get the unique ID that was set in the elements we wish to animate
// we'll use this to get the element selector using its ID
let elId = el.id;
// conditional that checks the top position in
// relation to the top fold of page, this will pass
// as a parameter in the main function slideOut()
if (elPos < foldPos) {
// lets target the id selector of the animated element
// that has reached the set threshhold
let slideEl = document.getElementById(el.id);
// lets add our class to the element so the CSS can
// do its animation using an #keyframes rule
// * see the css code `.slideoff` and its `#keyframes` `slideoff` rule
slideEl.className = 'slideoff';
// optional, remove element from display using a timeOut()
// set to work in conjuntion with the CSS animation duration
setTimeout(() => slideEl.style.display = 'none', 500)
}
})
})
}
// call function and pass in the paramter (nodeList, topFoldThreshold)
slideOut(images, 125)
#main {
position: relative;
}
p {
max-width: 50%;
}
#main img {
width: 50%;
height: 50%;
}
.slideoff {
position: relative;
animation: slideoff 1s ease-in-out;
left: 50;
opacity: 0;
height: 50%;
width: 50%;
}
#keyframes slideoff {
0% {
opacity: 1;
top: 0;
left: 0;
}
50% {
opacity: 0;
top: 500px;
}
100% {
left: 10000px;
}
}
SCROLL DOWN
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id
ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec interdum elit. Praesent eu dui mi. Vestibulum facilisis elit in mi convallis, eget consectetur arcu vehicula. Pellentesque ultricies elit tellus, non ultrices erat volutpat at.
Ut dui dolor, tempor nec porta at, aliquet eget urna. Etiam congue vestibulum ante. In et diam sapien. Suspendisse mattis eros eget ex convallis, nec tempor risus lobortis. Quisque ullamcorper libero arcu, quis ultrices magna aliquet non. Donec et ornare
eros. Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis
quis lobortis ut, placerat eget metus.
</p>
<div id="main">
<img id="first" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Background.jpg">
<p>Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam
id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="second" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Backgrounds.jpg">
<p>Ut vel mi facilisis, mattis diam sit amet, consectetur elit. Nam mollis vestibulum enim, posuere blandit sem. Quisque euismod odio est, vel maximus metus efficitur quis. Morbi ac dignissim massa, in egestas ex. Proin efficitur feugiat libero nec ornare.
Duis vel sapien molestie, efficitur lacus et, ullamcorper tortor. Vestibulum sodales viverra porta. Aenean tincidunt velit nisi, non tempus odio vulputate ut. Praesent accumsan urna et turpis pharetra, vitae consequat diam tempor. Vestibulum sed odio
sem.
</p>
<img id="third" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Images.jpg">
<p>Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="fourth" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Picture.jpg">
<p>Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis quis lobortis
ut, placerat eget metus. Vestibulum neque ante, lobortis id accumsan a, pellentesque quis nisl. Quisque ac ante ut arcu faucibus molestie sit amet ac dui. Fusce elit nisi, ullamcorper eu eros eget, tempus suscipit purus. Aenean sed nibh urna. Vestibulum
vehicula dapibus ante at viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed purus urna, condimentum sed dictum quis, blandit vel tellus. Sed pretium elit eros, sed congue lectus dictum in. In auctor diam sit amet augue congue
blandit. Vivamus ut enim in mauris venenatis vulputate. Nulla felis tellus, vestibulum at hendrerit auctor, porta a purus. Aenean ac ante vitae turpis rutrum hendrerit eget nec ante. Phasellus bibendum egestas nisi, ac aliquet mi sollicitudin ac.
Sed bibendum quam et mi bibendum ultricies. Pellentesque nec ante viverra, dictum turpis ac, sollicitudin dolor. Vestibulum ut interdum neque. Cras aliquet porta dui, sit amet luctus mauris egestas et. Aliquam quis imperdiet sapien, sollicitudin facilisis diam. Fusce at commodo sapien. Nam at erat nisl. Sed placerat risus vel consequat congue. Nam ultricies ultricies suscipit. Nunc ultrices, dui ut blandit porta, lorem sem dapibus diam, vitae porta tellus nisi ac nibh. Cras pulvinar laoreet dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
</div>

How to call a function based on element position?

I'm very new to Javascript. I'm trying to make a style change based on an element's position on the screen, but I'm pretty clueless as to how to make it work.
What I'm trying to do is make the background of an element become fixed once the element has reached the top of the page (and return to being unset when you scroll back up). So far I ended up with this code but as you can tell it triggers only when you click it. My question being which event should I use to make it go into action once the user has simply scrolled up to the point I intended?
const page2 = document.getElementById("about");
page2.addEventListener("click", bgFixer);
function bgFixer() {
rect = this.getBoundingClientRect();
if (rect.top <= 0) {
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.page-2{background-attachment: fixed}')
}
}
Thanks in advance! Just a reminder that I'm really new so the more detailed the explanations are the better.

You can test the distance of the scroll by checking scrollTop of your containing element.
If the distance between the top of your "sticky" element and the scrollTop is 0 or less, fix the "sticky" element in place by adding a class with position: fixed; top: 0px;
Since the above changes the position of the "sticky" element, we want to store the original top distance so we know that, when the distance of scrollTop is less than that of the original top distance, we remove the class.
let el = document.querySelector.bind(document),
c = el("#test"),
t = el("#toTop");
c.addEventListener("scroll", function() {
// get inner top distance
let ttop = t.getBoundingClientRect().top;
// get container scroll distance
let ctop = c.scrollTop;
// if the initial top distance isn't set, set it
if (!this.init) this.init = ttop;
// if the inner top is less than or equal to 0 ( no distance )
// and the container scroll is greater than the initial top distance
if (ttop <= 0 && ctop >= this.init) {
// make fixed
t.classList.add("stuck")
} else {
// remove fixed class
t.classList.remove("stuck");
}
});
let el = document.querySelector.bind(document),
c = el("#test"),
t = el("#toTop");
c.addEventListener("scroll", function() {
// get inner top distance
let ttop = t.getBoundingClientRect().top;
// get container scroll distance
let ctop = c.scrollTop;
// if the initial top distance isn't set, set it
if (!this.init) this.init = ttop;
// if the inner top is less than or equal to 0 ( no distance )
// and the container scroll is greater than the initial top distance
if (ttop <= 0 && ctop >= this.init) {
// make fixed
t.classList.add("stuck")
} else {
// remove fixed class
t.classList.remove("stuck");
}
});
body,
html {
height: 100%;
box-sizing: border-box;
margin: 0;
}
#test {
height: 50%;
overflow-y: scroll;
box-sizing: border-box;
}
#toTop::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 -1px red;
}
#toTop {
position: relative;
background: black;
color: white;
top: 300px;
height: auto;
width: 100%;
padding: 0;
margin: 0;
}
#toTop.stuck {
position: fixed;
top: 0px;
}
#after {
height: 1200px;
}
<div id="test">
<div id="toTop">test</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Suspendisse ultrices gravida dictum fusce ut placerat orci. Neque volutpat
ac tincidunt vitae semper. Ac turpis egestas integer eget aliquet. Consectetur adipiscing elit duis tristique sollicitudin. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id consectetur purus ut faucibus pulvinar elementum
integer. Aliquet enim tortor at auctor urna nunc id. In fermentum et sollicitudin ac orci phasellus egestas tellus. Risus nullam eget felis eget.</p>
<p>
Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Orci dapibus ultrices in iaculis nunc sed augue lacus. Sit amet venenatis urna cursus. Est velit egestas dui id ornare arcu odio ut. Consequat mauris nunc congue nisi vitae suscipit tellus
mauris a. Ipsum dolor sit amet consectetur adipiscing elit. Dolor purus non enim praesent elementum facilisis. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Quam vulputate dignissim suspendisse in. Elementum pulvinar etiam
non quam lacus suspendisse. Sed augue lacus viverra vitae congue eu consequat ac felis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie.
</p>
<p>
Sed libero enim sed faucibus. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Diam vel quam elementum pulvinar etiam non. Molestie ac feugiat sed lectus vestibulum mattis. Quisque sagittis purus sit amet volutpat. Ac turpis egestas
integer eget aliquet nibh praesent tristique magna. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Faucibus a pellentesque sit amet porttitor eget. Massa massa ultricies mi quis hendrerit dolor. Metus vulputate eu scelerisque felis
imperdiet proin fermentum. Bibendum neque egestas congue quisque egestas diam in. Duis at consectetur lorem donec massa. Eu consequat ac felis donec et. In tellus integer feugiat scelerisque varius morbi enim. Nulla facilisi morbi tempus iaculis urna
id. Mauris commodo quis imperdiet massa tincidunt nunc. Egestas purus viverra accumsan in. Malesuada proin libero nunc consequat interdum varius. Pulvinar elementum integer enim neque volutpat ac tincidunt.
</p>
<p>
Laoreet id donec ultrices tincidunt arcu non sodales. Tempor id eu nisl nunc mi ipsum. Urna molestie at elementum eu facilisis sed odio. Mauris pharetra et ultrices neque ornare aenean. Placerat vestibulum lectus mauris ultrices eros in. Feugiat nibh
sed pulvinar proin gravida hendrerit. Nisl suscipit adipiscing bibendum est. Pretium nibh ipsum consequat nisl vel pretium. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor morbi non arcu risus. Nam aliquam sem et
tortor consequat id porta nibh. Sagittis nisl rhoncus mattis rhoncus.
</p>
<p>
Tellus molestie nunc non blandit massa enim nec dui. A iaculis at erat pellentesque. Nibh cras pulvinar mattis nunc. Nunc consequat interdum varius sit. Tortor at risus viverra adipiscing at in. Sed faucibus turpis in eu. Nunc faucibus a pellentesque
sit. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Aliquam ultrices sagittis orci a. Sagittis eu volutpat odio facilisis mauris sit. Risus at ultrices mi tempus. Libero volutpat sed cras ornare. Risus ultricies tristique nulla
aliquet enim tortor. Augue lacus viverra vitae congue. Sit amet mattis vulputate enim nulla aliquet porttitor. Risus in hendrerit gravida rutrum.
</p>
<p>
Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Orci dapibus ultrices in iaculis nunc sed augue lacus. Sit amet venenatis urna cursus. Est velit egestas dui id ornare arcu odio ut. Consequat mauris nunc congue nisi vitae suscipit tellus
mauris a. Ipsum dolor sit amet consectetur adipiscing elit. Dolor purus non enim praesent elementum facilisis. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Quam vulputate dignissim suspendisse in. Elementum pulvinar etiam
non quam lacus suspendisse. Sed augue lacus viverra vitae congue eu consequat ac felis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie.
</p>
<p>
Sed libero enim sed faucibus. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Diam vel quam elementum pulvinar etiam non. Molestie ac feugiat sed lectus vestibulum mattis. Quisque sagittis purus sit amet volutpat. Ac turpis egestas
integer eget aliquet nibh praesent tristique magna. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Faucibus a pellentesque sit amet porttitor eget. Massa massa ultricies mi quis hendrerit dolor. Metus vulputate eu scelerisque felis
imperdiet proin fermentum. Bibendum neque egestas congue quisque egestas diam in. Duis at consectetur lorem donec massa. Eu consequat ac felis donec et. In tellus integer feugiat scelerisque varius morbi enim. Nulla facilisi morbi tempus iaculis urna
id. Mauris commodo quis imperdiet massa tincidunt nunc. Egestas purus viverra accumsan in. Malesuada proin libero nunc consequat interdum varius. Pulvinar elementum integer enim neque volutpat ac tincidunt.
</p>
<p>
Laoreet id donec ultrices tincidunt arcu non sodales. Tempor id eu nisl nunc mi ipsum. Urna molestie at elementum eu facilisis sed odio. Mauris pharetra et ultrices neque ornare aenean. Placerat vestibulum lectus mauris ultrices eros in. Feugiat nibh
sed pulvinar proin gravida hendrerit. Nisl suscipit adipiscing bibendum est. Pretium nibh ipsum consequat nisl vel pretium. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor morbi non arcu risus. Nam aliquam sem et
tortor consequat id porta nibh. Sagittis nisl rhoncus mattis rhoncus.
</p>
<p>
Tellus molestie nunc non blandit massa enim nec dui. A iaculis at erat pellentesque. Nibh cras pulvinar mattis nunc. Nunc consequat interdum varius sit. Tortor at risus viverra adipiscing at in. Sed faucibus turpis in eu. Nunc faucibus a pellentesque
sit. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Aliquam ultrices sagittis orci a. Sagittis eu volutpat odio facilisis mauris sit. Risus at ultrices mi tempus. Libero volutpat sed cras ornare. Risus ultricies tristique nulla
aliquet enim tortor. Augue lacus viverra vitae congue. Sit amet mattis vulputate enim nulla aliquet porttitor. Risus in hendrerit gravida rutrum.
</p>
</div>

This can be done very easily now with position: sticky; it will change between fixed and static when it is at top: 0; defined only in CSS.
Learn more about sticky positioning: https://www.w3schools.com/howto/howto_css_sticky_element.asp
.top {
position: sticky;
top: 0;
background: red;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.
top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.

jQuery Scrollbar on window resize not working

I am using jquery scrollbar plugin for my website. Everything is working good. But when I resize window in mozilla and make scroll div and resize again its looks uneven scrollbar.
How to make the custom scrollbar will be visible if the browser resize also.
script I have tried:
$('.scroll-lmenu').scrollbar({
autoUpdate :true,
autoScrollSize: true
});
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>

Mozilla does have some extensions for manipulating the scroll-bars but they are all recommended not to be used.
-moz-scrollbars-none They recommend using overflow:hidden in place of this.
-moz-scrollbars-horizontal Similar to overflow-x
-moz-scrollbars-vertical Similar to overflow-y
-moz-hidden-unscrollable Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.
Mozilla Developer Docs on 'Overflow'
Further details about Mozilla
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute: scrollbars
Type: nsIDOMBarProp
Description: The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only
Last but not least, padding is like magic.
As has been previously mentioned in some other answers, here is an illustration which is sufficiently self-explanatory

That was you body's scroll bar disable the body's overflow-y.
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
body{
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>
Use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead.
Link To developer.mozilla.org

You can add max-height:100vh and remove body margin margin:0
$(document).ready(function() {
$('.scrollbar-inner').scrollbar();
});
body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet" />
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>

body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: overflow-x ;
}

You can directly hide the scroll bar by
.scrollbar-inner > .scroll-element{ display:none;}

Try not Using
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
https://codepen.io/sheetalsinghwd/pen/povoYbv
like this

try adding the following to document ready
$(".scrollbar-inner").hover(function() {
$("body").css("overflowY", "hidden");
});
$(".scrollbar-inner").mouseleave(function() {
$("body").css("overflowY", "auto");
});

how to add Wordpress phpshortcode into HTML page or custom template?

I need to call a wordpress plugin shortcode to a different html page, this html page is not in wordpress pages or posts.
I want to add the phpshortcode [<?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?>] of search bar as a fixed header in my template
-i tried By Adding the php code to call in Html Page Below .
It does nothing, no output of any sort.
So how can I call wordpress plugin functions and their shortcodes to a html page file.
Thanks
---Html Template Below----
Project 1
https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<script type="text/javascript">
var currentIndex = 0;
var currentId = "camera";
var dragStarted = false;
$(document).ready(function() {
$(document).on("menuready",function(event){
$("html,body").css("background","#1abc9c");
console.log(event);
});
$(document).on("menudrag",function(event){
if(!dragStarted){
dragStarted = true;
$("#overlay").show();
$("#overlay").transition({
opacity : 1
},300);
}
});
$(document).on("menudragend",function(event){
var curr = eval("colors."+currentId);
$("#overlay").transition({
opacity : 0
},300,function(){
$("#overlay").hide();
dragStarted = false;
});
setTimeout(function(){
$(".ferromenu-controller,#nav li a").css("color",curr.background);
},250);
});
$("#nav").ferroMenu({
position : "left-center",
delay : 50,
rotation : 720,
margin : 20,
opened : true
});
});
var colors = {
"camera" : {
"background" : "#1abc9c",
"index" : 0
},
"user" : {
"background" : "#f39c12",
"index" : 1
},
"mapmarker" : {
"background" : "#e67e22",
"index" : 2
},
"music" : {
"background" : "#8e44ad",
"index" : 3
},
"commentalt" : {
"background" : "#34495e",
"index" : 4
},
"moon" : {
"background" : "#3498db",
"index" : 5
}
};
function goTo(id){
var obj = eval("colors."+id);
$("body").css("background",obj.background);
$(".ferromenu-controller,#nav li a").css("color",obj.background);
if(obj.index > currentIndex){
$(".active").addClass("off");
$(".active").transition({
scale : 0.1,
opacity : 0,
zIndex : 0
},600);
$("#"+currentId).removeClass("active");
$("#"+id).addClass("active");
$("section").addClass("hideScroll");
$("#"+id).transition({
scale : 3,
y : 0
},0,function(){
$("#"+id).removeClass("off");
$("#"+id).transition({
scale : 1,
opacity : 1,
zIndex : 2
},600,function(){
$("section").removeClass("hideScroll");
});
});
}else if(obj.index < currentIndex){
var oldElement = $(".active");
$(".active").addClass("off");
$(".active").transition({
scale : 3,
opacity : 0,
zIndex : 0
},600);
$("#"+currentId).removeClass("active");
$("#"+id).addClass("active");
$("section").addClass("hideScroll");
$("#"+id).transition({
scale : 0.1,
y : 0
},0,function(){
$("#"+id).removeClass("off");
$("#"+id).transition({
scale : 1,
opacity : 1,
zIndex : 2
},600,function(){
$(oldElement).transition({
y : -2000
},100,function(){
$("section").removeClass("hideScroll");
});
});
});
}
currentIndex = obj.index;
currentId = id;
}
</script>
</head>
<body>
<ul id="nav">
<li><i class="icon-camera"></i></li>
<li><i class="icon-user"></i></li>
<li><i class="icon-map-marker"></i></li>
<li><i class="icon-music"></i></li>
<li><i class="icon-comment-alt"></i></li>
<li><i class="icon-moon"></i></li>
</ul>
<section id="content">
<div id="overlay"></div>
<article id="camera" class="active">
<i class="icon-camera"></i>
<h1>Camera</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
<article id="user" class="off">
<i class="icon-user"></i>
<h1>User</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
<article id="mapmarker" class="off">
<i class="icon-map-marker"></i>
<h1>Marker</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
<article id="music" class="off">
<i class="icon-music"></i>
<h1>Music</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
<article id="commentalt" class="off">
<i class="icon-comment-alt"></i>
<h1>Comment</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
<article id="moon" class="off">
<i class="icon-moon"></i>
<h1>Moon</h1>
<div class="cnt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh libero, tempor eget nunc eget, dapibus lacinia augue. Praesent ut feugiat sapien. Mauris facilisis varius urna vel ullamcorper. Donec a ipsum magna. In scelerisque enim dolor, sit amet fringilla magna ultricies in. In nulla nisi, ornare ut placerat vel, sollicitudin ut sem. Aliquam eleifend lectus a orci fermentum, a gravida lorem ornare. Etiam purus dui, dignissim vitae laoreet ut, elementum at orci. Duis vitae luctus tortor. Phasellus risus orci, pulvinar quis dignissim id, scelerisque quis metus. Nulla facilisi. Maecenas semper lorem id eros ultricies vestibulum. Sed dapibus laoreet scelerisque. Sed suscipit ante sit amet lacus ultrices, ut faucibus justo malesuada. Curabitur id tristique enim. Phasellus nec dapibus ipsum.
<br/><br/>
Sed in lectus aliquet, iaculis turpis ac, scelerisque ante. Nullam nec quam ac neque porttitor semper at eget neque. Maecenas auctor dolor felis, id tempus dui mollis in. Duis bibendum nunc augue, eu ornare dolor dapibus sed. In nec facilisis purus. Nulla at tincidunt velit. Quisque arcu lorem, pulvinar rutrum lectus vel, feugiat interdum ligula. Sed in placerat nisl, nec dictum risus. Curabitur eleifend commodo purus, quis tempor odio. Suspendisse ullamcorper augue sit amet urna varius aliquam. Morbi nibh dolor, sollicitudin in blandit id, tempus eget magna. Phasellus sem leo, luctus a tortor ac, auctor bibendum massa. Sed quis enim ultricies mi feugiat mattis eu nec nunc. Pellentesque consectetur risus vel adipiscing luctus. Vivamus iaculis gravida odio sit amet scelerisque. Phasellus nec nisi orci.
</div>
</article>
</section>
</body>

You don't want to run the short code. It's really impossible because shortcodes are meant to work with the WordPress CMS. The best thing to do is the following
Import the PHP file that the short code was created. Then use the function rather than the short code for the desired code within the HTML/PHP file you want.
Remember Once you leave the WordPress CMS shortcodes are virtually useless. Good luck.

change the file name to .php and do <?php require( '../wp-load.php' ); // if file is in your wp-contents folder then you can call your shirtcode this way <?php echo do_shortcode('[wpdreams_ajaxsearchlite]'); ?> in your .php file.
and you cant add php in your html, you have to change file extention to .php.
<?php
require( '../wp-load.php' );
echo do_shortcode('[wpdreams_ajaxsearchlite]');
?>

synchronized scrolling for 3(+) elements?

I am trying to implement synchronized scrolling for more than two DIV using the code below as a launching point. All DIV are same height and width, with a varying number of characters. The percentage sync works perfectly for #div1 and #div2 (it's really quite beautiful). But I'm unable to get the third DIV to behave despite hours of fiddling (everything I've tried is glitchy and clunky). I'm new to this so I'm hoping someone can assist!
$(document).ready(function() {
var $divs = $('#div1, #div2');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
});
jsfiddle.net/84oz9boL/11 When I add ,#div3 the scrolls behave erratically...
var $divs = $('#div1, #div2');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
div {
overflow: scroll;
float: left;
text-align: justify;
}
#div1 {
height : 400px;
width: 200px;
}
#div2 {
height : 400px;
width: 200px;
margin-left: 50px;
}
#div3 {
height : 400px;
width: 200px;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>

If performance is the issue, have you tried not constructing other at all and just defining percentage, turning off the scroll on .not(this) elements, then going with $divs.not(this).scrollTop = percentage * ($divs.not(this).scrollHeight - $divs.not(this).offsetHeight)?

Since you're referencing multiple divs, you need to treat apply the scrollTop to each one of them. In you current code, you write other.get(0), which only target the first of the siblings.
I rewrote your code below to iterate over the array of siblings. Here's the link: http://jsfiddle.net/84oz9boL/16/
var $divs = $('#div1, #div2, #div3');
var sync = function(e){
var $other = $divs.not(this).off('scroll'),
percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
$other.each(function (index, other) {
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

Develop Reference

JavaScript is the programming language of the Web.