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();
});
});

different pages loading into div with delay

I'm trying to load three different html files into a div, one after the other, with a delay of 5 seconds. After it cycles through all three I want it to carry on repeating. I tried using timeout to do this but its still not working.Any help would be appreciated.. code snippet below
<script type="text/javascript">
$(document).ready(function() {
jQuery(window).load (function timeout() {
setTimeout(function () {
if($("#news_sections").hasClass("news1")){
$("#news_sections").attr('class', "news2");
$( "#news_sections" ).load( "section2.html" );
}else if($("#news_sections").hasClass("news2")){
$("#news_sections").attr('class', 'news3');
$( "#news_sections" ).load( "section3.html" );
}else{
$("#news_sections").attr('class', 'news1');
$( "#news_sections" ).load( "section1.html" );
};
timeout();
}, 4000);
});
});
});
</script>

Untested but you should do something like this:
$(function(){
var curIdx = 0, /* internal counter */
urls = ['page1.html','page2.html','page3.html'], /* your urls*/
doCache = true, /* set to false to disable caching */
cache = {} /* storage */;
function nextPage(){
var data = false,
url = urls[curIdx];
if(doCache && cache[url]) {
data = cache[url];
}
curIdx += 1;
// all urls displayed - reset counter, show first page again
if(curIdx == urls.length) {
curIdx = 0;
}
// load data (and cache it, if doCached option is true)
if(!data){
$("#content").load(url, function(data){
cache[url] = data;
nextTimer();
})
} else {
$("#content").html(data);
nextTimer();
}
};
// now to timeout
function nextTimer(){
window.setTimeout(function(){ nextPage() }, 5000); // 5 Seconds
}
// and run it...
nextPage();
});
Be aware that this might not work with external urls.

You can use this, instead of changing classes and depending on them.
In case you have more than 10 sectionX.html files, you will need to write a lot of code there. So if you make an counter, you have to change only the if statement to (count > X) where X = number of templates you have.
var count = 1;
setInterval(function () {
// If the count is more 3, we reset the count to 1.
if (count > 3) {
count = 1;
}
// If you are using "newsX" class for looping propose only,
// You can remove .attr() method in my solution.
$("#news_sections").attr('class', "news" + count);
// clear news section
$("#news_sections").empty();
// Load the count number sectionX.html file
// Also increase count number with 1 (count++)
$("#news_sections").load( "section" + count++ + ".html" );
}, 1500);

Your code seems a bit convoluted, and you should probably not use setTimeout like that. I believe what you're looking for is setInterval, which executes the same function repeatedly, every X milliseconds.
I simplified it a bit. First, declare the loopNews() function, and then set the timeout call when the document is ready.
function loopNews(){
if($("#news_sections").hasClass("news1")){
$("#news_sections").attr('class', "news2");
$("#news_sections").load( "section2.html" );
}else if($("#news_sections").hasClass("news2")){
$("#news_sections").attr('class', 'news3');
$("#news_sections").load( "section3.html" );
}else{
$("#news_sections").attr('class', 'news1');
$("#news_sections").load( "section1.html" );
}
}
$(document).ready(function() {
window.setInterval(loopNews, 5000);
});

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.

How to print page function after columnize function is finished

Hi i have some problem to ask you. Now i need to print page after function columnize is finished but print function is work before columnize function is finishing. How to print page after columnize function finished in script .
<script>
$(function () {
var content_height = 711; // 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();
}
}
});
}
}
setTimeout(buildNewsletter, 1000);
});
function printForm() {
window.print();
}

doneFunc: function () {
console.log("done with page");
printForm();
Is this what you intended?
From what I understand, this runs when the function is finished. Therefore, have the printForm() function run during the doneFunc() function.

Wait until div is not visible to process next line

I need to write some code which is supposed to wait until a predefined div is no longer visible in order to process the next line. I plan on using jQuery( ":visible" ) for this, and was thinking I could have some type of while loop. Does anyone have a good suggestion on how to accomplish this task?
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if ($(".mstrWaitBox").attr("visibility")!== 'undefined') || $(".mstrWaitBox").attr("visibility") !== false) {
alert('inside else');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if (!$(".mstrWaitBox").is(":visible")) {
alert('inside if');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
div when not visible:
<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt">​
</div>​
div when visible:
<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt" visibility="visible">​
</div>​

You can use the setTimeout function to poll the display status of the div. This implementation checks to see if the div is invisible every 1/2 second, once the div is no longer visible, execute some code. In my example we show another div, but you could easily call a function or do whatever.
http://jsfiddle.net/vHmq6/1/
Script
$(function() {
setTimeout(function() {
$("#hideThis").hide();
}, 3000);
pollVisibility();
function pollVisibility() {
if (!$("#hideThis").is(":visible")) {
// call a function here, or do whatever now that the div is not visible
$("#thenShowThis").show();
} else {
setTimeout(pollVisibility, 500);
}
}
}
Html
<div id='hideThis' style="display:block">
The other thing happens when this is no longer visible in about 3s</div>
<div id='thenShowThis' style="display:none">Hi There</div>

If your code is running in a modern browser you could always use the MutationObserver object and fallback on polling with setInterval or setTimeout when it's not supported.
There seems to be a polyfill as well, however I have never tried it and it's the first time I have a look at the project.
FIDDLE
var div = document.getElementById('test'),
divDisplay = div.style.display,
observer = new MutationObserver(function () {
var currentDisplay = div.style.display;
if (divDisplay !== currentDisplay) {
console.log('new display is ' + (divDisplay = currentDisplay));
}
});
//observe changes
observer.observe(div, { attributes: true });
div.style.display = 'none';
setTimeout(function () {
div.style.display = 'block';
}, 500);
However an even better alternative in my opinion would be to add an interceptor to third-party function that's hiding the div, if possible.
E.g
var hideImportantElement = function () {
//hide logic
};
//intercept
hideImportantElement = (function (fn) {
return function () {
fn.apply(this, arguments);
console.log('element was hidden');
};
})(hideImportantElement);

I used this approach to wait for an element to disappear so I can execute the other functions after that.
Let's say doTheRestOfTheStuff(parameters) function should only be called after the element with ID the_Element_ID disappears, we can use,
var existCondition = setInterval(function() {
if ($('#the_Element_ID').length <= 0) {
console.log("Exists!");
clearInterval(existCondition);
doTheRestOfTheStuff(parameters);
}
}, 100); // check every 100ms