Scrollbar Inside and On Top of the Div - javascript

I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}

As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html

Related

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

How to make child element sticky to parent bottom ignoring top overflow?

How do you make a child element stick to the bottom of its parent, even when overflowing? Please see this fiddle for a demo. In the demo the child container is denoted by a red border, as you can see now the child element is sticky to the top of the parent and overflowing from the bottom, which is natural. But I want the element to be sticky to the bottom and overflowing from the top. I can think of several relevant approaches right off my head:
Use position: relative on parent and use position: absolute; bottom: 0px on child. This doesn't work in my case since I don't want the child to be taken out of the flow.
As mentioned in this post I can utilize a css table to keep the element in the flow. But this doesn't really produce the desired effect, since I want the element to stick to the bottom of the parent even when overflowing.
The reason I want this effect is so when I animate the height of the parent, I have a nice "dropdown" effect on the child. Is there a way to accomplish the desired layout with css?
OK, I think I get what you are asking. The desired affect can be achieved by changing up your margins, padding, and height on the parent.
.parent {
padding-top: 200px;
height: 0;
background: #e0e0e0;
overflow: hidden;
}
.child {
height: 300px;
font-size: 80px;
border: 1px solid red;
}
The padding acts as the height in this case. Animating the height from 0 to height of child (300px) should give the desired affect.
Here's an update to the jsfiddle http://jsfiddle.net/8FeC9/2/

How can I set the width and height of a container div?

I have the following:
<div id="container">
<img src="pic.png">
</div>
This is styled as follows:
#container {
height: 50px;
width: 50px;
}
In addition to this, I have some javascript hackery to cause the image to appear dead center in the containing div by setting margin-top and margin-left.
When I look at this in the Chrome web inspector, it's clear that the containing div does not start at the top of its parent. I suspect the image is being positioned relative to the container div's parent.
The trouble with this is that I want the container div to be a target for click events, such as dragging. The div only starts at the top of the image, when I want it to start above the image, and include the margin space as a part of the container. Any advice?
#plalx is right your using the wrong selector you should just do this:
#container{
width: 50px;
height: 50px;
padding: 5px;
}
padding is what your looking for with making the div bigger then the image for click. margin determines place on the page, padding determines space on the page beyond your height and width attributes.
See http://jsfiddle.net/VRJUc/. If you open the element inspector (chrome) and look at the actual size of the div you will see that it is actually 60x60 because I have added 5px of padding to each side.

How to make lightbox scroll the lightbox and not the page

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!
Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;
If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.
I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.
Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.

How to make an iFrame window scrolls with overflow:hidden?

I want to make the iframe window of modal box in Joomla 1.5 to scroll, but without scrollbars to appear. If I set overflow:hidden through css it works in Chrome, but not in Firefox! Does anybody have any idea how can I do this? Any trick?
Overflow: hidden is supposed to give the appearance that a container cannot scroll (i.e. hiding the scroll bars. The fact that is works for you in Chrome is just a quirk of Chrome, not standard. My suggestion would be to leave the scrollbars on the iframe but hide it with either a floating div or with the parent container. So for example, put the iframe inside a div. Force the div width to 18px (guestimated width of scrollbar) less than the width of the iframe with overflow: hidden. The frame will continue to scroll with the mouse wheel but you will not be able to see the scrollbar.
Working example here.
Html:
<div><iframe src="http://afakesite.com/"></iframe></div>​
CSS:
iframe {
width: 200px;
border: none;
}
div {
width: 182px;
border: solid 1px black;
overflow: hidden;
}​

Categories

Resources