When I click on show5 and then goto5 it works as expected, but when I click on showngo5 its not working as expected, even though the same methods are called.
Why is showngo5 not working in this plunker
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example51-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample" ng-controller="headerCtrl">
<div class="fixed-header">
<a href="" ng-click="gotoAnchor(x.i)" ng-repeat="x in ids" ng-show="x.visible">
goto{{x.i}}
</a><br/>
<a href="" ng-click="toggle(x)" ng-repeat="x in ids">
<span ng-show="x.visible">hide</span><span ng-show="!x.visible">show</span>{{x.i}}
</a><br/>
<a href="" ng-click="showngo(x)" ng-repeat="x in ids">
<span ng-show="x.visible">hide</span><span ng-show="!x.visible">showngo</span>{{x.i}}
</a>
</div>
<div id="anchor{{x.i}}" class="anchor" ng-repeat="x in ids" ng-show="x.visible">
Anchor {{x.i}} of 5
</div>
</body>
</html>
js:
(function(angular) {
'use strict';
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 100; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.ids = [
{i:1,visible:true},
{i:2,visible:true},
{i:3,visible:true},
{i:4,visible:true},
{i:5,visible:false}
];
$scope.toggle = function(x) {
if(x.visible){
x.visible=false;
}else{
x.visible=true;
}
};
$scope.showngo = function(x) {
$scope.toggle(x);
$scope.gotoAnchor(x);
};
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
$location.hash('anchor' + x);
} else {
$anchorScroll();
}
};
}
]);
})(window.angular);
css:
body {
padding-top: 100px;
}
.anchor {
background-color: DarkOrchid;
margin: 2px;
padding: 10px 10px 300px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 100px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
change this code on line #25 JS file
$scope.gotoAnchor(x.i);
The problem is you try to passing x object into gotoAnchor function rather then a number.
Update showngo function by below code. issue in your code is that when you call $scope.gotoAnchor(x); inside showngo method it will scroll to anchor[Object,Object] instead of scrolling anchor5 because whole object is passed inside x.
$scope.showngo = function(x) {
$scope.toggle(x);
$scope.gotoAnchor(x.i);
};
Related
So, I was given a task of creating a Custom Flipbook, where using images in div tags, I was successful in creating one. Users could turn pages using prev/next buttons or flipping through them by the corners like shown for other Flipbooks.
My concern is Displaying PageNumbers. Changing pages through the buttons, pages change dynamically but when flipping through turn.js the page number does not update.
I am providing the snippet of the code that I have used. Any kind of help and guidance is appreciated !!
<!DOCTYPE html>
<head>
<title>Flipbook Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
</head>
<style>
body{
background-color: #313131;
}
#flipbook {
margin-top: 1.5%;
margin-left: 6%;
width: 1130px;
height: 800px;
position: relative;
overflow: hidden;
}
#nav_controls{
margin: 1.5%;
margin-left: 44%;
}
</style>
<body>
<h1 style="color: white; margin-left: 43%">FITI5 WHITEPAPER</h1>
<div id="flipbook">
<!-- Include Pages into div that you want to include -->
</div>
<div id="nav_controls">
<button id="startdoc"><-</button>
<button id="prev_page"> PREV </button>
<span id="pgnos" style="margin-left: 2%; color: white;">1</span>
<button id="next_page" style="margin-left: 2%;"> NEXT </button>
<button id="enddoc">-></button>
<!--
<button id="zoom-in">+</button>
<buton id="zoom-out">-</button>-->
</div>
<script type="text/javascript">
const startButton = document.querySelector("#startdoc");
const endButton = document.querySelector("#enddoc");
const prevButton = document.querySelector("#prev_page");
const nextButton = document.querySelector("#next_page");
const showPG = document.querySelector("#pgnos");
//magnify = document.querySelector("#zoom-in");
//minify = document.querySelector("#zoom-out");
/*
magnify.addEventListener('click', function() {
$("#flipbook").turn("zoom", 1.1, 1);
});
minify.addEventListener('click', function() {
$("#flipbook").turn("zoom", 1, 1.1);
})
*/
$("#flipbook").turn({
gradients: true,
page: 1,
duration: 2000
});
const first_page = $("#flipbook").turn("page");
const last_page = $("#flipbook").turn("pages");
startButton.addEventListener('click', function() {
$("#flipbook").turn("page", first_page);
showPG.innerHTML = first_page;
});
endButton.addEventListener('click', function() {
$('#flipbook').turn("page", last_page);
showPG.innerHTML = last_page;
});
nextButton.addEventListener('click', function() {
$("#flipbook").turn("next");
showPG.innerHTML = $("#flipbook").turn("page");
});
prevButton.addEventListener('click', function() {
$("#flipbook").turn("previous");
showPG.innerHTML = $("#flipbook").turn("page");
});
if ( (($("#flipbook").turn("page") == first_page)) ) {
$(nextButton).click(function() {
$("#flipbook").animate({left: "275"});
});
$(endButton).click(function() {
$("#flipbook").animate({left: "565"});
});
$(prevButton).click(function() {
$("#flipbook").animate({left: "275"});
});
$(startButton).click(function() {
$("#flipbook").animate({left: "0"});
});
}
if ( (($("#flipbook").turn("page") == last_page)) ) {
$(prevButton).click(function() {
$("#flipbook").animate({left: "300"});
});
}
</script>
</body>
</html>
I wanted to create an effect where the whole body gets blurred or dimmed and only a particular list item appears clear. However when I set the z-index to the list item, it doesn't work. And when I set the z-index of the whole un-ordered list, it works but the all the list items appear clear (which I don't want).
Let me show you my html code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashish Toppo</title>
<link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<!-- the html for the top bar starts here -->
<div class="top_bar" id="topBar">
<div class="logo_name" id="logoName">Ashish Toppo</div>
<ul class="menu">
<li class="menu_items currently_active_menuItem" id="home">home</li>
<li class="menu_items" id="about">about</li>
<li class="menu_items" id="education">education</li>
</ul>
</div>
<!-- the html for the top bar ends here -->
<!-- the html for the intro starts here -->
<div class="intro" id="intro">
<div class="profile_pic" id="profilePic">
<img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
</div>
<div class="intro_box" id="introBox">
<!-- some introduction text here -->
<center id="aboutPointer">To know more about me, go to the about section!</center>
</div>
</div>
<!-- the html for the intro ends here -->
<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Now, the Universal javaScript file:
/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
var obj = {
element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) :
( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) :
console.error("The provided HTML element could not be found"),
html: () => { return obj.element; },
changeText: (text) => { obj.html().innerHTML = text; },
appendText: (text) => {
let appendOn = obj.html().innerHTML;
obj.html().innerHTML = appendOn + text;
},
previousDisplayMode: "block",
hide: () => {
obj.previousDisplayMode = obj.html().style.display;
obj.html().style.display = "none";
},
show: () => {
obj.html().style.display = obj.previousDisplayMode;
},
on: (event, callBack) => {
obj.html().addEventListener(event, callBack);
},
previousZIndex: 1,
focusOn: () => {
let blur = document.createElement("div");
blur.className = "theDivThatBlurs";
blur.style.width ="100vw";
blur.style.height ="100vh";
blur.style.display ="block";
blur.style.position ="fixed";
blur.style.top ="0";
blur.style.left ="0";
blur.style.zIndex ="9";
blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
blur.innerHTML = "";
document.body.appendChild(blur);
obj.html().style.zIndex = "100";
}
}
return obj;
}
and the index.js file was as followed:
/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
const active = d.getElementsByClassName("currently_active_menuItem");
active[0].style.textDecoration = "none";
})(document);
var about = get("about");
var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
console.log("the about pointer has been clicked");
focus(about);
});
function focus(theElement){
console.log("the focus is working");
theElement.focusOn();
}
You can use the box-shadow property to achieve the dimming effect. Quick and easy :)
Just toggle a class programmatically and it should work for any element you have.
Code
function focusAndDim() {
document.getElementById("maindiv").classList.toggle("visible");
// if you want to get more fancy ;)
document.getElementsByTagName("body")[0].classList.toggle("blur");
}
.visible {
box-shadow: 0 0 0 10000px #ccc;
/* this code below make everything else hidden */
/* box-shadow: 0 0 0 10000px #fff; */
position: relative;
}
.btn {
height: 20px;
line-height: 1.4;
border: 2px solid #999;
padding: 12px 24px;
margin-bottom: 10px;
border-radius: 2px;
cursor: pointer;
}
body {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
body.blur div {
filter: blur(2px);
}
body.blur div.visible {
filter: blur(0);
}
<div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div>
<div>Other elements</div>
I am using angular js with jssor slider as follow.
As far as I am concern, there is no $destroy method for jssor slider yet. But I need the user to click on the refresh button and reinit the jssor slider.
As you can see, currently it won't work if i reinit the jssor slider by clicking the refresh function.
I do not want to call .remove() function and bind back the html as it seems to be less angular way. Is there any other method?
I can't create own $destroy method as the jssor slider library source code is uglify.
angular.module('app', [])
.controller('FrameController', ['$scope', '$injector', function($scope, $injector) {
initSlider();
$scope.refresh = initSlider;
function initSlider() {
var image = [];
var count = Math.floor(Math.random() * 6) + 1;
for (var i = 0; i < count; i++) {
image.push('https://unsplash.it/600/' + i * 100 + '?random');
}
$scope.image = image;
console.log($scope.image);
function jssor_slider1_init(containerId) {
var options = {
$AutoPlay: 1
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
setTimeout(function() {
jssor_slider1_init('slider1_container');
});
}
}]);
setTimeout(function() {
angular.bootstrap(document.getElementById('body'), ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/25.2.0/jssor.slider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
<div ng-controller="FrameController">
<button ng-click="refresh()">
Click to refresh
</button>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div ng-repeat="item in image track by $index">
<img ng-src="{{item}}" /></div>
</div>
</div>
</div>
I am a student and I am trying to start, pause and start a gif when a user clicks the gif, however I am stuck on how to add in this click function. I know that the the gif version of the object is .images.fixed_height.url and the still image is .images.fixed_height_still.url . If I try to append like below $(this) I get that images is undefined. How would I go by doing this? Currently 10 gifs show when you click the category. Thank you for any help in advance.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Giphy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
body {
background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg');
width: 100%;
}
button {
padding: 0 2%;
margin: 0 2%;
}
h4 {
font-size: 165%;
font-weight: bold;
color: white;
}
.container {
background-color: rgba(0, 0, 0, 0.2);
max-width: 1000px;
width: 100%;
}
.btn {
margin-top: 2%;
margin-bottom: 2%;
font-size: 125%;
font-weight: bold;
}
.guide {
padding: 3% 0 0 0;
}
.tag-row {
padding: 3% 0 0 0;
}
.category-row {
padding: 3% 0 ;
}
#photo {
padding-bottom: 3%;
}
</style>
</head>
<body>
<div class="container">
<div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div>
<div class="row text-center tag-row" id="tags"></div>
<div class="row text-center category-row">
<input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button>
</div>
</div>
<div class="container">
<div id="photo"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"];
// Function for displaying movie data
function renderButtons() {
$("#tags").empty();
for (var i = 0; i < tags.length; i++) {
$("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>');
}
}
// Add tags function //
$(document).on('click', '#addTag', function(event) {
event.preventDefault();
var newTag = $("#category").val().trim();
tags.push(newTag);
$("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>');
});
// Tag button function //
$(document).on('click', '.tag-buttons', function(event) {
// Keeps page from reloading //
event.preventDefault();
var type = this.innerText;
console.log(this.innerText);
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC";
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
for (var i = 0; i < response.data.length; i++) {
$("#photo").append('<img src="' + response.data[i].images.fixed_height_still.url + '" class="animate">');
$('.animate').on('click', function() {
$(this).remove().append('<img src="' + response.data[i].images.fixed_height.url + '" class="animate">');
console.log($(this));
});
}
});
$("#photo").empty();
});
renderButtons();
</script>
</body>
</html>
The difference between fixed_height and fixed_height_still will solve the problem. if you look closely the urls differ only by name_s.gif and name.gif.
So you can simply swap the two images to create a player. This will act like a play and stop. Not play and pause. But in a small gif I don't think pause really matter, stop and pause will look similar.
adding class name to the #photo
$("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');
event handler which will control play and stop
$('body').on('click', '.gif', function() {
var src = $(this).attr("src");
if($(this).hasClass('playing')){
//stop
$(this).attr('src', src.replace(/\.gif/i, "_s.gif"))
$(this).removeClass('playing');
} else {
//play
$(this).addClass('playing');
$(this).attr('src', src.replace(/\_s.gif/i, ".gif"))
}
});
jsfiddle demo
https://jsfiddle.net/karthick6891/L9t0t1r2/
you can use this jquery plugin http://rubentd.com/gifplayer/
<img class="gifplayer" src="media/banana.png" />
<script>
$('.gifplayer').gifplayer();
</script>
you can control like this
Use these methods to play and stop the player programatically
$('#banana').gifplayer('play');
$('#banana').gifplayer('stop');
youll find more details here https://github.com/rubentd/gifplayer
What is the right way to change md-virtual-repeat's scroll to watch events from an other scroll ?
I have tried some manual triggering
And i readed this question but it is not exactly i want.
So is there a way to select a scrool to virtual-repeat container ?
EDIT 2
I need to change scrollbar of virtual repeat with scrollbar of Body
Live example
(function() {
'use strict';
var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']);
app.filter('to_trusted', ['$sce', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
app.controller('AppCtrl', function($timeout) {
this.itemSize = 529.39;
var DynamicItems = function() {
this.loadedPages = {};
this.numItems = 0;
this.PAGE_SIZE = 50;
this.fetchNumItems_();
};
DynamicItems.prototype.getItemAtIndex = function(index) {
var pageNumber = Math.floor(index / this.PAGE_SIZE);
var page = this.loadedPages[pageNumber];
if (page) {
return page[index % this.PAGE_SIZE];
} else if (page !== null) {
this.fetchPage_(pageNumber);
}
};
DynamicItems.prototype.getLength = function() {
return this.numItems;
};
DynamicItems.prototype.fetchPage_ = function(pageNumber) {
this.loadedPages[pageNumber] = null;
$timeout(angular.noop, 300).then(angular.bind(this, function() {
this.loadedPages[pageNumber] = [];
var pageOffset = pageNumber * this.PAGE_SIZE;
//console.log(pageNumber);
for (var i = pageOffset; i < pageOffset + this.PAGE_SIZE; i++) {
var obj = {};
obj.name = 'Ad ' + i;
obj.surname = 'Soyad ' + i;
obj.age = i;
obj.image = 'http://lorempixel.com/75/75/cats?' + i;
obj.list = [];
obj.clicked = false;
obj.status = "asd";
obj.html = '' + i + '---Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500 lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960 larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.' + i;
for (var j = 0; j < 1000; j++) {
obj.list.push('http://lorempixel.com/75/75/city/?' + j);
}
this.loadedPages[pageNumber].push(obj);
}
//this.setItemNum(this.numItems + this.PAGE_SIZE);
}));
};
DynamicItems.prototype.fetchNumItems_ = function() {
$timeout(angular.noop, 300).then(angular.bind(this, function() {
//console.log("fetchNumItems_");
this.numItems = 10000;
}));
};
DynamicItems.prototype.setItemNum = function(number) {
this.numItems = number;
};
this.dynamicItems = new DynamicItems();
//console.log(this.dynamicItems);
});
}());
.virtualRepeatdemoDeferredLoading #vertical-container {
width: 100%;
}
.virtualRepeatdemoDeferredLoading .repeated-item {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
padding-top: 10px;
}
.virtualRepeatdemoDeferredLoading md-content {
margin: 16px;
}
.virtualRepeatdemoDeferredLoading md-virtual-repeat-container {
border: solid 1px grey;
}
.virtualRepeatdemoDeferredLoading .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
padding-left: 16px;
}
.virtualRepeatdemoHorizontalUsage #horizontal-container {
height: 100px;
width: 100%;
}
.virtualRepeatdemoHorizontalUsage .repeated-item {
border-right: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
height: 84px;
padding-top: 10px;
text-align: center;
width: 100px;
}
.virtualRepeatdemoHorizontalUsage md-content {
margin: 16px;
}
.virtualRepeatdemoHorizontalUsage md-virtual-repeat-container {
border: solid 1px grey;
}
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<link rel="canonical" href="http://codepen.io/anon/pen/OWXMXW" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>
</head>
<body>
<h1> Virtual Repeat Test </h1>
<div ng-controller="AppCtrl as ctrl" ng-cloak="" flex layout-fill layout-padding class="virtualRepeatdemoDeferredLoading" ng-app="MyApp">
<md-content layout="column" flex layout-fill>
<md-virtual-repeat-container flex layout-fill md-auto-shrink="false" layout id="vertical-container">
<div md-virtual-repeat="item in ctrl.dynamicItems" id="repeat_item" md-on-demand="true" md-item-size="ctrl.itemSize" layout-fill>
<img ng-src="{{item.image}}" class="md-avatar" alt="{{item.name}}" />
<br> Adı : {{item.name}} <br> Soyadı : {{item.surname}} <br> Yaşı : {{item.age}} <br> is Clicked : {{ item.clicked }} <br> status : {{ item.status }}
<p ng-bind-html=" item.html | to_trusted "> </p>
<h5 ng-click="item.clicked = !item.clicked; item.status = item.status + item.status; "> List Items </h5>
<md-content ng-if="item.clicked == true" class="virtualRepeatdemoHorizontalUsage" layout="column">
<md-virtual-repeat-container id="horizontal-container" md-orient-horizontal="">
<div md-virtual-repeat="picture in item.list" class="repeated-item" flex="">
<img ng-src="{{ picture }}" class="md-avatar" alt="{{ picture }}" />
</div>
</md-virtual-repeat-container>
</md-content>
<br>
</div>
</md-virtual-repeat-container>
</md-content>
</div>
</body>
</html>
If I understand your question correctly, you just want to scroll the virtual repeater div using a scrollbar somewhere else on your page? One way to do that would be to create a directive that listens to scroll event of the div you want to use as the visible scrollbar and then just scroll the other div the same percentage.
Here is one such directive. Add it to the md-virtual-repeat-container and point it to the div you want to scroll it. The divs can even be different heights.
Update
I changed the directive to fall back to the body tag if an element wasn't specified.
app = angular.module('myApp', ['ngMaterial']);
app.controller("myController", function($scope) {
$scope.items = [];
for (var i = 0; i < 5000000; i++) {
$scope.items.push(i);
}
});
app.directive("scrollFrom", function($window, $document) {
return {
scope: {
elTarget: '#scrollFrom'
},
link: function(scope, element, attrs) {
var body = $document[0].body;
angular.element(scope.elTarget || $window).bind("scroll", function() {
var percentScrolled = scope.elTarget ?
this.scrollHeight > 0 ? this.scrollTop / (this.scrollHeight - element.height()) : 0 :
body.scrollHeight > 0 ? body.scrollTop / (body.scrollHeight - element.height()) : 0;
var trgt = angular.element(element).find('.md-virtual-repeat-scroller')[0];
trgt.scrollTop = trgt.scrollHeight * percentScrolled;
});
}
};
});
#vertical-container {
height: 292px;
width: 100%;
max-width: 400px;
position: fixed;
top: 10px;
}
#vertical-container .md-virtual-repeat-scroller {
overflow: hidden;
}
.repeated-item {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
md-virtual-repeat-container {
border: solid 4px grey;
}
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
</head>
<body style="height: 5000000px">
<div ng-controller="myController">
<md-virtual-repeat-container id="vertical-container" scroll-from>
<div md-virtual-repeat="item in items" class="repeated-item" flex>
{{item}}
</div>
</md-virtual-repeat-container>
</div>
</body>
</html>