We Keep Coding

Why do I have to click twice to get links in search results menu to load page?

QUESTION:
Why do I have to click twice to get links in search results menu to load page?
See here:
Type in Staff, or Blog in the filter field. You have to click on each link twice to get the page to load?
https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html
I'm trying to get to this behaviour (i/e just one click):
https://learn.microsoft.com/en-us/dotnet/csharp/linq/
NOTE
The code in the link above has now been updated, based on the answers given below
CODE
JS I'm using
/**
* Search Filter
*/
"use strict";
(function searchFilter() {
eventListeners();
// Add Event Listerns
function eventListeners(){
document.getElementById('searchFilter').addEventListener('keyup', searchQuery);
document.getElementById('searchFilter').addEventListener('focusout', searchQuery);
document.getElementById('searchFilter').addEventListener('focusin', searchQuery);
};
function searchQuery(){
// Declare variables
let input, filter, ul_toc, li_toc, ul_suggestions, li_suggestion, a1, a2, a3, i, j, k, txtValue, txtValue2, txtValue3, link;
input = document.getElementById('searchFilter');
filter = input.value.toUpperCase();
ul_toc = document.getElementsByClassName("toc")[0];
li_toc = ul_toc.getElementsByClassName("none");
ul_suggestions = document.getElementsByClassName("searchFilter-suggestions")[0];
// Check whether input is empty. If so hide UL Element
if (filter === "") {
ul_suggestions.classList.add("is-hidden")
};
// Check whether input is not empty. If so show UL Element
if (filter !== "") {
ul_suggestions.classList.remove("is-hidden")
};
// Check whether input is not active. If so hide UL Element
if (input !== document.activeElement) {
setTimeout(function(){
ul_suggestions.classList.add("is-hidden");
}, 2000);
};
// Check whether input is active. If so show UL Element
if (input === document.activeElement) {
ul_suggestions.classList.remove("is-hidden")
};
// Keep emptying UL on each keyup event, or when input element is not active
ul_suggestions.innerHTML = "";
let df = new DocumentFragment();
// Run search query so long as filter is not an empty string
if(filter !== ""){
// Loop through all list items, and update document fragment for those that match the search query
for (i = 0; i < li_toc.length; i++) {
a1 = li_toc[i].getElementsByTagName("a")[0];
txtValue = a1.textContent || a1.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
// Start creating internal HTML
li_suggestion = document.createElement('li');
li_suggestion.classList.add("searchFilter-suggestion");
// Parent span element
let span = document.createElement("SPAN");
span.className = ("is-block is-size-7 has-padding-left-small has-padding-right-small");
link = document.createElement('a');
link.href = a1.href;
span.appendChild(link);
// Child 1 span element
let span2 = document.createElement("SPAN");
span2.className = ("is-block has-overflow-ellipsis-tablet");
span2.textContent = txtValue;
// Child 2 span element
let span3 = document.createElement("SPAN");
span3.className = ("is-block has-text-subtle has-overflow-ellipsis is-size-8 has-line-height-reset has-padding-bottom-extra-small");
j = 0;
let immediateParent = li_toc[i].parentElement;
let correctParent = li_toc[i].parentElement;
// Get top most level of branch --> Set as Node 1
while(true){
if (immediateParent.parentElement.classList.contains('toc')) break;
immediateParent = immediateParent.parentElement;
j++;
};
if (j == 0){
a2 = li_toc[i].getElementsByTagName("a")[0];
}
else {
k = 0;
for ( k = 0; k < j - 1; k++) {
correctParent = correctParent.parentElement;
};
a2 = previousByClass(correctParent, "treeitem");
a2 = child_by_selector(a2, "tree-expander")
}
txtValue2 = a2.textContent || a2.innerText;
txtValue2 = document.createTextNode(txtValue2);
// Insert Chevron Right --> Set as Node 2
let span4 = document.createElement("SPAN");
span4.className = ("has-padding-right-extra-small has-padding-left-extra-small");
span4.innerHTML = '&nbsp&#9002&nbsp';
span4.setAttribute("style", "font-size: 0.70rem; font-weight: bold");
// Get second-top most level of branch --> Set as Node 3
correctParent = li_toc[i].parentElement;
switch (j) {
case 0:
a3 = "";
break;
case 1:
a3 = li_toc[i].getElementsByTagName("a")[0];
default: {
k = 0;
for ( k = 0; k < j - 2; k++) {
correctParent = correctParent.parentElement;
};
a3 = previousByClass(correctParent, "treeitem");
a3 = child_by_selector(a3, "tree-expander")
}
}
if (a3 != ""){
txtValue3 = a3.textContent || a3.innerText;
txtValue3 = document.createTextNode(txtValue3);
span3.appendChild(txtValue2);
span3.appendChild(span4);
span3.appendChild(txtValue3);
} else {
span3.appendChild(txtValue2);
}
span.firstChild.appendChild(span2);
span.firstChild.appendChild(span3);
li_suggestion.appendChild(span);
df.appendChild(li_suggestion)
}
}
// Output HTML, and remove is-hidden class
ul_suggestions.appendChild(df);
}
}
})();
// WAIT TILL DOCUMENT HAS LOADED BEFORE INITIATING FUNCTIONS
document.addEventListener('DOMContentLoaded', searchFilter);
CSS I'm using:
/* Search Filter */
.filter-icon{
display: inline-block;
height:0.9rem;
width: 1.0rem;
text-transform: none;
text-align: center;
}
.searchFilter {
display: inline-block;
position: relative;
}
.searchFilter-input {
padding-right: 26px;
}
.searchFilter-suggestions {
list-style-type: none;
z-index: 1;
position: absolute;
max-height: 18rem;
min-width: 100%;
max-width: 100%;
padding: 0;
margin: 2px 0 0 !important;
cursor: default;
box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132),0 .3px .9px 0 rgba(0,0,0,0.108);
border: 1px solid #e3e3e3;
background-color: white;
}
#media screen and (min-width: 768px), print {
.searchFilter-suggestions {
max-width: 500px;
}
}
.searchFilter-suggestion {
display: block;
border: 1px solid transparent;
}
.searchFilter-suggestion a {
color: rgb(23, 23, 22);
text-decoration: none;
}
.searchFilter-suggestion:hover{
background-color: #f2f2f2;;
border: 1px solid rgba(0,0,0,0);
}
.is-hidden {
display: none !important;
}
Relevant portion of HTML with UL that loads the search results:
(The search results document fragment generated by the JS gets loaded in the ul, with the class, searchFilter-suggestions)
form class = "has-margin-bottom-small" action="javascript:" role="search">
<label class="visually-hidden">Search</label>
<div class="searchFilter is-block">
<div class="control has-icons-left">
<input id="searchFilter" class="searchFilter-input input control has-icons-left is-full-width is-small" role="combobox" maxlength="100" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Filter by title" type="text">
<span class="icon is-small is-left">
<img src="/../docs/assets/images/filter.png" class="filter-icon">
</span>
</div>
<ul class="searchFilter-suggestions is-vertically-scrollable is-hidden"></ul>
</div>
</form>

I think the best solution is to remove the focus listeners temporarily.
It should work using this:
(function searchFilter() {
let input = document.getElementById('searchFilter');
let suggestions = document.getElementsByClassName("searchFilter-suggestions")[0];
eventListeners();
// Add Event Listerns
function eventListeners() {
input.addEventListener('keyup', searchQuery);
suggestions.addEventListener("mouseenter", () => removeInputFocusListeners());
suggestions.addEventListener("mouseleave", () => addInputFocusListeners());
};
function addInputFocusListeners() {
input.addEventListener('focusout', searchQuery);
input.addEventListener('focusin', searchQuery);
}
function removeInputFocusListeners() {
input.removeEventListener('focusout', searchQuery);
input.removeEventListener('focusin', searchQuery);
}
...

Looping Arrays to Change Background Image of Div

I am trying to create a loop of an array that changes the background of a div only one single loop. The code is as follows;
var ImagesF = [];
ImagesF[0]="images/image1.png";
ImagesF[1]="images/image2.png";
ImagesF[2]="images/image3.png";
var i = 1;
var index = 0;
var iterations = 0;
var interval = setInterval(autoImgB(), 2000);
function autoImgB(arr1, id){
var url = 'url(' + arr1 [i] + ')';
if(index >= arr1.length) {
index = 0;
iterations++;
}
document.getElementById(id).style.backgroundImage = url;
if (iterations >= 2) {
clearInterval(interval);
} else {index++}
}
The code is being called like, onclick="autoImgB(ImagesF, 'DIV')"It seems to be trying to work and it does change the first image, however then it doesn't seem to be passing the arguments to the next iteration, what am I doing wrong?
-- UPDATE --
I have attempted to add the following code to pass the argument as originally passed during the function call autoImgB(ImagesF, 'DIV'), however I get an error that states, "arr1 is undefined".
var index = 0;
var iterations = 0;
var interval = setInterval(function() {
autoImgB(arr1, id);
}, 2000);
function autoImgB(arr1, id){
var url = 'url(' + arr1 [index] + ')';
if(index >= arr1.length) {
index = 0;
iterations++;
}
document.getElementById(id).style.backgroundImage = url;
if (iterations >= 2) {
clearInterval(interval);
} else {index++}
}
-- UPDATE 2 --
#Andy, requested that I post my nested DIV's for further help, the DIV structure within the contain are as depicted;
var ImagesF = [];
ImagesF[0]="image1.png";
ImagesF[1]="image2.png";
ImagesF[2]="image3.png";
var n = 0;
function autoImgB(arr1) {
var url = 'url(' + arr1 [n] + ')';
if (n < arr1.length) {
document.getElementById('DIV3').style.backgroundImage = url;
setTimeout(autoImgB, 2000, arr1, ++n);
console.log(url,n)
}
}
.DIV1{
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
background-image:url('');
background-color: none;
display: none;
z-index: 2;
}
.DIV2{
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
background-image:url('');
background-color: none;
display: none;
z-index: 1;
}
.DIV3{
position:absolute;
top: 40px;
left: 417px;
width:105px;
height:130px;
background-image:url('');
background-color: none;
display: block;
z-index: 2;
}
<div class="holder">
<div class="DIV1" id="DIV1"></div>
<div class="DIV2" id="DIV2"></div>
<div class="DIV3" id="DIV3"></div>
</div>
<button style="cursor:pointer" onclick="autoImgB(ImagesF)">Press</button>
What I would like for this to do is be able to call it by ID within the function, eg: autoImgB(ImagesF, 'DIV3').

OK. So the main issue is that you are calling the function immediately rather than passing a reference to the function to setInterval.
var interval = setInterval(autoImgB, 2000);
The other problem is that you aren't passing any arguments to the function. There are two ways to do that. The first is to pass them as additional arguments after the time:
var interval = setInterval(autoImgB, 2000, ImagesF, 0);
The second is to call the function itself within the setInterval callback:
var interval = setInterval(function () {
autoImgB(ImagesF, 0);
}, 2000);
The other issue is that it's not clear what your HTML looks like. You appear to be getting an element with a particular id but are passing in div as the argument. So either you have an element like <div id="div"></div> or something else is going on. You should probably take a closer look at that.
That said you can shorten your code considerably if you use setTimeout instead of setInterval, as you only need to do the minimum of checks, and there's no need to clear the timer at any point. Just check to see if the index is less than the array length and call the function again.
var div = document.querySelector('div');
function autoImgB(arr, i) {
if (i < arr.length) {
div.style.backgroundImage = 'url("' + arr[i] + '")';
setTimeout(autoImgB, 2000, arr, ++i);
}
}
autoImgB(ImagesF, 0);
Here's some working code with setTimeout.

setInterval expects a function as its first parameter
var interval = setInterval(function() {
autoImgB(ImagesF, 'DIV');
}, 2000);

The only thing which is wrong in the code you've created is that you pass the return value of the autoImgB function which is undefined into the setInterval function, but the setInterval function only accepts a function or a code string.
Documentation for setInterval
I've created a example based on your code to show you how it'll work.

Simon Game, Javascript settimeout and animation

Can anybody help me to simulate animation of four div tags?
Simply for loop should wait until opacity of div tags change in 1 second.
function animateDiv(ar) { // ar contains div tag indexes. ex:[0,3,2,3,1,0,1,2,3]
for (var i = 0; i < ar.length; i++) {
var ind = "";
if (ar[i] == 0) ind = ".red";
else if (ar[i] == 1) ind = ".blue";
else if (ar[i] == 2) ind = ".yellow";
else if (ar[i] = 3) ind = ".green";
var ok = false;
setTimeout(function () {
$(ind).css('opacity', 1);
console.log("waiting " + " index: " + i);
ok = true;
}, 1000);
if (ok == true) {
$(ind).css('opacity', 0.7);
console.log("Done!");
}
}
}
https://jsfiddle.net/z8y2v5u1/

A for loop can't wait for a timeout to finish, because the function you supply to setTimeout() is run asynchronously after the current function (and whatever called the current function) finishes. So the whole loop will run before the timeout happens.
You need to use a "pseudo-loop" that relies on setTimeout() to trigger the next iteration. Something like the following will work:
function animateDivs(ar, cb) {
var $divs = $(".red,.green,.blue,.yellow"),
i = 0;
(function next() {
if (i === ar.length) {
if (cb) cb();
} else {
var $div = $divs.eq(ar[i]).css('opacity', 1);
setTimeout(function() {
$div.css('opacity', 0.7);
i++;
next();
}, 1000);
}
})();
}
animateDivs([0,3,2,3,1,0,1,2,3], function() { console.log("Finished")});
div { width: 40px; height: 40px; display: inline-block; opacity: 0.7;}
.red { background-color: red;}
.green { background-color: green;}
.blue { background-color: blue;}
.yellow { background-color: yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red"></div><div class="green"></div>
<br/>
<div class="blue"></div><div class="yellow"></div>
The next() function changes the appropriate div to an opacity of 1, then uses setTimeout() to wait a second before changing the opacity back and then call next() again for the next index in the array.
I figured you might like some way to know when the animation had ended, so I've added a callback argument (cb) to animateDivs() that will be called after the whole array has been processed - in my example all it does is log something to the console, but you could use it to do something more interesting.

setInterval and Switch Between Divs

I'm trying to switch between divs at an interval, but also be able to stop it in order to include the ability to switch on command with an arrow button on the screen. (Like a slideshow of divs with an arrow to switch immediately.)
Therefore, I cannot use .delay(), as it cannot be stopped, so I'm trying to use .setTimeout, but I'm failing miserably. Can someone tell me what I'm doing wrong?
var divs = $('div[id^="Frame"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(1000)
.setTimeout(function(){divs.eq(i).fadeOut(1000, cycle);},2000);
i = ++i % divs.length; // increment i,
// and reset to 0 when it equals divs.length
})();

I'm not sure what you are trying to achieve, but here is some code which will fadein/fadeout the divs and you have a chance to stop the process:
var divs = $('div[id^="Frame"]').hide(),
i = 0,
currentDiv = null,
interval = null;
var stopFading = function() {
clearTimeout(interval);
}
var showDiv = function() {
if(currentDiv) {
currentDiv.fadeOut(1000, function() {
currentDiv = null;
showDiv();
});
} else {
currentDiv = divs.eq(i);
currentDiv.fadeIn(1000, function() {
interval = setTimeout(showDiv, 2000);
});
i += 1;
if(i > divs.length) i = 0;
}
}
showDiv();

LIVE DEMO
JS:
var H = $('#FrameHolder'),
D = $('#Frame > div'),
B = $('#Button'),
n = D.length,
f = 400, // fade time
p = 2500,// pause
c = 0, // counter
i; // interval
function loop(){
i = setInterval(function(){B.click();},p);
}loop();
H.hover(function(e){
var mEnt = e.type.match('t');
B.stop().fadeTo(f,!!mEnt);
return mEnt?clearInterval(i):loop();
});
B.click(function(){
D.stop().fadeOut(f).eq(++c%n).fadeIn(f);
});
HTML:
<div id="FrameHolder">
<div id="Frame">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="Button"></div>
</div>
CSS:
#FrameHolder{
position:relative;
margin:0 auto;
width:400px;
height:300px;
overflow:hidden;
}
#frame{
}
#Frame > div{
position:absolute;
top:0;
text-align:center;
line-height:276px;
width:400px;height:300px;
}
#Frame > div + div{
display:none; /* hide all but 1st */
}
#Button{
cursor:pointer;
position:absolute;
width:60px;
height:60px;
background:rgba(0,0,0,0.5);
border-radius:50%;
right:20px;
top:50%;
margin-top:-30px;
display:none;
}

Haven't taken a look to see if the rest of your code is working, but the immediate error is that setTimeout is not chainable. So the code should look like this...
EDIT -- SHOULD WORK
The other issue was that the increment of i needed to be done in the setTimeout otherwise, i would be incremented before the function ran
http://jsfiddle.net/RJe86/1/
var divs = $('div[id^="Frame"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(1000,function(){
setTimeout(function(){
divs.eq(i).fadeOut(1000, cycle);
i = ++i % divs.length; // increment i,
// and reset to 0 when it equals divs.length
},2000);
});
})();

dropdown is in middle of page, should open list according to position

I have a dropdown which is in the middle of the page. It always opens the list downwards, as it should be. Now, we have to implement it in a way that whenever the browser screen size is changed, & the dropdown box does not have enough space to open the list, it should open the list upwards.
Please let me know, if more details are required.
code :
HTML For DropDown List/Picker :
<div id="pick-container" class="wGridPx_30 hPrefixPx_2 hSuffixPx_2 outer ">
<label id="pick-label" class="input hPrefixPx_1">
<span id="pick-guide">Start typing EID, first or last name</span>
<input id="peoplepick" type="text" class="wGridPx_29" />
</label>
</div>
javascript :
if( $("div#people-picker-container").length == 0 ) {
$("#peoplepick").parent().append("<div id='people-picker-container' class='ui-picker-container'></div>");
//Set the desired height for dropdown
$("#people-picker-container").css({'max-height':'260px'});
}
Adding the list :
var people = $.parseJSON(data.d);
$("#people-picker-container").html(null);
$.each(people, function (index, item) {
//For image handler (ashx) please contact 'acn.ppl.plumbers' team to get code and access rights
var person = "<div class='ui-person-item'><input type='hidden' name='eid' value=" + item.EnterpriseId + " /> " +
"<div class='ui-person-img'><img src='/services/PhotoProvider.ashx?id=" + item.EnterpriseId + "'/></div>" +
"<div class='ui-person-info'>" +
"<span>" + item.DisplayName + "</span>" +
"<div class='ui-person-desc'>" + item.DisplayText + "</div>" +
"</div>" +
"</div>";
$("#people-picker-container").append(person);
CSS :
.ui-picker-container{
position:absolute;
border:1px solid #afafaf;
background-color:#fff;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
z-index:100;}
.ui-picker-dropup{
bottom: 18%;
}
.ie7 .ui-picker-container {
margin-top:21px;
margin-left:-240px;
}
.ui-person-item{
width:auto;
position:relative;
min-height:48px;
margin:8px 0;
background-color:#fff;
word-wrap:break-word;
cursor:pointer;
z-index:110;
}
.ui-person-img{
width:48px;
height:48px;
overflow:hidden;
position:absolute;
left:10px;
}
.ui-person-img img{
width:100%;
}
.ui-person-info{
min-width:100px;
position:absolute;
left:80px;
width:69%;
}
.ui-person-desc{
font:1em Arial;
color:#808080;
}
.hidden{
display:none;
}
.ui-person-info span {
color:#000;
font-style:normal;
left:auto;
height:auto;
top:auto;
z-index:auto;
cursor:pointer;
}
I am trying to add class - .ui-picker-dropup when screen size changes, but this is not working with all the scrren sizes, & not able to figure out how to dynamically calulate the bottom %. is there any other way to do this?
I was using this way, but this is absolutely incorrect :
//Calulate the size of scrren
var screenHight = $(window).height();
var screenWidth = $(window).width();
var pickerPosition = { left: 0, top: 0 };
var picker = document.getElementById('pick-container');
pickerPosition = picker.getBoundingClientRect();
var xPicker = pickerPosition.left;
var ypicker = pickerPosition.top;
alert(" ypicker " + ypicker);
if(ypicker != 288){
$("#people-picker-container" ).addClass( "ui-picker-dropup");}

A designer friend of mine asked me this question for something she was working on and pointed me to your unanswered question. I'll summarize the solution I gave to her at this codepen..
I wrote the solution as a basic jQuery plugin that will add a class to the element when it approaches within a buffered amount of the bottom of the page or beyond. This should provide the flexibility to change the direction of the dropdown list when the element has a special class.
USAGE
$('#target').bottomFeeder();
// or with options
$('#target').bottomFeeder({
buffer: 100, // buffer is the distance from the bottom of the page that the class is added
className: 'bottom' // class name to be added
});
PLUGIN
$.fn.bottomFeeder = (function(){
var lastScrollTop = $(window).scrollTop(),
delta = 5, // every 5px scroll
winH = 0,
observees = [];
var checkPosition = function(obj){
var el = $(obj.el),
top = el.offset().top;
if((top + obj.config.buffer) > (lastScrollTop + winH))
el.addClass(obj.config.className);
else
el.removeClass(obj.config.className);
};
$(window).on('scroll', function(){
// nothing to do
if(observees.length === 0) return;
var st = $(this).scrollTop();
// scroll was less than the delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// update shared variables
winH = $(window).outerHeight();
lastScrollTop = st;
for(var i = 0; i < observees.length; i++){
checkPosition(observees[i]);
}
});
return function(config){
config = config || { buffer: 50, className: 'bottom' };
observees.push({ el: this, config: config });
};
})();