We Keep Coding

Cant get my foor loop working

Why isn't this working?
var i = 0;
for (i < 1) {
if ($(".button[name=commit]").val() == "remove"){
i = 1;
}
}
I get this error message saying: unexpcted token ) at line 2.

Here you go with a solution using while loop
var i = 0;
while (i < 1) {
if ($(".button[name=commit]").val() == "remove"){
i = 1;
}
}
Here you go with a solution using for loop
for (var i=0; i<1;) {
if ($(".button[name=commit]").val() == "remove"){
i = 1;
}
}
Hope this will help you.

while(!$(".button[name=commit]").val() == "remove");
it was not working since for() needs 3 commands: Initialization, guard and last action: for(init;guard;action)

Disable hover when key pressed

I implement a custom dropdown, and I have a problem when I move by keyboard: hover works too and I don't know how to disable it. I've paste my code here http://jsfiddle.net/4o0bcv1d/, but here my code works correct. When I copy code to index.html - hover works again, when I move by keyboard.
How I can fix it?
var doc = document;
var keydown_count = -1;
var dropdown_content = doc.querySelector('.dropdown-content');
var dropdown_items = doc.querySelectorAll('.dropdown-item');
var dropdown_items_length = dropdown_items.length;
var clear_navigation_hover = function () {
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].classList.remove('dropdown-item--hover');
};
}
var navigation_hover_by_keydown = function (event) {
var event = event || event.window;
var UP = 38;
var DOWN = 40;
var SCROLL_STEP = 66;
if (event.keyCode === UP) {
keydown_count--;
if (keydown_count < 0) {
keydown_count = dropdown_items_length - 1;
dropdown_content.scrollTop = 66 * dropdown_items_length;
}
if (keydown_count < (dropdown_items_length - 3)) {
dropdown_content.scrollTop -= 66;
};
} else if (event.keyCode === DOWN) {
keydown_count++;
if (keydown_count >= dropdown_items_length) {
keydown_count = 0;
dropdown_content.scrollTop = 0;
}
if (keydown_count > 3) {
dropdown_content.scrollTop += 66;
};
}
clear_navigation_hover();
dropdown_items[keydown_count].classList.add('dropdown-item--hover');
}
var dropdown_input = doc.querySelector('.dropdown-input');
dropdown_input.addEventListener('keydown', navigation_hover_by_keydown, false);
var navigation_hover_by_hover = function () {
clear_navigation_hover();
this.classList.add('dropdown-item--hover');
keydown_count = this.getAttribute('data-index');
console.log('hover');
}
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].addEventListener('mouseover', navigation_hover_by_hover, false);
}

You can use the CSS pointer-events feature to disable hovering on any of the page element. On keypress you need to add this attribute to the body tag like this
document.body.style.pointerEvents = 'none';
and again on key release you could remove this property so that mouse over starts working again. So at key release you need to do
document.body.style.pointerEvents = 'auto';
The pointer-events property allows to exclude an HTML element from being a mouse target. All the descendant elements are also excluded from being a mouse target unless the pointer-events property has been explicitly overridden for that node.

you can set the css selector, instead :hover, anything like :hover:not(.unhover), the class .unhover can be added using js

How do I set the interval in a for loop?

I'm trying to create a menu of social media icons that slides into and out of the page. The following code works, but it is too fast. It doesn't look like sliding. I think I could adjust the timing using the setInterval() method, but I can't get it to work. This is the code so far:
var socialMedia = document.getElementById("socialmedia");
var stalkMe = document.getElementById("pleasestalkme");
function SM() {
socialMedia.style.position = "fixed";
socialMedia.style.right = "-330px";
}
SM();
stalkMe.addEventListener("click", function(){
if (socialMedia.style.right === "-330px") {
for (i = -330; i <= -30; i++) {
var j = i +"px";
socialMedia.style.right = j;
}
} else if (socialMedia.style.right === "-30px"){
for (i = -30; i >= -330; i--){
var j = i +"px";
socialMedia.style.right = j;
}
}
}, false);

You should have a look at CSS transitions. Basically you just need to change the right style from 300px to 0px and using transition: right 1s; you would see your element being animated
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Otherwise, you could have a look at jQuery.... (I feel bad).

Prior to the solution, a word of warning: you actually should not use this code snippet. Instead heed the advice of floribon and look into css transitions.
However, if you absolutely must do it the outmoded way:
for (i = -330; i <= -30; i++) {
var j = i +"px";
socialMedia.style.right = j;
}
write
var hnd;
i = -330;
hnd = setInterval ( function () {
var j = i +"px";
socialMedia.style.right = j;
i++;
if (i > -30) {
clearInterval(hnd); // end activity
}
}, 50 ); // interval length in ms

Slide dynamically added content with jQuery

I'm trying to create a simple content slider that could handle dynamically added content to the slider. None of the "lightweight" plugins I found provided such functionality or, if it did, it didn't work correctly.
var $left = $('.left'),
$right = $('.right'),
$months = $('.sub ul');
$left.click(function(){
for(i = 0; i < 3; i++){
$months.find('li').first().before($.parseHTML('<li>xxx</li>'));
}
pos = $months.position();
$months.css('left', pos.left + 90);
});
$right.click(function(){
for(i = 0; i < 3; i++){
$months.find('li').last().after($.parseHTML('<li>xxx</li>'));
}
pos = $months.position();
$months.css('left', pos.left - 90);
});
This is the code I've got so far and here's a fiddle with an example - http://jsfiddle.net/kkr4zg0r/2/. It kind of works, but the problem is that since new content is added the navigation goes off (you can see what I mean by clicking left-right a couple of times).
I understand what's the problem for this - the newly added items "shift" the content and I need to do better calculations than substracting/adding 90px to the left position of the element but I can't figure out how to get the correct index of the elements and basically get this sliding by exactly (and correctly) by 3(or 6) elements at the time.
Currently the code is adding extra elements whenever a navigation button is pressed, if I could get the index of the currently visible first/last element, I could probably tell whether I need to add more elements and only add them then.
This is a basic illustration of what I'm trying to achieve
edit
I've changed the jsfiddle to the correct one.

The whole idea is to check when adding elements is necessary and when shift is enough:
Fiddle
$(document).ready(function()
{
var $main = $('.main'),
$left = $('.left'),
$right = $('.right'),
$months = $('.sub ul');
var addCount = 3;
var liWidth = 30;
var shiftX = addCount * liWidth;
$left.click(function()
{
var currentLeft = parseInt($months.css('left'));
var totalLength = $months.find('li').length * liWidth;
if (-currentLeft + $main.width() >= totalLength)
{
for (var i = 0; i < addCount; i++)
{
$months.find('li:last').after('<li>xxx</li>');
}
}
$months.css('left', currentLeft -= shiftX);
});
$right.click(function()
{
var currentLeft = parseInt($months.css('left'));
if (currentLeft < 0)
{
$months.css('left', currentLeft += shiftX);
}
else
{
for (var i = 0; i < addCount; i++)
{
$months.find('li:first').before('<li>xxx</li>');
}
}
});
});

Count element clicks and define an max

I tried to count an element clicks, and, in the right number call some action.
var count = 0;
document.getElementById("rolarbaixo").onClick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
}
else {
count ++;
}
};
When i clicked 3 times in the link "rolarbaixo" the div "noticia" set the "top: 0px;", but this doesn't work.
Why?

count ++ should be count++. If you press F12, you will be able to get to the developer tools and debug the javascript.

It's onclick in lowercase
var count = 0;
document.getElementById("rolarbaixo").onclick = function (e) {
if (count >= 2) {
var elem = document.getElementById("noticia");
elem.style.top = "0px";
} else {
count++;
}
};
FIDDLE
And it's >= 2 for three clicks (zero based and all).
AS the question is tagged jQuery, this would be it
$('#rolarbaixo').on('click', function() {
var clicked = $(this).data('clicked') || 0;
if (clicked >= 2) $('#noticia').css('top', 0);
$(this).data('clicked', ++clicked);
});
FIDDLE

Misprint in else statement and change onclick to lowercase:
var count = 0;
document.getElementById("rolarbaixo").onclick = function(e) {
if( count >= 3 ) {
var elem = document.getElementById("noticia");
elem.setAttribute("style","top: 0px;");
} else {
count++;
}
};