We Keep Coding

How do i convert a Jquery code to Pure javascript

I am using Bootstrap.
I am not able to figure out how to put this in pure javascript.This will open a div when we click on the accordion.
$(function() {
$("#panelTicketsList .list-group-item").on("click", function() {
$("#panelTicketsList .list-group-item").removeClass('selected');
$(this).addClass('selected');
if ($('#panelTicketsList').hasClass('col-md-12')) {
$('#panelTicketsList').removeClass('col-md-12').addClass('col-md-3');
$('.panelTicketDetail').removeClass('hide');
}
});
});

jsFiddle : https://jsfiddle.net/tqdc6yyL/
var listGroupItems = document.getElementsByClassName('list-group-item');
for (j = 0; j < listGroupItems.length; j++) {
listGroupItems[j].addEventListener("click", function () {
var elements = listGroupItems;
for (i = 0; i < elements.length; i++) {
if (elements[i].className.indexOf("col-md-12") > -1) {
elements[i].className = elements[i].className.replace("col-md-12", "col-md-3");
elements[i].className = elements[i].className.replace("hide", "");
}
}
this.className = this.className + " selected";
});
}

var list = document.getElementById('panelTicketsList');
var items = document.querySelectorAll("#panelTicketsList .list-group-item");
var detail = document.querySelectorAll(".panelTicketDetail");
items.forEach(function(btn){
btn.addEventListener("click", function(){
items.forEach(function(item){ item.classList.remove("selected"); });
this.classList.add("selected");
if(list.classList.contains('col-md-12')) {
list.classList.remove('col-md-12');
list.classList.add('col-md-3');
detail.classList.add("hide");
}
});

If you have to support older browsers like IE8 or IE9, you can't use JS features like forEach or classList. Instead you should use for loop and className.
//Save DOM query in variable for reuse
var panelTicketsList = document.getElementById('panelTicketsList');
var panelTicketsDetails = document.getElementsByClassName('panelTicketDetail');
var listGroupItems = panelTicketsList.getElementsByClassName('list-group-item');
//go through all of the listGroupItems and set click listener
for (var i = 0; i < listGroupItems.length - 1; i++) {
listGroupItems[i].addEventListener("click", function() {
//On click, go through all of listGroupItems and remove selected class
for (var j = 0; j < listGroupItems.length - 1; j++) {
listGroupItems[j].className = listGroupItems[j].className.replace('selected', '');
}
//Add selected class for clicked element
listGroupItems[i].className += 'selected';
//test if main element has class col-md-12
if (panelTicketsList.className.indexOf("col-md-12") > -1) {
//replace clas col-md-12 with col-md-3
panelTicketsList.className = panelTicketsList.className.replace('col-md-12', 'col-md-3');
//go through all of the panelTicketDetails and remove hide class
for (var k = 0; k < panelTicketsDetails.length - 1; k++) {
panelTicketsDetails[k].className = panelTicketsDetails[k].className.replace('hide', '');
}
}
});
}

addEventListener in for loop adds always to last item

I'm currently writing a chrome extension, so don't mind the "chrome.*" code.
Right now, I'm facing a problem and I have no idea how to solve this (tried everything I could find on google)..
This is my function:
function tabwlwatchlist() {
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
chrome.storage.local.get('movielinks', function (resultlinks) {
for (var j=0; j<resultnames.movienames.length; j++) {
(function () {
document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><span>' + resultnames.movienames[j] + '</span></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>';
console.log("test");
document.getElementById('wlt' + j).addEventListener("click", function(){
alert('works');
}, false);
console.log("test2");
}())
}
});
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}
The EventListener always adds to the last Element of the for loop.
Any ideas? :/

your j value has became the height number after the for loop is executed....to solve it you have to know a common javascript phenomenon called closure.To prevent this you have to provide the argument j to the immediately invoked function.You can learn more about them enter link description here
function tabwlwatchlist() {
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
chrome.storage.local.get('movielinks', function (resultlinks) {
for (var j=0; j<resultnames.movienames.length; j++) {
(function (j) {
document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><span>' + resultnames.movienames[j] + '</span></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>';
console.log("test");
document.getElementById('wlt' + j).addEventListener("click", function(){
alert('works');
}, false);
console.log("test2");
}(j))
}
});
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}

JQuery on adding to optgroup trigger event

I have a select box which contains an optgroup. I need to add an event listener to it such as onclick, or onchange that will fire an event, but only when I add a new option into it.
Here's how I'm selecting it:
var $selectedExam = $("#formExam_released"); //this is the <optgroup>
I tried
$selectedExam.on("change", function(){
removeDuplicates('exam');
});
but that will trigger "removeDuplicates" only when I click on an item in the optgroup.
Any ideas?

Something like this?
$().ready(function() {
$("optgroup").each(function() {
$(this).on("change", function() {
var id = $(this).attr(id);
var arrrayOfElements = [];
$("optgroup").each(function() {
if($(this).attr("id") == id) {
$(this + " option").each(function() {
arrrayOfElements[arrrayOfElements.length] = $(this).val();
});
}
});
for (var i = 0; i < arrrayOfElements.length; i++) {
for(var j = 0; j < arrrayOfElements.length; j++) {
if(arrrayOfElements[i] == arrrayOfElements[j]) {
$("optgroup option[value='"+ arrrayOfElements[i] +"']").each(function() {
$(this).remove();
});
}
}
}
});
});
});
This code should remove all duplicated from the select options. This could be trigerred on the .on("change",...);
After edit, as long you add attribute ID with unique identifier you could search for this value.

pause jquery animation on hover, stop on click

I'm trying to make a webpage where a set of DIVs cycles from top to bottom (see fiddle). And then whenever you hover a certain part of the div (in this case, the STOP link), the animation stops then plays again on mouseout. What I'm lacking right now is a way to stop the animation whenever that STOP link has been clicked. I've added a stop function on the link but it won't work. There might have been a conflict or some sort with the hover function I've made.
Thanks in advance for the help and sorry for the noobish question.
Link to the fiddle: http://jsfiddle.net/Psp9R/
Jquery:
$(document).ready(function() {
$(".row").last().addClass("last");
$(".mholder").each(function() {
var i = 0;
$(this).find(".row").each(function() {
var $this = $(this);
$this.css("bottom", i);
i += $this.height();
});
});
// PLAY AND STOP
$('#start').click(function() {
$("#overlay").hide();
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .row:nth-child(' + i + ')'));
}
});
$('.stop').click(function() {
var countScrolls = $('.mholder .row').length;
$("#overlay").show();
for (var i=0; i < countScrolls; i++) {
$('.mholder .row:nth-child(' + i + ')').stop();
}
});
//PAUSE ON HOVER
$(".stop").hover(function () {
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
$('.mholder .row:nth-child(' + i + ')').stop();
}
}, function () {
var countScrolls = $('.mholder .row').length;
for (var i=0; i < countScrolls; i++) {
doScroll($('.mholder .row:nth-child(' + i + ')'));
}
});
});
function doScroll($ele) {
var bottom = parseInt($ele.css("bottom"));
if (bottom < -60) { //bit arbitrary!
var $lastEle = $ele.closest('.mholder').find(".last");
$lastEle.removeClass("last");
$ele.addClass("last");
var bottom = (parseInt($lastEle.css("bottom")) + $lastEle.height());
$ele.css("bottom", bottom);
}
$ele.animate({
bottom: (parseInt(bottom) - 80)
}, 2200, 'linear', function() {
doScroll($(this))
});
}

You know what, when you click stop, it really stops but when you move your mouse out of stop button, browser understands that you fire mouseout event and it resumes its jogging . So you have to tell browser that you click on stop button and ignore mouseout event. I changed your code by adding a flag iStop to order browser stop. You can check it out at: jsFiddle

Implement a interval which is cleared when the stop link is clicked, then started again on mouseout.
setInterval - https://developer.mozilla.org/en/docs/DOM/window.setInterval
clearInterval - https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval

" document.getElementById onmouseover and function " does not behave as wished × 108641

In this function, it should give the menu items (li's) an specific background (png) out of an array. However; it doesn't. It gives all the li's the background called color 'blue' :(.
Do you see the problem?
//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
var backgrounds = ["blue", "green", "pink", "purple"];
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
this.style.backgroundImage= "url(images/" + backgrounds[(i % backgrounds.length)] + ".png)";
}
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}
}
Html:
<ul>
<li id="custom-menu-item-id-1">
<a href="#">
Home
</a>
</li>
/* And 3 li's more... */
</ul>

The function you use for onmouseover is a closuse of the outer function, in the time it is executed all onmouseover handlers have the save value of i, to achieve what you seen to want do:
//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
var backgrounds = ["blue", "green", "pink", "purple"];
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = (function(valueOfI){ return function() {
this.style.backgroundImage= "url(images/" + backgrounds[(valueOfI % backgrounds.length)] + ".png)";
}; })(i);
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}
}

This surprises me. I would expect it to make all the backgrounds pink. The reason this happens is because by the time you actually hover over any of your <li> elements, i will be 10, and 10 % 4 = 2. Index #2 of your array is 'pink'.
To ensure that i is the value you want when the mouseover and mouseout events are fired, wrap them in a function.
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
(function(i) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
this.style.backgroundImage = "url(images/" + backgrounds[(i % backgrounds.length)] + ".png)";
}
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}(i));
}
}

Here is an explanation that may help: variables-in-anonymous-functions