We Keep Coding

jQuery/JS Resize of iframe not working

I try to resize an iframe with jQuery and JS. First I get the iframe out of a list of iframes and resize it when the iframe-content is ready.
NOTE: The two-steps resize is necessary because otherwise after the
content of the iframe-page is a huge space.
Problem: In the while-loop I check if the content of the iframe is ready, when not I set a timeout of 1 second. But jQuery don’t check if the content ready it always goes inside the if and try to resize the iframe but fails because jQuery cannot get the size of a NULL element.
Has someone of you a solution for my problem?
My Code:
$(document).ready(function () {
var iframes = $(".my-iframe");
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
var iframeIsReady = false;
do
{
if ($(iframe).ready)
{
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
iframeIsReady = true;
}
else
{
setTimeout(resizeIframe(iframe), 1000);
}
}while(!iframeIsReady);
}
Edit:
Check out my solution

Hi there is small change in your code please check following.
$(document).ready(function () {
var iframes = $(".my-iframe")[0]; // $(".my-iframe"); /Edited
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
var iframeIsReady = false;
do
{
if ($(iframe.contentDocument).ready) // added 'iframe.contentDocument' instead of iframe
{
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
iframeIsReady = true;
}
else
{
setTimeout(resizeIframe(iframe), 1000);
}
}while(!iframeIsReady);
}
try this.
I checked code again found that $(".my-iframe") returns array of element object.
We need object here not array.
So i hard coded 0th index. you can use id instead of this.

Solution of my problem is:
$(document).ready(function () {
var iframes = $(".my-iframe");
$.each(iframes, function () {
resizeIframe(this);
});
});
function resizeIframe(iframe) {
$(iframe).width("100%");
setInterval(function () {
//Check if the Content inside the iframe is ready
if ($(iframe.contentDocument.body).ready) {
var iframeHeight = iframe.contentDocument.body.scrollHeight;
$(iframe).height(iframeHeight);
var iframeContentHeight = $(iframe).children("#DivInPage").height();
$(iframe).height(iframeContentHeight);
//Close the Function
return;
}
}, 1000);
}

Scroll Function Firing Multiple Times Instead of Once

I am trying to create a website that automatically scrolls to each section upon a single scroll action. This means that the code has to check if the page is scrolled up or scrolled down. I believe the code below solves my problem but the scroll action is fired more than once while the page is scrolling. You will see that the first alert in the if statement reaches 5 instead of the desired 1. Any help on the matter would be highly appreciated.
[Note] I am using the velocity.js library to scroll to each section within the container.
var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];
var pageCur = 0;
var lastScrollTop = 0;
page.scroll(function(){
var st = $(this).scrollTop();
var pageNex = pageCur + 1;
if (st > lastScrollTop){
alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});

The scroll event (as well as the resize event) fire multiple times as a user does this. To help this, the best practice is to debounce. However, I've never gotten that to work. Instead, I use a global boolean to check if the function has fired.
var scrolled = false;
page.on('scroll', function(){
if(!scrolled){
scrolled = true;
//do stuff that should take a while...
scrolled = false;
};
});

This worked for me!
var ScrollDebounce = true;
$('.class').on('scroll',
function () {
if (ScrollDebounce) {
ScrollDebounce = false;
//do stuff
setTimeout(function () { ScrollDebounce = true; }, 500);
}
})

Positioning a div using jQuery offfset - Code works but only for one element

I am trying to set the position of a div using CSS 'top' based on the offset position of another element. This element is not adjacent or a parent/child therefore I have to use javascrip/jQuery.
I came across the following code which worked perfect for my first element (with offset position retrieved from 'mark2' and position properly set for 'side2' however when I replicate the code for 'mark3' and 'side3' respectfully it does not work. Either block of code works in isolation but seem to conflict with each other. I renamed all variables and still there is a conflict.
If anyone can shed some light on this it would be greatly appreciated!
<script type="text/javascript">
window.onload = function(event) {
//Get
var p = $("#mark2");
var something = p.offset();
//set
$("#side2").css('top', something.top+'px');
};
window.onresize = function(event) {
//Get
var p = $("#mark2");
var something = p.offset();
//set
$("#side2").css('top', something.top+'px');
};
</script>
<script type="text/javascript">
window.onload = function(event) {
//Get
var y = $("#mark3");
var somethingelse = y.offset();
//set
$("#side3").css('top', somethingelse.top+'px');
};
window.onresize = function(event) {
//Get
var y = $("#mark3");
var somethingelse = y.offset();
//set
$("#side3").css('top', somethingelse.top+'px');
};
</script>

Everytime you do window.onload = something, you're overwriting that property.
You need an event handler, and as you're using jQuery
$(window).on('load resize', function() {
var p = $("#mark2");
var something = p.offset();
$("#side2").css('top', something.top + 'px');
var y = $("#mark3");
var somethingelse = y.offset();
$("#side3").css('top', somethingelse.top+'px');
});

When you use the = way of setting an event listener it override the previous event listener. The best way to fix this is using a callback function in a jquery event like so:
$(window).on('load', function (event) {
// Code goes here
});
$(window).on('resize', function (event) {
// Code goes here
});
That should allow more than one event listener per event.

How to get page scrolling position (y axis)

How can i get the current scrolling position of my browser?, i want to fire events base on page position.This is what I tried:
var scroll_position=document.viewport.getScrollOffsets();
window.onscroll = function (event) {
if(scroll_position>1000)
{
alert('xxxxxxxxxxx');
}

Assuming that you're always going to be testing with window, you can use window.scrollY:
window.onscroll = function (event)
{
if(this.scrollY > 1000)
{
alert('xxxxxxxxxxx');
}
}
jsFiddle Demo

Try with:
window.onscroll = function (event) {
if (window.scrollY > 1000) {
alert('xxxxxxxxxxx');
}
}

As hsz said, do
window.onscroll = function (event) {
var scroll_position = document.viewport.getScrollOffsets();
if (scroll_position > 1000)
{
alert('xxxxxxxxxxx');
}
}
The problem with your code:
var scroll_position=document.viewport.getScrollOffsets();
scroll_position is only set once, when the page loads - therefore it stays the same (probably 0) and the alert never comes up because scroll_position is less than 1000.
hsz put the statement that sets scroll_position into the window.onscroll function, so it is updated every time the page scrolls.

Only fire a function once on scroll (scrollstop)

So, I'd like to fire a function only once on scroll (using Scrollstop, given by a stackoverflow answer)
The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.
I don't think it's difficult, but.. I didn't get to make it work so far.
Here's the plugin I'm using
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,300,self));
});
};
and here's my code:
$(window).scrollStopped(function(){
if ($(".drawing1").withinViewport()) {
doNothing()
}
})
var doNothing = function() {
$('#drawing1').lazylinepainter('paint');
}
(removed the counter since it didn't work)
Live demo here
PS: the function I'd like to make happen only once is the lazyPaint. It begins when we scroll to the element but it fires once again when it ends.

Here's my version of having a function fire once while listening to the scroll event:
var fired = false;
window.addEventListener("scroll", function(){
if (document.body.scrollTop >= 1000 && fired === false) {
alert('This will happen only once');
fired = true;
}
}, true)

how about using a variable to see whether it was previously fired:
var fired = 0;
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
if(fired == 0){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,300,self));
fired = 1;
}
});
};

These anwsers didn't work for me so here's my code:
var fired = 0;
jQuery(this).scroll(function(){
if(fired == 0){
alert("fired");
fired = 1;
}
});

How about this solution?
function scrollEvent() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
window.removeEventListener("scroll", scrollEvent);
}
}
window.addEventListener("scroll", scrollEvent);

The question is a bit old, but as it popped up first when I search for "addeventlistener scroll once", I will add this reply. There is now a { once: true } parameter to only trigger an event once.
window.addEventListener("scroll", () => {
/* your code here */
}, { once: true });