can someone please help me & explain this example for the pageYOffset?
var frame = document.getElementById("frame");
var frameDoc = frame.contentDocument;
var info = document.getElementById("info");
var target = frameDoc.getElementById("overview");
frameDoc.scrollingElement.scrollTop = target.offsetTop;
info.innerText = "Y offset after scrolling: " +
frame.contentWindow.pageYOffset + " pixels";
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset
I'm trying to apply it to on my page but it doesn't work.
I'm getting this error:
app.js:23 Uncaught TypeError: Cannot read property 'getElementById' of undefined
at app.js:23
JavaScript
// Get the offset position of the navbar
const allSections = document.querySelectorAll("allSections");
const allSectionsDoc = allSections.contentDocument;
const section = allSectionsDoc.getElementById("section1");
allSectionsDoc.scrollingElement.scrollTop = section.offsetTop;
section.innerText = "Y offset after scrolling: " +
allSections.contentWindow.pageYOffset + " pixels";
HTML
<div id="allSections">
<section id="section1" data-nav="Section 1" class="your-active-class section">
<div class="landing__container active">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
window.addEventListener('load', getNaveBar, false)
// Get the offset position of the navbar
var getNaveBar = function(){
const allSections = document.querySelectorAll("allSections");
const allSectionsDoc = allSections.contentDocument;
const section = allSectionsDoc.getElementById("section1");
allSectionsDoc.scrollingElement.scrollTop = section.offsetTop;
section.innerText = "Y offset after scrolling: " +
allSections.contentWindow.pageYOffset + " pixels";
}
Related
I have 3 paragraphs, using Javascript I have made the paragraph replicate once I hit a button as many times as possible.
I need the replicated paragraphs to be randomized at every hit of the button.
NOTE: I only need to add the Js code that makes the paragraph appear in randomized order. What you see is that the paragraphs appear correctly. I need it to appear randomly.
Here is my code.
const element = document.getElementsByTagName("p");
function myFunction() {
document.getElementById("demo").innerHTML += element[0].innerHTML + "<br>" + "<br>" + element[1].innerHTML + "<br>" + "<hr>" + element[2].innerHTML + "<br>" + "<br>";
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, world</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto"> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code></p>
<p id="demo"></p>
<p id="demo"></p>
<p id="demo"></p>
<button onclick="myFunction()">Hit me</button>
We can get the paragraphs and store then in an array then shuffle them and add them back to the html
there are more details in the code comments below
var pElements = [];
document.querySelectorAll("p").forEach(
p => { pElements.push(p.innerHTML);
});
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
function myFunction() {
var shuffledArray = shuffle(pElements);
var newDiv = "<div class='pOrder'";
for(var i = 0; i < shuffledArray.length; i++){
newDiv += "<p>" + shuffledArray[i] + "</p>";
}
newDiv += "</div><br><br>";
document.getElementById("content").innerHTML += newDiv;
}
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros
</p>
<p>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto" /> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code>
</p>
<br>
<br>
<div id="content">
</div>
<button onclick="myFunction()">Hit me</button>
I have a project where i'm trying to set the classes as active from a dynamically created nav bar.
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active_class">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci
eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam
in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.
</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet
porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
Right now here is the code for my javascript that is creating the nav bar
const sections = document.querySelectorAll('section');
const ul = document.createElement('ul');
document.getElementById('navbar__list').appendChild(ul);
//loop through elements to grab the data-nav elements
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const li = document.createElement('li');
li.addEventListener('click', function clickHandler() {
location.hash = section.id;
// add class to section
// remove class from sibling sections
// add class to section links
// remove class from sibling section links
});
li.textContent = section.dataset.nav;
ul.appendChild(li);
And I have a tiny piece of jquery to set the li elements as active
$(document).on('click', 'ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
How do I get the classes as active only when they are in the viewport?
Currently just started developing a UWP WinJS app, testing on Windows 10 Mobile.
I have an appbar and a contenteditable div - if I press a button on the appbar to bold some word in the content area, the div will bold it, but will also jump completely to the top when editor.focus() is called. I'd like for it to stay in its current position.
What I'm trying to do is to have the keyboard appear even when a button is pressed on the AppBar. (Without editor.focus(), the keyboard disappears on button tap.) Unfortunately, with that additional line of code, I have the above scrolling issue.
<div id="editor" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique convallis aliquet. Proin ac urna ut diam luctus facilisis vel in ligula. Morbi porta volutpat est eget semper. Sed elementum tincidunt libero. Cras a felis leo. Fusce lacinia turpis vel turpis facilisis sollicitudin. Suspendisse blandit, nisi gravida fermentum placerat, velit ipsum volutpat mi, ut finibus enim mauris at massa. Etiam placerat et mi eget iaculis. Aliquam et semper nisl. Integer id magna non sapien tempus suscipit at eget sem. Integer quam risus, placerat sit amet iaculis ac, ultrices non diam. Aliquam at convallis velit, vitae iaculis lectus. Morbi non orci eget mi placerat aliquet. Sed at neque a eros efficitur egestas. Donec sed luctus leo, ac ullamcorper dui.
Nullam volutpat ultricies leo, ut congue risus egestas euismod. Suspendisse nisi ligula, volutpat id tempor convallis, facilisis in justo. Nulla porta neque eget ante tincidunt pellentesque. Integer felis libero, rutrum eu interdum eu, finibus a felis. Vestibulum vel est dictum, tempor ex vel, facilisis lorem. Nulla facilisi. Nulla ut ornare tortor, vitae blandit augue. Quisque imperdiet pretium turpis, ac fermentum diam imperdiet vitae. Pellentesque vel mollis odio. Quisque tempus eget neque non pretium.
Cras eu velit sit amet dolor pulvinar ultricies at id lectus. Suspendisse quis metus sem. Etiam lectus mauris, lobortis volutpat consectetur at, sodales in nisl. Fusce euismod magna in leo tempor, quis bibendum leo gravida. Nulla varius velit vel ultrices sollicitudin. Morbi at odio efficitur, iaculis odio ut, auctor mauris. Phasellus nec lacus arcu. Duis porttitor, urna sit amet tempor dapibus, velit libero malesuada erat, eget pulvinar velit quam id leo. Quisque vulputate vehicula ante, vel condimentum dui consectetur eget.
Curabitur lobortis porta justo quis pulvinar. Aliquam quam nisl, aliquam vel risus et, semper molestie nulla. Aenean mollis facilisis odio vel convallis. Suspendisse vestibulum nec sapien ut pretium. Duis vehicula, mi sed rutrum luctus, odio magna hendrerit nisl, laoreet eleifend augue neque vestibulum dui. Proin vitae metus convallis, condimentum enim in, volutpat nisl. Aliquam at est id felis placerat fermentum. Duis suscipit commodo convallis. Aliquam imperdiet mollis tortor, sit amet placerat tellus malesuada in. Nunc fringilla sem lorem, nec efficitur purus lobortis mollis. Duis non eros aliquam, luctus libero sed, ullamcorper odio.
Fusce orci est, rutrum non urna a, finibus suscipit dolor. Mauris suscipit mi ut dolor cursus, quis laoreet est porta. Etiam bibendum fringilla turpis et sagittis. Aenean vehicula maximus dui ut pretium. Vestibulum iaculis id sapien nec condimentum. Donec a aliquet enim. Donec non mauris convallis, tincidunt elit sit amet, ultrices nulla. Duis vel auctor nisl, vitae ultrices mi. Suspendisse potenti. Vivamus sit amet lacus urna. Fusce a sagittis risus. Cras facilisis porta purus, vitae scelerisque mauris vehicula eu.
</div>
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom', sticky: 'true'}" style="background-color: #e6e6e6;">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'boldBtn', icon: 'bold', section:'selection', tooltip:'bold'}"></button>
</div>
Javascript:
element.querySelector("#boldBtn").addEventListener("click", toggleBold, false);
function toggleBold() {
document.execCommand('bold', false, null);
editor.focus(); // this will cause the div to jump back to the top if it's not already at the top
}
Tried another solution using tryShow(), to detect when the keyboard is about to be hidden. Once detected, force the keyboard to appear. Also, show the AppBar (since it disappeared), place the editor in focus and then scroll back to where you were before. This takes a few seconds to execute and the scrolling is too obvious for it to be a viable solution.
If you want to scroll the screen to your selected position, you should calculate the offset of the coordinate, which is moved cause by the showing of a software keyboard.
Here is my Javascript code:
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var userHeight, cursorY0, range;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize your application here.
} else {
// TODO: This application was suspended and then terminated.
// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
}
args.setPromise(WinJS.UI.processAll().done(
function () {
//var editor = document.getElementById("editor");
//editor.addEventListener("click", toggleBold, false);
var button = document.getElementById("boldBtn");
var text = document.getElementById("editor");
var oRange = document.createRange();
button.addEventListener("click", toggleBold, false);
text.addEventListener('mouseup',function(e){
if (window.getSelection) {
var selection = window.getSelection();
} else if (document.selection) {
var selection = document.selection.createRange();
}
range = selection.getRangeAt(0);
cursorY0 = window.event.pageY;
console.log(cursorY0);
})
/*text.addEventListener("click", function () {
cursorY0 = window.event.pageY;
console.log(cursorY0);
}, false);*/
//console.log(window.innerHeight);
userHeight = window.innerHeight;
})
);
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
};
function toggleBold() {
var text = document.getElementById("editor");
//Array.prototype.slice.apply(document.querySelectorAll("b")).forEach(function (b) {
// b.parentNode.replaceChild(b.firstChild, b);
//});
text.focus();
var currentHeight = window.innerHeight;
var cursorY1 = window.event.pageY;
if (cursorY1 > currentHeight) {
window.scrollTo(0, currentHeight - (cursorY1 - cursorY0));
}
var selectionContents = range.extractContents();
var boldDom = document.createElement("b");
boldDom.appendChild(selectionContents);
range.insertNode(boldDom);
}
app.start();
})();
This is a Non-JQuery method, I think you can also import a JQuery package, and use the method here to calculate the offset.
I'm doing a test to perform a non-bloking script in order to render a large jQuery-UI accordion, so instead of using a loop, which will always block the browser until done, I'm trying with timers to render each part separately, but it seems to create an infinite loop (not sure why since it should reach the exit condition):
(function(){
var accordion = $('.accordion').accordion({collapsible: true});
var source = $('.source');
var sourceCopy, timerCount = 0, times = 100;
var createNewTab = function(i) {
sourceCopy = source.children().clone();
sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
accordion.accordion('refresh');
};
(function run(){
var timer;
createNewTab(timerCount);
timerCount++;
/*while (timerCount < times) { // commented out to avoid endless loop
timer = setTimeout(run, 0);
}*/
// OLD BROWSER-BLOCKING VERSION WITH LOOP. IT WORKS BUT BLOCKS BROWSER UNTIL DONE
/*for (var i = 0; i < times; i++) {
createNewTab(i);
}*/
})();
})();
The HTML:
<div class="source">
<h3>title</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.
<p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
</div>
</div>
<div class="accordion"></div>
The source code here
How could I work it out?
Replace while with if. Your setTimeout already does the looping by calling the function over and over until timerCount == times.
(function(){
var accordion = $('.accordion').accordion({collapsible: true});
var source = $('.source');
var sourceCopy, timerCount = 0, times = 100;
var createNewTab = function(i) {
sourceCopy = source.children().clone();
sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
accordion.accordion('refresh');
};
(function run(){
var timer;
createNewTab(timerCount);
timerCount++;
if (timerCount < times) {
timer = setTimeout(run, 0);
}
})();
})();
.source {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="source">
<h3>title</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.
<p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
</div>
</div>
<div class="accordion">
</div>
Fixed JS Fiddle
I just try to function call into the dragScroll event. But it is not give any response. I try the following script.
$('.container').dragScroll({
stop: function() {
alert();
}
});
How can i do it.? And what is my mistake.?
I added events to the plugin.
how to use:
$('#container').dragScroll({
start: startDrag,
dragging: dragging,
stop: stopDrag
});
dragscroll.js
/*
DraggScroll is a JQuery extension for scrolling by clicking and dragging from within a container.
Author: James Climer (http://climers.com)
Released under the Apache V2 License: http://www.apache.org/licenses/LICENSE-2.0.html
Requires JQuery: http://jquery.com
Get latest version from: https://github.com/jaclimer/JQuery-DraggScroll
EDIT Emmanuel Delay: extra event handlers: 'start', 'stop', 'dragging'.
#see http://stackoverflow.com/questions/30862588/dragscroll-stop-event-was-not-working
*/
(function ($) {
$.fn.dragScroll = function (options) {
/* Mouse dragg scroll */
var x, y, top, left, down;
var $scrollArea = $(this);
$($scrollArea).attr("onselectstart", "return false;"); // Disable text selection in IE8
$($scrollArea).mousedown(function (e) {
e.preventDefault();
down = true;
x = e.pageX;
y = e.pageY;
top = $(this).scrollTop();
left = $(this).scrollLeft();
if (typeof options.start === 'function') {
options.start(e);
}
});
$($scrollArea).mouseleave(function (e) {
down = false;
// this stops the scroll, so let's also call options.stop()
if (typeof options.stop === 'function') {
options.stop(e);
}
});
$("body").mousemove(function (e) {
if (down) {
var newX = e.pageX;
var newY = e.pageY;
$($scrollArea).scrollTop(top - newY + y);
$($scrollArea).scrollLeft(left - newX + x);
if (typeof options.dragging === 'function') {
options.dragging(e);
}
}
});
$("body").mouseup(function (e) {
down = false;
if (typeof options.stop === 'function') {
options.stop(e);
}
});
};
})(jQuery);
Example:
<style>
#container {
height: 400px;
width: 500px;
border: 1px solid #000;
overflow: auto;
}
</style>
<div id="container">
<div style="width:800px;padding:10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum tellus nec gravida venenatis. Fusce tempor fermentum leo, ac condimentum orci gravida eget. Nam pellentesque, sapien vitae elementum posuere, libero est accumsan libero, a ultricies augue nisi eu nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin risus neque, non porta mi vehicula sed. Nam semper imperdiet libero, eget ornare mauris. Aliquam sodales congue ante nec molestie. In ac nulla vitae ante lacinia pulvinar. Morbi vehicula nisl ante, sit amet convallis massa facilisis quis. Vestibulum vulputate est a augue dictum ultricies.</p>
<p>In eget est vitae libero vulputate dictum vel ac felis. Maecenas et tortor nec felis posuere viverra ut eget elit. Phasellus eu pellentesque sapien. Morbi porttitor nulla eget libero viverra consequat. Nunc metus nisi, gravida eu elit sed, cursus malesuada orci. Phasellus tempus enim vitae arcu imperdiet porta. Vestibulum eu nisl congue, aliquam turpis quis, vulputate odio. Quisque sed rhoncus elit. Proin viverra molestie malesuada. Phasellus scelerisque tristique nisi adipiscing aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel dictum dolor, ac congue libero. Sed adipiscing pretium massa vel imperdiet. In faucibus sed arcu eu sodales.</p>
<p>In dapibus rutrum mi, a posuere orci venenatis a. Suspendisse ligula nisl, bibendum eu vehicula eu, dictum pharetra tellus. Aenean vel mattis felis. Maecenas est tellus, aliquam in velit nec, mattis imperdiet est. Nullam mattis condimentum ante tempus eleifend. Aliquam dapibus nibh diam, non dictum erat pharetra in. Quisque posuere nulla vitae massa sagittis porta. Ut lacinia lorem vitae blandit ornare. Integer porta nunc eget nibh blandit, vel laoreet metus laoreet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at risus justo. Proin sit amet porttitor justo. Sed augue dolor, fermentum non ornare vitae, pellentesque a turpis. Vestibulum porta posuere aliquet. Cras vel interdum ligula, vitae tempus dolor. Cras non arcu in massa bibendum vestibulum et eget leo. Phasellus felis metus, dapibus quis pharetra sed, porttitor eu risus. Proin cursus turpis non turpis posuere facilisis.</p>
<p>Maecenas venenatis massa vitae lacinia rhoncus. Suspendisse fringilla mattis enim id elementum. Pellentesque id tempus sapien, ut laoreet erat. Curabitur consectetur enim vel condimentum luctus. Duis eu sapien nunc. Nulla porta gravida nulla nec lobortis. Donec a ultricies quam, ac aliquet quam. Sed commodo luctus fringilla. Integer eu malesuada nisi, vitae laoreet turpis. Duis nec ligula sed nisi accumsan egestas. Pellentesque at volutpat nunc. Proin pretium elit sem, egestas ornare purus fermentum sit amet. Donec pharetra libero id odio molestie lacinia ut sed urna.</p>
</div>
</div>
<div id="display"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dragscroll.js"></script>
<script>
// user functions
function startDrag(e) {
// notice: this gets executed, but immediatly the event 'dragging' takes over
document.getElementById('display').innerHTML = 'Dragging started';
}
function dragging(e) {
document.getElementById('display').innerHTML = 'Dragging';
}
function stopDrag(e) {
document.getElementById('display').innerHTML = 'Dragging stopped';
}
$(document).ready(function() {
$('#container').dragScroll({
start: startDrag,
dragging: dragging,
stop: stopDrag
});
});
</script>
No such event available in your this plugin.