i have this piece of code.
First i'm setting some heights - the code works on load and on resize.
However, setting heights based on the highest item it doesn't work on resize, but only on load. Can you give me an advice?
$(window).resize(function () {
// speakers - height equal to width
var imgwidth = $('.speakers-section-items-item-image').width();
$('.speakers-section-items-item-image').css({'height': imgwidth + 'px'});
var height = $('.executive-section-items-item-img').height();
$('.executive-section-items-item-list').css({'line-height': height + 'px'});
var heightTeam = $('.team-section-items-item-img').height();
$('.team-section-items-item-meta-last').css({'line-height': heightTeam + 'px'});
// set heights based on the highest item
var maxHeightTeam = -1;
$('.team-section-items-item').each(function () {
maxHeightTeam = maxHeightTeam > $(this).height() ? maxHeightTeam : $(this).height();
});
$('.team-section-items-item').each(function () {
$(this).height(maxHeightTeam);
});
var maxHeightExecutive = -1;
$('.executive-section-items-item').each(function () {
maxHeightExecutive = maxHeightExecutive > $(this).height() ? maxHeightExecutive : $(this).height();
});
$('.executive-section-items-item').each(function () {
$(this).height(maxHeightExecutive);
});
var maxHeightSpeakers = -1;
$('.speakers-section-items-item').each(function () {
maxHeightSpeakers = maxHeightSpeakers > $(this).height() ? maxHeightSpeakers : $(this).height();
});
$('.speakers-section-items-item').each(function () {
$(this).height(maxHeightSpeakers);
});
}).resize();
Related
I have 4 sub-banners with display: block; width: 100%; that each have a div with text inside. These divs hangs down outside the parent element using transform: translateY(238px).
Each div that holds the text is of varying height so I was trying to write a function to check each text div's height and apply the margin to the bottom of that specific parent element accordingly.
What I got so far is this, but I can't figure out how to get the variable respectiveMargin passed into my second each function so that it matches up with the right parent element. Right now it just applies the same margin on all sub-banners. Thanks for any and all help!
const resize = () => {
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
});
$('.sub-banner').each(function () {
$(this).css("margin-bottom", responiveMargin);
});
}
};
$(window).on('resize', resize);
Seems the main problem is that you're trying to use two .eaches when you only need one:
const resize = () => {
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
$(this).closest('.sub-banner').css("margin-bottom", responiveMargin);
});
}
};
$(window).on('resize', resize);
So reference the index when you loop over the one set.
var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
banners.eq(ind).css("margin-bottom", responiveMargin);
});
If it happens to be a child/parent element, than you can just select it.
var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
//If a child
$(this).find(".sub-banner").css("margin-bottom", responiveMargin);
//or a parent
$(this).parent().css("margin-bottom", responiveMargin);
});
Maybe Something like this?
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var subBanner = $(this).closest('.sub-banner').attr('class');
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
$(subBanner).css("margin-bottom", responiveMargin);
});
}
This is a continuation from my previous question here.
I'm using bootstrap and it doesn't arrange the div such that they have the same height.
I have solved the problem of resizing the div to same height for the children div.
But it doesn't resize in realtime i.e. when I'm resizing the window, "maxHeight" still remains the same though the function still runs when the window's resized.
Below is the function and code.
function resized(){
var maxHeight = -1;
if (size == "xs"){
$('.col-xs-12').each(function(){
$(this).height("auto");
maxHeight = 0;
});
}
if (size == "sm"){
$('.col-sm-6').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.col-sm-6').each(function() {
$(this).height(maxHeight);
});
}
if (size == "md"){
$('.col-md-4').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.col-md-4').each(function() {
$(this).height(maxHeight);
});
}
console.log("maxHeight : " + maxHeight);
};
$().ready(function(){
$(document).ready(resized)
$(window).resize(resized);
})
Thanks in advance!
Currently I have a script which starts a progress bar the moment a user starts scrolling.
Is it possible to change this to when the user gets to 340px from the top of the page?
Here is a demo of my site: http://pixsols.com/test/wordpress/reading-progress/
Here is my current code:
(function ( $ ) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion / elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%' );
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}( jQuery ));
My guess would be to manipulate this:
windowOffset = docOffset - docScroll,
Probably you should add or subtract 320px from windowOffset. So for example"
windowOffset = docOffset - docScroll + 320,
this code works well with scrolling down but im trying to make works as well to fade out the id when scroll up.
<script>
tiles = $("#widgeted-title1").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
</script>
If your code works (for the fade-in) than all you need is:
var tiles = $("#widgeted-title1").fadeTo(0, 0);
$(window).on("scroll resize", function() { // do it also on resize!
var a = tiles.offset().top + tiles.height();
var b = $(this).scrollTop() + $(this).height();
tiles.stop().fadeTo(500, a<b ? 1 : 0);
});
This question already has answers here:
JqueryUI Draggable - Auto resize parent container
(2 answers)
Closed 7 years ago.
I am sorry my English is not that great. I would like my container element to resize to always contain its child elements.
Visit jsfiddle.net/datakolay/LakYy/
$(document).ready(function() {
var
$document = $(document),
$parent = $("#parent"),
$container = $(".container", $parent),
offset = $container.offset(),
scrollbarSafety = 15;
$container.height($document.height() - offset.top - scrollbarSafety);
$("#eleman,#eleman2")
.draggable(
{
containment: $container,
drag:
function(event, ui)
{
var
$draggee = $(this),
draggeePosition = $draggee.position(),
shouldHeight = draggeePosition.top + $draggee.height() + 15;
if($parent.height() < shouldHeight)
{
$parent.height(shouldHeight);
}
if($parent.height() > shouldHeight)
{
$parent.height(shouldHeight);
}
}
}
);
});
You can use the following to figure out the shouldHeight - essentially:
use a selector to get all the draggables
Get its height and compare it to what you currently have
Set the height.
Here's the meat of the how to:
var shouldHeight = 0;
$(".ui-draggable").each(function () {
var draggeePosition = $(this).position();
if (shouldHeight < draggeePosition.top + $(this).height() + 15) {
shouldHeight = draggeePosition.top + $(this).height() + 15;
}
});
fiddle: http://jsfiddle.net/LakYy/3/
http://jsfiddle.net/LakYy/5/
$(document).ready(function() {
var
$document = $(document),
$parent = $("#parent"),
$container = $(".container", $parent),
offset = $container.offset(),
scrollbarSafety = 15;
$container.height($document.height() - offset.top - scrollbarSafety);
$("#eleman,#eleman2")
.draggable(
{
containment: $container,
drag:
function(event, ui)
{
var shouldHeight = getdraggablemaxheight();
if($parent.height() < shouldHeight)
{
$parent.height(shouldHeight);
}
if($parent.height() > shouldHeight)
{
$parent.height(shouldHeight);
}
}
}
);
});
function getdraggablemaxheight() {
var $parent = $("#parent"),
$container = $(".container", $parent),
maxheight = 0,
currentheight = 0,
currentposition;
$container.children().each(function(index, element) {
currentposition = $(element).position();
currentheight = currentposition.top + + $(element).height() + 15;
if(currentheight > maxheight)
maxheight = currentheight;
});
return maxheight;
Based on the solution by #caspian you may find this variation scales better with many draggables. Same thing really, but only finds the dom positions once per item:
$(".ui-draggable").each(function () {
var draggeeHeight = $(this).position().top + $(this).height() + 15;
if (shouldHeight < draggeeHeight) {
shouldHeight = draggeeHeight;
};
});
if ($parent.height() != shouldHeight) {
$parent.height(shouldHeight);
}
I needed this as well for a project, here is the fiddle
http://jsfiddle.net/genkilabs/WCw8E/2/
To #coding_idiot, what you are asking about will w the default behavior if you use overflow-x: scroll;