We Keep Coding

Click a button that is visible in viewport

I have several buttons in div in an html page , I want to click the buy button which is visible in viewport , when I press the key B.
$(document).keydown(function(e) {
if (e.keyCode == 66) {
//click the visible buy button in viewport ,
$(".buy").click();
}
});
<section>
<div class="buy">BUY</div>
<div class="buy">SELL</div>
</section>
<section>
<div class="buy ">BUY</div>
<div class="buy ">SELL</div>
</section>
<section>
<div class="buy ">BUY</div>
<div class="buy ">SELL</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note : there are 100's of buy button , but only 1 buy button appears at a time in viewport

If other .buy buttons are invisible really, you can try this:
$(".buy:visible").click();
Else, get your visible section by this:
var myVisibleSection = document.elementFromPoint(x+10, y+10);
(The x and y are position of parent of your sections that is matches with visible section and you can get them by jquery (.offset()) or vanilla js. 10's are sum of border and padding of the parent.)
Now:
myVisibleSection.find(".buy").click();

You could try to use this convenient function which tells us if the button is visible in the viewport, which I found in this blog. Also please make the css class sell which is the same as buy and set it for the sell div's, since we need to distinguish between the two buttons!
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(document).keydown(function(e) {
if (e.keyCode == 66) {
//click the visible buy button in viewport ,
$(".buy").each(function( index ) {
if($(this).isInViewport()){
console.log($(this).html() + " - " + index);
$(this).click();
}
});
}
});
section {
height: 100vh;
width: 100%;
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>
<section>
<div class="buy">BUY</div>
<div class="sell">SELL</div>
</section>

How to get infinite scroll to work?

I'm trying to get this infinite load script to work in my project.
Here's my HTML:
<!-- Contents -->
<div id="page-container">
<div id="scroller">
<div id="page_1" class="pagina"></div>
<div id="page_2" class="pagina"></div>
<div id="page_3" class="pagina"></div>
<div id="page_4" class="pagina"></div>
<div id="page_5" class="pagina"></div>
<div id="page_6" class="pagina"></div>
</div>
</div>
<div id="pages-to-load">
<div id="page_7" class="pagina"></div>
...
<div id="page_25" class="pagina"></div>
</div>
And here's the script:
function scrollalert(){
var pages = document.getElementById("scroller").getElementsByTagName("div");
var currentPageId = pages[pages.length - 1];
//console.log("currentPageId is: "+currentPageId);
var scrollbox = document.querySelector('#page-container');
var scrolltop = $(window).scrollTop();
var scrollheight = scrollbox.scrollHeight;
var windowheight = $(window).height();
var scrolloffset=20;
console.log(scrolltop);
console.log(scrollheight);
console.log(windowheight);
console.log(scrollheight-(windowheight+scrolloffset));
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
//fetch new items
console.log("loading more pages");
(function() {
alert('test');
var i;
var pagesToLoad = $("#pages-to-load > div").size();
for (i = 0; i < pagesToLoad; i++) {
console.log(pagesToLoad[i].id);
$.get(pagesToLoad[i].id, function(newitems){
alert('get new page');
$('#scroller').append(newitems);
updatestatus();
})
};
})();
};
}
Whatever I try, I can't seem to load and append my new pages. Also when scrolling down, my scrollTop and scrollHeight don't change. I'm sure I'm missing something obvious here. Also my pages-to-load is undefined?

Here is one infinite-scroll script of mine using JQuery which works:
Html:
<html>
<head>
<title>Scroll Troll Page</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="scrollbox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
<script type="text/javascript">
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
}
});
</script>
in Line:
box.html(box.html + "Place content to expand here");
You can add the content that should be added to your container when reaching the bottom of the page while scrolling.
Working jsFiddle:
http://jsfiddle.net/MdrJ4/3/

I think we should rely on intersectionObserver instead of the onScroll event. I have put together an article on medium here explaining the performance gains of the two approaches
you only need vanilla js

i have a problem for using endless scrolling, so i wrote a library and solved my problem. i think this library may help you for this problem.
use this library as easy way to implement infinite scrolling :
https://github.com/hamedtaheri32/infinite-scrolling
example :
<script>
$(document).ready(function(){
$(document).infiniteJscroll({
offset:0,
topOfPage:function(){
console.log('Scrolled to Page Top');
},
bottomOfPage:function(){
console.log('Scrolled to Page Bottom');
addContent();
},
pageInit:function(){
console.log('Initialize page');
addContent();
}
});
});
//This method used for simulate loading data from server. replace it with AJAX loading method.
function addContent() {
var c = '';
for (var i = 0; i < 10; i++) {
c += '<a class="box"></a>';
}
$("#post").append(c);
}
</script>
features :
detect page top
detect page bottom
can use offset for detect page bottom
have page initialize method
ability for mix with AJAX loading page

can use below script
window.onscroll = function (ev) {
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
let currentScrollHeight = window.innerHeight + window.scrollY;
if ((scrollHeight - currentScrollHeight) < 200) {
// your statement
}
};
full example in jsfiddle

This is what I did: (Please correct me if I'm wrong)
$(document).ready(() => {
var page = 1;
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
page++;
if (page == 2) {
$('#div2').removeClass('hide');
}
if (page == 3) {
$('#div3').removeClass('hide');
}
if (page == 4) {
$('#div4').removeClass('hide');
page = 1;
}
}
});
});
.page {
width: 100%;
background-color: black;
color: white;
height: 100vh;
border-top: 1px solid white;
}
.hide {
display: none;
}
body {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Infinite Scroll</title>
<link href='css/bootstrap.css' ref='stylesheet'>
</head>
<body>
<div id='div' class='page'>
<h1>Page 1</h1>
</div>
<div id='div2' class="page hide">
<h1>Page 2</h1>
</div>
<div id='div3' class="page hide">
<h1>Page 3</h1>
</div>
<div id='div4' class="page hide">
<h1>Page 4</h1>
</div>
<script src='js/jquery.min.js'></script>
<script src='js/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/myjquery.js'></script>
</body>
</html>

// check if scrolling near to bootom of page , load more photos
window.addEventListener('scroll',()=>{
if(window.innerHeight+window.scrollY>=document.body.offsetHeight-100){
//your logic or function
}
});

Expand/retract blinking bug in JavaScript

I have facing this bug, I have a script in JavaScript which handle actions on mousedown event. one do expanding and one do retracting the element using the JavaScript. It's done by timeloop and increasing the height of the div till the height fits the content or decreasing till the div is hidden. When you click on extract, wait till it extract and then click retract all works fine. The problem occurs when you quickly click extract and then retract (before the extraction ends). Then the magic bug appears. The actions is stuck in extracting and re-tracking one step and never ends.
I thought the problem should be with the loop variables (loop end condition).
Does anyone see where the problem rly is and how it could be fixed?
HERE'S THE CODE:
If you just copy the code into: something.html and extract_retract.js you can see the problem I'm dealing with.
Html document:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{ padding:10px 20px; background:#D9ECFF; }
div.mydivs {
background: #97D6FB;
width: 500px;
height:0px;
overflow:hidden;
}
div.mydivs > p{ padding:4px 16px; background: #97D6FB;}
</style>
<script type="text/javascript" src="expand_retract.js"></script>
</head>
<body>
<h3>Programming Raw JavaScript expand() and retract() Animation Functions</h3>
<p>
Expand Box 1 |
Retract Box 1
</p>
<div id="div1" class="mydivs">
<p>Box 1 Content</p>
<p>Box 1 Content</p>
<p>Box 1 Content</p>
</div>
<p>
Expand Box 2 |
Retract Box 2
</p>
<div id="div2" class="mydivs">
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>
</head>
<body>
</body>
</html>
expand_retract.js code below:
function expand(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+element+'\')',8);
if(h < sh){
h += 5;
} else {
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}
function retract(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+element+'\')',8);
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}

Great code. I propose this to solve this issue:
var loopTimer = 0;
function expand(element) {
clearInterval(loopTimer);
loopTimer = setInterval('expandA(\''+element+'\')',8);
}
function expandA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
if(h < sh){
h += 5;
} else {
clearInterval(loopTimer);
}
target.style.height = h+"px";
}
function retract(element) {
clearInterval(loopTimer);
loopTimer = setInterval('retractA(\''+element+'\')',8);
}
function retractA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearInterval(loopTimer);
}
target.style.height = h+"px";
}

Mirco-jumps when using scrollTop jquery animation

I have a problem with the scrollTop jquery animation.
It micro-jumps right before the animation. The heavier the content is, worst it is.
I don't understand why does it do that...
Below, a sample of my code. (just copy/paste on file, it's a standalone code, I hadn't good result on jsfiddle)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
html,body{height:100%;width:100%}body{width:100%;height:100%}section{display:block;width:896px;margin:0 auto;padding:0 48px}article{content:' ';position:relative;display:block;top:0;width:100%;height:500px;padding:20% 0}#ghostPage{height:30px;padding:0}section div{text-align:center;width:100%;height:100%}#page1 div{background-color:red}#page2 div{background-color:blue}#page3 div{background-color:#A52A2A}#page4 div{background-color:green}#page5 div{background-color:#FF0}#page6 div{background-color:#000}#page7 div{background-color:orange}#page8 div{background-color:purple}#page_loader{text-align:center;position:fixed;top:0;left:0;background-color:white;width:100%;height:100%;z-index:9999}
</style>
<section class="clearfix">
<div id="page_loader" class="loader1"></div>
<article id="page1">
<div>Page1</div>
</article>
<article id="page2">
<div>Page2</div>
</article>
<article id="page3">
<div>Page3</div>
</article>
<article id="page4">
<div>Page4</div>
</article>
<article id="page5">
<div>Page5</div>
</article>
<article id="page6">
<div style="color: white">Page6</div>
</article>
<article id="page7">
<div>Page7</div>
</article>
<article id="page8">
<div>Page8</div>
</article>
<article id="ghostPage"></article>
</section>
</body>
<script type="text/javascript">
/*
**
** Sliding
**
*/
function goToByScroll(id) {
var speed = 1200;
var offset = $('#page'+id).offset();
if (offset) {
$('body').stop().animate({scrollTop: offset.top},{duration: speed, queue: false});
window.location = '#page'+id;
}
}
/*
**
** Get current page id
**
*/
function getPageId() {
var url = document.location.toString();
if (url.match('#')) {
var anchor = url.split('#')[1];
var anchorId = parseInt(anchor.split('page')[1]);
if (!isNaN(anchorId))
return anchorId;
}
return 1;
}
/*
**
** MouseWheel handling
**
*/
function handle(delta) {
if (delta > 0)
goToByScroll(getPageId() - 1);
else if (delta < 0)
goToByScroll(getPageId() + 1);
}
function wheel(event){
event.preventDefault();
event.stopPropagation();
var delta = 0;
if (event.wheelDelta)
delta = event.wheelDelta/120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
handle(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
/*fades le loader mask out*/
$(document).ready(function() {
$('#page_loader').css('background-image', 'none');
$('#page_loader').css('background-color', 'rgba(255, 255, 255, 0)').animate('slow', function(){$('#page_loader').css('z-index', '-9999');});
});
</script>
</html>
The content is not that heavy so it's hard to see the bug. Firefox make it easier to see and quick scrolling too.
I'm waiting your good advises. :)

ok, the problem is this line: window.location = '#page' + id;
by changing the hash-tag the page jumps to the specified element, then the jQuery kicks in and animates to the same ID. I tried around a little and my final version is this: http://jsfiddle.net/h6CS4/6/
though it's not great...
try this plugin instead of re-inventing the wheel: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Absolute positioning breaks in IE8

I am working on developing an asp.net control that I need to be able to drop into other applications. The control is basically a custom dropdown in which a div gets displayed or hidden when another element is clicked.
The problem I am having is in trying to get the dynamic div to align below the element that gets clicked. I wrote a javascript function which should, in theory, allow me to specify two elements and the desired alignment and then move the second element to the correct position in relation to the first element.
I have three test cases which relate to places where I currently expect this control will be used, my current markup and javascript work in all three cases for IE7 but fails for one of the cases in FF3.5 and IE8-standards mode. I have been playing with this for a while and have yet to come up with an answer that fixes the problem case without breaking one of the others. (Note that 90+% of my users are on IE7 with a slow migration towards IE8)
I am looking for any suggestions other than adding a compatibility mode directive to the page, that does fix things in IE8 but I would prefer an alternative if one is possible since I may not always have control over where this is used. Here is an HTML doc which illustrates the relevant markup and javascript along with the test cases. Case three is the one which has problems, instead of aligning neatly under the input element the div is overlapping vertically and offset to the right by a distance equivalent to the width of the select element.
(Note that the real pages utilize a reset style sheet adapted from the one published by Eric Meyer, including/omitting this style sheet has no relevant effect on these test cases.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var VAlign = { "top": -1, "center": 0, "bottom": 1 };
var HAlign = { "left": -1, "center": 0, "right": 1 };
function AlignElements(element1, vAlign1, hAlign1, element2, vAlign2, hAlign2) {
var List1 = BuildOffsetList(element1);
var List2 = BuildOffsetList(element2);
var Index1 = List1.length - 1;
var Index2 = List2.length - 1;
while (Index1 >= 0 && Index2 >= 0 && List1[Index1] == List2[Index2]) {
Index1--;
Index2--;
}
element2.style.top = "";
element2.style.left = "";
var OT1 = 0;
var OL1 = 0;
var OT2 = 0;
var OL2 = 0;
while (Index1 >= 0) {
OT1 += List1[Index1].offsetTop;
OL1 += List1[Index1].offsetLeft;
Index1--;
}
while (Index2 >= 0) {
OT2 += List2[Index2].offsetTop;
OL2 += List2[Index2].offsetLeft;
Index2--;
}
var top = (OT1 - OT2);
if (vAlign1 == VAlign.bottom) {
top += element1.offsetHeight;
} else if (vAlign1 == VAlign.center) {
top += (element1.offsetHeight / 2);
}
if (vAlign2 == VAlign.bottom) {
top -= element2.offsetHeight;
} else if (vAlign2 == VAlign.center) {
top -= (element2.offsetHeight / 2);
}
var left = (OL1 - OL2);
if (hAlign1 == HAlign.right) {
left += element1.offsetWidth;
} else if (hAlign1 == HAlign.center) {
left += (element1.offsetWidth / 2);
}
if (hAlign2 == HAlign.right) {
left -= element2.offsetWidth;
} else if (hAlign2 == HAlign.center) {
left -= (element2.offsetWidth / 2);
}
element2.style.top = top + "px";
element2.style.left = left + "px";
}
function BuildOffsetList(elelment) {
var I = 0;
var List = new Array();
var Element = elelment;
while (Element) {
List[I] = Element;
Element = Element.offsetParent;
I++;
}
return List;
}
</script>
Case 1
<div>
<div id="control1" style=" display:inline; position:relative;">
<div id="control1_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control1_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control1_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control1_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
<div style="height:100px;"></div>
Case 2
<div>
<div id="Nav" style="float:left; width:200px; height:150px; background-color:Aqua;"></div>
<div id="Content" style="margin-left:200px; height:150px; background-color:#ddd;">
<div style="margin-left:100px;">
<h5 style="float:left; margin-left:-100px; width:90px; margin-right:10px; text-align:right; font-weight:.9em;">Label</h5>
<div id="control2" style=" display:inline; position:relative;">
<div id="control2_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control2_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control2_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control2_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
</div>
</div>
<div style="height:100px;"></div>
Case 3
<div>
<select><option>something</option></select>
<br />
<select><option>something else</option></select>
<div id="control3" style=" display:inline; position:relative;">
<div id="control3_div1" style="background-color:Blue; height:75px; width:150px; position:absolute;"></div>
<input id="control3_txt1" type="text" style="width:150px;" />
<script type="text/javascript">
AlignElements(document.getElementById("control3_txt1"), VAlign.bottom, HAlign.left, document.getElementById("control3_div1"), VAlign.top, HAlign.left);
</script>
</div>
</div>
</body>
</html>

The third case is breaking apart because of the inline display of the parent div - it cause the relative position to have no effect as far as I know.
To test such case use float instead, here is working example:
http://jsfiddle.net/yahavbr/estYF/1/

Thanks to Shadow Wizard for getting me thinking in the right direction. Turns out that the issue is that my absolutely positioned elements do not move to their 0,0 point when I clear the top and left properties. If I change the code to explicitly put them at 0,0 before calculating the offset difference then everything works beautifully.
element2.style.top = "";
element2.style.left = "";
becomes
element2.style.top = "0px";
element2.style.left = "0px";