The following code does what it should perfectly, however I need to add 30% more height to the containing element .boxy on top of the added variable heights.
I've tried searching for ways to add a percentage to the equation, but so far I've just found vague answers or non-applicable methodologies.
$(".exPand a").click(function (event) {
event.preventDefault();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
$(this).closest('.boxy').animate({height: postHeight+excHeight}, 1000);
});
Live output:
<div class="boxy">
<div class="boxGrad"></div>
<div class="postmetadata"></div>
<div class="articleTitle"></div>
<div class="rightCtrls"></div>
<div class="ajaxBoxLoadSource"></div>
<div class="articleImageThumb"></div>
<div class="initialPostLoad"></div>
</div>
Just multiply by 1.3
$(this).closest('.boxy').animate({height: (postHeight * 1.3)+excHeight}, 1000);
Move the * 1.3 to the appropriate place depending on which height you want 30% of.
Related
I have parallax attached to same div which I clone but after I clone parallax stops working for cloned elements.
Check my example : https://codepen.io/anon/pen/rYOrEO
My Code:
Html :
<div class="container">
Clone
</div>
<section class="content">
<div class="jumbotron text-center bg-faded my-5" style="background: url('http://lorempixel.com/1200/600/abstract/1') no-repeat center;" data-paroller-factor="0.5">
<h1 class="heading-1 py-5 text-white">Hello Parallax!</h1>
</div>
</section>
JavaScript:
$(window).paroller();
$(function(){
$('.clone').on('click', function() {
alert('hi');
$(".jumbotron").clone().appendTo(".content");
});
});
Example : https://codepen.io/anon/pen/rYOrEO
Thanx in advance
I had a similar problem before and it can be done. It was a problem with CSS taking effect when page laods and not when you clone.
If I remembered right to fix it you need to create an object of the cloned div similar to this example:
// will be different for you!! but might set you on the right direction
var divToClone = document.getElementsByID("#cloneMe");
var clone = divToClone.cloneNode(true);
var element = clone.getElementsByTagName("h1");
Now with my var Element I can add attributes and style again like this
//Nothing to do with parallax here but look at you CSS and fill it in again like below
element.innerHTML = "Whatever you want or need";
element.style['background']= "url(/iwa/images/16x16/randomExample.png) no-repeat, fixed";
element.style['background-position']='center right';
element.style['border']='none';
Hope that helps!
I am using Bootstrap in a current Web project but I don't know how to dynamically set the same height of column elements.
I already know the .row-eq-height class but using that I loose the responsiveness of Bootstrap elements. I would like the #selection column to be at least as high as #map-container (or higher because it has a border and I don't want it to cut the content).
I already wrote few lines of jQuery:
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('height',map_height);
}
<div class="row" id="selection-wrapper">
<div class="col-lg-7 col-xs-12" id="map-container">
<!-- Zone for map display -->
<div id="map"></div>
</div>
<div class="col-lg-5 col-xs-12">
<div class="text-container" id="selection">
// Content
</div>
</div>
</div>
Those lines work but I don't know how and when I should execute them as I would like to keep the equal height property all the time, even when the width of the container changes (which modifies the height of the #map-container).
function equal_height() {
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('min-height',map_height);
}
}
$(document).ready(function(){
equal_height();
});
$(window).resize(function(){
equal_height();
});
Trying to dynamically resize the div (col with pad) with JavaScript so that it is vertically middle of the parent div (row).
The text blocks vary in size as do the images and there are many of these divs within the page.
I'm quite close to achieving this with the provided code, but the loop seems to be repeating more times than it should and sets the height incorrectly on the last pass, almost like it is halving the space over and over again.
Is there a way to make the JavaScript only run once?
<div class="row">
<div class="col pad">
<p>Text here</p>
</div>
<div class="col">
<img src="image.jpg">
</div>
</div>
$(window).load(function(){
$('.row').each(function() {
var parentDiv = $(this).height();
$('.pad').each(function() {
var childDiv = $(this).height();
var space = parentDiv - childDiv;
var half = space/2;
$(this).css('paddingTop', half + 'px');
alert(half);
});
});
});
I'm unable to use css to achieve this as col are floated.
I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.
I have this wrapped in a setInterval function. Is this possible?
So far, I’ve got:
var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
// …
}, 2000);
"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).
This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.
sketch: http://jsfiddle.net/fl00r/HSGF3/4/
<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>
<script>
$(function(){
fadeByEachSlice(".hidden",6)
})
function fadeByEachSlice(object, step){
var i = 0;
objects = $(object)
function nextSlice(){
if(i%step == 0){
if( i <= objects.length ){
slice = objects.slice(i, step+i);
fadeSlice(slice)
}
}
}
function fadeSlice(slice){
$(slice).fadeIn().delay(1000).fadeOut("fast", function(){
i+=1; nextSlice();
})
}
nextSlice()
}
</script>
you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.
I'm using the cycle plugin on some divs, like this:
<div class="sections">
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
</div>
all the .section divs have variable height, based on their contents.
How can I make cycle not to resize the container div (sections) to the largest child height? Instead I want the container to resize on every animation to the current child height.
ok, I managed to do it by hooking a function on 'after' event:
function onAfter(curr, next, opts, fwd) {
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
found the info here:
http://forum.jquery.com/topic/jquery-cycle-auto-height
set containerResize option to 0 and try. More option details here.
I've done it a little bit different:
$('.cycle-list').cycle({
containerResize: 0,
before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
var container = $(this).parent();
container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
$(this).parent().css('height', $(this).height());
}
});
My items had different height as well. In the before, it makes sure the container is big enough for the bigger of the 2 slides. In the after, it just resizes to the next slide.
This way it never over-flows because your container is too small.
note: this is for cycle 1