I have the following code
The issue is that currently I am hardcoding the height when hovered to be 300, how do I do it such that it gets the height based on the number of tag it has, so say there are 6 and each li is 50px height so then the height is 300.
I am talking about this line specifically:
$(this).stop().animate({"height":"300px"},1000).addClass("dropped");
Also how do I make it such that when it's already expanded, and I click on it again it animates back un-expanded
Get the height of the ul and then set the #expandable animating height.
$("#expandable").click(function() {
var ulHeight = $(this).children("ul").height() + 50;
$(this).stop().animate({"height":ulHeight + "px"},1000).addClass("dropped");
});
DEMO
try this code
$("#expandable").hover(function() {
var _aH = (parseInt($(this).find('ul li').length)+1)*50
$(this).stop().animate({"height":_aH+"px"},1000).addClass("dropped");
}, function() {
$(this).stop().animate({"height":"50px"},1000).removeClass("dropped");
});
see fiddle
basically, you need to calculate number of lis in your ul and then findout the total height.
Code assumes 50px to be the height of the li, you can make that one also generic, by grabbing the height of the li.
Firstly, you need to close the your ul using </ul> not </nav>
Secondly, to make it dynamic instead of harcode height, you need to calculate the total height of your list. Here is how you do it:
var sum = 50;
$('#expandable').find('li').each(function() {
sum += $(this).height();
});
$("#expandable").click(function() {
$(this).stop().animate({"height": sum},1000).addClass("dropped");
});
Working Demo
You can get the height of the ul like that with jQuery:
$('#expandable').find('ul').height();
...then just add the height of the span and you get the computed height for the animation :)
As for your other problem: Just check for your dropped class and animate it back if it is there:
$("#expandable").click(function() {
var ulHeight = $('#expandable').find('ul').height();
var spanHeight = $('span').height();
var computedHeight = (ulHeight + spanHeight);
if( $(this).hasClass('dropped') ) {
$(this).stop().animate({"height": (spanHeight + "px") },1000).removeClass("dropped");
return false;
}
$(this).stop().animate({"height": (computedHeight + "px") },1000).addClass("dropped");
});
See my Fiddle:
Fiddle
Related
The code below causes that all divs with this class get padding including these divs which are not higher than 200, but I need to add padding ONLY to elements, which are really bigger than 200. The rest have to stay without padding. Does anybody know how I can get it?
var n = $('.class');
var height = n.height();
if (height > 200) {
n.addClass('padding');
}
Use .filter to select just the elements with the height you want:
$(".class").filter(function() {
return $(this).height() > 200;
}).addClass("padding");
In your code, n.height() just returns the height of the first element selected, it doesn't change what n refers to in the n.addClass() call.
Use each() function to iterate over the .class elements and check each height.
Then apply .padding class to those who's height is higher that 200px:
$('.class').each(function() {
var that = $(this);
if (that.height() > 200) {
that.addClass('padding');
}
});
I have six divs that all need to be the height as the one with the largest height.
For example if one div has 5 lines of text in it, and the others all have 2, then they all need to stretch to match the height of the one with 5 lines.
How can I do this by the elements' classes?
var mh=0;
$(".some-class-name").each(function () {
if (mh < $(this).height()) {
mh=$(this).height()
}
})
$(".some-class-name").height(mh);
$(document).ready(function(){
var el = $('.one'),
elHeight = [];
el.each(function(){
elHeight.push($(this).height());
});
el.height(Math.max.apply(Math, elHeight));
});
http://jsbin.com/qovacanari/1/edit?html,js,console,output
I have a list with scroll bar. Also there is a button that when pressed, it moves to a certain #id and scroll bar also moves to make that element visible. But it is not accurate. It moves, but not always to the exact place. How can I make this scroll function to be accurate:
DEMO http://jsfiddle.net/danials/anpXP/1/
My jQuery code:
function next() {
$(".list li").css("background", "grey");
goToByScroll(myID);
$("#" + myID).css("background", "red");
myID = $("#" + myID).next("li").attr("id");
}
function goToByScroll(id) {
$('.list').animate({
scrollTop: $("#" + id).offset().top - $("#" + id).height()
},
'slow');
}
In the demo try pressing the next button, and you'll see in some items the scroll moves but not correctly.
Any idea?
The problem with your code is that you are getting the offset of each element as you scroll down the list.
Offset is:
The .offset() method allows us to retrieve the current position of an element
relative to the document.
So this makes the offset of the box smaller, the further down the list you go.
What you need to do is figure out what the height+margin of an element is and do some math:
var myID = $(".list").children().first().attr("id");
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(myID-1)},'slow');
$("#"+myID).css("background", "red");
myID++;
}
This fiddle shows it in action. What it does is get the height+margin of the current element, and then multiplies it by how many elements down the list you are.
This only works assuming that all elements are the same size and that they have incremental IDs though.
UPDATE
If you want to make it work with Dynamic IDs, all you do is set an incremental variable to keep track of how many you have iterated through, and then grab the next ID similarly to how you did before:
var myID = $(".list").children().first().attr("id");
var inc = 1;
function next() {
var li = $("#"+myID);
$(".list li").css("background", "grey");
var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
$('.list').animate({scrollTop: offset*(inc-1)},'slow');
$("#"+myID).css("background", "red");
myID = $("#"+myID).next().attr("id");
inc++;
}
And here's a fiddle.
I have a table cell in which other tables are displayed (with background colors). The inner tables aren't always shown; they can be hidden via a button (change class with jQuery). Now I want the outer cell to always be filled with color. That means if only one table is displayed, its width should be 100%. When two are displayed, each width should be 50%, and so on.
How am I supposed to solve this?
Here's an example:
...
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...
In this case, the width should be 50%
You can change the width value with Jquery.
var count_table = $(".show").length; // count ".show" elements
$(".show").each(function{ // iteration on each ".show"
var width = 100/count_table; // % value of new width
$(this).css("width", width+"%"); // CSS modification
});
This code is just adapted for one TD element. You need to iterate on each "td" too.
(I hope I answered your problem)
To change the width of your elements you can use jquery.
Here's the page explaining how.
Here is another way: http://jsfiddle.net/ypJDz/1
A bit too complicated for what you need, but a great deal of possibility to expand.
function resizeTables() {
var baby = $("td > table.show"),
amount = baby.length,
mother = $("body");
baby.width(function () {
var w = mother.width() / amount;
return w;
});
}
resizeTables();
$("button").click(function () {
var $this = $(this),
ID = $this.index() + 1;
$("td > table:nth-child(" + ID + ")").toggleClass("show");
resizeTables();
});
I'm trying to find a way to change a selector's height to its parent's height via jQuery but haven't found any solution yet, you can clearly see in this page I need to get the height of each #accordion ul li and set it to the .status-green
http://jsbin.com/udajen/8/edit
Thank you!
You can see the work example here: http://jsfiddle.net/mikhailov/yQfFc/
$("#accordion li").each(function(index, value) {
var $value = $(this);
var current = $value.height() - 2;
$value.find(".status-green").height(current);
});
the second option is to iterate through .sentence divs:
$("#accordion .sentence").each(function(index, value) {
var $value = $(this);
var current = $value.height() + 10;
$value.siblings(".status-green").height(current);
});
If you want to make the .status-greens height same as associated .sentence height, you must calculate their padding-top and padding-bottom too. here is the complete code:
http://jsfiddle.net/Javad_Amiry/REPuQ/1/
and the js will be:
$("#accordion .sentence").each(function () {
var current = $(this).height();
var p_top = $(this).css("padding-top");
var p_bot = $(this).css("padding-bottom");
$(this).parent().find(".status-green").css({
height:current,
"padding-top":p_top,
"padding-bottom":p_bot
});
});