I want to have my elements resize their margins equally so that they fill the page. I tried turning the page width into a value using jquery but that didn't work.
var margen = $(window).width()
$(document).ready(function () {
$('#FixedMenu *').animate({
'margin-left': 'margen/6'
});
});
http://jsfiddle.net/clarinetking/2PGZS/40/
I make little update to your jsFiddle, you can see it here:
jsFiddle
What i change is this:
1.
You found width of screen:
var screenWidth = $(window).width();
2.
You found total width of child elements of your fixed menu
var widthOfChilds = 0;
$('#FixedMenu > *').each(function() {
widthOfChilds += $(this).outerWidth( true );
});
3.
You take off total width of child elements from screen size and you will get "free"width around child elements.
There are six of them, but you need space after last one from right, so you divide "free"width by number of childs + 1
var newmargin = (screenWidth - widthOfChilds)/7;
$('#FixedMenu *').animate({
'margin-left': newmargin
});
I hope it helped! :)
Related
It is hard to explain… so I opened a Fiddle:
http://jsfiddle.net/qga046f3/
Goal: My goal is to get three divs of the same height. So I detect all the heights and choose the biggest one and apply this height to the other div-containers.
If the user resizes the browser-window the heights of the divs should be re-adjust. But jQuery gives me always the same height from first time. Why?
This is my jQuery code:
var adjustheights = function(){
heights = [];
$('.element').each(function(i){
heights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(Math, heights);
$('.element').css('height', maxHeight);
$('.maxheight').html(maxHeight);
}
adjustheights();
$(window).resize(function(){
adjustheights();
});
You need to reset (remove) the height of each element before adding the new one. jQuery adds an inline style when you set a height via CSS, so you need to remove it and add it again with the new value: (http://jsfiddle.net/qga046f3/4/)
var adjustheights = function(){
heights = [];
$('.element').each(function(i){
// Reset height first
$(this).removeAttr('style');
heights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(Math, heights);
$('.element').css('height', maxHeight);
$('.maxheight').html(maxHeight);
console.log(heights);
}
adjustheights();
$(window).resize(function(){
adjustheights();
});
Sorry, I'm a jquery/js apprentice. I have a jquery sticky nav setup with skrollr set to "stick" at a top offset of 590px. This seemed okay but I came to find I need that offset to be unique on some pages and instead of having to manually apply the unique offset I wanted to know if I can bind the offset value to a specific DIVs height? This would help make things easier to manage in the future.
Here is my codez:
$(document).ready(function() {
var stickyNavTop = $('#navmenu').offset().top+590;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navmenu').addClass('sticky');
} else {
$('#navmenu').removeClass('sticky');
}};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
The DIV in question with the height value I need to bind it to has a class of .custom-hero-background
It has a global height applied of 600px but on some pages I override this with unique heights.
Just add this in your script, outside of all the other functions, except for $(document).ready(function(
var theHeight = $('.custom-hero-background').height();
and then instead of having a fixed +590 for the offeset, just do + theHeight. If you need it to be 10 pixels less than theHeight, just do theHeight - 10
var stickyNavTop = $('#navmenu').offset().top+theHeight;
I'm using the media thumbnails that twitter bootstrap v2.3 has in their CSS library. You can see what I'm working on here.
Here is the jQuery I'm using:
<script>
$(window).load(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
$(window).resize(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
</script>
Basically my goal was since each thumbnail had different heights and I wanted them to all be equal heights, this script gives them all the same min-height in CSS on load, and everytime the screen is resized based on whichever thumbnail has the greatest height.
I got all that to work, but now the problem I can't figure out is when you drag the screen to smaller/bigger sizes and the min-height becomes very large, I have no code to decrease the min-height so they thumbnail divs look way too big. Does anyone have any code suggestions for me so the divs will all have equal height, but never get too big?
And if you set the height css property rather than min-height, the solution doesn't work for my original goal because the text paragraphs end up extending outside the divs.
On window resize you can set the min-height of the divs again, like this:-
$( window ).resize(function() {
if($( window ).height() < 300){
$( "div" ).css({min-height: 300px});
} else {
$( "div" ).css({min-height: 600px});
}
});
So apparently this is only happening to me - and I can't think why but if it works, I'm happy :)
I have a full screen slideshow and I have created a function that will vertically center any images that are too large.
function fixImages(){
maxheight = $('.index-slide-container').height();
$('.index-slide-container img').each( function(index, ele){
if (ele.height > maxheight){
offset = ( maxheight - ele.height ) / 2;
$(ele).css('top', offset + 'px');
}
});
}
fixImages();
However, ele.height returns the height of the visible part of the image (the height of it's container, as it has overflow:hidden, even though when I console.log(ele) and expand the element, 'height' is clearly the correct value.
I have also tried $(ele).height(), $(ele).css('height'), $(ele).outerHeight() and ele.clientHeight; all of which return the same.
Thanks
I made some tests, and $('img').height(); is giving me the right height of the picture.
If you wish to center the picture vertically why don't you use the absolute positioning with css like this for example :
.index-slide-container img {
position:absolute;
top:50%;
}
And than, you could set the negative margin programmatically with jQuery :
$('.index-slide-container img').each( function(i, e){
var height = $(e).height() / 2;
$(e).css({'margin-top':'-'+height});
});
I have tried everything, but without javascript I cannot achieve the bad layout my designer gave to me!!
As you can see I have the div #backgr-box that has to be absolute positioned with z-index to be properly behind the #contenuto (which holds the page content!!)
Now to solve the extensibilty trouble of #backgr-box I have the below code that works if the content of #contenuto is longer than the sidebar #barra-laterale , but it is not ok in opposite case, see page: http://demo.liquidfactory.it/secondopolo/per-informarti
So how can I tell javascript to apply that calculation only over a minimum height of div sidebar #barra-laterale ??
Need help.. please!
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight = $("#contenuto").height() - 380;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
The problem is likely with this line:
tallest = thisHeight = $("#contenuto").height() - 380;
Currently it is setting both the variables tallest and thisHeight to the height of the content region minus 380 pixels. Change it to:
tallest = thisHeight;
And it will resize all the columns to the height of the tallest one.
Edit: It looks like your right-hand column actually consists of multiple columns with a class of .barra-laterale in this case you may want to take another tack altogether:
// calculate the total height of the content are and sidebar
var contentHeight = $("#contenuto").height();
var sidebarHeight = 0;
$(".barra-laterale").each(function() { sidebarHeight += $(this).height(); })
if (sidebarHeight > contentHeight) {
$("#contenuto").height(sidebarHeight);
} else {
// extend the last sidebar column to cover the difference between the
// height of the content and the sum of the sidebar heights
var lastSideBarHeight = $(".barra-laterale").last().height();
var heightDifference = contentHeight - sidebarHeight;
$(".barra-laterale").last().height(lastSideBarHeight + heightDifference)
}