I'm working on a project and have gotten stuck on reorganizing my grid via JQuery. I've broken the problem down into a simple fiddle: http://jsfiddle.net/tylerbuchea/QgAqV/
$('div').bind('click', function() {
var pitcher = $('.selected')[0];
var catcher = this;
if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
$(pitcher).before(catcher);
console.log('before');
}
else
if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
$(pitcher).after(catcher);
console.log('after');
}
});
I want the "selected" div to move to clicked divs location with all other divs being scooted down (or up). This works fine, but if you try to move it more than one space... Well you'll see the problem. Maybe the .before and .after functions aren't what I should be using?
I've updated your code example with My Version:
$('div').bind('click', function() {
var $currentlySelected = $('.selected'),
$newlyClicked = $(this),
currentlySelectedIndex = $currentlySelected.index(),
newlyClickedIndex = $newlyClicked.index();
if (currentlySelectedIndex > newlyClickedIndex) {
$currentlySelected.insertBefore($newlyClicked);
console.log('is greater, so put it after');
} else {
$currentlySelected.insertAfter($newlyClicked);
console.log('is less, so put it after');
}
});
Have a look at this and tell me if it's doing what you want. I changed your logic around a little bit. The first thing I did was instead of checking offsets, I'm using .index() which tells me the position of an element in relation to its siblings.
If the clicked elements index is less than the currently selected elements index, then I move the currently selected element to BEFORE the clicked element so it takes its place. If the index of the clicked element is more than the currently selected elements index, then I move the currently selected element to AFTER the clicked element so it takes its place.
In regards as to why your elements were moving one at a time, I'm not entirely sure, but my guess would be that you were moving raw DOM elements around at times, and not jQuery objects. If they had ID's perhaps it would have been different. In any case, by moving around jQuery objects, it's working as intended.
Let me know if this is what your looking for!
I'm not sure if I understood your cuestion, but think this is what you want:
$('div').bind('click', function() {
var pitcher = $('.selected')[0];
var catcher = this;
if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
$(catcher).after(pitcher);
console.log('before');
}
else
if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
$(catcher).before(pitcher);
console.log('after');
}
});
Regards,
Romén
$('div').bind('click', function() {
var pitcher = $('.selected')[0];
var catcher = this;
if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
$(catcher).after(pitcher);
console.log('before');
}
else
if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
$(catcher).before(pitcher);
console.log('after');
}
});
You have inverted both the conditions and the use of the functions. Have a look here on how to use before()/after().
The code still does not work when you have multiple rows since there is a conceptual flow: you have to test if the catcher is before/after the pitcher in logical terms.
When a tile comes before another?
when it is on an upper row
OR
when it is on the same row AND it is on the left
I leave the rest to you as an exercise
Related
I have several div elements with incremental IDs (e.g. div0, div1, div2 (I know this is bad practice - I'm developing a dynamic CSV-to-HTML converter for Outlook calendar exports)) and I'd like to switch between them using jQuery linked to forward/back buttons . What I'm trying to do is as follows (in meaningless pseudo-code):
int pos = 0
forward.onclick
hide ("#div"+pos)
pos++
show ("#div"+pos)
back.onclick
if pos != 0
hide ("#div"+pos)
pos--
show ("#div"+pos)
Since I know next to nothing about jQuery, my questions are 1. What would the syntax be for implementing the above example (assuming I'm on the right track), and 2. Is there a way in jQuery to somehow check for an upper boundary so the counter doesn't increase above the number of divs?
If you want to know how many divs you have in jQuery, select them and take the length of your selection:
$('.div').length
You could even just use that selection to cycle through which divs to show:
var $divs = $('.div');
var upperLimit = $divs.length - 1;
var index = 0;
// on arrow click
$($divs[index]).hide();
index++ (or index--, depending on the arrow)
$($divs[index]).show();
int is not a data type in JavaScript. Use var. Declaration would be var pos = Number(0). To prevent exceeding the boundaries of number of divs, declare a variable with the number of divs you have, and inside your hide and show calls, use pos℅divLength instead of pos. Suppose you have total divs as 4, you will never exceed div3 this way. It will iterate from div0 to div3. Refer this to learn how to use show and hide methods.
Here's a demo.
var index = 0;
$('#div' + index).show();
$('#next').click(function () {
index++;
$('#back').prop('disabled', false);
if (index === fakeData.length - 1) {
$('#next').prop('disabled', true);
}
$('.items').hide();
$('#div' + index).show();
});
$('#back').click(function () {
index--;
$('#next').prop('disabled', false);
if (index === 0) {
$('#back').prop('disabled', true);
}
$('.items').hide();
$('#div' + index).show();
});
The above code will disable and enable the next and back buttons based on whether you are at the beginning or the end of your list of data. It hides all elements and then shows the specific one that should be shown.
I have 3 columns which include dynamically generated list elements (li tags)
these have an attribute that I try to use to hide a row / li when an amount of character is not reached in this element.(by using opacity property)
I have it working...sometimes and sometimes it only works for one column out of the 3...
So I'd appreciate some insight on what's wrong here.
(function() {
// selecting all elements with class
// class="checkout-tariff-meta-maybe-hidden"
var elems = $(".checkout-tariff-meta-maybe-hidden");
// interact between founded elements
for (var k = 0; k < elems.length; k++) {
// getting text content size
var textSize = elems[k].textContent.length;
// if text size is one we will hide element
if (textSize <= 1) {
// hiding
elems[k].style.opacity = "0";
}
}
}());
You can just go straight to the point and do something like:
// Adjust as needed
$(document ).ready(function() {
$('.checkout-tariff-meta-maybe-hidden').filter( function() {
return $(this).text().length<3; } ).hide();
});
Since you're using jQuery, to hide an element you can just do:
$(elems[k]).hide();
Alternatively, if you're looking to hide it without collapsing (since you're changing opacity, I assume this is the case), look into .fadeTo():
$(elems[k]).fadeTo(1, 0);
You might look at ...
if (textSize <= 1) {
elems[k].style.opacity = "0";
} else {
elems[k].style.opacity = "1";
}
... to ensure they get turned back on when longer.
i'm building a webpage where many span needs to be transitioned from one class to another to create a bg-color fadein effect. Distribution of elements of same classes is mixed through the page, but they are all grouped under common classes.
I want to create a behavior that does the following: when you click any elements of class-n, the other elements of that class transitions, with the clicked element acting as the starting point.
This is mostly figured out, thanks to some help on SO; see the jsfiddle.
$(".div").click(function () {
var itemClasses = this.classList;
var itemThread = itemClasses[1];
colorThread($(this), itemThread);
console.log(itemThread);
});
function colorThread($div, tId) {
tId = '.'+tId;
$div.toggleClass('div-clicked');
setTimeout(function () {
(function togglePrev($div) {
$div.toggleClass('div-clicked');
setTimeout(function () {
togglePrev($div.prev(tId));
}, 100);
})($div.prev(tId));
(function toggleNext($div) {
$div.toggleClass('div-clicked');
setTimeout(function () {
toggleNext($div.next(tId));
}, 100);
})($div.next(tId));
}, 100);
}
However, I am still struggling around a particular issue: I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating. If the jsfiddle, that would translate in all of the same color div to transition, regardless of their placement in the DOM tree.
In my togglePrev/toggleNext function, I have tried something along
if($div.hasClass(".classToTransition"))
{
$div.toggleClass(".div-clicked");
}
but couldn't get it to work properly (it doesn't ieterate to the next elements). There is something that I can't seem to grasp in the structure of that conditional. Anyone has a lead?
You really did manage to complicate something that should be pretty simple ?
$(".div").click(function () {
var coll = $('.'+this.className.replace(/(div-clicked|div)/g, '').trim()),
idx = coll.index($(this).toggleClass('div-clicked'));
$.each(coll, function(i) {
setTimeout(function() {
if (idx + i <= coll.length) coll.eq(idx + i).toggleClass('div-clicked');
if (idx - i >= 0) coll.eq(idx - i).toggleClass('div-clicked');
},i*200);
});
});
FIDDLE
It gets all the elements with the same class as the one currently clicked, and the index of the currently clicked, and then just adds and subtract 1 to the current index to get the next and previous elements. The checks are to make sure it stops when it reaches the end.
I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating
You might want to use nextAll(tId).first()/prevAll(tId).first() to select the next to-be-toggled element: http://jsfiddle.net/35uNW/4/. .next() does only look at the next sibling, and if that doesn't match your tId selector, no element will be selected.
If you want to iterate the different-classed elements so that you wait for each one, but don't want to toggle it, you can use your if-condition but you must remove the tId selector from the next()/prev() calls: http://jsfiddle.net/35uNW/3/.
This was a fun one. I did it a slightly different way, getting all of the matched elements and splitting them into before and after arrays.
var $allItems = $(".div");
$(".div").click(function () {
var itemClasses = this.classList;
var itemThread = itemClasses[1];
colorThread($(this), itemThread);
});
function colorThread($div, classname) {
var tId = '.'+classname,
$divs = $allItems.filter(tId),
index = $divs.index($div),
$before = $divs.slice(0, index),
before = $before.get().reverse(),
$after = $divs.slice(index+1);
$div.toggleClass('div-clicked');
$(before).each(function(i, item){
setTimeout(function () {
$(item).toggleClass('div-clicked');
}, i*100);
});
$($after).each(function(i, item){
setTimeout(function () {
$(item).toggleClass('div-clicked');
}, i*100);
});
}
Here's a working fiddle: http://jsfiddle.net/5sUr4/
I have a DIV, that is sometimes hidden, and in this case I don't want that google adds appear/are loaded at all inside this DIV.
What is the best practice to make such a check with javascript?
You should look at the computed style of the node you want, via window.getComputedStyle, rather than the style attribute of the node, as css elsewhere may be effecting it too.
Checking whether a node is covered by another node is much more difficult, one way is to use document.elementFromPoint to find out which node is top-most at a specific point, then do this where your node should be until you're satisfied it's visible. For example, check the centre of the node is your node.
function isHidden(node, checkIfCovered) {
var absPosition = function absPosition(node) {
var x = 0, y = 0,
h = node.offsetHeight || 0, w = node.offsetWidth || 0;
do {
node.offsetLeft && (x = x + node.offsetLeft);
node.offsetTop && (y = y + node.offsetTop);
} while (node = node.offsetParent);
return {x: x, y: y, h: h, w: w};
},
o, style;
if (checkIfCovered && document.elementFromPoint) { // only if supported
o = absPosition(node); // get position & size
o.centre = {x: o.x + o.w / 2, y: o.y + o.h / 2}; // centre of node
if (document.elementFromPoint(o.centre.x, o.centre.y) !== node) {
return true; // another node is in the centre => covered
}
}
do { // loop up over parent nodes
if (node.nodeType === 9) break; // skip #document
style = window.getComputedStyle(node);
if ( style.display === 'none'
|| style.visibility === 'hidden'
|| style.opacity === '0'
) {
return true;
}
} while (node = node.parentNode);
// passed all tests, not hidden
return false;
}
Example usage
isHidden(document.getElementById('myDivId')); // true->hidden
isHidden(document.getElementById('myDivId'), true); // true->hidden or covered
Further things to consider
Is the node located where it is possible to scroll into view? See Fabrizio Calderan's comment.
Now edited in. Are the parent nodes hidden? You may want to loop up the DOM tree to find this out. It's okay if they are covered though, obviously. See Loïc Faure-Lacroix's comment.
if your div has an ID, try this:
if((document.getElementById('your_div_id').style.display=='none') || (document.getElementById('your_div_id').style.visibility=='hidden')){
//its hidden
}else{
//its not
}
you can check it by
var div = document.getElementById('div_id');
if( div.style.visibility=="hidden"
|| div.style.display=="none")
{ alert("div is hidden"); }
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
isVisible will give you is the div hidden or visible.
<script>
function isHidden(divId){
styleValue = document.getElementById(divId).style.display;
if(styleValue == 'none'){
return true;
}
else{
return false;
}
}
</script>
returnValue = isHidden(); //return true if hidden
There are a couple of ways to know if an object is hidden or not. There are couple of ways to find out but the truth is that it's much more complicated than most solution out there.
I can't unfortunately mash it up at the moment but I can tell how to do it.
An hidden object may still have display to something different than none or visibility to default. If parent objects are hidden, then child elements are also hidden but the display attributes remain unchanged.
In other word, you'll have to bubble every parent element until you find an hidden element or the root.
That said, css attributes like display and visibility isn't the only way to hide an element. You can also check for overflow: hidden and if the object is outside of the bounding box.
Pseudo code
def visible(initial, element)
if element.invisible or element.hidden
// Element was simply hidden so false
return false
if element != initial and elemen.has_overflow_hidden && initial.outside(element)
// Here we check if our element is inside the bounding box of a overflow hidden
// Parent.
return false
if element.opacity == 0
return false
if element == element.parent
// reached the root
return true
visible(initial, element.parent)
if (visible(element, element))
do something
else
do something else
As far as I can say, it's unfortunately not handling every cases. But it should be more than enough. It doesn't handle z-index, It might not work well with position absolute, relative and fixed.
In jquery:
$('#div').is(':visible');
$('#div').is(':hidden');
You're looking at the DOM elements (in this case) DIV, CSS property. There are two ways to hide an element.
One is display: none, the other is visibility: hidden.
In jQuery you would then do something like:
if !($('#div-id').css('display') == 'none'){
JAVASCRIPT_TO_LOAD_ADS_GOES_HERE
}
In the case of visibility hidden, do the same, but compare .css('visibility') to hidden.
Hope you can help, this code is not working. It is selecting the next image ok, but if it is on the last image and there is no 'next image' then I want to select the first image in the 'li'. I've added an if condition: if (nextLi.value !=='')... but this doesn't seem to be working.
function nextImg(){
$('#background').find('img').animate({'opacity': 0}, 500, function (){
var nextLi = $('.sel').parent().parent().next('li').find('a');
if (nextLi.value !=='') {
var nextLiA = nextLi.attr('rel');
$('#background').find('img').attr({'src':nextLiA});
$('.sel').appendTo(nextLi);
} else {
var nextLi = $('.sel').parent().parent().first('li').find('a');
var nextLiA = nextLi.attr('rel');
$('#background').find('img').attr({'src':nextLiA});
$('.sel').appendTo(nextLi);
}
});
}
You should use length instead, do:
if (!nextLi.length){
//do stuff
}
If the selection is empty nextLi.length will return 0 (i.e. false), so you add an !
nextLi is a jQuery object. If you want to see if it contains any elements, i.e., if anything matched the selector(s) you used then just check its .length property:
if (nextLi.length > 0 ) {
Note also that the three lines inside the if block are the same as the last three lines of the else, so you can simplify your code as follows:
if (nextLi.length === 0) {
nextLi = $('.sel').parent().parent().first('li').find('a');
}
$('#background').find('img').attr({'src': nextLi.attr('rel') });
$('.sel').appendTo(nextLi);
(I've removed the nextLia variable entirely since it was used in only one place - you can just use nextLi.attr('rel') directly when setting the src attribute.)
Try this. It checks for the size of the li and if not found anything, selects the first.
function nextImg(){
$('#background').find('img').animate({'opacity': 0}, 500, function (){
var li = $('.sel').parent().parent().next('li').find('a');
if(li.length == 0) {
//if there is not last item
li = $('.sel').parent().parent().first('li').find('a'); //get the first item
}
var liA = li.attr('rel');
$('#background').find('img').attr({'src':liA});
$('.sel').appendTo(li);
});
}