I have a scroll-able div absolute positioned on one of my pages and there is a transparent overlay placed on top of it. Have created an example below,
http://jsfiddle.net/mae8y2w4/1/
overflow-y: scroll; added
But the content does not scroll in Chrome, works fine in Mozilla. Can anyone please tell me what the issue could be.
Thanks in advance,
Neha
Remove the last <div>: http://jsfiddle.net/mp0g5ab6/
Remove position from last div:
<div style=" width:150px; height:55px;"></div>
Related
To show a lot of records to the user, we use the following approach:
we have a DIV with overflow-y: scroll. Inside of this DIV we have 3
DIVs:
first one and last one are just spacers, so the scrollbar is in
correct position
the middle DIV shows the content. Its content is
loaded dynamically via AJAX from the server based on the position.
It looks like this:
<div id="elmain" style="height:400px; width:500px; overflow-y: scroll; overflow-x:hidden;">
<div id="eltop" style="height:1500px"></div>
<div id="elview" style="height:500px;">content</div>
<div id="elbot" style="height:1500px"></div>
</div>
In the onScroll event handler we resize eltop and elbot DIVs, so user can actually see elview. You can try it here: https://jsfiddle.net/hq0r63z8/
Unfortunately, it stopped working in the latest versions of Chrome. It still works in other browsers. Scrolling up works also in Chrome, but when scrolling down, browser scrolls to the absolute bottom.
Do you have any idea, how to fix this?
I want to know if there is a possibility to replace the scrollbar of a container (exp. <div>) with overflow-y: scroll to the <body> scrollbar.
So an example:
If I click on a <button>, a modal pops out containing a <div> with height: 300px and an inner content <p> with height: 500px. The scrollbar for the inner content appears. I want that if I clicked on the <button> the scrollbar of the inner content get replaced with the scrollbar of the <body>.
I hope that wasn't to confusing. Is there a known possibility?
Thanks a lot!
As in the comments above, here is a solution to your problem:
Inner div element scroll via outer scrollbar
I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
I have a div(menubar) that has a lot of links and these links are out of the view. I must make the div scroll to the right or left when the cursor is at the edge of the menu div, in order to bring these menu items into the view.
I am a beginner with Jquery, so any help is greatly appreciated.
Markup is in Jsfiddle
Short:
Use-ready solutions:
Scrolling-carousel
Jmycarousel (demo)
Smooth div scroll
Full answers you can read on relative questions:
jQuery plugin to continually horizontally scroll on mouseover
Looking for jQuery plugin (or code) to automatically scroll Carousel items on mousover
Take a look at this example, in this example you can see how they scroll the div when the mouse at right edge of the div. you can do the same thing.
How to Auto Scroll a div on mouse move over the margins?
Here Answer
<div onmouseover="this.className='addscrool'" onmouseout="this.className='removescrool';" style="width:100px;height:100px;border:1px solid Blue">
</div>
<style>
.addscrool
{
overflow-y: scroll;
} .removescrool
{
overflow-y:hidden ;
}