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 ;
}
Related
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>
It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
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?
how can i hide scrollbars in a website, disabling scroll by mouse but being able to reach hidden areas of the page with the jquery scrollTo plugin function? (click on a button and page scroll to the target element)?
thanks!
To disable scroll bars a simple css:
html, body {
overflow:hidden;
}
To scrollTo please look at this example:
http://www.adriantomic.se/development/scroll-to-the-top-with-jquery/
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?