We Keep Coding

Add CSS only when a section or is in range

I am trying to make a "sticky" image where all images of class ".img" add a css attribute and then remove it when it is not in range.
I do this by getting the ID of each of the images and pass it to a function that makes it fixed (addCSS). It works fine - the images stick right where they are supposed to smoothly, but when I try to scroll up, they keep their css. I want to remove the CSS property when the wScroll is outside the range.
$('.img').each(function () {
var sectionOffset = $(this).offset().top;
var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
addCSS(attID);
}
});
function addCSS(element) {
element.css({
'position': 'fixed',
'top': stickyPosition - 75,
'left': OffsetLeft
});
}
function removeCSS(element) {
element.css({
'position': '',
'top': '',
'left': ''
});
}
I tried modifying it this way but it makes it jump :(
$('.img').each(function () {
var sectionOffset = $(this).offset().top;
var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
addCSS(attID);
}
else if (wScroll > (sectionOffset + sectionHeight) || wScroll < sectionOffset) {
removeCSS(attID);
}
});
I managed to get it working smoothly without using an array, but the code is a bit long and I was hoping to simplify it without losing function.
Here is a simplified version: http://codepen.io/ebevers/pen/xwbdbP
for this, I just need the squares to jump back into place. Thanks!

Try this:
// Last section and current section
var last_section = -1;
var current_section = -1;
// Scroll
jQuery(window).scroll(function(){
// Get current section
for (var i = 0; i < jQuery('.row').length; i++) {
if (jQuery(this).scrollTop() >= jQuery('.row:eq('+i+')').position().top) {
current_section = i;
}
}
// If change
if (current_section != last_section) {
removeCSS(jQuery('.row:eq('+last_section+') .img'));
addCSS(jQuery('.row:eq('+current_section+') .img'));
last_section = current_section;
}
});
http://jsfiddle.net/c4z9satw/

Another way of doing it, but without globals and it relies on explicitly set identifiers.
Added CSS:
.active {
position: fixed;
top: 100px;
left: 100px;
}
JavaScript:
$(window).scroll(function() {
var rows = $(".row");
$(".img").each(function() {
var row = false, i, l, id;
for (i = 0, l = rows.length; i < l; i++) {
id = "#" + this.id.toString();
if ($(rows[i]).find(id)[0] != undefined) {
row = rows[i];
break;
}
}
if (!row)
return false;
if ((window.scrollY >= $(row).offset().top) && (window.scrollY < $(row).offset().top + $(row).outerHeight()))
$(this).addClass("active");
else
$(this).removeClass("active");
});
});
JSFiddle: http://jsfiddle.net/w7ru130s/2/

x.classList.toggle() not working correctly

So I have this script that is a counter that follows an infinite animation. The counter resets to 0 everytime an interation finishes. On the line fourth from the bottom I am trying to invoke a x.classList.toggle() to change css when the counter hits 20. When I replace the classList.toggle with an alert() function it works, but as is no class 'doton' is added to 'dot1'. What am I missing?
http://jsfiddle.net/8TVn5/
window.onload = function () {
var currentPercent = 0;
var showPercent = window.setInterval(function() {
$('#dot1').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function (e) {
currentPercent= 0;});
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
if (currentPercent == 20){document.getElementByID('dot1').classList.toggle('doton');}
document.getElementById('result').innerHTML = currentPercent;
}, 200);
};

I't just a typo: its should be getElementById.
http://jsfiddle.net/8TVn5/1/

Why are you mixing jQuery and normal selectors?
window.onload = function () {
var currentPercent = 0,
dot1 = $('#dot1');
var showPercent = window.setInterval(function() {
dot1.on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration',
function (e) {
currentPercent= 0;
}
);
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
if (currentPercent === 20){
dot1.toggleClass('doton');
}
$('#result').html(currentPercent);
}, 200);
};

How to repeatedly sort element in div without losing clickability?

Example of what I need:
http://jsfiddle.net/bbGMB/1/
var interval = 100;
$(function(){
$('#container').children().click(function(e){
alert($(e.target).text()+" clicked");
});
setInterval(function(){
$('#container').children().sort(function(a,b){
if($(a).text() > $(b).text()) return 1;
if($(a).text() < $(b).text()) return -1;
return 0;
}).appendTo('#container');
},interval);
})
If we change interval to 10000 everything works fine.
But I need interval about 100 or lower.

Modified your fiddle to compare. Please check http://jsfiddle.net/bbGMB/4/
var interval = 100;
$(function(){
$('#container').children().click(function(e){
alert($(e.target).text()+" clicked");
});
setInterval(function(){
var origC = $('#container').children();
var newC = $.extend([], origC);
newC.sort(function(a,b) {
if($(a).text() > $(b).text()) return 1;
if($(a).text() < $(b).text()) return -1;
return 0;
});
for (var i=0; i < origC.length; i++) {
if (origC[i] !== newC[i]) {
newC.appendTo('#container');
break;
}
}
},interval);
})

If I understood your issue correctly, you don't have to sort repeatedly at certain intervals. Just call the sort-function when the element gets clicked. (where your current call to alert() is)

show bars corresponding to the initial values

what am I doing wrong? I am trying to show bars corresponding to the initial values of the class="likes"
Here is the fiddle
http://jsfiddle.net/sghoush1/VU3LP/40/
The Jquery looks like this
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
function checkNumber() {
var valueCurrent = parseInt($(".likes").text());
if(isNaN(valueCurrent) || valueCurrent <= 20) {
$(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
}
if(isNaN(valueCurrent) || valueCurrent <= 60) {
$(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
}
}
checkNumber();

You need a loop in the checkNumber() function, so that it will check the value of each .likes element and update the corresponding bar.
function checkNumber() {
$(".likes").each(function () {
var valueCurrent = parseInt($(this).text());
if (isNaN(valueCurrent) || valueCurrent <= 20) {
$(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
} else if (isNaN(valueCurrent) || valueCurrent <= 60) {
$(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
}
});
}
FIDDLE

Currently, var valueCurrent = parseInt($(".likes").text()); parses text of all like combined, with result being 2010402060, which is probably not what you want.
I'd change checkNumber function this way:
function checkNumber() {
var bars = $(".bar"),
likes = $(".likes");
likes.each(function (index, like) {
var value = parseInt($(like).text(), 10),
bar = bars.eq(index).find(".barActive");
if (value <= 60) bar.css("width", 80);
if (value <= 20) bar.css("width", 30);
});
}
...and move barActive styles into CSS. Working example at jsFiddle.

javascript countdown with showing milliseconds

I want to do a count down and want to show like format as Minutes:Seconds:Milliseconds. I made a count down with jquery plug-in countdown but it shows just Minutes:Seconds format.
Is there any way to make it right?
Many Thanks!

Hi guys I have developed a code for my self use the following code
counter for 20 seconds
var _STOP =0;
var value=1999;
function settimer()
{
var svalue = value.toString();
if(svalue.length == 3)
svalue = '0'+svalue;
else if(svalue.length == 2)
svalue = '00'+svalue;
else if(svalue.length == 1)
svalue = '000'+svalue;
else if(value == 0)
svalue = '0000';
document.getElementById('cn1').innerHTML = svalue[0];
document.getElementById('cn2').innerHTML = svalue[1];
document.getElementById('cn3').innerHTML = svalue[2];
document.getElementById('cn4').innerHTML = svalue[3];
value--;
if (_STOP==0 && value>=0) setTimeout("settimer();", 10);
}
setTimeout("settimer()", 10);

Try this: http://jsfiddle.net/aamir/TaHtz/76/
HTML:
<div id="timer"></div>
​
JS:
var el = document.getElementById('timer');
var milliSecondsTime = 10000;
var timer;
el.innerHTML = milliSecondsTime/1000;
timer = setInterval(function(){
milliSecondsTime = milliSecondsTime - 1000;
if(milliSecondsTime/1000 == 0) {
clearTimeout(timer);
el.innerHTML = 'BOOOOM';
}
else {
el.innerHTML = milliSecondsTime/1000;
}
},1000);
​

If you want to make your own timer.
read this earlier question
How to create a JQuery Clock / Timer

Try setting the format parameter - http://keith-wood.name/countdownRef.html#format
On further reading, this plugin doesn't do milliseconds. At this point, you either have to edit the actual plugin code or find a new plugin.

I completely agree with #Matt Ball's comment.It may also cause the browser to crash.
Why don't you try this solution instead
jQuery 1 minute countdown with milliseconds and callback

I did it like this (generic counter from N to X (X > N)):
var dynamicCounterAddNewValue = 20;
var currentDynamicUpdater;
function dynamicCounterForValueForControlUpdater(_updaterData) {
_updaterData.from += dynamicCounterAddNewValue;
if (_updaterData.from > _updaterData.to) {
_updaterData.from = _updaterData.to;
}
_updaterData.c.html(_updaterData.from.toString());
if (_updaterData.from < _updaterData.to) {
currentDynamicUpdater = setTimeout(
dynamicCounterForValueForControlUpdater,
10,
{
c: _updaterData.c,
from: _updaterData.from,
to: _updaterData.to
}
);
}
else {
clearTimeout(currentDynamicUpdater);
}
return;
}
// _c -> jQuery object (div,span)
// _from -> starting number
// _to -> ending number
function dynamicCounterForValueForControl(_c, _from, _to) {
clearTimeout(currentDynamicUpdater);
dynamicCounterForValueForControlUpdater(
{
c: _c,
from: _from,
to: _to
}
);
return;
}
EDIT: Updated version (more flexible - for N elements one after another):
(input element is Array of elements for making them dynamic-counts)
var dynamicCounterTimeout = 10;
var currentDynamicUpdater;
function odcArray(_odca) {
this.odca = _odca;
return;
}
function odc(_c, _from, _to) {
this.c = _c; // $('#control_id')
this.from = _from; // e.g. N
this.to = _to; // e.g. M => (M >= N)
var di = parseInt(_to / 45, 10);
if (di < 1) {
di = 1;
}
this.dynamicInc = di;
return;
}
function dynamicCounterForValueForControlUpdater(_odca) {
if (
_odca.odca === null
||
!_odca.odca.length
) {
clearTimeout(currentDynamicUpdater);
return;
}
var o = _odca.odca[0];
o.from += o.dynamicInc;
if (o.from > o.to) {
o.from = o.to;
_odca.odca.shift(); // Remove first element
}
o.c.html(o.from.toString());
currentDynamicUpdater = setTimeout(
dynamicCounterForValueForControlUpdater,
dynamicCounterTimeout,
_odca
);
return;
}
function dynamicCounterForValueForControl(_odca) {
clearTimeout(currentDynamicUpdater);
// SETUP all counters to default
for (var i = 0; i < _odca.odca.length; i++) {
_odca.odca[i].c.html(_odca.odca[i].from.toString());
}
dynamicCounterForValueForControlUpdater(
_odca
);
return;
}