Scrollmagic pin - javascript

I have a bootstrap row, that contains a table__tabs and a table__info, and looks like this:
<div class="row">
<div class="table__tabs col-md-2">...</div>
<div class="table__info col-md-9 col-md-offset-1">...</div>
</div>
What I wanted to do is to pin it while I scroll for the duration that equal .table__info height, which is dynamic.
How am I able to 'unpin' the div when the bottom of the screen touches the end of the .table__info?

Related

Left align element with centered and variable width element in top row

I would like to find a way to left align <p> with centered <img> in the top.
As images are centered and my page contains different images with different widths, it seems to be a bit challenging.
Here is my html structure:
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto">
<div class="d-flex flex-row justify-content-center">
<img class="img-fluid d-flex flex-wrap align-items-center" id="image-id">
</div>
</div>
<div class="col-md-8">
SOME CONTENT
</div>
</div>
<div class="collapse collapse-information">
<div class="row row-collapse m-0">
<!--What I want to be left aligned with img tag-->
</div>
</div>
</div>
</div>
A way to do it would be to get the distance between image's div and border of centered image and to report this measure as a left-margin on the element I want to be aligned.
To solve it, I tried to use margin measurments based on window width but it as not working.
While working to have a clean question, I went through https://developer.mozilla.org/en/docs/Web/API/HTMLElement/offsetLeft.
The interresting part is that, javascript allows a dynamic measurement I can also dynamically attribute to other elements.
// get left offset
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
// assing as margin to the following element
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
Last interesting point, this code should wait until the end of page loading (otherwise offet will be equal to 0), so I called it in a structure like:
window.addEventListener("load", function (event) {
setTimeout(() => {
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
}, 0);
});

Bootstrap Minimum Height for a Div

I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}

Make div top two divs fixed after some scroll and reset back when scrolled to top again?

Hi i am trying to make a div remain fixed after some scroll in parent div?
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="fw ofndr-box">
<div class="ofndr-box-half add-here">
Header 1
</div>
<div class="ofndr-box-half2 add-here">
+New
</div>
<div class="fw ofndr-box-in">
</div>
</div>
</div>
here is my working fiddle i want to fix header and +new button after scroll of blue colored div.
https://jsfiddle.net/pavansn/tvg3d709/1/
As your scroll is on ofndr-box instead of window so in Js you can try
var scroll = $('.ofndr-box').scrollTop();
and change :
$(".add-here").addClass(".fixed"); to $(".add-here").addClass("fixed");

Swapping the Content of Columns with jQuery on Small Screens

I have an alternating two-column layout made with Twitter Bootstrap 3.
First row has an image on the left and text on the right. Second row has text on the left and an image on the right. And so on.
What I would like to do is on smaller screens (less than 768px) where it turns into a single-column layout have the rows where the image is on the right swap the content of the two columns so the image is displayed on top.
The rows with the image on the right have the class of even.
Here is the html of an even row:
<div class="row">
<div class="col-sm-6 left evenleft">
text
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 right evenright">
image
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
Here is the jQuery I am trying to use:
function swap() {
$('.even').each(function () {
var left, right;
left = $(this).find('.evenleft').html();
right = $(this).find('.evenright').html();
if ($(window).width() < 768) {
$(this).find('.evenleft').html(right);
$(this).find('.evenright').html(left);
} else {
$(this).find('.evenleft').html(left);
$(this).find('.evenright').html(right);
}
});
}
$(function () {
swap();
});
$(window).resize(function () {
swap();
});
It works perfectly when you start the page already re-sized. But when re-size the browser it doesn't work.
I am kind of lost here.
You could use .col-sm-pull-6 and .col-sm-push-6:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
image
</div> <!-- end col-sm-6 -->
<div class="col-sm-6 col-sm-pull-6">
text
</div> <!-- end col-sm-6 -->
</div> <!-- end row -->
http://plnkr.co/edit/0f1Id9VYZlRel66OeKni?p=preview
You could place the image first and float it right. I'd imagine you wouldn't need JS at all fot this.

How to make thumbnails slide show only the thumbnails pic

I need to make some simple JavaScript gallery with Thumbnail slider.
I made the slider and when I click on the left or the right arrow the margin-right change and add or remove 570px. But I want to make it better, and when the gallery loads, cancel the Scroll right option because there's actually pictures, the same also for last images.
HTML Structure look like this:
<div class="tumbNavigation">
<div class="right_nav"></div>
<div class="thumbnails">
<div class="thumbnailsWrapper">
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
</div>
</div>
<div class="left_nav"></div>
</div>
JavaScript code look like this:
var pos = 0;
var width = 570;
$('.left_nav').click(function(){
pos = pos - width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});
$('.right_nav').click(function(){
pos = pos + width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});
You're on the right track, but there's no need to reinvent the wheel here. Carousels such as this are one of the most commonly developed widgets, so much so that you're bound to find something that's better, more stable, and has more features than anything you could quickly build. Here's a list of 55 carousel javascript plugins: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html . I'm sure that one of them will work great for you, or it will be close enough that you can modify it to be perfect.

Categories