Third section not on screen - javascript

I have a problem with the code below. The window does not scroll to the third section. The code jumps from slide two to slide four.
In my console log the data is correct 600, 1200, 1800 and 2400.
I tried different things but the bug is still there.
<html>
<head>
<style>
body, html{margin:0;}
.slide{height: 600px;}
button{position:fixed; top:0; left:50%; margin-left:-32px;}
</style>
</head>
<body>
<div class="container">
<div class="slide onscreen" style="background-color:#FFC000;"></div>
<div class="slide" style="background-color:#FF4800;"></div>
<div class="slide" style="background-color:#FFC480;"></div>
<div class="slide" style="background-color:#AA4560;"></div>
<div class="slide" style="background-color:#000000;"></div>
</div>
<button onclick="next()">volgende</button>
<script>
var section = document.getElementsByClassName("onscreen");
function next() {
if (section[0].nextElementSibling) {
section[0].nextElementSibling.className = "slide onscreen";
section[0].className = "slide";
var newTop = section[0].offsetTop;
window.scrollBy(0, newTop);
console.log(newTop);
}
}
</script>
</body>
</html>

These slides are all siblings. So offsetTop is going to be incrementally greater on each slide. Slide 1, 600px, slide 2, 1200px, and so on. window.scrollBy scrolls to the windows current position + the amount given. So if you are at window.scrollY = 0, and pass 600, you'll be at window.scrollY = 600. When you pass 1200 on the next go round, you'll be at window.scrollY = 1800! So now it appears as if you've skipped over slide 3, because you scrolled 2x a slide's height.
Possible answer, if you don't want the challenge of figuring the rest out:
If you have a hardcoded height for your slides, you could try passing a hardcoded scrollBy value as well. Or if you want to make your code a bit more flexible, you could query each slider for its height and pass that value instead. Then you can adjust your slide's height in css-land without breaking your js logic.

Related

How to find the height of the individual slides of a carousel

I have a carousel in which there are three slides the markup is something like this below
<div id="corpsite-carousel">
<div class="slide">
<!-- slide 1 content -->
</div>
<div class="slide">
<!-- slide 2 content -->
</div>
<div class="slide">
<!-- slide 3 content -->
</div>
<div class="controls">
</div>
</div>
So there are three slides and each has a varying length of content(which includes text and images), after implementation, I see each slide to have its own height based on the content inside it which makes it a very bad user experience (as by changing the slides the sliding bullet controls change up and down). I am trying to set the height of the slides to the slide whose height is the highest.
I am trying using the following jquery code to find the height of each slide
$(document).ready(function(){
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(funiction(i){
var height = $(this).innerHeight();
console.log(height)
})
})
but the console shows me the height of the first slide which is correct but the rest 2 slides heights are not correct(i checked in the dom after sliding and checked the height of each slide) I think this is because the slide 2 and 3 are not available yet on the screen. what should be the approach or the best method to set the height of the slides.
Maybe a little sleight of hand - something like this?
$(document).ready(function(){
maxHeight = 0 ;
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(function(i){
maxHeight = Math.max( maxHeight, quickMeasure($(this)));
})
})
function quickMeasure(el) {
var previousCss = el.attr("style");
el.css({
position: 'absolute', // Optional if #myDiv is already absolute
visibility: 'hidden',
display: 'block'
});
theHeight = $(el).height();
el.attr("style", previousCss ? previousCss : "");
return theHeight
}

Javascript align vertical center many child divs within parent

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.

Dragging a div a fixed distance from bottom to top

I am creating a project where I want to be able to drag a div (a drawer) that is (mostly) positioned off the bottom of the screen a fixed distance on the Y axis. The distance I want to move is the height of the div (drawer - minus the drawer handle).
It was pretty easy to get this working from top to bottom, but reversing it is posing to be quite a challenge. I feel like it might just be a simple math error.
I have put together a fiddle to better illustrate the issues I'm having.
http://jsfiddle.net/q8DE6/2/
Here's my code:
HTML
<div id="panelWrapper">
<div id="panel" class="panel">
<p> The height of this drawer is dynamic, and will slide the appropriate amounted based on the height of the content. </p>
<p> Any type of content can be included in here. The body of the drawer and the drawer pull tab can also be styled as you see fit, just modify the css/styles.css file. </p>
<!--necessary div for slide tab, modify as needed, but don't delete -->
<div class="slide">
<a id="drawerSlide" href="#" class="drawer-slide">
<table id="sTab" class="slideTab">
<tr>
<td id="stText1"></td>
<td id="stImg">Pull here.</td>
<td id="stText2"></td>
</tr>
</table>
</a>
</div>
</div><!--/panel -->
</div><!--/panelWrapper -->
<div id="content">
<div id="header">
<div id="menuBar">
<h3>Header Bar Text.</h3>
</div>
</div>
<div id="container">
</div>
<div id="footer">
<p>Footer Area.</p>
</div>
</div><!--/content -->
Slide Function:
JS:
function drawerSlide(slideDir) {
switch (slideDir) {
case 'bottomToTop':
//drawer styling
$('.panel, .slide').addClass('botToTop');
$('.panel').addClass('panelTB');
$('.slide').addClass('slideBotToTop');
$('#sTab').addClass('slideTab');
$('.panel p').filter(":first").css('padding-top','50px');
//hide overflown Y axis content. Hopefully this won't cause any conflicts with your existing code/page.
$('body').css('overflow-y','hidden');
botStartPos = $(window).height() - 50;
offset = $('#panel').offset();
panelHeight = $('#panel').outerHeight();
topEndPos = botStartPos - panelHeight +50;
yPos = botStartPos;
// if you need a different drawer starting point, adjust the starting position here (50).
panelHeight = parseFloat(panelHeight) - 50;
console.log("botStartPos:" + botStartPos);
console.log("topEndPos:" + topEndPos);
console.log("yPos:" + yPos);
$('.panel').css('top', botStartPos);
$('#panel').draggable({
axis: "y",
containment: [0, botStartPos, 0, topEndPos] //0, botStartPos, 300, topEndPos
},
{
drag: function( event, ui ) {
if (yPos > botStartPos || yPos < topEndPos) {
return false;
}
else {
offset = $(this).offset();
yPos = offset.top;
console.log(yPos);
}
}
});
}
}
$(document).ready(function() {
drawerSlide("bottomToTop");
});
I'm thinking the issue might be with the way I'm using the offset.top command to move the drawer, but I'm stumped as to how to do it correctly.
Right now what is happening, is when you click/hold the handle, it "jumps" up the fixed distance, instead of being able to drag it. Also, you can't drag down to put the drawer away, but you can drag up once again and it "jumps" down the fixed distance. Not really what I'm after.
The desired result I'm looking for is one of a typical "drawer" behavior. When the user clicks and holds on the handle, they can "pull" the drawer up the fixed distance, and then "push" it back down the same fixed distance, so the handle never falls off screen.
My guess is it that it's a math problem with the containment function. I still don't fully understand it well, so the problem may lie within the coordinates I'm using?
Any advice would be most appreciated. :)

How to center scrollbar?

how is it possible to center a div's scrollbar?
This is what I have:
<div id="mydiv" style="width:1000px;overflow:auto;">
<img src="..." style="width:100%;height:250px;" />
</div>
$(window).on('resize', function () {
$('#mydiv').scrollLeft(
$( "#mydiv" ).width() - $( "#mydiv" ).width()/2
);
});
But this doesn't work. It is not exactly centering. Too bad I can't set percent 50%. The scrollLeft(() function requires an integer.
Thanks!
here is your solution i have checked it with every possible width which was less than the image width. Even measured both left and right side space of scroll bar with plastic ruler ..LOL. :) to check if both sides are equal
http://jsfiddle.net/HSJft/5/
var outer=document.getElementById('mydiv').offsetWidth
var inner=document.getElementById('im').offsetWidth;
console.log(inner);
$('#mydiv').scrollLeft((inner-outer)/2)
<div id="mydiv" style="overflow:auto; overflow-y:hidden;width:300px">
<img id="im" src="http://eofdreams.com/data_images/dreams/image/image-15.jpg" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Easy solution:
https://jsfiddle.net/HSJft/21/
Vertical Scroll:
$(scrollWrapper).scrollTop(($(content).height() - $(scrollWrapper).height())/2);
Horizontal Scroll:
$(scrollWrapper).scrollLeft(($(content).width() - $(scrollWrapper).width())/2);

jQuery Cycle plugin - Automatic height for containers

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

Categories