I am developing iPad application in that more than 6 iframes are available. After fully loaded the page, the page scroll went to the some where in the middle. So I decided to get page scrolltop written JavaScript code like this:
$(document).ready(function() {
try {
var iframecompleted = [];
$("iframe[id*='iframe']").each(function(eli, el) {
$(this).bind("load", iframeinit);
});
function iframeinit() {
iframecompleted.push($(this).id);
$(this).unbind("load", iframeinit);
}
var timer = setInterval(function() {
if ($("iframe[id*='iframe']").length == iframecompleted.length) {
clearInterval(timer);
$('html, body').animate({
scrollTop: 0
}, 500);
if (FrameID != "") {
var j = 0;
var ss = FrameID.split(",")
for (j = 0; j < ss.length; j++) {
var collPanel = $find("pane" + ss[j]);
if (collPanel != null)
collPanel.set_Collapsed(true);
}
FrameID = "";
}
}
}, 10);
}
catch (e) {
alert(e);
}
});
}
I would like to find a better way to achieve this task. Your ideas are more welcome.
You could do something like this :
var count = 0;
$("iframe").load(function() {
if (++count === 6)
{
alert("TODO: All the frames are loaded, do you stuff");
}
});
http://jsfiddle.net/eDVEY/
You can do something like this:
var count = $('iframe').length;
$(function() {
$('iframe').load(function() {
count--;
if (count == 0)
alert('all frames loaded');
});
});
Hope it helps
Related
I have below code where I am trying to display a message (in the form of DIV) by delaying certain amount of time in between appending div tags, I have only very little knowledge on Ajax, and tried to find a solution but I am not able to get it to work.
The below code when I try to execute it's not waiting for 2 seconds, and continuously appends div messages without any delay.
Can someone guide me please?
Here is my code
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function wait_for_some_time() {
await sleep(2000);
}
$(function () {
$("#btn-chat").click(function (event) {
event.preventDefault();
if ($("#mes_resp").val() != "") {
$("#form-chat").submit();
}
});
$("#form-chat").submit(function (event) {
event.preventDefault();
var user_input = $("#mes_resp").val();
var pre_key = $("#pre_key").val();
if (user_input != "") {
$(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');
if ((user_input == "yes" && pre_key == "duration")) {
i = 0;
while (i < 10) {
$(".media-list").append('<br>');
$(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
$(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
$("#mes_resp").val('');
wait_for_some_time();
i++;
}
}
}
$("#mes_resp").val('')
});
});</script>
Try putting the await keyword next to your call to the wait_for_some_time() function.
I replaced with setInterval() and it worked great, In case if anyone is looking for
<script>
function continueExecution() {
$(".media-list").append('<br>');
$(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
$(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
$("#mes_resp").val('');
}
$(function () {
$("#btn-chat").click(function (event) {
event.preventDefault();
if ($("#mes_resp").val() != "") {
$("#form-chat").submit();
}
});
$("#form-chat").submit(function (event) {
event.preventDefault();
var user_input = $("#mes_resp").val();
var pre_key = $("#pre_key").val();
if (user_input != "") {
$(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');
if ((user_input == "yes" && pre_key == "duration")) {
var timer;
timer = setInterval(function () {
i = 0;
while (i < 10) {
continueExecution();
i++;
}
clearInterval(timer);
}, 3000);
}
}
$("#mes_resp").val('')
});
});</script>
function testworking(n){
if(n == 1)
testuser();
else
testconfig();
}
setInterval(function(){testworking(n)}, 1000);
How do I make that function testuser(); could not start earlier than 10 seconds after the previous launch?
P.S.:
an approximate algorithm:
if(n == 1){
if (first run function `testuser()` ||
time after previous run `testuser();` == 10 seound){
testuser();
}
}
Set a flag using a timer:
var is_waiting = false;
function testuser() {
if (!is_waiting) {
//do your stuff here
} else {
alert('You must wait ten seconds before doing this again');
}
is_waiting = true;
setTimeout(function() {is_waiting = false}, 10000);
}
You can do it like this
var i = 0;
function testworking(i){
if(i < 10) {
console.log(i);
} else {
console.log('Here is 10 second');
}
}
setInterval(function(){
i = (i == 10) ? 0 : i;
i++;
testworking(i);
}, 1000);
It's not entirely clear what you're looking for, but here's something that might give you an idea.
var n = 1;
var testUserInterval;
function testworking(n) {
if (n == 1)
testuser();
else
testconfig();
}
function testuser() {
var cnt = 0;
if (testUserInterval == null) {
testUserInterval = setInterval(function() {
document.getElementById("testusercnt").innerHTML = cnt;
cnt += 1;
if (cnt == 10) {
clearInterval(testUserInterval);
testUserInterval = null;
//DO SOMETHING ???
testuser();
}
}, 1000);
}
}
function testconfig() {
document.getElementById("testconfig").innerHTML = n;
}
setInterval(function() {
testworking(n++)
}, 1000);
testuser cnt:<span id="testusercnt"> </span>
<br/>testconfig n: <span id="testconfig"> </span>
I would like this function to begin quicker once it ends. Thanks.
demo: http://jsfiddle.net/RuX5d/5/
Here is an actual timing I am currently using: http://jsfiddle.net/RuX5d/51/
$(document).ready(function() {
var i = 1, dir = 1, curFx = 'fadeIn';
var interval = setInterval(function () {
if (i == 6 && $('#slide1').is(':visible')) {
$('#slide1').fadeOut(2000);
return;
}
$('#slide'+ i)[curFx](500);
i = i + 1*dir;
if (i == 10 || i == -1) {
dir = (dir == 1)?-1:1;
curFx = (curFx == 'fadeIn')?'fadeOut':'fadeIn';
}
}, 1000);
});
Change the 500 at the end. It is the number of milliseconds between each executions of the script. Here's a demo: http://jsfiddle.net/RuX5d/49/
I have an annoying little issue here. I have code which loads content from page2 and appends it to #content. That works, but sometimes it happens twice, then appends page3 before page2. Thats because in page3, there is just one post, but in page2, 4 posts.
How can I make my code wait until the append finishes to run again? Here's my code:
$(window).scroll(
function(){
if(browserName != "safari") {
var curScrollPos = $('html').scrollTop();
}
else {
var curScrollPos = $('body').scrollTop();
}
if(curScrollPos > 218) {
$("#sidebar").addClass("open");
}
if(curScrollPos < 218) {
$("#sidebar").removeClass("open");
}
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if(scrollBottom == 0) {
if(home != 0 || search != 0 || category != 0) {
if(currentPage < numPages) {
$("#main .loader-posts").fadeIn();
currentPage++;
if(search == 1) {
var getPostsUrl = "page/"+currentPage+"/?s="+searchTerm;
}
else {
var getPostsUrl = "page/"+currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut(
'slow',
function(){
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
});
});
}
}
else {
}
}
Add a variable that keeps track of whether you are loading the next page or not and then only load if you are not currently loading something else. This is the root of your problem. .scroll() may fire twice before the next section is loaded, and as long as currentPage < numPages it will increment currentPage and load again. And, because .get() is asynchronous, you are not guaranteed to finish the first .get() request before any subsequent request. Adding a loading state fixes this.
var loading = 0; // Loading state
if (scrollBottom == 0) {
if (home != 0 || search != 0 || category != 0) {
if (currentPage < numPages && !loading) { // Only proceed if not loading
loading = 1; // We have initiated loading
$("#main .loader-posts").fadeIn();
currentPage++;
if (search == 1) {
var getPostsUrl = "page/" + currentPage + "/?s=" + searchTerm;
} else {
var getPostsUrl = "page/" + currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut('slow', function() {
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
loading = 0; // We are done loading
});
});
}
} else {
}
}
Maybe you can add an isBusy flag that you can check before the $.get(), and set it to false in the $.get() callback?
I wrote this javascript to make an animation. It is working fine in the home page. I wrote a alert message in the last.
If I go other then home page, this alert message has to come, but I am getting alert message, if I remove the function, alert message working on all pages, any thing wrong in my code?
window.onload = function(){
var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
var signUp = document.getElementById('signup-link');
if (yellows != 'undefined' && signUp != undefined){
function animeYellowBar(num){
setTimeout(function(){
yellows[num].style.left = "0";
if(num == yellows.length-1){
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},num*250);
}
}, num * 500);
}
for (var i = 0; i < yellows.length; i++){
animeYellowBar(i);
}
}
alert('hi');
}
DEMO: http://jsbin.com/enaqu5/2
var yellows,signUp;
window.onload = function() {
yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
signUp = document.getElementById('signup-link');
if (yellows !== undefined && signUp !== undefined) {
for (var i = 0; i < yellows.length; i++) {
animeYellowBar(i);
}
}
alert('hi')
}
function animeYellowBar(num) {
setTimeout(function() {
yellows[num].style.left = "0";
if (num == yellows.length - 1) {
setTimeout(function() {
signUp.style.webkitTransform = "scale(1)";
},
num * 250);
}
},
num * 500);
}
DEMO 2: http://jsbin.com/utixi4 (just for sake)
$(function() {
$("#magazine-brief h2").each(function(i,item) {
$(this).delay(i+'00').animate({'marginLeft': 0 }, 500 ,function(){
if ( i === ( $('#magazine-brief h2').length - 1 ) )
$('#signup-link')[0].style.webkitTransform = "rotate(-2deg)";
});
});
});
For starters you are not clearing your SetTimeout and what are you truly after here? You have 2 anonymous methods that one triggers after half a second and the other triggers a quarter of a second later.
So this is just 2 delayed function calls with horribly broken syntax.
Edited Two possibilities, one fixes your current code... the latter shows you how to do it using JQuery which I would recomend:
var yellows, signUp;
window.onload = function(){
yellows = document.getElementById('magazine-brief');
if(yellows != null){
yellows = yellows.getElementsByTagName('h2');
}else{
yellows = null;
}
signUp = document.getElementById('signup-link');
if (yellows != null && signUp != null && yellows.length > 0)
{
for(var i = 0; i < yellows.length; i++)
{
animeYellowBar(i);
}
}
alert('hi');
}
function animeYellowBar(num)
{
setTimeout(function(){
yellows[num].style.left = "0";
if(num == yellows.length-1){
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},num*250);
}
}, num * 500);
}
The below approach is a SUMMARY of how to use JQuery, if you want to use JQuery I'll actually test it out:
//Or using JQuery
//Onload equivelent
$(function(){
var iterCount = 0,
maxIter = $("#magazine-brief").filter("h2").length;
$("#magazine-brief").filter("h2").each(function(){
setTimeout(function(){
$(this).css({left: 0});
if(iterCount == (maxIter-1))
{
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},iterCount*250);
}
}, iterCount++ * num );
});
});