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.
Related
I am creating a chat application in Angular and I am trying to set up the UI for it. I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar. This div should be 100% the size of the parent div. As you click the button to add data the div grows. Even if I set a height in px or percent format the div still grows.
The page you link won't load but here are the basics to make a scrollable element:
HTML / JS Structure
Make an outer container div
Make an inner container div (this will be the "scroll wrapper")
Append the inner container to the outer container
Insert whatever you need into the inner container (you can use something like insertAdjacentHtml or whatever works for your specific situation)
This order of steps in particular will work well for a scenario where the contents are dynamically changing.
CSS
For the outer container
Set a fixed value for width and set height: auto
Set a border-radius if you want circular edges
Set overflow: hidden to keep the scroll wrapper's corners from popping out
You will probably want some padding
For the inner container
Set position: relative
Set overflow-y: auto and overflow-x: hidden so that you can scroll up and down, but not side to side
For the desired overflow behavior, you need to set width: 100% and set fixed values for max-height and min-height. (max-height decides when things will start to overflow ie. make a scroll bar)
You will want max-height and min-height to be less than the outer container's fixed width + any padding, etc. it may have.
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 have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.
Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.
Edit:
Basic fiddle: http://jsfiddle.net/9AXS4/4/
Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()
If your pages, as you call them, are of fixed width and height, then you can set their container to be position:relative and also have the width and height of the pages..
.container{
position:relative;
width:500px; /*the total width of a page, including padding and borders*/
height:400px; /*the total height of a page, including padding and borders*/
}
This way the container element will handle the pushing around of the other elements
Here is your corrected fiddle: http://jsfiddle.net/gaby/9AXS4/2/
(the width/height of the container must account for paddings and border on the page elements)
Also you were targeting the container with .pagecontainer instead of #pagecontainer (since you used an id)
Update (after comment about arbitrary heights..)
Since your pages height is not fixed, you will need to resort to jQuery to resize the container..
Here is a full demo : http://jsfiddle.net/gaby/9AXS4/7/
The divs can't be positioned absolute in relation to each other, but they can be positioned absolutely in relation to an outer div. The container that holds the page divs should have position: relative in order to contain the inner page divs that are absolutely positioned.
If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want to allow for scrolling. If you are going to use the overflow property, be sure to include a height and width so the browser knows where the overflow should be.
http://jsfiddle.net/vkTXs/
$(".page").each(function(){
jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
jQuery(this)
.parent().fadeOut()
.next().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
$(".back").click(function() {
jQuery(this)
.parent().fadeOut()
.prev().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
function resizeContainer(page){
// get height of next page
var newPageHeight = $(page).height();
// add padding and border
newPageHeight = newPageHeight + 14;
$('#pagecontainer').height(newPageHeight);
}
Is there an html code that would remove the scroll bar on the left (Y axis scroll bar) Like when you resize a page that scroll bar doesn't come up also with the bottom scroll bar as well? Thanks.
Btw, an example is google. Resize the page on google and you'll see what im talking about
If you just want to make the scrollbar disappear, one way would be to code you site so that it has a fluid layout and it would adjust to browser window resizing (no fixed width blocks, for example, or floated content that would reorder upon resizing.)
Of course, the simplest way is to set overflow: hidden; in CSS to the block you need to remove the scrollbar from, however, that would just obscure the content that is out of viewport.
More about fluid layouts
These are literally some of the first links I got when googling for it:
http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
http://24ways.org/2006/intricate-fluid-layouts/
You can even find ready-made layouts if you need them.
May be this code will help you, add this code in head section
<style type="text/css">
body {
/* use any one, according to the requirment */
overflow:hidden; /* for x & y scroll bar */
overflow-x:hidden; /* for x scroll bar */
overflow-y:hidden;/* for y scroll bar */
}
</style>
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.