await page.evaluate(() => {
if(document.querySelector('div.U1vjCc')!=null)
{
for(var i=0;i<3;i++)
{
console.log(i);
document.querySelector('div.U1vjCc').scrollBy(0, 6000);
}
}
}
here div.U1vjCc is querySelector of google movie review.
my approach is not working.
Related
I am using angular way to apply css but it doesn't get applied whenever resize the window. canvas height is changed on resize window but table height only being applied when we scroll the window. I want to set the same height of canvas as soon as we resize the window.
How can I fix this?
angular.element(document).ready(function ($timeout) {
function update_table_height(canvasHeight) {
angular.element('.scrollableContainer').css("height", canvasHeight + 5 + "px");
}
angular.element(window).on("load resize scroll", function() {
var canvasHeight = angular.element('#chartCanvas').height();
update_table_height(canvasHeight);
});
$timeout(function(){
var canvasHeight = angular.element('#chartCanvas').height();
update_table_height(canvasHeight);
});
});
I think you need another timeout to wait for the render.
Maybe like this:
angular.element(window).on("load resize scroll", function() {
updateHeight();
});
function updateHeight(){
$timeout(function(){
var canvasHeight = angular.element('#chartCanvas').height();
table_height(canvasHeight);
});
}
// updateHeight on load
updateHeight();
Finally I did it with help of directive. Please suggest is that okay?
in index.html
<div class="ibox-content" match-window-height="['#chartCanvas']">
in app.directive.js
.directive('matchWindowHeight', function($timeout, $window) {
return {
restrict: 'A',
link: function (scope, el, attrs) {
var window = angular.element($window);
scope.$watch(function () {
var attribute = scope.$eval(attrs['matchWindowHeight']);
var targetElem = angular.element(document.querySelector(attribute[0]));
return targetElem.height();
},
function (newValue, oldValue) {
if (newValue != oldValue) {
el.css('height', newValue + 40 );
}
});
window.bind('load resize', function () {
scope.$apply();
});
}
};
});
i have a problem.
I'm trying to build highcharts graphic.
How it works:
I'm going to my route ('ship.details'), and here i have not problems.
My problem:
subsription to (ships_snapshots_all) not working.
My publish.js:
Meteor.publish("ships_snapshots", function(user, options) {
if(!this.userId) return null;
if(this.userId) {
console.log('subsribed by ' + user);
return ships_snapshots.find({userId: user}, options);
}
});
Meteor.publish("ships_snapshots_all", function() {
return ships_snapshots.find({});
})
My subscribe.js (in lib folder):
Meteor.subscribe('ships_snapshots');
Meteor.subscribe('ships_snapshots_all');
Problem 100% in my subsription, because if i'm installing autopublish all working good. And problem in my router i think.
router.js:
Router.route('/ships/details', {
name: 'ship.details',
loadingTemplate: 'loading',
onBeforeAction: function() {
var shipId = Session.get('currentShipId');
if(!shipId) {
Router.go('user.ships');
} else {
this.next();
}
},
waitOn: function() {
if (Meteor.isClient) {
var getCompare = Meteor.user().profile.wows.compareWith;
console.log(getCompare);
var user2 = Meteor.users.findOne({"profile.wows.nickname": getCompare});
var user2Id = user2._id;
if (getCompare) {
var user2 = Meteor.users.findOne({"profile.wows.nickname": getCompare});
if (user2) {
var user2Id = user2._id;
}
}
if (getCompare) {
var handle = Meteor.subscribe('ships_snapshots', Meteor.user()._id) && Meteor.subscribe('ships_snapshots', user2Id) && Meteor.subscribe('userSearchInfo', getCompare);
Session.set('compareWith', user2);
console.log('user2 _____');
console.log(user2);
return handle
} else {
var handle = Meteor.subscribe('ships_snapshots', Meteor.user()._id) && Meteor.subscribe('ships_snapshots', user2Id);
return handle
}
}, data: function() {
if (handle.ready()) {
var shipname = this.params.shipName;
var obj = {};
var query = ships.findOne();
var shipId = Session.get('currentShipId');
var result;
_.each(Meteor.user().profile.wows.ships, function(row) {
if (row.ship_id === shipId) {
result = row;
}
});
return result;
}
}
});
I think my problem in subscripion for ship_snapshots. Something going wrong here, but i can't to resolve this problem.
What exactly do you mean by "not working"? From your code I would assume that you're always seeing all the ship snapshots.
You shouldn't have the subscribes in /lib if you have them in your router. If you have Meteor.subscribe('ships_snapshots_all'); in /lib then you should always be seeing all the ship snapshots (assuming you're not stopping that subscription anywhere).
Also your subscription to all should be:
Meteor.publish("ships_snapshots", function(user, options) {
if(this.userId) {
console.log('subsribed by ' + user);
return ships_snapshots.find({userId: user}, options);
} else this.ready();
});
You don't want to return null when there is no user, you can just mark the subscription as ready without finding any records. This is not the cause of your problem but just good practice.
Meteor.publish("ships_snapshots", function(user, options) {
if(!this.userId) return null;
if(this.userId) {
console.log('subsribed by ' + user);
return ships_snapshots.find({userId: user._id}, options);
}
});
In your publish script, is user really an id or is it a user object? I changed it to user._id. Please check that.
Please help!!!! I'm including a link to a page with a menu I would like to use for a site I'm building. I can't seem to figure out how to get the ".menu-outer" to reposition itself after I click on a link in the nav. I've tried all sorts of combinations of code but to no available. Could anyone be of any assistance?
http://cssdeck.com/labs/css-side-menu
The Menu has a hover effect that moves the menu back and forth, but I would also like the links to allow the menu to retract once a page link is clicked.
Thank You
You never mentioned using Javascript but here is a version that uses it to close the menu once and item is clicked (Note: from the url below a slight change to the css):
var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');
var addClass = function(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
removeClass(element, className);
element.className = (element.className + ' ' + className).replace(/^\s/, '');
}
};
var removeClass = function(element, className) {
if (className.indexOf('*') !== -1) {
var aryClasses = element.className.split(' ');
for (var i = 0; i < aryClasses.length; i++) {
if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
element.removeClass(aryClasses[i]);
}
}
} else {
if (element.classList) {
element.classList.remove(className);
} else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
};
var open = function() {
console.log('opening');
addClass(menu, 'active');
};
var close = function() {
console.log('closing');
removeClass(menu, 'active');
};
if (menu) {
menu.addEventListener('mouseover', open, false);
menu.addEventListener('mouseout', close, false);
for (var l = 0; l < links.length; l++) {
var link = links[l];
link.addEventListener('click', close, false);
}
}
jQuery would be something like:
$('body').on('click', 'nav ul li a', function() {
$('.menu-outer').removeClass('active');
});
$('body').on('mouseover', '.menu-outer', function() {
$(this).addClass('active');
});
$('body').on('mouseout', '.menu-outer', function() {
$(this).removeClass('active');
});
http://cssdeck.com/labs/x0lpogde
How can I preload css background-image's using angularjs promises
What I want to do is something that I can use in this way:
link: function(scope, element, attrs){
element.hide();
url = attrs.url;
preload(url).then(function(loadedImageURL){
element.css({
background-image: "url('" + loadedImageURL + "')"
});
});
element.fadeIn();
}
Please note that this is not a duplicate question of this one.
Try this:
function preload(url) {
var deffered = $q.defer(),
image = new Image();
image.src = url;
if (image.complete) {
deffered.resolve();
} else {
image.addEventListener('load', function() {
deffered.resolve();
});
image.addEventListener('error', function() {
deffered.reject();
});
}
return deffered.promise;
}
I created a chapter selector for some youtube videos I was embedding. This method used to work but has stopped recently. I can't figure out what's going on.
I'm using their recommended format but use loadVideoById to show each chapter
<div class="wrapper">
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '625',
videoId: 'FE5jN0rqMtM',
events: {
'onStateChange': onPlayerStateChange
},
playerVars:{
rel: 0,
wmode: "opaque"
}
});
}
function onPlayerStateChange(evt) {
if (evt.data == 0) {
$('#video_popup').removeClass('hide_pop');
$('#video_popup').addClass('display_pop');
}
else if (evt.data == -1) {
$('#video_popup').removeClass('display_pop');
$('#video_popup').addClass('hide_pop');
}
else {
$('#video_popup').removeClass('display_pop');
$('#video_popup').addClass('hide_pop');
}
}
function chapter1() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 0});
}
function chapter2() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 63});
}
function chapter3() {
player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 135});
}
</script>
<div id="video_popup" class="hide_pop">
<div class="video_layover">
<div class="promo">Thank you for watching!<br /><br /></div>
<div class="link">Replay Video</div>
</div>
</div>
<div style="margin: 0 auto 20px auto; width:625px; height:98px; text-align:center;">
<ul class="player">
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</div>
I'm guessing it is a bug though I wasn't able to find it documented. You could report the bug if you want.
Regardless, I think cueVideoById is a better method which is working for me in all browsers:
Example: JS Bin
function chapter2() {
player.cueVideoById('FE5jN0rqMtM', 63); // BETTER WAY
player.playVideo();
}
If you experienced an error like "TypeError: ytPlayer.loadVideoById is not a function",
then I believe you have to wait for the onReady event to fire.
Here is the sample code (part of) I use:
var ytPlayer;
var ytPlayerIsReady = false;
// this methods only works if defined in the global scope !!
window.onYouTubeIframeAPIReady = function () {
ytPlayer = new YT.Player('ytplayer', {
playerVars: {
enablejsapi: 1,
controls: 0,
fs: 1,
autoplay: 1,
rel: 0,
showinfo: 0,
modestbranding: 1
},
events: {
onReady: onReady,
onError: onError,
onStateChange: onStateChange
}
});
};
// youtube code for calling the iframe api
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onError(event) {
console.log("error with code" + event.data);
}
function onStateChange(event) {
console.log("change state to " + event.data);
}
function onReady(event) {
ytPlayerIsReady = true;
console.log("I'm ready");
}
window.myVideoPlayer = {
init: function (options) {
// some arbitrary code...
// the trick is to fire options.callback,
// which contains all the logic needed
function timeout() {
setTimeout(function () {
if (false === ytPlayerIsReady) {
timeout();
}
else {
if (options.callback) {
options.callback();
}
}
}, 1000);
}
timeout();
}
};
myVideoPlayer.init({
callback: function(){
// now the youtube api is ready, you should be able to call
// loadVideoById without problems (at least it worked for me)
// ytPlayer.removeEventListener('onStateChange');
// ytPlayer.addEventListener('onStateChange', '_myYtPlayerOnChange');
// ytPlayer.loadVideoById({
// videoId: 'xxxx',
// startSeconds: 12
// });
}
});
You need to make sure var player is ready before calling loadVideoById
If(player != null)
{
loadVideoById ..
}