Develop Reference

Scroll on div without triggering full page scroll in angular

I have a website which have one page scroll feature using this - https://alvarotrigo.com/angular-fullpage/
Now in this website, In one page I want to create a division inside which the fullpage scroll feature is disabled and I can scroll that division as normal - like this https://stackblitz.com/edit/angular-kqvraz?file=src%2Fapp%2Fapp.component.html
What I have done till now -
app.component.html
<app-navbar></app-navbar>
<div fullpage id="fullpage2" [options]="config" (ref)="getRef($event)">
<div class="section" id="banner">
//first section
</div>
<div class="section" id="demos">
//second section
</div>
<div class="section" id="prod-solution">
// third section
</div>
<div class="section" id="scroll-solution">
<div style="height: 200px; border: 1px solid; overflow: auto;">
// div where I want to disable full page scroll and enable normal scroll
<div>
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
config: any;
fullpage_api: any;
constructor() {
// for more details on config options please visit fullPage.js docs
this.config = {
// fullpage options
licenseKey: 'YOUR LICENSE KEY HERE',
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#menu',
// fullpage callbacks
afterResize: () => {
console.log("After resize");
},
afterLoad: (origin, destination, direction) => {
console.log(origin.index);
}
};
}
getRef(fullPageRef) {
this.fullpage_api = fullPageRef;
}
}

You should catch the wheel event on the DIV that shouldn't trigger the fullpage scroll and only scroll this element.
Code
Modify the section of your code to match the following one:
<div style="height: 200px; border: 1px solid; overflow: auto;">
<!-- add a scroll event listener -->
<div (wheel)="blockScroll($event)">
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
Add the event listener in your app.component.ts:
blockScroll(e) {
let delta = e.deltaY || -e.detail;
e.currentTarget.scrollTop += delta * 30;
e.stopPropagation();
e.preventDefault();
}
Demo
I added a scrolling container in "Section 2" that will only scroll its own content without triggering the fullpage scroll.
Demo on StackBlitz
If you want other scroll events like touch to be handled as well you need to add the relevant event to the <div> as well.

For scrolling on pages higher than 100vh, We want scrolling to be done normally and when we get to the bottom of the page, do a full scroll.
For this purpose, you can use the fullpage.js package, which requires a license. But by typescript, it can be easily implemented.
sample in stackblitz
in file.html use (mousewheel):
<div class="container" id="main-container"
(mousewheel)="changeMouseWheel($event)">
<div class="panel" id="el1"></div>
<div class="panel" id="el2"></div>
<div class="panel" id="el3"></div>
<div class="panel" id="el4"></div>
<div class="panel" id="el5"></div>
<div class="panel" id="el6">
<h1>whit long height</h1>
</div>
</div>
in fil.css:
.panel{
width: 100%;
height: 100vh;
}
#el1 {background-color: antiquewhite}
#el2 {background-color: aliceblue}
#el3 {background-color: beige}
#el4 {background-color: aqua}
#el5 {background-color: #00ffae
}
#el6 {height: 200vh; background-color: #6200ff
}
in file.ts:
changeMouseWheel(e) {
const sectionCount = document.querySelectorAll('.panel').length;
const windowHeight = window.innerHeight;
if (e.deltaY < 0 && this.sectionNumber > 1) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber -= 1;
const element = document.getElementById(`el${this.sectionNumber}`);
this.scroll(element.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
if (e.deltaY > 0 && this.sectionNumber < sectionCount) {
const currentElement = document.getElementById(`el${this.sectionNumber}`);
if (((currentElement.offsetTop + currentElement.offsetHeight) - windowHeight) <= document.documentElement.scrollTop) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber += 1;
console.log(`#el${this.sectionNumber}`);
const nextElement = document.getElementById(`el${this.sectionNumber}`);
this.scroll(nextElement.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
}
}
scroll(topData: number, leftData: number) {
window.scrollTo({
top: topData,
left: leftData,
behavior: 'smooth'
});
}

Make sticky/fixed element stop at footer

I'm trying to make the side bar stop following the user's scroll once it hits the footer. Right now I set the z-index to -2 so that it goes behind the footer, but it sticks out a tiny bit.
JavaScript
$(document).ready(function () {
var floatingDiv = $('#side_bar');
var floatingDivPosition = floatingDiv.position();
$(window).scroll(function (){
var scrollBarPosition = $(window).scrollTop();
if(scrollBarPosition >= floatingDivPosition.top) {
floatingDiv.css({
'position': 'fixed',
'top': 55,
'width': '18.6676%',
'z-index': -2
});
}
else{
floatingDiv.css({
'position': 'relative',
'top': 0,
'width': '79.4392%'
});
}
});
});
HTML
<div id="content">
<div id="col_1">
<div id="side_bar">
<h4 id="cater_to">We cater to</h4>
<button class="side_bar_btns">Contractor</button>
<button class="side_bar_btns">Wood/Sport Floors</button>
<button class="side_bar_btns">Grocery/Commercial</button>
<button class="side_bar_btns">Education</button>
<h4 id="simplicity">Simplicity</h4>
<div id="all_systems_side_bar">
<img src="images/all_systems_logo.png" alt="All Systems Maintenance logo. Links to more about All Systems Maintenance." width="100%">
</div><!-- all systems side bar -->
</div><!-- side_bar -->
</div><!-- col_1 -->
<div id="col_2">
//// bunch of stuff here
</div><!-- col_2 -->
<div class="clear"></div>
</div><!-- content -->
<footer>
/// bunch of stuff here
</footer>
CSS
#col_1 {
float:left;
margin-top:44px;
width:23.4994%;
margin-left:3.9531%;
}
#side_bar {
background:#003768;
min-height:665px;
width:79.4392%;
border-radius:20px;
box-shadow: 10px 10px 5px #888;
}
#col_2 {
float:right;
margin-top:44px;
width:68.5944%;
margin-right:3.9531%;
}
footer {
background-image:url(../images/foot_background.gif);
background-repeat:no-repeat;
background-size:cover;
}
The footer background is almost the same height as the screen (about 824px when I inspect it with Chrome).

Found this gem on Youtube at https://www.youtube.com/watch?v=5s0L6dCVevk and changed it slightly to come up with the following, which works.
$(function() {
if ($('#side_bar').length) {
var el = $('#side_bar');
var stickyTop = $('#side_bar').offset().top;
var stickyHeight = $('#side_bar').height();
$(window).scroll(function(){
var limit = $('footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 55,
width: '18.6676%'
});
} else {
el.css({
position: 'static',
width: '79.4392%'
});
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});

How to set js function scroll let it don't exceed parent‘s bottom?

The html, js, css example is https://jsfiddle.net/t9mfmaa3/5/.
/* Latest compiled and minified JavaScript included as External Resource */
$(function() {
var $sidebar = $("#e"),
$window = $(window),
$offset = $sidebar.offset(),
$topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > $offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - $offset.top + $topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#c {
background-color: red;
height: 2400px
}
#e {
background-color: lightblue;
height: 600px
}
#b {
height: 2400px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="a">
<div id="b" class="column col-xs-3 col-sm-3">
<div id="e" class="">
blue
</div>
</div>
<div id="c" class="center_column col-xs-9 col-sm-9">
red
</div>
</div>
</div>
</div>
I tried to make blue block not exceed yellow block which means the blue one always in yellow block. My idea is to set code to detect block yellow and block blue. But I didn't success. Anybody has any suggestion? Thanks

If you are already using bootstrap, you may as well use their affix javascript.
getbootstrap.com
Here is an example:
jsfiddle.net
$(function() {
var $sidebar = $("#e"),
$body = $('body'),
$parent = $('#b'),
topPadding = 15,
offset=$sidebar.offset();
$sidebar.affix({
offset: {
top: function() {
return $parent.offset().top - topPadding;
},
bottom: function() {
return $(document.body).height() - ($parent.offset().top + $parent.outerHeight());
}
}
});
});
You might notice it act a little weird and jumpy near the end, but that should go away when using it on a real site (instead of inside an iframe)

JS counter when scroll to a div stop counting

I want to make a counter on javascript that when you go to certain div, start counting and when you reach the specified number it stops, and if I continue scrolling, the counter no longer keep counting
I have made a Pen with the idea, but when I continue scrolling the counter do not stop, and start to count down, and then stop when reach a low number.
Any idea to make this work?
Thanks in advance.
HTML
<!-- Counter section -->
<div id="counter" class="Wrapper-counter">
<!-- Counter_item -->
<div class="Counter_item">
<h3 class="Counter_h3 right">
<span class="count">
123
</span>
</h3>
<p class="Counter_paragraph right">
<strong>Lorem ipsum</strong>
</p>
</div>
<!-- /Counter_item -->
<!-- Counter_item -->
<div class="Counter_item">
<h3 class="Counter_h3 left">
<span class="count">
123
</span>
</h3>
<p class="Counter_paragraph left">
<strong>Lorem ipsum</strong>
</p>
</div>
<!-- /Counter_item -->
</div>
<!-- /Counter section -->
JS
$(window).on('scroll', function() {
var div_counter = window.pageYOffset;
var scroll_pos_test = $('#counter').offset().top - window.innerHeight; // set to whatever you want it to be
if(div_counter < scroll_pos_test) {
//do stuff
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
codepen here

I didn't understand your code, but I created an example of what you are looking for which might give you a new perspective of how to tackle this problem in an easier way. Check out the working example on CODEPEN.
HTML
<div class="container">
<p data-counter="100">100</p>
</div>
CSS
p {
font-size: 3em;
position: fixed;
color: blue;
}
.container {
position: relative;
height: 700px;
background: #ccc;
}
JS
$(document).ready(function() {
var topCount = 100;
var maxCount = 50;
var startCount = 200;
var endCount = 400;
var currCount = 0;
$(window).scroll(function() {
if (($(window).scrollTop() >= startCount) && ($(window).scrollTop() <= endCount)) {
currCount = Math.floor(maxCount + (maxCount - topCount) * ($(window).scrollTop() - endCount) / (endCount - startCount));
$("p").attr("data-counter",currCount).text(currCount);
}
});
});
It should be pretty straight-forward. I don't have a resetting mechanism since I don't know how you want to do it or if you want to have it at all. but it is easy to add any modification

thanks for the code but it is not what I was looking; I solved the problem by adding the plugin INVIEW JQUERY and the following script, thanks anyway
CODEPEN DEMO
$('#counter').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
if (visible) {
$(this).find('.count').each(function () {
var $this = $(this);
$({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
$(this).unbind('inview');
}
});

How to slide tabs in and out together like a carousel

I'm trying to make the slides within jQuery UI tabs look as if they're next to each other and somewhat attached. I think I'll be able to achieve this by running the show and hide animations at the same time.
Currently jQuery slides the current panel out and then the next one. How can I slide out the current panel while at the same time slide in the next one?
$("#tabs").tabs({
hide:{effect:"slide", direction:"right"},
show:{effect:"slide", direction:"left"}
});
http://jsfiddle.net/CnEUh/2372/
I want to start both the hide: and show: effects at the same time rather than one after the other

Here's the version based on my original comment.
This keeps jQuery's tab system, but hides the existing tabs. New slidingTabs div contains the sliding tabs so they can be animated.
Update
As per request, the initial content remains as it was before.
function makeTabsIntoSlidingTabs($tabs) {
$tabs.find("div").wrapAll("<div style='display:none' />");
$tabs.append("<div class='slidingTabs' />");
$tabs.children("div").first().find("div").each(function(i) {
$tabs.find(".slidingTabs").append($("<div />").addClass("tab").html($(this).html()));
});
$tabs.tabs({
activate: function(event, ui) {
var tab = $tabs.tabs("option", "active");
$tabs.find(".slidingTabs div").first().animate({
marginLeft: (tab * -100) + '%'
}, 400, function() {});
}
});
}
makeTabsIntoSlidingTabs($("#tabs"));
.slidingTabs {
white-space: nowrap;
overflow-x: hidden;
}
.slidingTabs .tab {
width: 100%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>

I think the proper way to change the behavior of a jQuery's widget is to extends it.
This way the solution is extensible, leave room for customization while allowing the tabs to remain a ui.widget, preserving jQuery's styling and state control.
$(document).ready(function() {
// Clean whitespaces before creating tabs
$('#tabs').cleanWhitespace();
/* retains most of $.ui.tabs options, but now since both
* hide & show animations are combined there's a
* shared direction & duration
*/
$("#tabs").customSlideTabs({
direction: "left",
duration: 500
});
});
$.widget("nameSpace.customSlideTabs", $.ui.tabs, {
_toggle: function(event, eventData) {
var that = this,
toShow = eventData.newPanel,
toHide = eventData.oldPanel;
this.running = true;
var container = $(toHide.parent());
var originalContainerOverflow = container.css("overflow");
function complete() {
container.css("overflow", originalContainerOverflow);
eventData.newTab.closest("li").addClass("ui-tabs-active ui-state-active");
eventData.oldTab.closest("li").removeClass("ui-tabs-active ui-state-active");
that.running = false;
that._trigger("activate", event, eventData);
}
// start out by hiding, then showing, then completing
if (toHide.length && toShow.length) {
if (!this.options.duration) this.options.duration = 300;
container.css({
"overflow": "hidden",
"white-space": "nowrap"
});
var fromX, toX;
if (this.options.direction == "right") {
toHide.appendTo(container);
fromX = "-100%";
toX = 0;
} else {
toShow.appendTo(container);
fromX = 0;
toX = "-100%";
}
toShow.css({
"width": "100%",
"box-sizing": "border-box",
"display": "inline-block",
"vertical-align": "top",
"position": "relative",
"left": fromX,
"white-space": "wrap"
});
toHide.css({
"width": "100%",
"box-sizing": "border-box",
"display": "inline-block",
"vertical-align": "top",
"position": "relative",
"left": fromX,
"white-space": "wrap"
});
toShow.animate({
"left": toX
}, {
duration: that.options.duration,
complete: function() {
toShow.attr("style", "display: block;");
}
});
toHide.animate({
"left": toX
}, {
duration: that.options.duration,
complete: function() {
toHide.attr("style", "display: none;");
complete();
}
});
} else {
toHide.hide();
toShow.show();
complete();
}
toHide.attr({
"aria-expanded": "false",
"aria-hidden": "true"
});
eventData.oldTab.attr("aria-selected", "false");
// If we're switching tabs, remove the old tab from the tab order.
// If we're opening from collapsed state, remove the previous tab from the tab order.
// If we're collapsing, then keep the collapsing tab in the tab order.
if (toShow.length && toHide.length) {
eventData.oldTab.attr("tabIndex", -1);
} else if (toShow.length) {
this.tabs.filter(function() {
return $(this).attr("tabIndex") === 0;
})
.attr("tabIndex", -1);
}
toShow.attr({
"aria-expanded": "true",
"aria-hidden": "false"
});
eventData.newTab.attr({
"aria-selected": "true",
tabIndex: 0
});
}
});
// Gratitues http://stackoverflow.com/a/2587356/1645830
$.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() {
return (this.nodeType == 3 && !/\S/.test(this.nodeValue));
})
.remove();
return this;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1" class="tab">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2" class="tab">
<p>Content for Tab 2</p>
<p>Content for Tab 2</p>
</div>
<div id="tabs-3" class="tab">
<p>Content for Tab 3</p>
</div>
</div>
<div id="tabid"></div>
This is by no mean complete, since it only support sliding left & right and not the full set of animations from jQuery, but I think it's a good base to work on.

Try this out .Hope this is what you needed.i have used the css transition for the slide effect.
$(document).ready(function() {
$("#tabs").tabs({
beforeActivate: function(event, ui) {
var index = ui.newTab.find('a').attr('href');
var currentPage = $(index).index();
//530 is the width of the frame or you can say the overall width including padding and margin for the content tabs.
$('.inner').css('left', '-' + (currentPage) * 530 + 'px');
},
});
});
body {
background-color: #eef;
}
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#maindiv {
position: relative;
overflow: hidden;
width: 530px;
}
.inner {
position: relative;
display: inline-flex;
height: 100%;
transition: -webkit-transition: left .6s ease-in-out;
transition: left .6s ease-in-out;
}
#tabs-1,
#tabs-2,
#tabs-3 {
outline: solid 5px red;
outline-offset: -5px;
float: left;
display: block !important;
width: 480px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="maindiv">
<div class="inner" style="left:0px;">
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
</div>
</div>
<div id="tabid"></div>
you can check the js fiddle Here.

This is NOT what you may be looking for, but you can always look for other solutions outside what jqueryui libraries gives you.
in this example I have removed the slide effect, I have wrapped your tabcontent divs into a container with nowrap and displayed them as inline-block so they are standing side by side even if you don't see them (overflow:hidden at the parent), then with little jquery adding and removing classes to this new container when you click on the tabs and a css transition you may have what you are looking for.
Ugly as hell imho but it's an example of a work around
$("#tabs").tabs({
hide:{
},
show:{
}
});
$('#ui-id-1').click(function() {
$('.container').removeClass("move1");
$('.container').removeClass("move2");
});
$('#ui-id-2').click(function() {
$('.container').addClass("move1");
$('.container').removeClass("move2");
});
$('#ui-id-3').click(function() {
$('.container').addClass("move2");
});
JSFIDDLE

It's not possible to achieve this effect, without changing tabs js script. You can use a workaround with beforeActivate method. Eg.:
$("#tabs").tabs({
hide:{effect:"slide", direction:"right"},
beforeActivate: function( event, ui ){ui.newPanel.show("slide", { direction: "left" });}
});
But then there's a problem with tabs positioning. I written quick workaround for this problem, but i think it's better solution to use some custom js. jsFiddle
$("#tabs").tabs({
hide: {
effect: "slide",
direction: "right"
},
beforeActivate: function(event, ui) {
setTimeout(function() {
ui.newPanel.css({
'position': 'absolute',
'width': '100%',
'top': ui.oldPanel.offset().top - 11
});
ui.newPanel.show("slide", {
direction: "left"
}, function() {
ui.newPanel.css({
'position': 'relative',
'width': 'auto',
'top': 0
});
});
}, 15)
}
});
body {
background-color: #eef;
}
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
overflow: hidden;
}
#tabs-1,
#tabs-2,
#tabs-3 {
outline: solid 5px red;
outline-offset: -5px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1
<br/>
</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
<div id="tabid"></div>