Wrote a Javascript function to display modal on button click that is working perfectly but would have to repeat 56 times. So instead I wrote a loop, but the new function is not working and I'm not sure why.
The original working function:
var target = document.getElementById('show1');
var currentOpacity = 0;
$(document).ready(function () {
$("#hide1").click(function () {
$("#details1").hide();
target.style.opacity = currentOpacity + 1;
});
$("#show1").click(function () {
$("#details1").show();
target.style.opacity = currentOpacity - 1;
});
});
so instead of:
var target = document.getElementById('show1');
var currentOpacity = 0;
$(document).ready(function () {
$("#hide1").click(function () {
$("#details1").hide();
target.style.opacity = currentOpacity + 1;
});
$("#show1").click(function () {
$("#details1").show();
target.style.opacity = currentOpacity - 1;
});
});
var target2 = document.getElementById('show2');
$(document).ready(function () {
$("#hide2").click(function () {
$("#details2").hide();
target2.style.opacity = currentOpacity + 1;
});
$("#show2").click(function () {
$("#details2").show();
target2.style.opacity = currentOpacity - 1;
});
});
repeated 56 times
It's just this:
const elements = [];
for (let i = 1; i <= 56; i++) {
$(document).ready(function () {
document.getElementById('hide'+i).addEventListener('click',function ()
{
document.getElementById('details'+i).hide();
document.getElementById('show'+i).style.opacity = currentOpacity + 1; });
document.getElementById('show'+i).addEventListener('click',function () {
document.getElementById('details'+i).show();
document.getElementById('show'+i).style.opacity = currentOpacity - 1; });
});
}
But this loop isn't working. Any insight as to why?
well to start off with the bit
for (let i = 1; i <= 56; i++) {
$(document).ready(function () {
looks wrong.... it should more likely be
$(document).ready(function () {
for (var i = 1; i <= 56; i++) {
Related
I have the following jquery which has been created with the help of a SO member in a previous question...
var filters = [];
function filterList () {
var classes = '.' + filters.join('.');
$('.test').removeClass('main');
if (classes.length > 1) {
$(classes).addClass('main');
}
}
function removeFilter(ele) {
var len = filters.length,
idx;
for (var i = 0; i < len; i++) {
if (filters[i] === ele) {
idx = i;
break;
}
}
filters.splice(idx, 1);
}
function addFilter(ele) {
if (ele) {
filters.push(ele);
}
}
var selectIt = (function () {
var lastSelect;
return (function (ele) {
if (lastSelect) {
removeFilter(lastSelect);
}
addFilter(ele);
lastSelect = ele;
});
}());
$('.selector').on('change', function (e) {
var val = $(this).val();
selectIt(val);
filterList();
});
$('.mybuttons a').on('click', function (e) {
e.preventDefault();
var el = $(this),
col = el.data('col');
if (el.hasClass('active')) {
removeFilter(col);
} else {
addFilter(col);
}
el.toggleClass('active');
filterList();
});
http://jsfiddle.net/fprL03e5/
I am now trying to modify the code so that when an option is selected, all of the non-matching terms have reduced opacity.
When the page is initially loaded all items should have full opacity until one of the items is selected.
I have tried adding an extra class but can't work out how to have it removed when items are de-selected.
Is this what you're looking to do?
http://jsfiddle.net/fprL03e5/3/
function filterList () {
var classes = '.' + filters.join('.');
$('.test').removeClass('main');
$('.test').css('opacity', '.5');
if (classes.length > 1) {
$(classes).addClass('main').css('opacity', '1');
} else {
$('.test').css('opacity', '1');
}
}
Can you please tell me how to show number all time.
Given : LastNumber
when **previous** button click .
Result: 10 11
Result: 9 10
Result: 8 9
if user click next button
Result: 9 10
Result: 10 11
http://jsfiddle.net/LyXLD/3/
function printdown(count) {
$("#pre").html('')
$("#pre").html($("#curr").html());
$("#curr").html('')
$("#curr").html(count);
// $("#pre").html(count);
}
$("#next").click(function () {
if (++file_show_counter <= lastestCountValue) {
printdown(file_show_counter);
} else {
file_show_counter--;
}
});
Use this:
$(document).ready(function () {
$('#previos').click(function () {
var prevVal = parseInt($('#pre').html());
var curVal = parseInt($('#curr').html());
$('#pre').text(prevVal - 1);
$('#curr').text(curVal - 1);
});
$('#next').click(function () {
var prevVal = parseInt($('#pre').html());
var curVal = parseInt($('#curr').html());
if (curVal < 11) {
$('#pre').text(prevVal + 1);
$('#curr').text(curVal + 1);
}
});
});
Demo:http://jsfiddle.net/LyXLD/5/
i have 11 pages.and i have to show 2 pages at one time.i just know how
many pages i have mean (11). when i go up it show 9 and 10 page.then 8
and 9 page
Update
Well now that OP has actually stated this requirement, here's an updated solution.
Prev button stops working when it gets down to 1, and the next button stops working when it reaches the page count.
DEMO
var pageCount = 11;
$("#previous").on("click", function () {
$pre = $("#pre");
$curr = $("#curr");
$count = +$pre.text();
if ($count > 1) {
$pre.text($count - 1);
$curr.text($count);
}
});
$("#next").on("click", function () {
$pre = $("#pre");
$curr = $("#curr");
$count = +$curr.text();
if ($count < pageCount) {
$pre.text($count);
$curr.text($count + 1);
}
});
I just write new code please check it on http://jsfiddle.net/shantanubhaware/LyXLD/10/
working code
var lastval = $('#curr').text();
var preval = $('#pre').text();
var i = 0;
$('#previos').click(function () {
var lastval = $('#curr').text();
var preval = $('#pre').text();
previous();
});
$('#next').click(function () {
var lastval = $('#curr').text();
var preval = $('#pre').text();
next();
});
function previous() {
if (preval >= 1) {
--lastval;
--preval;
$('#curr').text(lastval);
$('#pre').text(preval);
}
}
Please take a look. Is that what you are looking for?
JSFIDDLE DEMO
var lastestCountValue = 11,
file_show_counter = lastestCountValue - 1;
$(document).ready(function () {
$("#previos").click(function () {
if (file_show_counter > 1) {
print(--file_show_counter, file_show_counter + 1);
}
});
$("#next").click(function () {
if (file_show_counter < lastestCountValue - 1) {
print(++file_show_counter, file_show_counter + 1);
}
});
});
function print(pre, cur) {
$("#pre").html(pre);
$("#curr").html(cur);
}
How do such a thing to work:
function getElements(attrib) {
return document.querySelectorAll('[' + attrib + ']');
}
$(window).load(function () {
$(".b1").hover(function () {
$(this).className = 'x';
var elements = getElements('code');
for (var i = 0; i < elements.length; i++) {
if (elements[i] == 'wow') {
elements[i].className = 'blue';
} else {
elements[i].className = 'red';
}
}
}, function () {
$(this).className = 'y';
});
});
http://jsfiddle.net/rc6Pq/10/
I would like hover to "BUTTON HOVER" and then show this elements with atributes "code" in different colors for "wow" and "lol".
Regards and thanks in advance!
What about this version:
function getElements(attrib) {
return $('[' + attrib + ']');
}
$(window).load(function () {
$(".b1").hover(function () {
$(this).className = 'x';
var elements = getElements('code');
getElements('code').addClass('red').filter('[code="wow"]')
.removeClass('red').addClass('blue');
}, function () {
$(this).className = 'y';
});
});
http://jsfiddle.net/rc6Pq/11/
or even better:
var elements = getElements('code'),
wow = getElements('code').filter('[code="wow"]').addClass('blue');
elements.not(wow).addClass('red');
http://jsfiddle.net/rc6Pq/12/
Please help me convert this JQuery to Javascript progress bar script
var generateButton = document.getElementById("generate");
if (generateButton.addEventListener) {
generateButton.addEventListener("click", random, false);
}
else if (generateButton.attachEvent) {
generateButton.attachEvent('onclick', random);
}
function random(e) {
setTimeout(function(){
$('.progress .bar').each(function() {
var me = $(this);
var perc = me.attr("data-percentage");
//TODO: left and right text handling
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.css('width', (current_perc)+'%');
}
me.text((current_perc)+'%');
}, 50);
});
},300);
var num = Math.random();
var greetingString = num;
document.getElementById("rslt").innerText = greetingString;
}
Here is the Live version: http://jsfiddle.net/chjjK/9/
Pretty easy actually, use document.getElementsByClassName and a for loop to replace the each:
var bar = document.getElementsByClassName("bar");
for (var i = 0; i < bar.length; i++) {
var me = bar[i];
var perc = me.getAttribute("data-percentage");
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.style.width = current_perc+'%';
}
me.innerHTML = ((current_perc)+'%');
}, 50);
}
}, 300);
Demo: http://jsfiddle.net/chjjK/13/
I have a problem with my timer -
var myTimer = function () {
var d = Date.now();
// var t=d.toLocaleTimeString();
var timerSeconds = Math.round((od - d) / 1000);
document.getElementById("timer").innerHTML = "Time left for this tour:" + timerSeconds;
if (timerSeconds > 0) {
setTimeout(arguments.callee, 1000);
} else {
finTour();
}
};
myTimer();
it calls this function:
var finTour = function () {
deleteCartes();
randomCell();
od = Date.now() + 5000;
myTimer();
window.setTimeout(function () {
tourOfComp();
}, 5000)
var tourOfComp = function () {
for (var i = 0; i < 12; i++) {
if (document.getElementsByTagName("td")[i].style.backgroundColor == "aqua") {
document.getElementsByTagName("td")[i].firstChild.data = cartes[prochaineCarte++]
}
}
for (var j = 0; j < 12; j++) {
if (document.getElementsByTagName("td")[j].style.backgroundColor == "aqua")
document.getElementsByTagName("td")[j].style.backgroundColor = "";
}
for (var k = 0; k < 3; k++) {
tab[k].value = "";
}
od = Date.now() + timeFixe;
myTimer();
};
the problem is when I fix the time 20, it calls these two last function and the time is always 5 and never 20 it seems that it doesn`t renew the time, but only repeat this:
window.setTimeout(function ()
{
tourOfComp();
},5000)