I have been trying to implement scroll bars to scroll through the content of a canvas.
What I have done is basically create a div with overflow set to scroll for the scroll-bar, and an inner div with varying width/height according to the width/height of the content of the canvas.
When I get an onscroll event on either of the two scroll-bars, I can use scrollLeft and scrollTop properties to set how many pixels I need to shift the canvas content.
I noticed that while the vertical scroll-bar was working as intended, changing the inner width of the horizontal scroll-bar was not doing anything.
I was under the impression that something like;
<div id='outer'>
<div id='inner'>
</div>
</div>
<style>
div#outer {
width : 500px;
height : 50px;
overflow-x : scroll;
}
div#inner {
width : 20000px;
}
</style>
would create a div block of width 500px, with a horizontal scroll-bar, allowing us to scroll through the width of the inner div, 20000px.
But for some reason it does not work for a horizontal scroll-bar(example), while working perfectly for a vertical scroll-bar(example).
Why does this happen? Is this something to do with how I am using style.width for the inner div?
What can I do to get a working horizontal scroll-bar?
It works if you give a minimum height or add content to the inner element with larger width than the container.
bar.style.minHeight = '1px';
Fiddle
For the reason, my bet is that a block element with no content (0px height) is displayed similarly to a display:none element.
Related
I have a horizontal banner. Inside the banner, I have 4 fixed elements. First element is a image / link. 2nd fixed element is suppose to be used for scrolling left. 3rd is a fixed width element which will have images ( number varies and clicking on first image will add another image element. 4th is another fixed element suppose to be used for scrolling right.
I did some basic searching on the internet and found few solutions but they are not working for me.
The width for elements to be used for navigation is fixed like 75px. The first element width is also fixed like 100px, 3 element which will have the images is calculated calc(100% - 250px).
I have used overflow-x:hidden for the third element.
I tried the scroll using the code document.getElement('.scroll').scrollLeft += 200;
This will work only when I define the width of that element like 1000px; when I make it fixed and hide the overflow, I am not able to see all the elements which are over flowing also the above code to scroll also did not work.
Any help is much appreciated.
I created a Plunker demonstrating scrolling a container of images.
First, I created a parent component that handles navigation and a image container component. Whenever the user clicks a button on the navigation, i am setting the transform CSS property to move the inner div by a number of pixels.
The outer div contains a fixed width set to 285px with overflow hidden.
ImageContainer.js
ctrl.$onChanges = function(changes) {
console.log(changes);
// set the image width of all images
if (changes.imageSize) {
ctrl.imageStyle = {width: changes.imageSize.currentValue + 'px'};
}
// update the scroll position
if (changes.scrollPosition) {
ctrl.scrollStyle = { transform: 'translateX(' +
changes.scrollPosition.currentValue + 'px)' };
}
}
imageContainer.html
<div class="flex fixed-image-container-width" >
<div class="flex scrolling" ng-style="$ctrl.scrollStyle">
<div class="item" ng-repeat="item in $ctrl.items track by $index">
<img ng-style="$ctrl.imageStyle" ng-src="{{item}}"/>
</div>
</div>
</div>
I have a table whith many divs above it:
<div></div>...<div></div>
<div id="tablecontent">
<table>...</table>
</div>
I want my table scroll only in screen (the bottom of table is in the bottom of windows). So I need to set height and scroll=auto for #tablecontent.
To set heigth I calculate it as:
var pos=$("#tablecontent").position().top;
var heigth=$( window ).height()-pos;
$("#tablecontent").css("height",heigth+'px');
But this is not working correctly. It is larger than I need. Can you help me calculating the right value.
On the div in your CSS you'll want to set overflow: scroll, that with the fixed height should create a scroll bar on your div when the contents are larger than the container.
I want a div that only partly has its content visible. I want the user to use his mouse horizontally (i.e., left-to-right mouse movement) to change which part of the div is visible.
How can I do this?
The HTML and CSS
If I understand your question correctly, you have a div that is x pixels wide, and its contents are y pixels wide where x > y. In other words, the div's contents are wider than the div itself.
The following HTML and CSS are an example of how to hide part of the div if x = 250 and y = 500:
<div id="outer-div" style="width:250px;overflow:hidden;">
<div style="width:500px;">
....
</div>
</div>
The CSS overflow:hidden hides the horizontal scrollbar. If you would like the user to see the horizontal scrollbar, use overflow:auto. If the horizontal scrollbar is all you require, then there is no need to write any JavaScript.
The JavaScript
Changing which part of the div is visible based on mouse movement requires JavaScript. One way to accomplish this is to change the scroll position of the outer-div. mootools has the method Element.scrollTo. Other JavaScript frameworks have something similar.
$('outer-div').addEvent('mousemove', function(event) {
$('outer-div').scrollTo(event.client.x);
});
See this fiddle for an example.
Use the CSS overflow property:
#element {
overflow: hidden;
width: 200px;
}
You can then scroll the div left or right using the scrollLeft property:
document.getElementById("element").scrollLeft = 100;
jsFiddle: http://jsfiddle.net/vHEPv/
I wish to give my users only vertical scroll and that too up to a automatically calculated height, not up to the entire length of the page.
Is it possible to fix the limit of vertical scroll that i wish to give to users. can it be done by jQuery. ???
You can have a div with static height and overflow-y:auto
This will show the scrollbar only when the content inside the div goes beyond the static height
div
{
height:400px;
overflow-x:hidden;
overflow-y:auto;
}
I did this part by hiding the underlying div and showing it just before I need it. So, I don't need to set the vertical scroll to a particular height.
I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?
is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.