We Keep Coding

Controlling horizontal scrolling when using waypoints.js

I am building a custom wizard form with waypoints. Something interesting is happening and I can't figure it out for the life of me.
My sample CODEPEN is showing 2 pages of the wizard process to show you what I mean.
When you hit the forward action button (search in the first page of the wizard), the waypoints slide from the right and the next page or screen shows. That would repeat on-forward and backwards if I click on the backward action button. That is working.
The problem I see is with the initial horizontal scrollbar. It shows on page load, which it's a problem because the user could just scroll to the next screen by dragging the scrollbar. I thought of giving it an overflow-x but it didn't fix the issue. The interesting thing is, if I click on the search button and the waypoint slides, the scroll bar disappears and gives me the desired effect! What gives?
I built the CODEPEN as close as possible to the real environment so that you guys can catch any conflict with other elements instead of isolating the problem.
Here is the related code just in case:
HTML:
<div id="content" class="content">
<div class="row page">
<!-- First page content here -->
</div>
<div class="row page2">
<!-- Second page content here -->
</div>
</div>
CSS:
.page, .page2 {
position: absolute;
top: 20px;
left: 10px;
width: 100%;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s
}
.page {
-webkit-transform: translateX(0%);
transform: translateX(0%)
}
.show-page2 .page {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.page2 {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
.show-page2 .page2 {
-webkit-transform: translateX(0%);
transform: translateX(0%)
}
JS:
(function () {
var body = $('#content'),
nav = $('.btn-waypoint'),
panels = $('#content');
nav.on('click', function (e) {
e.preventDefault();
var dest = $(this).data('panel-link');
body
.removeClass(function (index, css) {
// remove only classes start with show-
// http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
return (css.match(/\bshow-\S+/g) || []).join(' ');
})
.addClass('show-' + dest);
});
}());
The closest fix I've tried to solve this is making page2 display:none on page load to eliminate the scrollbar and then making it visible on button click. That almost did it except a funky look happens between the waypoint sliding effect and the css fade effect. Here is the code for that:
JS
$( document ).ready(function() {
$('.page2').css('display', 'none');
$('[data-panel-link]').on('click', function(){
$('.page2').css('display', 'block');
});
});
Here is the link to my CODEPEN
Thanks in advance!

As it plays out the root of the problem is the hard positioning. The waypoint divs are natively in vertical position which they would obviously not produce a horizontal scrollbar. They are being forced to be side by side by position:absolute and the transform: translateX(-100%) and this creates the horizontal scrollbar. If the mousewheel is disabled via jQuery the scrollbar goes away, but it goes away vertically as well. So instead of fighting that battle, a better alternative is to use a different transition that looks good but doesn't require a side by side animation. A fade will do just nice:
Simply replace the css effects from translateX to the following:
.page, .page2{
position: absolute;
width:100%;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.page {
opacity: 1;
}
.show-page2 .page {
opacity: 0;
}
.page2{
opacity: 0;
}
.show-page2 .page2{
opacity: 1;
}

Get preferred height of div

I use a chrome extension to collapse certain divisions on webpages. And ti all works pretty well. I made it so that it is has a height of 50px, and when you hover over it it becomes the height it usually is. In short this is what my code does:
Check the height of a div -> checkedHeight
Apply CSS rule: max-height: 50px
Apply CSS rule on Hover: max-height: checkedHeight
This works like a charm. But!!! When the div loads extra content, it becomes longer. Is there anyway i could set max-height to be the preferred height of an element? I know i could just not use max-height, but i want to use css3 transitions to make the div expand gradually.

Use element.scrollHeight
Here is an example
<script>
function collapse(target) {
target.style.maxHeight = '50px';
}
function expand(target) {
target.style.maxHeight = target.scrollHeight + 'px';
}
</script>
<style>
#test {
max-height: 50px;
background:lightgray;
overflow: hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
</style>
<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>

Could you not just set max-height: none when hovering?

Using jQuery, how can I change the size of a div as I scroll?

I have a div that is 500px wide in a container that is 3500px high, and I want the 500px div to slowly decrease in width to half its original width as I scroll down the page. Everything I've tried with .scroll in jQuery is making the width change as soon as the page loads instead of as the page is scrolled down.
EDIT I'd like the width to scale up and down as the page is scrolled up and down.
Here's an example of what I started with, I know it's obviously not correct:
$(document).ready(function() {
$('#box').scroll(function() {
$('#box').css('width', '250px');
});
});

Here is working fiddle, that dynamically changes it's width http://jsfiddle.net/CWe9t/1/
$(document).ready(function () {
var initialWidth = $("#box").width();
var minWidth = 250;
$(document).scroll(function () {
var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
$('#box').css('width', x);
});
});

$(window).scroll(function() {
$( "#box" ).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
});
});

Are you calling scroll function on your box scrolling? No, it's window you are calling scroll function
$(document).ready(function() {
$( **window** ).scroll(function() {
$('#box').css('width', '250px');
});
});
and about slowly decrease size apply this css3 properties on your box
#box
{
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
apply css3 animation as it is more smoother to animate if many animations on same page same time and Jquery animation if that's only one simple animation as told by #daguru.

confusion regarding toggle() effect and event in jquery

I have two div elements "trigger" and "target". I was looking for a mechanism where every time "trigger" is clicked, a script animates the height of "target". However I need it to toggle between 0px and 100px. After some research I found this
On searching a little I found the following script
$("#trigger").toggle(function(){
$("#target").animate({height:40},200);
},function(){
$("#target").animate({height:10},200);
});
However it didnt seem to work.. after some more searching I came across the following script
$(document).ready(function()
{$("#trigger").click(function()
{
$('#target').toggle(
function()
{
$('#target').animate({height: "250"}, 1500);
},
function()
{
$('#target').animate({height: "0"}, 1500);
});
});
});
and this didn't work either. The element does animate but along with the height, the width and opacity would also animate. Further research brought me to this effect. So basically there are two toggle(). in jquery, and i'm confused about how each is used. All I want to do is animate the height of one element with a toggle when another element is clicked. I hope I have been clear enough.

You could just add a variable like var trigger = false;
var trigger = false;
$("#trigger").click(function(){
if(!trigger) {
$("#target").animate({height:40},200);
trigger = true;
}
else {
$("#target").animate({height:10},200);
trigger = false;
}
});

You could use toggleClass instead:
$("#trigger").click(function() {
$(".target").toggleClass("higher");
});
in your css you then use:
.target {
height:50px;
background-color:#f00;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
.higher {
height:100px;
}
http://jsfiddle.net/JSfa3/

CSS3 transitions inconsistent across FF and Chrome

So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end.
Here is the CSS:
.cloned_object {
position:absolute;
background-color:white;
width: 700px;
height: 640px;
margin: 0; /*for centering purposes*/
-webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
and the JS function:
$('.content_cell').on('click', function(event) {
// if the user is on a browser older then IE9
if ($.browser.msie && $.browser.version.substr(0,1)<10) {
var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top,
opacity:1.0}) ;
selectedPos = $(this).position();
var currentPos = $('#invitedToChatCell').position();
$clonedElement.animate({
height:640, width:700,
//position:'absolute',
left:currentPos.left,
top:currentPos.top,
opacity:1.0
}, 500, function(){ $('.cloned_object > ul').toggle(); });
} else {
var currentPos = $('#invitedToChatCell').position();
var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top}) ;
$clonedElement.addClass('cloned_object');
$clonedElement.css({'margin-left':-$(this).position().left+125,
'margin-top':-$(this).position().top,
}) ;
selectedPos = $(this).position();
$('.cloned_object > ul').toggle();
}
event.stopPropagation();
});
I am really at a loss as to why it would be different across browsers. I was hoping someone could enlighten me as to what is going on...
Here is the jsFiddle link. If you run it in both browsers, you will see the animation position is different. In FF, it looks like the box grows, that is what I want. In chrome it's very strange...

Your transitions explicitly request that the "top" and "left" be animated. They've got to start from somewhere, so they start from zero. It's a weird case because the "cloned-element" style is not what's giving the element the "top" and "left" values, it's your code which puts them straight on the element.
You're also animating the margin, however; Chrome doesn't seem to pay much attention to that. If I take the "top" and "left" properties out of the transition, it makes it act a little more like Firefox.
The concept of applying a transition to an element at the same time it comes into existence is a little confusing to me. I hope somebody comes along and provides a better answer.