Develop Reference

Scrolling through div without scroll bar

Trying to get this sidebar to be scrollable. Right now you can navigate through it by clicking items within in (using jQuery to animate the margin upon clicking an item), but I'd like to add scrolling functionality as well.
I tried overflow: scroll without success. Any help?
https://codepen.io/Finches/pen/xpXZVW
$('.track-name').click(function() {
//Remove active class from all other track names
$('.track-name').not(this).removeClass('active');
//Add active class on clicked track name
$(this).addClass('active');
var id = $(this).attr("data-id");
var scrollAmount = id * -50;
console.log(scrollAmount);
$('.track-name-inner').animate({ marginTop: scrollAmount }, 300);
});

Not sure why they disappear when I click them but that's OK.
You needed to set an explicit height on the container in order for overflow:scroll to work.
Working codepen:
https://codepen.io/anon/pen/ZvXpva
.track-name-wrapper {
position: absolute;
left: 35px;
top: 50%;
width: 300px;
display: inline-block;
height: 300px;
overflow-y: scroll;
top: 150px;
}

Slick slider image not centering correctly on load

I'm having an issue with my slick slider not showing the full first slide on load. Upon opening the content div by clicking the box title, the first slide is cut off and only about 1/3rd of it gets shown. It corrects itself after clicking the "next" button once or twice.
I'm guessing this has something to do with my jQuery function that shows/hides the content div... But I can't figure out what's going on.
Any help?
https://codepen.io/Finches/pen/jYwdKJ
// Show/hide content from clicking box title
$('.track-box-title').click(function() {
//Get height of content
var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;
//Convert height to string
var heightStr = height.toString();
//Toggle height and content box display
if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) {
$(this).parent('.track-box').parent('.track-box-container').animate({height: heightStr});
$(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
}
else if ($(this).parent('.track-box').parent('.track-box-container').height() == heightStr) {
$(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
$(this).parent('.track-box').parent('.track-box-container').animate({height: "200px"});
}
});
//Slick slider
$('.project-image-slider').slick({
prevArrow: false
});

Try giving your .slick-track a float.
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
Check the pen.

Link to the anchor moves to the wrong position because of changing page width

I can't solve one problem, but maybe someone will be able to find a solution?
On the left is content area (default width=70%). On the right is menu area (default width=30%).
When I scrolling page width of content becomes 100% and menu disappears:
.down .widget-area{
width: 0;
}
.down .container{
width: 100%;
}
It's good.
But at the beginning of the page there are links to few anchors:
GoTo Header 1
GoTo Header 2
GoTo Header 3
When I click on a link "GoTo Header 1" everything is working properly.
But if I click on the link "GoTo Header 2" moves to the wrong position (under than the header title) because the script changes the width of the content area.
Sample: http://jsfiddle.net/7uouhs6y
Please, any ideas?

document.onscroll = function(){
document.querySelector("#content").className = window.pageYOffset >= window.innerHeight ? "down" : "up";
}
According to your function above,when it's applying 100% width when you scroll down and offset is greater than innerHeight.To avoid that you should keep width to 70%.
Instead of this
.down .container{
width: 100%;
}
Use this
.down .container{
width: 70%;
}
Also don't specify height for left div,make it auto adjust according to content.
.container{
float: left;
background: red;
/*height: 300%;*/
}

Check if element can be scrolled to the left or right

I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: https://jsfiddle.net/udv8u596/
(You can scroll horizontally, scrollbar is hidden intentionally)
HTML:
<div class="scroll-container">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
CSS:
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
height: 36px;
}
.scroll-content {
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}

To check if an element is overflowing along the x-axis, you can simply compare its computed width, accessible via jQuery's .width() method, and its scrollWidth, a native JS function:
var $ele = $('.scroll-content'),
overflowing = $ele[0].scrollWidth > $ele.width();
You can then check the boolean value of overflowing if the element is overflowing or not. However, note that if you want this variable to be updated if the window resizes, a little more work has to be done:
var $ele = $('.scroll-content'),
overflowing = function() {
if($ele[0].scrollWidth > $ele.width()) {
return true;
} else {
return false;
}
};
console.log(overflowing());
$(window).resize(function() {
console.log(overflowing());
});
Here's a fiddle with the above logic implemented, with some slight modifications: https://jsfiddle.net/teddyrised/udv8u596/5/

Ilya basically you need to check your element right postion. On way of achieving this is to set the inner element to have absolute oistion and get right postion with jQuery
parseInt($('.scroll-content').css('right')) >= 0
I have modified you code as: https://jsfiddle.net/udv8u596/4/
In this example before animating the element it checks if the righ position is bigger than 0.
Please not that righ position is calculated based on the parent element. Left position is set to be 0 in the css but righ postion will be calculated in this example is ~-250.
I hope this gives you an idea how to solve your problem.

Here's a quick start for what you are looking for :
HTML
<div class="scroll-container">
<div class="mask">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
</div>
<div class="scrollRight">Scroll Right »</div>
<div class="scrollLeft">» Scroll Left </div>
CSS
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
overflow-x: hidden;
height: 36px;
}
.mask{
position:relative;
overflow-x: hidden;
overflow-y: hidden;
height: 36px;
width: 100%;
}
.scroll-content {
position:absolute;
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: visible;
width:auto;
}
.scrollRight, .scrollLeft{
font-size:10px;
display:none;
}
JS
var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();
if(contentWidth>containerWidth){
$(".scrollRight").show();
}
$("body").on("click", ".scrollRight", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
$(".scrollRight").hide();
$(".scrollLeft").show();
})
$("body").on("click", ".scrollLeft", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"0px"});
$(".scrollRight").show();
$(".scrollLeft").hide();
})
See Update JSFiddle

Why bootstrap dropdown doesn't work if navbar has fixed height?

I have a bootstrap navigation menu with more than 20 items and I want to get a fixed height to navigation therefore the menus that exceed the width of the container do not breaks but are hidden.
ul.fixedHeight {
height: 50px;
overflow: hidden;
}
Then I checked with jQuery if there is a hidden menu to show the button.navbar-toggle to slidedown and show the hidden menu:
JS:
function showhidebtn(){
var element = document.querySelector('ul.navbar-nav');
if((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
$("button.navbar-toggle").removeClass("hidden");
$("button.navbar-toggle").addClass("visible");
} else {
$("button.navbar-toggle").removeClass("visible");
$("button.navbar-toggle").addClass("hidden"); }
}
CSS:
#media (min-width: 768px) {
button.navbar-toggle {
position: absolute;
bottom: 0;
margin-left: -50px;
background: #000;
}
button.navbar-toggle.hidden {
display:none;
}
button.navbar-toggle.visible {
display:block;
}
}
Lastly I run the function if the window size is greater than 768 or or when it is resized.
jsFiddle demo
The problem is that when window size is greater than 768 and I click to the button to show the hidden items the slidedown doesn't work, but it works when window size is less than 768.
Any help is appreciated! Thank you!

As said, the height is restricting it from growing when it's supposed to on the button click. However, you could fix this with javascript:
//initially the button is not clicked
clicked=false;
$('button.navbar-toggle').click(function(){
if(clicked==false)
{
//if the button isn't clicked and you click it,
//let the height grow and make the overflow property as visible
$('.nav.navbar-nav.fixedHeight').css('overflow','visible');
$('.nav.navbar-nav.fixedHeight').css('height','auto');
clicked=true;
}
else
{
//vice versa when you need to close it
$('.nav.navbar-nav.fixedHeight').css('overflow','hidden');
$('.nav.navbar-nav.fixedHeight').css('height','50px');
clicked=false;
}
});
DEMO