Home » Jquery » jQuery offline slideshow on Android-Exceptionshub

jQuery offline slideshow on Android-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I’ve made a very simple webpage (with an empty body) that only contains a jQuery slideshow. It works fine on my desktop when I just open the index.html file. But when I copy all the files on my Android tablet and open the index.html in Chrome, I see nothing.

Do I have to do something else on android devices or is it that Android can’t run saved pages?

This is the jQuery, CSS and HTML code I used:

(function($){

	$.fn.chocolate = function(args) {

		// Default Options
		var options = $.extend({
			interval 	: 1000,
			speed 		: 1000
		}, args);

		return this.each(function() {
			
			var original = $(this);

			// Create element
			$div = $(document.createElement('div'));
			$div.css({
				position 	: 'absolute',
				zIndex 		: 0,
				overflow 	: 'hidden',
			});

			original.prepend($div);
		    $div.css(copybackground());
		    $div.css('background-image', 'url(' + args.images[0] + ')');
			
			// This element background none
			original.css('background', 'none');
		    
		    // Clone bg element
		    $div2 = $div.clone();
		    $div.after($div2);
			
			// Set postion
			$div.css(copyPosition());
			$div2.css(copyPosition());

			// Resize window
			$(window).resize(function() {
				$div.css(copyPosition());
				$div2.css(copyPosition());
			});

			// Copy background style
			function copybackground() {
				var backgroundProperties = [
		        	'Attachment', 'Color', 'Repeat',
		        	'Position', 'Size', 'Clip', 'Origin'
		    		];
			    var prop,
			    	copyStyle 			= {},
			    	i 					= 0;

			    for (; i < backgroundProperties.length; i++) {
			    	prop = 'background' + backgroundProperties[i];
			    	copyStyle[prop] = original.css(prop);
			    }

			    return copyStyle;
			}

			// Copy position style
		    function copyPosition() {
		    	var corners 	= ['Top', 'Right', 'Bottom', 'Left'];
			    var i 			= 0,
			    	position 	= original.position(),
			    	copyStyle 	= {
			    		top 	: position.top,
			    		left 	: position.left,
			    		width 	: original.innerWidth(),
			    		height 	: original.innerHeight()
			    	};

			    for (; i < corners.length; i++) {
		    		corner = corners[i];
		    		copyStyle['margin' + corner] = original.css('margin' + corner);
		    		copyStyle['border' + corner] = original.css('border' + corner);
		    	}

		    	return copyStyle;
		    }

		    var count 	= 0,
		    	current = 0;

			// Change background function
			var slide = function() {
				if (current == args.images.length - 1) current = 0;
				else current++;
				
				if (count == 0) {
					$div2.fadeOut(options.speed);
					$div.css('background-image', 'url(' + args.images[current] + ')').fadeIn(options.speed);
					count++;
				} else {
					$div.fadeOut(options.speed);
					$div2.css('background-image', 'url(' + args.images[current] + ')').fadeIn(options.speed);
					count = 0;
				}
			}		

			setInterval(function() {slide();}, options.interval);
		});
	}

})(jQuery);
 @charset 'UTF-8';

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: cover;
}

.container {
  width: 728px;
  padding: 20px;
  background-color: rgba(0,0,0,.6);
  border-radius: 10px;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -384px;
  color: #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
	<script type="text/javascript" src="jquery.chocolate.js"></script>
	<title>slideshow</title>
	<script>
		$(function() {
			$('body').chocolate({
				images		: ['Slides/1.jpg', 'Slides/2.jpg', 'Slides/3.jpg' ],
				interval	: 4000,
				speed		: 2000,
			});
		});
	</script>
</head>
<body>

</body>
</html>
How to&Answer: