We Keep Coding

Javascript search using show() and hide() and adding additional classes

I am using javascript to search through a group of divs while I type. It displays the divs if their title matches what is being typed in the search box and hides any that don't match.
I want to also make the displayed divs have a position of 'initial' instead of 'absolute' so that they move to the top of the page if they are being shown.
I have tried the code below (the line: $('.cbp-item').position='initial';) but it doesn't add the attribute.
I don't seem to get any js errors in the console either.
$( document ).ready(function() {
$('#societies_search').on('keyup',function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.cbp-item').show();
$('.cbp-item').position='initial';
}
else {
$('.cbp-item').each(function(i,item){
var text = $(item).text().toLowerCase();
console.log($(item).find('a').text());
if(text.indexOf(valThis) >= 0) {
$(item).show();
$(item).position='initial';
}
else{
$(item).hide();
}
});
}
});
});

You can use .css() for this
$(item).css('position','initial');

JavaScript - Adding span to children?

So I got a code which should add span, if it doesn't exist on children, but at the moment it adds to only one and not to others, because "code" sees it already exists. How to do it, that if there will be new div, then it adds to that as well?
if($("#itemcart div").children().length > 0){
} else{
$("#itemcart div").append($("<span> X</span>"));
}

You need a correct Selector:
var spanLength = $("#itemcart div span").length;
if(spanLength > 0){
$("#itemcart div").append($("<span> "+(spanLength+1)+"</span>"));
} else{
$("#itemcart div").append($("<span> 1</span>"));
}

Don't know if i understood, anyway, assuming you have multiple div and you want to check if EVERY div has a child span you can do something like this:
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
This will iterate through every div. In this loop, you can use this to refers to the current div and check if it has or not a children span
See the example here: https://jsfiddle.net/3qkpLnd9/1/

check this code. Just edit it with your selectors, and it is ready to use:
$('p.click').on('click', function () {
var newDiv = document.createElement('div'),
span = document.createElement('span');
span.innerText = 'X';
newDiv.appendChild(span);
$('.container').append($(newDiv));
});
and real fiddle:
https://jsfiddle.net/nx1fuffc/

Combining Similar If Statements In Javascript

I'm using JS with similar if statements in order to have Divs side by side. As the topic title suggests, can these if statements be combined or made more efficient in any way?
EDIT: The purpose of this code is to make all Divs the same height.
JS:
$(document).ready(function(){
$('.container').each(function(){
var firstDiv = $(this).find('.first');
var secondDiv = $(this).find('.second');
var thirdDiv = $(this).find('.third');
var fourthDiv = $(this).find('.fourth');
if(firstDiv.height() >= secondDiv.height()){
secondDiv.css('height',firstDiv.height());
} else {
firstDiv.css('height',secondDiv.height());
}
if(secondDiv.height() >= thirdDiv.height()){
thirdDiv.css('height',secondDiv.height());
} else {
secondDiv.css('height',thirdDiv.height());
}
if(thirdDiv.height() >= fourthDiv.height()){
fourthDiv.css('height',thirdDiv.height());
} else {
thirdDiv.css('height',fourthDiv.height());
}
});
});
Test page: http://www.gloryhood.com/articles/ztest.html

As the intention of the code is to equalise the heights of all the divs, you can negate the need for any if statements and use jQuery's map() to get all the heights, then use Math.max to get the tallest. Try this:
$('.container').each(function(){
var $divs = $('.first, .seconds, .third, .fourth', this);
var heights = $divs.map(function() {
return $(this).height();
}).get();
$divs.height(Math.max.apply(this, heights));
});
Note that the initial selector could be improved by adding a single common class to all the divs.

If your aim is to make all the heights the max height of any, the current code will not work (unless the first div is tallest).
Solution: check the heights for the max height first, then apply that height to them all.
$(document).ready(function () {
$('.container').each(function () {
var $divs = $('.blah', this);
var height = 0;
$divs.each(function(){
height = Math.max($(this).height(), height);
});
$divs.css('height',height);
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/8hko6of7/1/
Notes
I do not use your class names, but instead a common class on all the divs.
If your aim was something else, please explain in more detail :)

JavaScript scrolling events, fade in place?

I'm trying to pin some divs in place and fade them in and out as a user scrolls down. My code looks like this so far:
$(window).on("load",function() {
var fadeDuration = 500;
function fade() {
// compute current window boundaries
var windowTop = $(window).scrollTop(),
windowBottom = windowTop + $(window).innerHeight(),
focusElt = null;
// find our focus element, the first visible .copy element,
// with a short-circuiting loop
$('.imgdiv').toArray().some(function(e, i) {
var objectTop = $(e).offset().top;
if ((objectTop >= windowTop) && (objectTop <= windowBottom)) {
focusElt = e;
return true;
}
console.log(focusElt);
});
// obscure all others
$('.focus').not(focusElt)
.removeClass('focus')
.fadeTo(fadeDuration, 0);
// focus on our focus element; if was the previous focus, nothing
// to do; but if it wasn't focus / wasn't showing before, make
// it visible and have class focus
$(focusElt).not('.focus')
.addClass('focus')
.fadeTo(fadeDuration, 1);
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});
Here's the corresponding fiddle that almost does what I'm looking for, but instead of the green "Fade In" blocks moving upward and fading, I want them pined in place near the top of the window. As the "IMG DIVs" move past them they will fade and reappear with each new "IMG DIV". Here, I'm focusing on the particular green block and fading it when it becomes the focus element. Instead, what I need to do is, focus on the IMG DIV blocks, add a "pinned" class to the green blocks when they reach the top of the page, and fade the green blocks in and out.
Does anyone have any advice?
Part 2 of my question is how to do this with native JavaScript, and not rely on jQuery's dependency.

Ok, so lets split your first issue into two issues :)
First of all, you want to (in general) do something when some element becomes visible in the viewport and when it becomes invisible. So, basically, all you need is function like that:
watchElementIsInViewport(
$('.imgdiv'),
doSomethingWhenElementAppearedInViewport,
doSomethingWhenElementOutOfViewport
);
You know, that when element becomes visible, you want to show some other element. When element becomes invisible, you want to hide that related element. So now, define those two functions:
function doSomethingWhenElementAppearedInViewport(element) {
// retrieve text related with the element
var $copy = $(element).next('.copy');
// fade it in
$copy.fadeTo(500, 1);
}
function doSomethingWhenElementGotOutOfViewport(element) {
// retrieve text related with the element
var $copy = $(element).next('.copy');
// fade it out
$copy.fadeTo(500, 0);
}
What about watchElementIsInViewport? There is no magic inside, only logic you already created, but decoupled from showing of finding elements.
function watchElementIsInViewport($elements, elementAppearedInViewport, elementGotOutOfViewport) {
var currentlyVisible = [ ];
// retrieve positions once, assume it won't change during script is working
var positions = getVerticalBoundaries($elements);
function _scrollHandler() {
var viewportTop = window.scrollY;
var viewportBottom = viewportTop + window.innerHeight;
$elements.each(function(index, element) {
var elementPosition = positions[index];
/* if you wish to check if WHOLE element is in viewport
* var elementIsInViewport = (elementPosition.top >= viewportTop) &&
* (elementPosition.bottom <= viewportBottom);
*/
var elementIsInViewport = (elementPosition.top < viewportBottom) &&
(elementPosition.bottom > viewportTop);
var elementIndexInCurrentlyVisible = currentlyVisible.indexOf(element);
// if element is visible but was not visible before
if(elementIsInViewport && (elementIndexInCurrentlyVisible === -1)) {
elementAppearedInViewport(element);
currentlyVisible.push(element);
// if element is not visible but was visible before
} else if(!elementIsInViewport && (elementIndexInCurrentlyVisible !== -1)) {
elementGotOutOfViewport(element);
currentlyVisible.splice(elementIndexInCurrentlyVisible, 1);
}
});
}
// initial check & update
_scrollHandler();
// check & update on every scroll
$(window).on('scroll', _scrollHandler);
}
And that's all. Working example.

How to make the scroll bar to move to a accurate place

I have a list with scroll bar. Also there is a button that when pressed, it moves to a certain #id and scroll bar also moves to make that element visible. But it is not accurate. It moves, but not always to the exact place. How can I make this scroll function to be accurate:
DEMO http://jsfiddle.net/danials/anpXP/1/
My jQuery code:
function next() {
$(".list li").css("background", "grey");
goToByScroll(myID);
$("#" + myID).css("background", "red");
myID = $("#" + myID).next("li").attr("id");
}
function goToByScroll(id) {
$('.list').animate({
scrollTop: $("#" + id).offset().top - $("#" + id).height()
},
'slow');
}
In the demo try pressing the next button, and you'll see in some items the scroll moves but not correctly.
Any idea?

The problem with your code is that you are getting the offset of each element as you scroll down the list.
Offset is:
The .offset() method allows us to retrieve the current position of an element
relative to the document.
So this makes the offset of the box smaller, the further down the list you go.
What you need to do is figure out what the height+margin of an element is and do some math:
var myID = $(".list").children().first().attr("id");
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(myID-1)},'slow');
$("#"+myID).css("background", "red");
myID++;
}
This fiddle shows it in action. What it does is get the height+margin of the current element, and then multiplies it by how many elements down the list you are.
This only works assuming that all elements are the same size and that they have incremental IDs though.
UPDATE
If you want to make it work with Dynamic IDs, all you do is set an incremental variable to keep track of how many you have iterated through, and then grab the next ID similarly to how you did before:
var myID = $(".list").children().first().attr("id");
var inc = 1;
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(inc-1)},'slow');
$("#"+myID).css("background", "red");
myID = $("#"+myID).next().attr("id");
inc++;
}
And here's a fiddle.