We Keep Coding

Scrolling Problem While Loading Data with AJAX

I am developing a website using PHP, MySQL, JavaScript (JQuery + Ajax), I used customer scroll function and scrollbars, the problem is that if I load data with ajax the scroll function generates hundreds of errors saying:"Uncaught TypeError: Cannot read property 'top' of undefined" from the scroll function which is:
function Scroll() {
var contentTop = [];
var contentBottom = [];
var winTop = $(window).scrollTop();
var rangeTop = 200;
var rangeBottom = 500;
$('.navbar-collapse').find('.scroll a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);//The error rises from this line
contentBottom.push($($(this).attr('href')).offset().top +
$($(this).attr('href')).height());
})
$.each(contentTop, function (i) {
if (winTop > contentTop[i] - rangeTop) {
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
}
})
}
and also the website starts blinking when I scroll to the end, I tried checking if the "contentTop.push($($(this).attr('href')).offset()" is not null, errors get disappear but web page still blinks at the end of the page.
If you can help, please share your answer, Thanks in Advance.

var winTop = $(window).scrollTop();. This line forces window to go to top of the page. This might be the cause for blinking effect.

Protractor scrolling through executeScript not working

I am testing my Ionic app.
In one page, the button to be clicked is out of the bounds of the window.
Hence the following code:
element.all(by.css('.item.item-complex')).get(9).click();
throws the error:
ElementNotVisibleError: element not visible
Hence, I am trying to scroll down the page to make the button visible in page and then try emulating the click on it. I am using the following code:
browser.executeScript('window.scrollTo(0, 200);').then(function() {
element.all(by.css('.item.item-complex')).get(9).click();
expect(browser.getTitle()).toEqual('Vegeta The Prince');
});
But the scrolling is not happening with the above code. Please help!
I am using Google Chrome.

When I encounter issues like this, I scroll into view:
var elm = element.all(by.css('.item.item-complex')).get(9);
browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());
elm.click();

I solved this issue using
window.scrollTo(x, y)
code:
var elm = element.all(by.css('.item.item-complex')).get(9);
elm.getLocation()
.then(function (location) {
return browser.executeScript('window.scrollTo(' + location.x + ', ' + location.y + ');')
})
.then(function () {
return elm.click();
})
})

scroll within a scrollable element with webdriver-io?

How do you scroll within a scrollable element with webdriver-io?
I have tried the following code:
client
.scroll('#hierarchy_p')
.scroll(20, 50);
Or
client
.scroll('#hierarchy_p', 20, 50);
But neither of them have any effect.

Normally, I wouln't advice using driver.executeScript, but until something like webElement.setAttribute comes up, I doubt that there are many other ways of doing this.
for scrolling up and down a scrollable element:
function scrollToFn(driver, element, scrollAmount){
return elem.getAttribute('scrollTop').then(function(val){
scrollAmount += +val; // written as +val for string to number conversion
return driver.executeScript("arguments[0].scrollTop = arguments[1]", elem, scrollAmount);
});
}
for scrolling to particular element inside scrollable element:
function scrollToInnerFn(driver, parentEle, innerEle){
return innerEle.getAttribute('offsetTop').then(function(val){
return driver.executeScript("arguments[0].scrollTop = arguments[1]", parentEle, val);
});
}
Note: both the above functions would be returning a promise.
usage
...
var webdriver = require('selenium-webdriver');
var browser1 = new webdriver.Builder().usingServer().withCapabilities({
browserName: 'firefox'
}).build();
...
var elem = browser1.findElement(webdriver.By.css('#scrollT'));
var elem2 = browser1.findElement(webdriver.By.css('#mm'));
scrollToFn(browser1, elem, 200).then(function(){
scrollToInnerFn(browser1, elem, elem2);
}).then(...

The scrollTop approach did not work for my use case. This is what worked:
browser.execute(function() {
document.querySelector('#hierarchy_p').scrollIntoView();
});
This is using webdriver.io v4.14.0 testing in Chrome.

I know this post is old, but I had the same problem. The examples given by #mido are quite complex and I had hard time understanding them, so I found a simple way to do this.
We have to use the .execute() command:
browser.execute([function(){},param1,param2,....]);
You want to scroll down inside the scroll-able element, so let's suppose your container is a div with id id='scrollContent_body'. Now all you have to do is use below the snipped presented bellow:
browser.execute(function() {
// browser context - you may not access client or console
// += 60 will scroll down
// -= 60 will scroll up
document.getElementById('scrollContent_body').scrollTop += 60;
});
Note: It does not matter weather your driver is browser, or client.

Scroll Down on innerHTML function in Native JS

I am currently working on a project that will not allow for jQuery and I am very new to JavaScript and OO programming as a whole (Two weeks). You can see the entirety of the project in the following repo: https://github.com/Sntax/jsChat/blob/master/script.js
Basically I am creating a simple chat app as a learning project. I am injecting HTML into a div onClick or Enter/Tab using:
var jsChat = {
username: document.getElementById('username'),
comment: document.getElementById('comment'),
output: document.getElementById('output'),
};
function postData(){
jsChat.output.innerHTML += '<div class="username">' + jsChat.username.value + ':' + '</div>';
jsChat.output.innerHTML += '<div class="comment">' + jsChat.comment.value + '</div>';
clearContent();
}
Right now it will print to the div successfully but once the "comments" become too long for the div-height, they will auto scroll off the bottom of the page and out of sight. I am wanting to setup a way to force the scroll to "scroll down" to the bottom of the div so that it rather scrolls old chat comments off the top of screen much like a normal chat application.
Ninja Edit: I tried throwing the following into the postData() function to no avail:
jsChat.output.scrollTop = 99999;

You can use the scrollTo function, as follows:
window.scrollTo(DOMNodeOfMyNewMessage.offsetTop,window.scrollY);
This will scroll the latest message to the top of the screen.
However, you’ll probably want to scroll the page just by the height of the new comment. That is possible too, using the scrollBy function and the element’s offsetHeight:
window.scrollBy(DOMNodeOfMyNewMessage.offsetHeight, window.scrollY);
The final code might look somewhat like the following:
var jsChat = {
username: document.getElementById('username'),
comment: document.getElementById('comment'),
output: document.getElementById('output'),
},
latestMessage;//DOM Node of my new message
function postData(){
latestMessage = document.createElement('div');
latestMessage.innerHTML = '<div class="username">' + jsChat.username.value + ':</div>' +
'<div class="comment">' + jsChat.comment.value + '</div>';
clearContent();//Not sure what this does, check if you still need it with this code
latestMessage = jsChat.output.appendChild(latestMessage);// appendChild: see https://developer.mozilla.org/docs/Web/API/Node.appendChild
//Now we scroll the message into view
window.scrollBy(latestMessage.offsetHeight, window.scrollY);
}

After posting the comment into output:
var last_comment_index = jsChat.comment.length - 1;
jsChat.output.scrollTop = jsChat.comment[last_comment_index].offsetTop;
This will scroll to the last comment. Hope that helps.

Bitly API - JavaScript function to open new window

I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)

Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1

Perhaps you're looking for
window.open("http://example.com");