correct use of .is(':visible') - javascript

I have this code
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>
<script>
$(document).ready(function() {
var visible_elem_height = $('div').is(':visible').height()
alert( visible_elem_height )
});
</script>
but my code Doesn't work , So what do u suggest ?

.is() return a boolean value so your script will fail, instead you need
$(document).ready(function () {
var visible_elem_height = $('div:visible').height();
//or var visible_elem_height = $('div').filter(':visible').height()
alert(visible_elem_height)
})

$('div').is(':visible') returns true/false depending on the visibility of your element. On the other hand, .height() function is applied on the element and NOT on the boolean output. Therefore, $('div').is(':visible').height() will simply not work.
To achieve the desired behaviour, use the :visible selector $('div:visible').height()
$(document).ready(function() {
var visible_elem_height = $('div:visible').height()
alert( visible_elem_height )
});
plunkr

Try utilizing .filter()
$(document).ready(function() {
var div = $("div").filter(function(i, el) {
return $(el).is(":visible")
});
if (div.length > 0) {
alert(div.height())
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>

The statement is(':visible') returns true or false as output. If you want to get the height of the element, you can directly get it using the .height() method.

Related

How to change sub element of data attribute using jquery

I want to change sub element of below data attribute
<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>
for this i have added below jquery code but it doesn't work
$(document).ready(function(){
jQuery('.blue-shape').attr("data-actions",{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''});
});
.blue-shape is div class name where i want to change data attribute
You can pass a function as a second arguement and you can iterate over to change any value like:
jQuery(document).ready(function($) {
console.log($('.blue-shape').data('actions'));
$('.blue-shape').attr("data-actions", function() {
var arr = $(this).data('actions'), newArr = [];
$.each(arr, function(i, obj){
if(obj.slide === "rs-18"){
obj.slide = "rs-16"
}
if(i === arr.length-1){ newArr.push(obj); }
});
return newArr;
});
console.log($('.blue-shape').data('actions'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'></div>
jQuery.attr() expects second parameter to be string.
have a look at jQuery.data() also
$('document').ready(function() {
jQuery('.blue-shape')
.attr("data-actions", "{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>DATA</div>
You need to pass string in 2nd param or you can simply use data() method too like:
console.log($('.blue-shape').data("actions"));
$('.blue-shape').data("actions","[{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}]");
console.log($('.blue-shape').data("actions"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>
I just updated your jquery with this following code please check and vote if it works
$('document').ready(function(){
jQuery('.blue-shape').attr("data-actions","[{'event':'mouseenter', 'action':'jumptoslide', 'slide':'rs-16','delay':''}]");
});
For Reference
https://jsfiddle.net/jasonantho/6ehmded3/

Unable to get div value for voting system

When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.
Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()
First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.
Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});
In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();

Jquery hasClass issue

im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});

Remove parent div when page load?

I have HTML like :
<div id="parent">
<ul class="list">something here....</ul>
</div>
When page load, I want kill div that have id="parent". That means after finish the loading, I have only :
<ul class="list">something here....</ul>
How Javascript or Jquery can do this? Thanks for your help.
Can you try:
$(function() {
$("ul.list").unwrap();
});
Docs for unwrap().
Try this famous code to completely remove div:
document.addEventListener('DOMContentLoaded',function(){
var element = document.getElementById("parent");
element.parentNode.removeChild(element);
},false);
remove element by id
And to remove only parent div use jQuery's unwrap:
$(function() {
$("ul.list").unwrap();
});
OR in plain javascript:
function unwrap() {
var a = document.getElementById('element-to-be-unwrapped');
newelement = a.firstElementChild.cloneNode();
document.body.insertBefore(newelement, a);
a.parentNode.removeChild(a);
}
in jQuery, here is the code:
var ul_holder = $('#parent').html();
$('#parent').remove();
$(document).append(ul_holder);
You can replace $(document) with any other element
Use .unwrap() function
if ( $(".list").parent('#parent').is( "div" ) ) {
$(".list").unwrap();
}
You can use closest() with remove()
$(function() {
$("ul.list").closest('#parent').remove();
});
or you can use unwrap() like,
$(function() {
$("ul.list").unwrap();
});

Javascript replace has no effect

This is the jQuery:
<script type="text/javascript">
$(document).ready(function(){
var relName;
$('.child').each(function() {
relName = $(this).attr('rel');
relName.replace('&','');
$(this).attr('rel', relName);
$(this).appendTo('#' + $(this).attr('rel'));
});
});
</script>
With this relevant HTML:
<div rel="MadDogs&EnglishmenHandpaintedfigurines" id="Figurines" class="category section child">
<h3 class="categoryTitle">Figurines</h3>
</div>
But for some reason, the replace has no effect whatsoever!
replace returns string with replaced data. So you need to assign back to your variable.
relName = relName.replace('&','');
replace() doesn't change the original string, it returns a new one.
It's not updating because you're not assigning the result to anything.
Try this instead:
$(this).attr('rel', relName.replace('&',''));
Here's a neat way to write it, using the callback version of attr basically every jQuery method:
$(document).ready(function() {
$('.child').attr('rel', function(i, relName) {
$(this).appendTo('#' + relName);
return relName.replace('&','');
});
});

Categories