I'm looking for a way to take the width of the elements before an element in hover.
I tried with:
$('ul li').hover(function() {
$(this).prevAll().each(function() {
var margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
But the console say:
Uncaught ReferenceError: margin is not defined
Any solution?
Thanks
I'm looking for a way to take the width of the elements before an element in hover.
You need to initialize your var outside of loop and just add the values:
$('ul li').hover(function() {
var margin = 0;
$(this).prevAll().each(function() {
margin += $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
Accessing margin variable outside of each function would be result in undefined. Store the variable out of the each function scope so that you can access it outside the scope:
$('ul li').hover(function() {
var margin;
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
But I can realize in the above case, you won't get list margin-left accordingly what you're trying to do. So, you may use like this:
$('ul li').hover(function() {
var $this = $(this);//'li'
$(this).prevAll().each(function() {
var margin = $(this).width();
$this.css('margin-left', margin + 'px');//margin on 'li'
});
});
You cannot use your margin variable outside of the scope where you define or set the value.
$('ul li').hover(function() {
var that = this;
$(that).prevAll().each(function() {
var margin = $(this).width();
$(this).css('margin-left', margin + 'px');
});
});
You need to define the margin inside the loop where the margin variable is defined. If a veriable is define in a function/loop then the 'scope' of this variable is the function/loop that it is contained in.
$('ul li').hover(function() {
$(this).prevAll().each(function() {
var margin = $(this).width();
$(this).css('margin-left', margin + 'px');
});
});
If you want to use margin outside the loop then you need to define it before like this:
$('ul li').hover(function() {
var margin = 0;
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
and for a full page scope, define before you do anything:
var margin = 0;
$('ul li').hover(function() {
$(this).prevAll().each(function() {
margin = $(this).width();
});
$(this).css('margin-left', margin + 'px');
});
//margin can also be used here now.
I think the first solution is what you are looking for in this instance but I have given the second in case you come across something similar again.
Related
i am new in javascript. its working fine if we refresh the page but its not working when we resize the window.
$(window).load(function(){
equl_height();
});
$(window).resize(function(){
equl_height();
});
function equl_height () {
var highestBox = 0;
$('ul li').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('ul li').height(highestBox);
}
window.addEventListener("resize", equl_heigh);
cheers!
Problem is in how you measure height of an li. use scrollHeight instead of height(). Check this fiddle.
Update your equl_height method with
function equl_height () {
console.log( "resizing" );
var highestBox = 0;
$('ul li').each(function(){
//var height = $(this).outerHeight();
var height = $(this)[0].scrollHeight;
if(height > highestBox){
highestBox = height;
}
});
$('ul li').outerHeight(highestBox);
}
Also, since resize event can be fired at a higher rate so try this throttling trick as well.
jsfiddle: http://jsfiddle.net/R3G2K/1/
I have multiple divs with content, and each one has a header. I'd like to make the last header that left the viewport to be "sticky" or fixed to the top of the viewport.
I've seen a few different approaches to this, but none of them seem to work for multiple headers.
$('.content').scroll(function(){
console.log('scrolling')
$('.itemheader').each(function(){
var top = $(this).offset().top;
console.log(top);
if(top<25){
$(this).addClass('stick');
}else{
$(this).removeClass('stick');
}
})
});
I think there might be a conflict since each header has the same class name, and no unique identifier, so my above attempt isn't working out right.
http://jqueryfordesigners.com/iphone-like-sliding-headers/
This was exactly what I was looking for:
http://jqueryfordesigners.com/demo/header-slide.html
$(document).ready(function () {
// 1. grab a bunch of variables
var $container = $('#box');
var $headers = $container.find('h2');
var zIndex = 2;
var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
var $fakeHeader = $headers.filter(':first').clone();
// 2. absolute position on the h2, and fix the z-index so they increase
$headers.each(function () {
// set position absolute, etc
var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();
zIndex += 2;
$header.css({
position: 'absolute',
width: $header.width(),
zIndex: zIndex
});
// create the white space
var $spacer = $header.after('<div />').next();
$spacer.css({
height: height,
width: width
});
});
// 3. bind a scroll event and change the text of the take heading
$container.scroll(function () {
$headers.each(function () {
var $header = $(this);
var top = $header.offset().top;
if (top < containerTop) {
$fakeHeader.text($header.text());
$fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
}
});
});
// 4. initialisation
$container.wrap('<div class="box" />');
$fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
$container.before($fakeHeader.text($headers.filter(':first').text()));
});
I have a website with different sections, each set to be the height of the browser window. In some cases, the content is taller than the browser window, and I use a function to check for this and set the height of the div to be the height of its content, using the function:
$('.container').each(function() {
var _this = $(this);
var this_ = this;
var windowH = $(window).height();
var textH = $('.text', this).height();
if(windowH < textH) {
$(this).css({'height': textH + 'px'});
}
else {
$(this).css({'height': windowH + 'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var textH = $('.text', this_).height();
if(windowH < textH) {
_this.css({'height': textH + 'px'});
}
else {
_this.css('height', windowH + 'px');
}
});
});
The issue I am having is that I want to dynamically hide and show content, and when the new content is taller than the current height of the div, I want the div to expand to contain it. I am using the function,
$('#container').on('click', 'p', function () {
$(this).height('300px');
var windowH = $(window).height();
$('#container').css({
'height': ($('#container .text').height() + 'px')
});
var textH = $('#container').height();
if (windowH < textH) {
$('#container').css({
'height': textH + 'px'
});
} else {
$('#container').css('height', windowH + 'px');
}
});
but with no success. I have created a fiddle, http://jsfiddle.net/wDRzY/
Using a nested div, limit the height of the outer div and let the inner div stay the height of the content. When you need the outer div to be the height of the content, you can set the outer div height equal to the inner div height.
Although, I'm not sure why you would need to do this at all. I would suggest reading up on CSS more and using that for display purposes like this.
I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.
This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// Set options
var height = 0;
var element_search = "#cat_product_list #cat_list";
var element_set = "#cat_product_list #cat_list";
// Search through the elements set and see which is the highest.
$(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
//debug_(height,1);
});
// Set the height for the element(s if more than one).
$(element_set).each(function () {
$(element_set).css("height", (height+40) + "px");
});
});
Any help is much appreciated :)
Try this for setting all of them to the max height:
$(document).ready(function() {
var maxHeight = 0;
$("#cat_product_list #cat_list").each(function() {
if ($(this).outerHeight() > maxHeight) {
maxHeight = $(this).outerHeight();
}
}).height(maxHeight);
});
Update 22/09/16: You can also achieve the same thing without any Javascript, using CSS Flexbox. Setting the container element to have display: flex will automatically set the heights of the elements to be the same (following the highest one).
I've sorted this now,
Check out my Fiddle:
http://jsfiddle.net/rhope/zCdnV/
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// If you windows width is less than this then do the following
var windowWidth = $(window).width();
if (windowWidth < 2000) {
var i = 0,
quotes = $("div#cat_product_list").children(),
group;
while ((group = quotes.slice(i, i += 2)).length) {
group.wrapAll('<div class="productWrap"></div>');
}
}
// Find the width of the window
var windowwidth = $(window).width();
//debug_(windowwidth);
// Set options
var height = 0;
var element_wrap = ".productWrap";
var element_search = ".cat_list";
// Search through the elements set and see which is the highest.
$(element_wrap).each(function () {
$(this).find(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
});
//alert("Block Height: " +height);
// Set the height for the element wrap.
$(this).css("height", (height) + "px");
// Unset height
height = 0;
});
});
Just to add another suggestion. Here is a jQuery plugin I wrote that accepts one parameter. You can call it like this:
$('.elementsToMatch').matchDimensions("height");
You can match the height, width or if no parameter is entered, both dimensions.
$(function() {
$(".matchMyHeight").matchDimensions("height");
});
(function($) {
$.fn.matchDimensions = function(dimension) {
var itemsToMatch = $(this),
maxHeight = 0,
maxWidth = 0;
if (itemsToMatch.length > 0) {
switch (dimension) {
case "height":
itemsToMatch.css("height", "auto").each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
}).height(maxHeight);
break;
case "width":
itemsToMatch.css("width", "auto").each(function() {
maxWidth = Math.max(maxWidth, $(this).width());
}).width(maxWidth);
break;
default:
itemsToMatch.each(function() {
var thisItem = $(this);
maxHeight = Math.max(maxHeight, thisItem.height());
maxWidth = Math.max(maxWidth, thisItem.width());
});
itemsToMatch
.css({
"width": "auto",
"height": "auto"
})
.height(maxHeight)
.width(maxWidth);
break;
}
}
return itemsToMatch;
};
})(jQuery);
.matchMyHeight {background: #eee; float: left; width: 30%; margin-left: 1%; padding: 1%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="matchMyHeight">
Div 1
</div>
<div class="matchMyHeight">
Div 2
</div>
<div class="matchMyHeight">
Div 6<br> Div 6<br> Div 6<br> Div 6
</div>
var highHeight = "0";
$(".item").each(function(){
var thHeight = $(this).height();
if(highHeight < thHeight ){
highHeight = thHeight;
}
});
console.log(highHeight)
I have a diva and its height is auto calculated using jquery using
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
})
$(window).resize();
});
I have another div with id content2 and I want to set the value stored in the variable var height as its margin-top. How can I do this??
Thanks in advance...:)
blasteralfred
Use the .css() method.
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
$('#content2').css('marginTop', height); // <-- set here
});
$(window).resize();
});
$('#content2').css('margin-top',height);
//Calculate the height of the offset needed.
var height = $('.navbar-fixed-top').height() + $('.navbar-static-top').height() + 70;
//Then on click on the navbar tab change the offset of the div according, to the top of the window
$('#r_overview').click(function () {
$(window).scrollTop(($('#hackathon_overview').offset().top)-height);
});
$('#r_rules').click(function () {
$(window).scrollTop(($('.rules_row').offset().top)-height);
});
Hope this helps