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
Related
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.
On this site:
http://houston.aiga.org/
Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.
I've tried setting this up:
http://jsfiddle.net/topiman/xS7vn/
$(window).resize(function() {
$('#item').css("padding-left",$(window).width()/2);
});
The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.
The line in the working slider example is:
$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);
where extraSpace is the $(window).width()
Any help gratefully received - thanks in advance
It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/
This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?
$(window).resize(function() {
var ItemWidth = $(".wrapper").width();
$('#item').width( ItemWidth );
var WindowWidth = $(window).width();
// cannot resize because window is smaller than the wrapper
if( ItemWidth > WindowWidth ) {
var PadWidth = 0;
} else {
var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
}
console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );
$('#item').css("margin-left",PadWidth + "px");
});
Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.
I've been having some trouble making a div that is 1920px in width auto-center on the website.
Right now i've been using this jQuery code to auto center the div when the page gets opened:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
var extra= 1920 - $(window).width();
var extraleftside= extra/2;
$("div#scroller").css("left", "-" + extraleftside + "px");
});
</script>
But that code only adjusts when the website is refreshed, is it possible to make it do it in real time?
If you want to see the effect i want, it is the same as the scrolling background in this site: http://www.apps.no
LeGEC answered this quite nice, this code did the trick:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
var extra= 1920 - $(window).width();
var extraleftside= extra/2;
$("div#scroller").css("left", "-" + extraleftside + "px");
}
);
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var extra= 1920 - $(window).width();
var extraleftside= extra/2;
$("div#scroller").css("left", "-" + extraleftside + "px");
}
</script>
Do you mean recalculating it on resize ?
function doResize(){
var extra= 1920 - $(window).width();
var extraleftside= extra/2;
$("div#scroller").css("left", "-" + extraleftside + "px");
}
$(window).load(function(){
// maybe the slider should also be updated on resize...
$('#slider').nivoSlider();
doResize();
});
$(function(){
$(window).resize(doResize);
});
Using jQuery, how do I determine the height/distance between the very top of the browser window to the bottom of a div, such as a header. I'm using the following code:
$(window).resize(function() {
$totalHeight = $(window).height();
$headerHeight = $('header').height();
$('#portfolio-info').css('height',($totalHeight - $headerHeight - 105) + 'px');
});
And I want to make sure that $headerHeight isn't always the same value, as you scroll away from the header it should decrease all the way down to zero.
Thanks!
This should work out for you.
$(window).resize(function() {
var top = $(this).scrollTop(),
bottomDiv = $('div').offset().top + $('div')[0].offsetHeight,
distance = Math.max(0, (top - bottomDiv) * -1);
});
http://jsfiddle.net/Y8MUF/
It can expand the div when i click on it. How do i make it look nicer by adding a "See More" link then hide it when the div exapands and adjust the row height relative to the See More link?
$(document).ready(function(){
var rowsshown = 2;
var rowheight = 1.2; // line height in 'em'
var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
$('.info')
.css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' })
.click(function(){
if ( $(this).css('height') == 'auto') {
$(this).css('height', ht + 'em');
} else {
$(this).css('height','auto');
}
});
})
try :
http://jsfiddle.net/Y8MUF/11/
You could look at the jquery slideup and slidedown
http://api.jquery.com/slideUp/
For a better effect