I have some block with dinamicly parsing content. I need to change some style for it but if there is some html. My question: is there any possible to live check with jQuery that some element have html at specify moment and set some actions if it's for example empty? Thx for some information.
My code:
if ($('.degrees').live().html === ("")){
$('.block').fadeOut('slow');
}
Try this:
to detect divs that were empty and got their html changed:
$('.degrees:empty').on('DOMSubtreeModified',function(){
//...
});
to detect every html change
$('.degrees').on('DOMSubtreeModified',function(){
if($(this).is(':empty')) // check if it became empty ..
});
You can check it this way:
if($('.degrees').html().length > 0){
// element has children
} else {
// no children
}
You can check if the element is empty like so:
if ($('.degrees').is(':empty')){
$('.block').fadeOut('slow');
}
but it will only work when you do the check, and not for future elements, to do that you would have to use an interval to check it regularly, and that's generally not a good idea.
You can check the children element:
var $main = $('.degrees'),
$child = $('.block');
if($main.children().length < 0) {
$child.fadeOut(500);
}
Related
I've added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.
I'm not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.
I added the following script to my theme's main.js file:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn't work.
Is there something wrong with this script or do I need to do something special to initiate it? Since it's in my theme's main.js file and I used $(document).ready(function() I figured it would just load with the page.
Any help with this would be greatly appreciated.
Instead of using:
var display = $('.my_account_orders');
Implement it into the if statement like this:
if($('.my_account_orders').css("display") == "none") {
Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.
You've got an errant $ in your if statement. This should work instead:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don't all have the same display, you could get unexpected results.
Try this:
$(document).ready(function(){
var display = $('.my_account_orders');
if(display.css("display") == "none") {
$('.paging-nav').css("display","none");
}
});
I believe it's a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.
$(document).ready(function(){
if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
{
$('.paging-nav').css("display","none");
}
});
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/
I am doing processing with html page elements like button or text box.
I can not change the code or can not write any code on that particular page.
Therefore before i am doing that i want to check that all element are present in that page.
For Example- I have HTML page.
So is there any way to validate that all the element are presented in other html page by javascript or another way.
any help will be highly appreciated.
try this using jQuery:
var $button = $("button");
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
try in javascript:
var $button = document.getelememtById("button"); /* button had an ID of #button */
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
basically you check the length of that DOM object and do something if its length is not zero
of course this just gives you a proof of concept to use on those elements you want to test against
Yes you can write something that would compare the DOM of the two html pages.
Im trying for the first time to use the data attibrute with jQuery, what id like to do is move an element to the correct order based upon the data-order attribute.
Im unsure how to find the correct value of the data-order attribute though as I keep recieveing 'undefined'?
an anybody see what im doing wrong? and also, is there a way to find the correct elemtn it should come after in the dom? so if the data-attribute for the current value is 5, then it should come after the attribute with the balue 4..
$(document).ready(function(){
// Move the profile back to positton funciton
function dmoveProfile(){
alert($(this).data("data-order"))
};
$('.box').click(function(){
alert($(this).data("data-order"))
});
// move into position
});
http://jsfiddle.net/Fta6p/
It seems as though you have enough answers as to why your ordering function doesn't work right.
Sorting your elements with basic JS is better. If you're looking for a jquery solution you can find it here:
function sortBoxes(){
for(var i=1; i<= $('.box').length; i++) {
var $box = $('.box[data-order="'+i+'"]');
$box.appendTo($('section'));
}
};
$('.box').click(function(){
// alert($(this).data("order"));
sortBoxes();
});
Demo: http://jsfiddle.net/Fta6p/7/
Solution #1:
.data() is used to Store arbitrary data associated with the matched elements. Use .attr() instead.
$('.box').click(function(){
alert($(this).attr("data-order"))
});
Updated Fiddle
Solution #2:
For Sorting the DOM elements in ascending order you can do like this:
jQuery.fn.sortDomElements = (function() {
return function(comparator) {
return Array.prototype.sort.call(this, comparator).each(function(i) {
this.parentNode.appendChild(this);
});
};
})();
$("section").children().sortDomElements(function(a,b){
akey = $(a).attr("data-order");
bkey = $(b).attr("data-order");
if (akey == bkey) return 0;
if (akey < bkey) return -1;
if (akey > bkey) return 1;
})
Fiddle Demo
Note: Your div #5 is overlapped on Div #1
You can see output of div normal, if you try inspect element you will or viewpagesource you will see the DOM elements are arranged in Ascending order
Updated fiddler
Use the jQuery .data() method without the "data-" prefix, like:
$(document).ready(function(){
// Move the profile back to positton funciton
function dmoveProfile(){
alert($(this).data("order"))
};
$('.box').click(function(){
alert($(this).data("order"))
});
// move into position
});
I have a javascript function that tries to determine whether a div is visible and does various processes with that variable. I am successfully able to swap an elements visibility by changing it's display between none and block; but I cannot store this value...
I have tried getting the elements display attribute value and finding if the the element ID is visible but neither has worked. When I try .getAttribute it always returns null; I am not sure why because I know that id is defined and it has a display attribute.
Here is the code of the two different methods I have tried:
var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");
Any guidance or assistance would be greatly appreciated.
Try like this:
$(function () {
// Handler for .ready() called.
if ($("#mydivID").is(":visible")) {
alert('Element is visible');
}
});
FIDDLE
Please make sure to include the jQuery file inside the head tag, as follows
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
If you would like to do this only javascript way you may try
window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
Display is not an attribute, it's a CSS property inside the style attribute.
You may be looking for
var myvar = document.getElementById("mydivID").style.display;
or
var myvar = $("#mydivID").css('display');
Let's take a second to see what .is(":visible") is doing in jQuery, shall we?
Here's a link: https://github.com/jquery/jquery/blob/master/src/css.js#L529
return !jQuery.expr.filters.hidden( elem );
where
jQuery.expr.filters.hidden = function( elem ) {
// Support: Opera <= 12.12
// Opera reports offsetWidths and offsetHeights less than zero on some elements
return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};
So, it's just checking the offset width and height of the element.
That said, and also worth noting, when jQuery checks to see if an element is hidden (i.e. like when triggering a 'toggle' event), it performs a check on the display property and its existence in the dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43
var myvar = $("#mydivID").is(":visible"); //THis is JQUERY will return true if visible
var myvar = document.getElementById("mydivID").getAttribute("display"); //HERE Display is not a attribute so this will not give desired result.
MY SOLUTION
1.Select the element using QuerySelector
var myvar= document.querySelector('ELEMENT');
2.Check the OffsetWidth and Offsetheight to be greater than 0;
(myvar.offsetWidth > 0 || myvar.offsetHeight > 0)
3.if myvar is Greater than 0 then it's visble else not.
I am traversing checkboxes like this:
$('.day').each(function() {
// here I need to get the following 4 text inputs in the HTML
// and set some attributes on them
});
After every checkbox there are four text input fields (there are also some div, span tags for CSS around them). So inside the loop above I need to get four text input fields that follow the checkbox in the HTML source so I can set some attributes on them.
How would I go about that?
Hard to say without the markup, but you could try this.
$('.day').each(function() {
$(this).nextAll('input').slice(0,4).attr('someAttribute','somevalue');
});
If there's some stopping point, like another .day element, you could use nextUntil then .filter().
$('.day').each(function() {
$(this).nextUntil('.day').filter('input').attr('someAttribute','somevalue');
});
EDIT: When you say there are some <div> and other tags around them, I assumed that you meant in between them.
If you're actually saying that the inputs are nested in them, then you could do something like this:
$('.day').each(function() {
$(this).nextAll(':has(input)').slice(0,4).find('input').attr('someAttribute','somevalue');
});
or perhaps this:
$('.day').each(function() {
$(this).nextAll().find('input').slice(0,4).attr('someAttribute','somevalue');
});
or again, if there's a stopping point you can indicate like another .day, use nextUntil():
$('.day').each(function() {
$(this).nextUntil('.day').find('input').attr('someAttribute','somevalue');
});
if they are siblings within a parent container, you might be able to use $(this).nextAll('input').each(function(){}); or $(this).nextAll().find('input').each(function(){}); depending on your html structure. Or var p = $(this).parent(); if (p && p[0]) p[0].find('input').each(function(){});
This is a total guess, since you've shown no markup whatsoever:
$('.day').each(function() {
var $this = $(this);
var $inputs = $this.nextAll('input[type=text]');
$inputs.each(function () {
// do whatever with the inputs here
});
});
if your trying to set css properties to the inputs you can use css selectors which are quite powerful, like this
.day ~ input {
//set your styles for the input
}
what this means is you are selecting all the inputs exactely after .day
hope this helps.
Try
$('.day').each(function() {
// get input fields
var first_input = $(this).nextAll().filter('input:first');
var second_input = first_input.nextAll().filter('input:first');
var third_input = second_input.nextAll().filter('input:first');
var fourth_input = third_input.nextAll().filter('input:first');
// set attribute xyz to value
first_input.attr('xyz', 'value');
second_input.attr('xyz', 'value');
third_input.attr('xyz', 'value');
fourth_input.attr('xyz', 'value');
});