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;
}

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

Imagemap with overlying div: Mouseover disappears on div

Could anyone give me a hint how to solve this?
Fiddle: http://jsfiddle.net/9Br6h/
Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.
But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)
jQuery(document).ready(function($) {
// add div for showing dates
$('body').append('<div id="mo_termin"></div>');
// show div on mouseover
$('area').mouseover(function(event) {
var left = event.pageX + 30;
var top = event.pageY + 5;
display = '<div class="views-field-field-body">Keine Termine</div>';
$('#mo_termin').css({top: top,left: left}).html(display).show();
});
$('area').mouseout(function() {
$('#mo_termin').html('').hide();
});
});

you can use the css property pointer-events: none;as well.
#karte .flag {
pointer-events: none; /*Added line*/
position: absolute;
background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
width: 50px;
height: 50px;
top: 200px;
left: 50px;
}
Here is the Demo http://jsfiddle.net/9Br6h/2/.

Assuming that the flag completely covers the 'hover' area underneath it, you can modify your code so that the line that sets the mouseover event reads as follows:
// show div on mouseover
$('area, .flag').mouseover(function(event) {
Here is an example: http://jsfiddle.net/9Br6h/1/

Div hidden underneath containing div scrollbar with overflow: scroll set

I have some content that is wrapped by a div that has overflow set to scroll. Inside that div I have a rows of bootstrap drop down buttons. When you get to the drop down button closest to the bottom edge of the div the dropdown area is hidden by the div scroll bar.
Is there a way to have that dropdown show above the scrollbar? Thanks.
UPDATE:
I've added a very simple Fiddle to show what is currently happening
CSS:
div.container
{
height: 200px;
overflow: auto;
}
table#fiddleTable th
{
white-space: nowrap;
}
http://jsfiddle.net/Gnex/8GAc3/

I was trying to solve the same thing, this works for me:
$(".dropdown-toggle").click (e) ->
menu = $(this).next(".dropdown-menu")
menuPositionY = e.clientY + menu.height() + 180
#check if dropdown exceeds the Y coordinate of viewport
if $(window).height() < menuPositionY
menu.css
top: "auto"
bottom: "100%"
else
menu.css
bottom: "auto"
top: "100%"
Check the jsfiddle updated: http://jsfiddle.net/8GAc3/6/

You can use CSS to re-position the dropdown menu..
.dropdown-menu{
left:40px;
top:-10px;
}
Bootply

Slide panel in from right

I'm trying to replicate the effect on this website in the portfolio section where it slides a panel in the full size of the viewport and then slides it out when you click close.
Example here: http://alwayscreative.net/#portfolio
Here's my current markup:
<section class="panel" id="portfolio">
<section class="content">
<h1>What are you <strong>interested</strong> in?</h1>
<a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a>
<a class="btn-portfolio" id="btn-residential" href="#">Residential</a>
</section>
</section>
The .panel section is 100% height and width of the viewport and I'd like 2 different panels to be able to slide in — one for #btn-commercial and one for #btn-residential.
Any ideas how to make this happen?
If it helps any, here's my site so far: http://www.freshbrand.ca/testlink/top40/#portfolio

Here's how you would do it with JQuery but clearly you can do it in normal javascript if you prefer. Set up the panels with position absolute in your css:
.panel {
position: absolute;
top: 0;
height: 100%;
border-width: 0;
margin: 0;
}
.panel inactive{
display: none;
}
.panel active {
display: block;
left: 0;
width: 100%;
height: 100%;
}
in your javascript (after the dom has loaded) get the screen dimensions and set the positions of the inactive elements to just off the right hand edge of the screen:
$('.panel').css('width', screen.innerWidth);
var setup = function() {
$('.portfolio-panel.inactive').css('left', window.innerWidth);
$('.portfolio-panel.active').css('left', 0);
}
setup();
When you wish to slide a panel in from the right, pass its id to the following function:
var slideIn = function(panelId) {
$('#' + panelId).animate({
left: 0
}, 400, function () { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen)
// tidy up
$('.portfolio-panel.active').removeClass('active').addClass('inactive');
$('#'+panelId).removeClass('inactive').addClass('active');
setup();
});
};
EDIT: The event handler would look something like this:
$('.btn-portfolio').click(function() {
slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn
});
The only remaining issue is to eliminate the horizontal scroll bar you will probably see during the animation. Just add overflow-x: hidden; to the element to which the scroll bar belongs (probably body, but it depends on how you've structured and styled the rest of your site)

This is basically a single page website, a lot of jQuery plugins are available for the same.
I personally prefer
http://joelb.me/scrollpath/
Check out it's demo and download the code from github's link
https://github.com/JoelBesada/scrollpath
Hope this helps