I am calulating the childrens height, to add the scrollbar to the container. but it's not come as perfect. any one help me to calculate the childrens height perfectly?
here is my js :
var p= "</p>Some testing text</p>";
var getAllHeight = function (content) {
var allHeight = 0;
$('#container').children().not('.content').each(function(){
allHeight += $(this).outerHeight(true);
});
return allHeight;
}
var addHeight = function () {
var content = $('.content');
var allHeight = getAllHeight(content);
var rest = $('#container').innerHeight() - allHeight;
if(content.outerHeight() > rest) {
content.css('height', (content.outerHeight() - allHeight ));
}
console.log(allHeight, content.height(), content.outerHeight(),content.innerHeight())
};
$('button').click(function(){
$('.content').append(p);
addHeight();
});
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
<div class="button"><button>Add</button></div>
</div>
JSfiddle
This is CSS issue due to collapsing margins (read "Parent and first/last child" case) on div>h2 structure. Since div containers don't have any padding, margin or border, their margins collapse to accommodate inner margin. Simple fix is to set some padding on them or border or set h2 to inline-block.
Another issue is that when there is not enough space you should set content height to rest.
if (content.outerHeight() > rest) {
content.css('height', rest);
}
Demo: http://jsfiddle.net/doesfmnm/5/
Related
I want to change some css properties when scrolling.
This worked with jQuery and I can't make it work using JavaScript.
This is the function that reads and set CSS properties:
function parallel_height_js(){
let scroll_top = window.scrollY;
console.log('scroll top = ',scroll_top)
let header_height = document.getElementsByClassName("sample-header-section")[0].clientHeight;
console.log('Header height = ',header_height)
document.getElementsByClassName("text-section")[0].style.marginTop = header_height;
console.log('text margin top = ',document.getElementsByClassName("text-section")[0].style.marginTop)
document.getElementsByClassName("sample-header")[0].style.height = header_height - scroll_top;
console.log('header height = ',document.getElementsByClassName("sample-header")[0].style.height)
}
Afterwards, I execute the following to execute the function at scrolling or resizing:
parallel_height_js();
window.onscroll = parallel_height_js;
window.onresize = parallel_height_js;
In the browser console I get this from console.log:
scroll top = 8
Header height = 517
text margin top =
header height =
I checked that I am accessing the right elements when trying to set the CSS value, but this CSS value is not changing.
The error was because I didn't add 'px' string when setting new CSS values.
So, the js code would be:
import './style.css'
function parallel_height_js(){
let scroll_top = window.scrollY;
let header_height = document.getElementsByClassName("sample-header-section")[0].clientHeight;
document.getElementsByClassName("text-section")[0].style.marginTop = header_height+'px';
document.getElementsByClassName("sample-header")[0].style.height = (header_height - scroll_top)+'px';
}
parallel_height_js();
window.onscroll = parallel_height_js;
window.onresize = parallel_height_js;
HTML:
<header>
<div class="sample-header">
<div class="...">
<input type="checkbox" id="menu" />
<label for="menu"></label>
<div class="menu-content">
<ul>
<li>Contact </li>
<li>About Us </li>
</ul>
</div>
</div>
<div class="sample-header-section">
<h1>...</h1>
<h2>...</h2>
</div>
</div>
</header>
Forgive me, I am fairly new to javascript. I am trying to remove a div's parent below 980px wide and then add it back in above 980px. I am using the following code that I have put together from looking at other jQuery.
jQuery(window).resize(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
} else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
});
I'm guessing you will realise I am experiencing a few issues!
The jQuery doesn't apply below 980px on page load, however when you start with a large screen size and shrink the width below 980px the jQuery works.
Once the jQuery has fired and the screen size goes above 980px, the div that has been removed does not get reapplied.
Please explain where I have gone wrong as I would like to learn.
Thanks for your time
UPDATE
The html before any jQuery is:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
With the following jQuery:
jQuery(window).load(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
}
else {
Tags.wrap( "<div></div>");
}
});
This now occurs above 980px on page load:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div>
<div class="span4"></div>
</div>
</div>
</section>
And when i refresh the page below 980px:
<section>
<div class="span4"></div>
</section>
The result below 980px is correct, however only runs when i refresh the screen. The result above 980px is not my intended result, i would like it to remain or return to:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
#1: Call the function once on page load, that way you don't need to resize to get it
#2:
else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
should be
else {
(Tags.wrap( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
I have a scenario where I want to find all elements with a certain class, and then I want to set the parent div's padding-bottom value as the sum of its current padding-bottom value + the height of the original div which matched the selector.
So say I have a structure like this:
<div class='A'>
<div class='B'>
<div class='C'>
.........
</div>
<div class='D'>
.........
</div>
</div>
<div class='B'>
<div class='C'>
.........
</div>
</div>
<div class='B'>
<div class='C'>
.........
</div>
</div>
<div class='B'>
<div class='D'>
.........
</div>
</div>
</div>
I want to find all class D objects, and then I want to set the padding bottom value of their container class B, to the height of the class D object in question, plus whatever padding-bottom value that class B object currently has ..
Note that all class D objects have different heights ..
Every class B objects can only have a max of 1 class D object
Every class B objects can only have a max of 1 class C object
What jQuery do I need to do the above ?
Try this:
$('.D').each(function(){
$(this).parent().css("paddingBottom", "+=" + $(this).height() +"px");
});
Demo.
$(function(){
$('div.D').each(function(index){
var dHeight = $(this).height();
var bPadding = $(this).parent().css('padding-bottom');
var newPadding = parseInt(dHeight) + parseInt(bPadding);
$(this).parent().css('padding-bottom', String(newPadding) + 'px');
});
});
This should the solution for the problem that you've described. But I think you've missed some details. (this code might be shortened to a one liner though)
$(function() { 'use strict';
$('.A > .D').each(function() {
var $D = $(this);
var $B = $D.closest('.B');
$B.css('padding-bottom',
$D.height() + parseInt($B.css('padding-bottom'))
);
});
});
In case you want to include the height of the .C elements too:
$(function() { 'use strict';
$('.A > .D, .A > .C').each(function() {
var $X = $(this);
var $B = $X.closest('.B');
$B.css('padding-bottom',
$X.height() + parseInt($B.css('padding-bottom'))
);
});
});
I have a little script that is creating a parallax effect. Therefore I created a data attribute with the speed velocity and a data-type to select the parallax elements. At the very same time, one of the elements fades out when scrolling down.
The script works fine, but unfortunately, when scrolling to the bottom of the site (and "overscroll" it), the site jitters like hell. It seems to be the part with the yPos and scrollTop method.
Do you have any ideas what the problem is?
Here's the markup:
<section class="slider">
<img src="images/hafen.jpg" class="slide" data-type="parallax" data-speed="3">
<div class="claim" data-type="parallax" data-speed="6">
<h1>SOME TEXT</h1>
</div>
<div class="arrow-down" data-type="parallax" data-speed="3">
<img src="images/arrow-down.png" alt="">
</div>
</section>
<section class="content" data-type="parallax" data-speed="1">
<div class="wrapper">
<img src="images/content.png" alt="">
</div>
<section>
That's my script:
$(window).scroll(function() {
var box;
$("[data-type=\"parallax\"]").each(function() {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($window.scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});
Seems like you are missing ( and ) around window here:
yPos = -($window.scrollTop() / $bgobj.data("speed"));
Should be:
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
And you <section> isn't closed at the very end. Should be:
...
</section>
Not sure what your expected result should look like with proper CSS, but this seems to be working with the above changes:
http://jsfiddle.net/4Zmh8/
$(function () {
$(window).scroll(function () {
var box;
$("[data-type=\"parallax\"]").each(function () {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});
});
I don't know what am I doing wrong.. but I have 3 columns where I want to apply equal heights
here is my html
<div id="wrapper">
<div class="LeftBG"></div>
<div id="MainBlock">THIS IS A TEST</div>
<div class="RightBG"></div>
<!-- END CONTENT BLOCK -->
</div>
and here is my function and just doesn't work....
var highestCol = Math.max(
$('.LeftBG').height(),
$('.RightBG').height());
$('#MainBlock').height(highestCol);
To see what I am doing click here
Change your code to this to set all three blocks to the same height:
var highestCol = Math.max(
$('.RightBG').height(),
$('.LeftBG').height());
$('#MainBlock, .RightBG, .LeftBG').height(highestCol);
See it here: http://jsfiddle.net/jfriend00/Rv4fr/
What you did fixes the middle column, now apply it to the other classes as well...
var highestCol = Math.max(
$('.RightBG').height(),
$('.LeftBG').height());
$('#MainBlock').height(highestCol);
$('.RightBG').height(highestCol);
$('.LeftBG').height(highestCol);