Develop Reference

Function for chat refresh and scrolling down to newest messages doesn't work

I've recieved function that should refresh chat box content and it should also scroll down to newest messages. I was using jQuery load(); for refresh, but it wasn't scrolling down, when I've recieved new message. Than, as I said, I've recieved ajax using function, which should replace my jQuery function. But it doesn't even load the content.
Both codes are below, I am so thankful for every advice, I feel really helpless now...
jQuery load():
$(document).ready(function(){
var out = document.getElementById("chat");
var auto = $('#chat');
var add = setInterval(function() {
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
console.log(out.scrollHeight - out.clientHeight, out.scrollTop + 1);
// scroll to bottom if isScrolledToBotto
auto.load("chat_vypis.php")
if (isScrolledToBottom)
out.scrollTop = out.scrollHeight - out.clientHeight;
},500);
console.log(add);
return false;
});
Ajax using:
var needsToScrollToBottom=true;
var url='chat_vypis.php';
function updateChat() {
$.ajax({
url:url,
method:'GET',
success:function(data) {
var chat=$('#chat');
chat.html(data);
if (needsToScrollToBottom) {
scrollToBottom(chat);
}
},
//even on error, but after the call has completed
complete:function() {
setTimeout(updateChat,500);
}
});
}
function scrollToBottom(elem) {
elem.animate({ scrollTop: elem.height() }, "slow");
}

ok, after visiting your page, the main issue seems to be that the button submits the page instead of calling your function.
you need something like this:
$(document).ready(function() {
$('form').submit(function(e) {
// stop the submit
e.preventDefault();
// execute your function
updateChat();
});
});

Scraping an infinite scroll page stops without scrolling

I am currently working with PhantomJS and CasperJS to scrape for links in a website. The site uses javascript to dynamically load results. The below snippet however is not getting me all the results the page contains. What I need is to scroll down to the bottom of the page, see if the spinner shows up (meaning there’s more content still to come), wait until the new content had loaded and then keep scrolling until no more new content was shown. Then store the links with class name .title in an array. Link to the webpage for scraping.
var casper = require('casper').create();
var urls = [];
function tryAndScroll(casper) {
casper.waitFor(function() {
this.page.scrollPosition = { top: this.page.scrollPosition["top"] + 4000, left: 0 };
return true;
}, function() {
var info = this.getElementInfo('.badge-post-grid-load-more');
if (info["visible"] == true) {
this.waitWhileVisible('.badge-post-grid-load-more', function () {
this.emit('results.loaded');
}, function () {
this.echo('next results not loaded');
}, 5000);
}
}, function() {
this.echo("Scrolling failed. Sorry.").exit();
}, 500);
}
casper.on('results.loaded', function () {
tryAndScroll(this);
});
casper.start('http://example.com/', function() {
this.waitUntilVisible('.title', function() {
tryAndScroll(this);
});
});
casper.then(function() {
casper.each(this.getElementsInfo('.title'), function(casper, element, j) {
var url = element["attributes"]["href"];
urls.push(url);
});
});
casper.run(function() {
this.echo(urls.length + ' links found:');
this.echo(urls.join('\n')).exit();
});

I've looked at the page. Your misconception is probably that you think the .badge-post-grid-load-more element vanishes as soon as the next elements are loaded. This is not the case. It doesn't change at all. You have to find another way to test whether new elements were put into the DOM.
You could for example retrieve the current number of elements and use waitFor to detect when the number changes.
function getNumberOfItems(casper) {
return casper.getElementsInfo(".listview .badge-grid-item").length;
}
function tryAndScroll(casper) {
casper.page.scrollPosition = { top: casper.page.scrollPosition["top"] + 4000, left: 0 };
var info = casper.getElementInfo('.badge-post-grid-load-more');
if (info.visible) {
var curItems = getNumberOfItems(casper);
casper.waitFor(function check(){
return curItems != getNumberOfItems(casper);
}, function then(){
tryAndScroll(this);
}, function onTimeout(){
this.echo("Timout reached");
}, 20000);
} else {
casper.echo("no more items");
}
}
I've also streamlined tryAndScroll a little. There were completely unnecessary functions: the first casper.waitFor wasn't waiting at all and because of that the onTimeout callback could never be invoked.

Something wrong about print function in doneFunction (Jquery)

i try to print page after columnize function is finished but print function is happen 2 times ,First time it print before columnize function is done and second time it's happen when columnize function is finished.Can you help me ?
this is my code
<script>
$(function () {
var content_height = 856; // the height of the content, discluding the header/footer
var page = 1; // the beginning page number to show in the footer
function buildNewsletter() {
if ($('#newsletterContent').contents().length > 0) {
// when we need to add a new page, use a jq object for a template
// or use a long HTML string, whatever your preference
$page = $("#page_template").clone().addClass("page").css("display", "block");
// fun stuff, like adding page numbers to the footer
$page.find(".footer #lbl_pageNum").append(page);
$page.find(".footer #lbl_pageNum2").append(page);
//create label to recive data
$("body").append($page);
page++;
// here is the columnizer magic
$('#newsletterContent').columnize({
columns: 1,
target: ".page:last .content",
overflow: {
height: content_height,
id: "#newsletterContent",
doneFunc: function () {
console.log("done with page");
buildNewsletter();
printForm();
}
}
});
}
}
setTimeout(buildNewsletter, 1000);
});
function printForm() {
window.print();
}
</script>

Responsive JavaScript: Attempts to Fire Functions based on Media Queries

Third day I'm trying to implement media queries in JavaScript.
Say function A() can be called only if (min-width: 768px),
and the function B() can be called only if (max-width: 767px).
This is easily achieved by using MediaQueryList object. But problems occur with browser resizing.
A function A() can not be called if the page was loaded on
(max-width: 767px), and then resizing to (min-width: 768px).
A function A() fires multiple times on click if I try call function on window resize.
I have tried different solutions:
using addListener
enquire.js
setTimeout / clearTimeout — http://go.shr.lc/1kGNpM6
etc
But obviously my knowledge of JavaScript is not enough to do things write. Please help
// Attempt #1 -----------------------------------------------------------------
function responsiveFunction(){
if(window.matchMedia('(max-width: 767px)').matches) {
$('.btn').click(function(event) {
// Knock knock
});
}
}
$(function(){
responsiveFunction();
});
$(window).resize(function(){
responsiveFunction();
});
// Attempt #2 -----------------------------------------------------------------
function responsiveFunction(mql) {
    if (mql.matches) {
     $('.btn').click(function(event) {
// Knock knock
});
    }
}
 
var mql = window.matchMedia('min-width: 768px'); // MQL for MediaQueryList object
 
mql.addListener(responsiveFunction); // Execute responsive function on resize
 
responsiveFunction(mql); // Execute responsive function on load
// Attempt #3 -----------------------------------------------------------------
var smartResize = (function() {
var timers = {};
return function(callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = 'Don\'t call this twice without a uniqueId';
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
function responsiveFunction() {
if (window.matchMedia('(min-width: 768px)').matches) {
$('.btn').click(function(event) {
// Knock knock
});
}
}
// Execute responsive function on load
responsiveFunction();
// Execute responsive function on resize
$(window).resize(function() {
smartResize(function() {
responsiveFunction();
}, 500, 'myUniqueId');
});
// Attempt #4 w enquire.min.js ---------------------------------------------
enquire.register('(min-width: 768px)', {
match: function() {
$('.btn').click(function(event) {
// Knock knock
});
}
});

This should work:
$(function(){
$('.btn').on('click', function(event) {
if(window.matchMedia('(max-width: 767px)').matches) {
// Only run the code if media query matches
}
});
});
Register the click handler without checking the max-width and check the width just before you run the code, if the width condition matches then run the code otherwise doesn't run the code.

window.settimeout in javascript loading too fast

I have this js code that has to make the height of a panel bigger on load of my page. But it seems to be loading it way too fast.
var TimerID;
function LoadDoc() {
for(i=0;i<=100;i++){
TimerID=window.setTimeout(MoveRolldownDown(i),5000);
}
}
function MoveRolldownDown(i){
document.getElementById('Rolldown').style.height=i + '%';
window.clearTimeout(TimerID);
}
This loads in the page nearly instantly, so how can i make this load slower. At the top of my HTML page i have this code
document.onreadystatechange = function () {
if(document.readyState === "complete"){
LoadDoc();
}
}

1st thing -- your functions are executing immediately so you need to put them inside of another function.
One more thing -- all of your timeouts end at basically the same time!
Try something like this:
function LoadDoc() {
for (i = 0; i <= 100; i++) {
var down = i;
setTimeout((function (down) {
return function(){ //return function for timeout
MoveRolldownDown(down);
};
})(i), 10 * i);
}
}
function MoveRolldownDown(i) {
document.getElementById('Rolldown').style.height = i + '%';
}
Demo: http://jsfiddle.net/maniator/RTaZh/

Yes, it because you are calling the function within the parameters,
You probably want something like
window.setTimeout(MoveRolldownDown,5000, [i]);
https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout