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;
}
Related
I have created an email subscription popup modal. Right now I have the modal set to fade in but instead of that I want the modal to slide up from bottom of the page to the top. I tried slideUp() instead of fadeIn() but it does not work. I feel like I am missing something. Do I need to create another function for the slideUp()? It is a popup modal so it is ready when the window scrolls instead of on a click event. Any help is appreciated. Thank you. My code is below.
$(document).scroll(function() {
if (!$("#mc_embed_signup").data("userClosed")) {
$(".popup-close").click(function(e) {
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 400) {
$("#mc_embed_signup").slideUp(600);
}
}
});
function closeSPopup(e) {
e.preventDefault();
$("#mc_embed_signup").data("userClosed", true);
$("#mc_embed_signup").hide();
}
jQuery .slideUp() hides the matched elements with a sliding motion. If you want to slide your popup up, you could use .animate()
$("#popup").show().animate({top: (window.innerHeight / 2 - 50) + "px"}, 1000);
#popup {
display: none;
width: 200px;
height: 100px;
position: fixed;
top: 100%;
left: calc(50% - 100px);
background-color:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup"><div>
.slideDown() should be used, but!.. instead of using top: NN in CSS use the bottom: NN. This way the element "anchors" to it's bottom property, and the .slideDown() will perform from bottom to top!
var $popup = $("#popup");
$popup.slideDown();
#popup {
position: absolute;
transform: translate(-50%, 0);
bottom: 24px; /* don't use top. Use bottom */
left:50%;
width: 300px;
height: 160px;
background:red;
display: none;
}
<div id="popup">Popup ou yeah</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a mobile version of a page. The content is enough that user has to scroll on his mobile device. When clicking an icon the mobile navigation bar slides in from left side and body gets overflow: hidden; so content does not scroll anymore. Is there a way to make the navigation bar 100% height of window (instead of document) so that user can scroll inside navigation bar furthermore?
At the moment slide-in and height of navigation is controlled by Javascript, but I'm looking for a CSS solution. Can anyone help?
// CSS
#mobile_nav {
width: 300px;
position: fixed;
top: 0;
left: -300px;
z-index: 10000;
overflow: auto;
}
// JS
jQuery("#mobile_button").on("click", function() {
jQuery("#mobile_nav")
.css({ height: jQuery(window).height() });
.stop(true)
.animate({ left: 0 })
;
jQuery("body").css({ overflow: "hidden" });
});
You could use Viewport units for that like this:
height: 100vh;
You could check the browser support for this css property here.
fiddle
Please see the fiddle above.
There is a link which when clicked a hidden div slides out from the right.
The hidden div contains an image.
At the moment the hidden div slides out but appears at a distance from the 'contact' link, and then when it slides back it disappears before it slides behind 'contact'.
I want it to appear to slide out form behind 'contact' and back in behind 'contact' without any overlapping.
$('#contact').click(function () {
$('#contact-info').animate({width: 'toggle'});
});
You can do like:
var move = 80;
$('#contact').click(function () {
move = move===80 ? 160 : 80;
$('#contact-info').animate({right: move, width: 'toggle' });
});
Check Fiddle
Animate the right property as well.
$('#contact').click(function () {
var right = '160px';
if ($('#contact-info').is(":visible")) {
right = '38px';
}
$('#contact-info').animate({width: 'toggle', right: right});
});
http://jsfiddle.net/RichAyotte/cs23vzjv/1/
I found a way to do this by simply adjusting the css. fiddle
#contact {
background-color: #ffffff;
bottom: 34px;
padding-right: 38px;
position: fixed;
right: 0;
z-index: 1;
}
#contact-info {
bottom: 34px;
margin-right: -250px;
position: fixed;
right: 444px;
text-transform: lowercase;
white-space: nowrap;
}
I'm currently making a website with a "Support is Live" div which will be following the user when scrolling. So I gave it Position: Fixed; and all works fine.
But when the user scrolls back up, I want the Support div to stop so it doesn't "touch" the header.
Here is a picture that hopefully makes it easier to understand:
http://gyazo.com/2694b03181a39c3b6673901b42b5952d
I want the yellow div to stop in line with the orange field on the picture. But when the user starts to scrolling down again, it will follow.
My Best Regards
Philip
This will need some JQuery to work properly:
JSFIDDLE
JQuery
$(document).on("scroll", function() {
if($(document).scrollTop() < 100) {
$('#alert').addClass("absolute");
} else if($(document).scrollTop() > 100) { //100 is the height of your header. Adjust if needed
$('#alert').removeClass("absolute");
}
});
CSS
.absolute {
top: 100px; //same as the value in the conditions
position: absolute;
}
#alert{
background-color: #FF0;
float: left;
height: 400px;
width: 230px;
margin-left: 20px;
position: fixed;
z-index:999;
}
HTML
<div id="alert" class="absolute"> </div>
/!-- add the class so that it doesn't mess up the layout when you load the page --!/
The srolltop function checks how much space is between your viewport and the top of your document. When it reaches the height of the header, a class absolute is applied in order to keep the #alert div in its place.
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