I tried searching for two hours but couldn't find the exact answer.
I am trying to do the following:
function myFunction() {
$('.class1, .class2').each(function (){
var Width1 = $(this).find('.class1').width();
var Width2 = $(this).find('.class2').width();
// do stuff here...
});
}
I want to select two classes, then retrieve width of the elements of the current instance to two different variables, there are thousands of elements with class1 and class2. Class 2 is not a subclass of Class 1, selection seems to be valid, but vars are undefined after execution, why is it not working?
As you said .class1 is not child of .class2 so .find wont work. You need to check if current element is class1 then assign its value to width1 other assign value to width2. Use .is() to do this:
function myFunction() {
$('.class1, .class2').each(function (){
var Width1, Width2;
if($(this).is(".class1"))
Width1 = $(this).width();
else
Width2 = $(this).width();
});
}
Related
I have a var named as sliceText which contains a text which is collected whenever user hover over the section of a visualforce chart. I'm trying to increase the size of this text with a value which gets calculated at run time and newSize var hold the same. But using jquery following syntax is not working and I'm not able change the font size.
var sliceText = j$(this).text();
j$(sliceText).css('font-size', newSize);
How can I assign a var as a selector using jquery? I want following solution work for me but its NOT when I tried to!! https://docs.acquia.com/articles/increase-text-size-jquery
You need to apply css to the DOM object containing the text no the text
j$('path, tspan').mouseover(function(e) {
j$(this).children().css('font-size', 15);//reset to default size font
j$(e.target).css('font-size', newSize);
});
You didn't mentioned whether the dom is an id or a class
var sliceText = j$(this).text();
j$("#"+sliceText).css('font-size', newSize); --- if the dom element is an id
j$("."+sliceText).css('font-size', newSize); --- if the dom element is a class
var newSize = '30px';
var originalSize = '14px';
$("span").hover(function(){
$(this).css('font-size', newSize);
}, function(){
$(this).css('font-size', originalSize);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> Jan </span><br/>
<span>Feb</span><br/>
<span>March</span>
As i understand you want to change the font size of hover element
so try this one
function funtest()
{
var oldSize = parseFloat(j$('text').css('font-size'));
var newSize = oldSize * 2;
j$('path, tspan').mouseover(function () {
j$(this).css('font-size', newSize);
});
}
I am trying to check which div has bigger height and than place a class inside the one that is greater.
I have this code
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn)
{
$(".col-md-3").addClass('dotRight');
}
else
{
$(".col-md-9").addClass('dotLeft');
}
});
The goal here is to check if sideNavMenu is greater than mainColumn than place dotRight on its div tag.
If the mainColumn is greater, then place dotLeft on its div tag.
But its not working.
Any suggestion how to change/improve it.
Thanks a lot
You should reference these by IDs and not classes, since there can be multiple elements with these class names on the page. There should only be one with each ID.
$(document).ready(function () {
var sideNavMenu = $("#sidebar").height();
var mainColumn = $("#main").height();
if (sideNavMenu > mainColumn) {
$("#sidebar").addClass('dotRight');
} else {
$(".#main").addClass('dotLeft');
}
});
Of course, you need to add the id's to your <div>s respectively.
The jQuery docs say:
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
But, I was just playing with it in jsfiddle and it seems to return an object containing the height of the first element.
http://jsfiddle.net/wwx2m/2/
Which means you should be able to do:
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (JSON.stringify(sideNavMenu) > JSON.stringify(mainColumn)) {
$(".col-md-3").addClass('dotRight');
} else {
$(".col-md-9").addClass('dotLeft');
}
});
But the first way I said is preferred. This is not stable, since there can be more objects introduced with the same class. The only reason I'm even mentioning it is to explain why you were having problems with your original code. :)
http://jsfiddle.net/wwx2m/4/
I put the jsfiddle together for you
<html>
<div class='col-md-3'>
</div>
<div class='col-md-9'>
</div>
<script>
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn){
$(".col-md-3").addClass('dotRight');
}
else{
$(".col-md-9").addClass('dotLeft');
}
jsFiddle
updated jsFiddle with Animation
I can't use jQuery library on my project so I need to get this little jQuery snippet to 'pure' javscript
$(document).ready(function(){
$listHeight = $('ul#home-news-list').height();
$child = $('ul#home-news-list li:last-child');
while ($listHeight > 150) {
$($child).remove();
$listHeight = $('#home-news-inner ul').height();
$child = $('ul#home-news-list li:last-child');
console.log($listHeight);
}
});
So it basically removes the last list item until list height is less than 150. My javascript skills are not that good so this is the code I came up with and it gives me TypeError: document.getElementById(...) is null on the first line, so I have no idea if the rest is worth anything:
var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.getElementById('home-news-list li:last-child');
while (listHeight > 150) {
child.parentNode.removeChild(child);
var listHeight = document.getElementById('home-news-list').offsetHeight();
child = document.getElementById('home-news-list li:last-child');
}
Could you please tell me what I wrong with the code?
I am calling this script in <head></head>
Your main problem seems to be the use of getElementById, this method call can't be used with the same parameters as JQuery and so becomes cubersome and more verbose within pur javascript, also offsetHeight is a property instead of a method:
var listHeight = document.getElementById('home-news-list').offsetHeight;
var parent = document.getElementById('home-news-list');
var child = parent.lastChild;
while (listHeight > 150) {
child.parentNode.removeChild(child);
listHeight = document.getElementById('home-news-list').offsetHeight;
child = parent.lastChild;
}
If you want to use css selectors like jquery does then you can use javascript's querySelector and querySelectorAll methods.
var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.querySelector('home-news-list li:last-child');
while (listHeight > 150) {
child.parentNode.removeChild(child);
var listHeight = document.getElementById('home-news-list').offsetHeight();
child = document.querySelector('home-news-list li:last-child');
}
This is the same as you code but with querySelector substituted when getElementByid does not work.
First off, your script in <head> will execute immediately before the browser has a chance to parse your DOM; so you should place the script at the bottom of the page, and to ensure that the script executes only when the DOM is ready:
window.onload = function () {
...
};
The first line should work if you change offsetHeight() to offsetHeight (it's a property, not method). For the rest, you need to dig through CSS selector and DOM api to figure out how jQuery do it...
I'm sorry that you can't use jQuery, the DOM API is a terrifying monster.
I have a complex structure of many nested, absolutely positioned elements.
These elements may or may not have their z-index set.
They also may or may not have the same parent element.
I am wondering what is the best / simplest way to return which element is on 'top'. Something like the following...
$(".panel").topMost()
Thanks (in advance) for your help
Do you mean the element with highest z-index:
$(document).ready(function() {
var array = [];
$("*").each(function() {
array.push($(this).css("z-index"));
});
var highest = Math.max.apply(Math, array);
console.log(highest);
});
A plugin is there ..topZindex
$.topZIndex("div");
Try this:
var z = [];
$('.panel').each(function(i, el) {
var $panel = $(el),
zindex = $panel.css('z-index');
z[zindex] = $panel;
});
var topMost = z.slice(-1);
See if you don't specify z-index to absolute elems then last of the element will be on top of other elems, means last element will have a greater highest default z-index calculated by browser itself.
Try this fiddle: http://jsfiddle.net/fLB2W/
var array = [];
$("*").each(function () {
if ($(this).css('position') == 'absolute') {
array.push($(this).css("position")+'<--pos & class -->'+$(this).attr('class'));
}
});
console.log(array[array.length-1]);
I faced similar issue with Modal dialog while displaying jQuery UI datepicker and using event parameters to figure out the clicked icon. Modal dialog overlay was preventing the new datepicker from showing on top of the modal dialog.
The best solution worked in three browsers (IE, Firefox, and Chrome) is:
function topZIndex(target, selector) {
var objs = $(target).parents(selector + '[z-index > 0]');
var a1 = -1;
$.each(objs, function (index, z1) {a1=(z1.style.zIndex > a1)? z1.style.zIndex : a1; });
return a1;
};
using event parameters as follows:
var zIndex = topZIndex(event.currentTarget, 'div')+1;
or
var zIndex = topZIndex(event.currentTarget, '*')+1;
Both combinations will generate same result, however it is more efficient to be specific by specifying 'div' instead of '*'
Then assuming my date picker id is datepickerpanel to set the new zIndex for datepicker
$('#datepickerpanel').css('z-index', zIndex);
This solution provides proper z-index value to place the new object on top of modal dialog.
I need the class inside of the <li> tag to be auto height/adjustable to its <li>, however it wasn't possible with CSS(height:auto;height:100% and other options) so I tried jQuery but I'm a newbie so I tried what I've learned so far. The following code does just what I need but I wasn't able to figure out how to set the auto height for the class on page load instead of .click function. Please note that I have many <li> tags with different sizes so (this) needs to be included.
$j("#accordion ul li").click(function () {
var current = $j(this).height() - 2;
$j(this).find(".status-green").attr("style","height:" + current + "px");
});
Thanks in advance
$j(function () {
$('#accordion').find('.status-green').each(function (index, value) {
var $value = $j(value),
h = $value.parents('li').height() - 2;
$value.height(h);
});
});
This will find and iterate through each .status-green element within the #accordion element when the DOM is ready ($j(function(){}); is short-hand for $j(document).ready(function(){});).
--Update--
This more closely resembles your code:
$j(function ($) {
$("#accordion").find('li').each(function (index, value) {
var $value = $(value),
current = $value.height() - 2;
$value.find(".status-green").height(current);
});
});
If you pass $ as a argument in the first line then you can use $() rather than $j(). Also the .height() function assumes pixels if only a number is passed to it.