Basically I have a bottom bar that stores a definitive amount of objects, say 30, with a width of say 2000em.
Now I want to make this div scrollable but every tutorial I look at does not explain their calculation.
My scroller will be unique because I will only allow scrolling via a next and back button (basically like paging) and I need to calculate when the div has 0 space to move so I can AJAX load more items and of course this calculation needs to be resize safe (based on div width and not pre-defined numbers).
Now I am fine with the whole resize (recalc div width on resize event) and AJAX load more objects.
What I'm not fine with is the calculation required to understand how the div should scroll and how to judge when it has no more space to scroll.
Has anyone got experience with making a dynamic scroller that only acts uopn click of a next or previous button that could explain the calculation required to understand scrollLeft/Right?
Thanks for any and all help,
I actually sorted this by:
Taking the current scrollLeft() of the inner ul within the div wrapper and add on the div (wrapper) width.
I checked whether the sum from point 1 was less than the UL width.
If so then scroll otherwise load new page if there is one.
Reverse for the previous button.
Since the wrapper has a width of 100% specified it will always be the size of the screen which means no resize function needed.
Related
I'm experimenting with making a nicer grid/list container. I'll have a bunch of objects to be displayed in a container, and I want to see them either in list view (where each item takes up 100% of the width and, say, 70px height) or grid view (where each item takes up, say, 100px width and 100px height). I made them all display: inline-block too, since they'll automatically position themselves appropriately (assuming the container div is the same width as one list item, which it is).
I want to make a smooth transition between them, so I made a fiddle to experiment. This does a good job in animating the size changes for each div, but there's a jarring height transition whenever a row of objects gets either too big or too small for its current row and adds/removes an object. My question is; is there a simple way to animate the objects to their end positions? For example, the sixth object which is at the bottom of the list view would reposition itself to the bottom right of the container in grid view.
I am using chat scrolling in VUE JS. I want to have message scroll at the bottom of the page at every time when new message come or page load. I am trying to have a page scroll code in a function which works little bit surprisingly.
var container = this.$el.querySelector(".messages");
container.scrollTop = container.scrollHeight;
It is working but it cannot fully scroll down to the full bottom. With this, scroll remains at some position between top and bottom. When i trigger this one more time then it takes scroll to the full bottom. I want to have scroll on the bottom on first click not on two clicks. Please help me.
Are you sure your 'container' is full-filled on body or root element?
your code looks just fine...
You may better check:
1) URL bar height issue (on mobile)
2) HTML hierarchy and its css
3) CSS box model and default css values of html.
But still probs are following, If I were you,
I'll add a MAGIC PIXEL NUMBER (which bigger than the margin) like a boss!
Bigger (than its document height) value of scrollTop isn't throw any error. (but watch its cumulation..)
I want to obtain the dimensions of a DIV element (used to display a popup menu at the cursor position) while it's style.display='none;', however the dimensions of the DIV always return 0. The only way I seem to be able to get the dimensions is to make the DIV style.display='block;' at 0,0 and then move it to the required position, but that looks jumpy.
I've tried making the DIV visible outside of the visible screen area but that doesn't work. Is there a way to get the clientWidth and clientHeight values whilst the DIV is hidden?
If your DIV is not visible, you won't be able to get its dimensions.
However, there is a workaround. Your div has to be "visible", but that doesn't mean it's opacity and position have to be 1 and relative.
Set the opacity to 0 and the position to "absolute" and you'll be able to get the DIV dimensions.
EDIT
Since I think more people will have a similar problem, I feel I should explain my answer a little more.
If you try to get the size of a hidden element with JavaScript, you will always get 0.
So there are techniques to get the real size without displaying the element to the user. My favourite is the one I already wrote about above. Here are the more detailed steps:
you set the elements opacity to 0. This way it won't be displayed to the end user while you are getting the dimensions.
you set the element position to "absolute". This way it won't take up any space.
now it's safe to set the display to "inline-block".
you read the elements dimensions. This time you'll get the real values.
You set the display back to "hidden" and set the opacity and position back to its original values.
And now you have the size of a hidden element.
If you'd like to know the size of an element onscreen without it being visible you need it to be painted to the screen but not shown.
In order to get clientHeight and clientWidth you need it to be rendered so the calculations can be performed based on the screens current state (unless you have pre-programmed width and height, which I'm guessing you don't)
you can find out more information at MDN here
So you have options:
create your div offscreen using positioning (fixed or absolute) combined with z-index or opacity
use width: 0 and height: 0 and overflow: hidden then use scrollHeight and scrollWidth to find the overflow size
choose which option is best for your site, considering things like responsiveness and screen reflows and repaints
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.
I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.
Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.