I am trying to write some code that only allows buttons with the .add class function on click if there are fewer than 3 immediate children divs within the #hold placeholder div. theDiv_append is a seperate function that adds a div block within #hold div placeholder. I am trying to update the countingdivs variable to then count and update the number of divs within #hold, but it's not working. Currently, the add button does not get disabled.
var countingdivs = '1';
if(countingdivs <= '2') {
$(document).on('click',".add",theDiv_append);
countingdivs = $("#hold > div").length;
};
Any help would be great. Thanks!
Move the condition to the click handler:
$(document).on('click', '.add', theDiv_append);
function theDiv_append() {
var $hold = $('#hold'),
len = $hold.children('div').length;
if (len <= 2) {
// ...
}
}
Try:
var countingdivs = 1;
if(countingdivs <= 2) {
$(document).on('click',".add", theDiv_append);
countingdivs = $("#hold > div").length;
} else {
$(document).off('click',".add", theDiv_append);
}
Maybe try assigning countingdivs with the current length of #hold > div
var countingdivs = $("#hold > div").length;
Related
This question already has an answer here:
jQuery trigger when 2/3s of div are in viewport
(1 answer)
Closed 6 years ago.
I would like to check if a class is added on an Element during the scroll and launch another function, just once, until the class is added to the next element.
here my first function :
function onScreen() {
$('article').each(function() {
var thisTop = $(this).offset().top - $(window).scrollTop();
var middleScreen = $(window).height() / 2;
if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
$(this).addClass('visible');
} else {
$(this).removeClass('visible');
}
});
}
// launch
$(window).on('load scroll', onScreen);
My seconde function : I would like to launch just once if the visible class is added to another article.
function textChange() {
var v = $('article.visible');
var el = $('.el', v);
var text = $(el).html();
$('.titre').html(text);
}
$(window).on('load scroll', textChange);
note : It's important to me to keep two separate function.
My issue is the scroll function get call textChange() each pixel I scroll on the page. Strangly, the onScreen() function add the visible class just once until the next article gonna be visible.
Thanks for yours suggestions.
Introduce a global variable that tells you if the function has been executed or not:
var textChanged = false;
In your textChange() function set it to true when the function was called the first time:
function textChange() {
if(!textChanged){
textChanged = true;
var v = $('article.visible');
var el = $('.el', v);
var text = $(el).html();
$('.titre').html(text);
}
}
EDIT: Alternatively you can do the check before the function gets called:
if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) {
$(this).addClass('visible');
if(!textChanged){
textChange();
}
} else {
$(this).removeClass('visible');
}
Right now when you click inside the div, the counter decreases by 1. How do I make it stop at 0?
Also when it reaches 0 how can I add a class?
I want the overlay to be enabled once the click counter reaches 0.
If there is a better way to disable the div box1 after the clicks reach 0. We can try it that way.
$( function() {
$('.box').click( function() {
var num = $(this).find('.num');
num.text( parseInt(num.text()) - 1 );
});
});
fiddle
Rather than searching DOM and parsing HTML on each click, I'd cache both element and its value:
var $box = $('#box1'),
$num = $box.find('.num'),
limit = $num.text();
$box.click(function() {
$num.text(--limit);
if (limit === 0) {
$('.overlay').show();
}
});
Demo.
This should do it:
$('.box').click( function() {
var num = $(this).find('.num');
val = parseInt(num.text()) - 1;
if (val > 0){
num.text(val - 1);
} else {
$(".overlay").show();
// add your class here.
}
num.text( val );
});
Updated Fiddle
My mission is to tweak this website https://www.mintpal.com/market/XC/BTC# so it will show a different color for the value if it sees "buy orders" over 2.00000000 BTC.
As an example, you check the image http://i.imgur.com/hZBGiTu.png ( the example worked because i targeted them each one separately with "#buyTotal-0-00126011" and so on.
I only want that td#buyTotal pane to be changed.
I tried to target it with the following:
1 - var cell = $('td') - it works, but it changes the values globally
2 - var cell = $('#buyTotal' + price + value.total) - not working
3 - var cell = $('td#buyTotal') - not working.
The code should look similar to this in the end...
var cell = $('td#buyTotal')
cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value >=2.00000000)) {
$(this).css({'background' : '#FF0000'});
} else if ((cell_value >= 3) && (cell_value >=5.00000000)) {
$(this).css({'background' : '#FF0000'});
} else if (cell_value >= 8.00000000) {
$(this).css({'background' : '#FF0000'});
}
});
You can also access this as a shortcut ' mintpal.com/assets/js/market.js '
If i omitted something, please let me know. Thanks....
Edit: I'm only playing with the code inspector/console on the website. What i want is extremely simple. It's just that i cannot target the id. I updated the photo also.
This will require regex.
var cells = document.querySelectorAll('*[id^="buyTotal"]');
for(var i = 0; i < cells.length; i++) {
if(cells[i].innerHTML > 2) { cells[i].style.backgroundColor = 'red'; }
}
I been researching on Show/Hide javascript and pushed it further with a mouseover effect to achieve what I want. I've set up a Fiddle for better accessibility. However, I now want to push it by having up to 4 different text areas ("Click here for more information"), and each text area would have more hover text as I tried to show in the HTML code itself. The javascript that I used and edited now has "ID"s corresponding to "0" and "1" which wouldnt work for my current HTML code as it has funky names like "uu3308-10" (made with Adobe Muse). Now, I'm wonder what variables would I have to change within the Javascript to make it function properly and is there a way to compile this code so it works with at least 11 other "Click here for more information" points?
Note: The current javascript makes showMoreText2 appear under both showMoreText areas (would like to make only one hover text appear at a time).
CLICK HERE FOR THE FIDDLE -- > http://jsfiddle.net/TPLOR/vy6nS/
Thanks, I hope this was helpful enough. =)
kinda hackish: (see http://jsfiddle.net/vy6nS/30/ )
window.onload = function() {
var elems1 = document.getElementsByClassName("expander");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showChilds("block", this);
};
elems2[x].onmouseout = function() {
showChilds("none", this);
};
}
}
}
};
function get_nextsibling(n) {
x = n.nextSibling;
while (x.nodeType != 1) {
x = x.nextSibling;
}
return x;
}
function showChilds(disp, elem) {
get_nextsibling(elem).style.display = disp;
}
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (disp == 0 && children[i].className == "showMoreText") {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}
An example:
parent
0 child-a
1 child-b
sub-child
2 child-c
sub-child
sub-child
This works currently in my fiddle, just wondering if there is a cleaner way to go about it. But If a child-(a|b|c) is clicked, the corresponding index is returned (much like jQuery's .index()... but if you click a child's sub-child, you get that same corresponding index.
Code:
$j = jQuery.noConflict();
$j(function() {
// when clicking , show which top level parent element it's in
var element_to_stop_at = $j(".the_top_level_container");
$j(document).click(function(event) {
var target = $j(event.target);
var index_of_top_level_element = 0;
var found_target = false;
var current = target;
while ((current.length > 0) && current.attr("class") != element_to_stop_at.attr("class")) {
current = current.parent();
}
var children = current.children();
current = children.first();
while (current.length > 0 && index_of_top_level_element < children.length) {
if (current.has(target).length > 0 || current[0] == target[0]) {
found_target = true;
break;
}
current = current.next();
index_of_top_level_element += 1;
}
if (false == found_target) {
index_of_top_level_element = -1;
}
console.log("is the " + index_of_top_level_element + " th/nd/rd element in the containing element");
});
});
Is there a simplar / quicker way to do this?
Basically, I would like the functionality of .index(), but if I click a child of one of .the_top_level_container's children, it should return the same index.
fiddle http://jsfiddle.net/DerNalia/4LSzt/
• click any of the 3 sections boxed/bordered in
• The console will give the index of the the_top_level_container's children that the clicked element is a part of
Starting at the e.target, use .closest() to get to the child of the top level container, then use .index().
// child selector-------------------------v
var idx = $j(event.target).closest('.the_top_level_container > *')
.index();
DEMO: http://jsfiddle.net/4LSzt/22/
I don't know if it's what you need but check the index() method:
http://api.jquery.com/index/