Pull to Refresh

Developer
Berkin
Size
2,528 Kb
Views
24,288
  1. Pull to Refresh Previews
  2. Pull to Refresh HTML Codes
  3. Pull to Refresh JS Codes

How do I make an pull to refresh?

Work in progress. What is a pull to refresh? How do you make a pull to refresh? This script and codes were developed by Berkin on 10 September 2022, Saturday.

Pull to Refresh Previews
IQ Test

Pull to Refresh - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pull to Refresh</title>
</head>
<body> <div class="pull-to-refresh-container"> <div class="pull-to-refresh-layer"> <div class="preloader"></div> <div class="pull-to-refresh-arrow"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pull to Refresh - Script Codes JS Codes

var pullToRefresh = (function() {	function PullToRefresh(container) {	var isTouched = false,	isMoved = false,	touchesStart = {},	isScrolling = false,	touchesDiff,	refresh = false,	translate,	useTranslate = false,	startTranslate = 0,	scrollPosition;	content = container.find('.pull-to-refresh');	function handleTouchStart(event) {	var e = event.originalEvent;	if (isTouched) {	return;	}	isMoved = false;	isTouched = true;	isScrolling = undefined;	touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;	touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;	}	function handleTouchMove(event) {	var e = event.originalEvent;	if (!isTouched) {	return;	}	var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;	var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;	if (typeof isScrolling === 'undefined') {	isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));	}	if (!isScrolling) {	isTouched = false;	return;	}	if (!isMoved) {	container.removeClass('transitioning');	startTranslate = container.hasClass('refreshing') ? 44 : 0;	if (container[0].scrollHeight === container[0].offsetHeight || /(iPad|iPhone|iPod)/g.test(navigator.userAgent) === false) {	useTranslate = true;	} else {	useTranslate = false;	}	}	isMoved = true;	touchesDiff = pageY - touchesStart.y;	//console.log((new Date()).getTime() - touchStartTime);	scrollPosition = -content.position().top;	// console.log(touchesDiff, scrollPosition);	if (touchesDiff > 0 && scrollPosition <= 0 || scrollPosition < 0) {	if (useTranslate) {	e.preventDefault();	translate = (Math.pow(touchesDiff, 0.85) + startTranslate);	container.transform('translate3d(0,' + translate + 'px,0)');	}	if ((useTranslate && Math.pow(touchesDiff, 0.85) > 44) || (!useTranslate && touchesDiff >= 88)) {	refresh = true;	container.addClass('pull-up');	} else {	refresh = false;	container.removeClass('pull-up');	}	} else {	container.removeClass('pull-up');	refresh = false;	return;	}	}	function handleTouchEnd(e) {	if (!isTouched || !isMoved) {	isTouched = false;	isMoved = false;	return;	}	if ( translate ) {	container.addClass('transitioning');	translate = 0;	}	container.transform('');	if (refresh) {	container.addClass('refreshing');	container.trigger('refresh', {	done: function() {	GT.step.pullToRefresh.pullToRefreshDone(container);	}	});	}	isTouched = false;	isMoved = false;	}	this.init = function() {	container.on(GT.step.utilities.touchEvents.start + '.pullToRefresh', handleTouchStart);	container.on(GT.step.utilities.touchEvents.move + '.pullToRefresh', handleTouchMove);	container.on(GT.step.utilities.touchEvents.end + '.pullToRefresh', handleTouchEnd);	};	this.reset = function() {	isTouched = false;	isMoved = false;	};	}	return {	init: function(context) {	var _context = context || document.body,	$items = $('.pull-to-refresh-container', _context);	if ( $items.length === 0 ) {	return false;	}	$items.each(function() {	var $item = $(this),	_instance = $item.data('pullToRefresh');	if ( !(_instance instanceof PullToRefresh) ) {	var pull = new PullToRefresh($item);	pull.init();	$item.data('pullToRefresh', pull);	}	});	}	};
})();
pullToRefresh.done = function(container) {	container = $(container);	if (container.length === 0) {	container = $('.pull-to-refresh-container.refreshing');	}	container.removeClass('refreshing').addClass('transitioning');	container.transitionEnd(function() {	container.removeClass('transitioning pull-up');	});
};
Pull to Refresh - Script Codes
Pull to Refresh - Script Codes
Home Page Home
Developer Berkin
Username berkin
Uploaded September 10, 2022
Rating 3
Size 2,528 Kb
Views 24,288
Do you need developer help for Pull to Refresh?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Berkin (berkin) Script Codes
Name
Touch carousel with hammer.js
Javascript - Insertion Sort
CSS switch, works with swipes
A Pen by berkin
Slider, flickity
Touch Carousel
Background origin, content-box
Tap and hold carousel with hammer.js
Tether control
Javascript - Bubble Sort
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!