Jquery Scrollable, is it possible to customize it with a scroll bar? - javascript

Jquery Scrollable is a tool by Jquery Tool that scrolls a list of images/videos
http://jquerytools.org/demos/scrollable/
But I am just wondering, has anyone of you tried to customize it with a scroll bar. What I mean is we want to use Jquery scrollable for the following page
http://www.space.ca/Face-Off.aspx
But we want to keep the scroll bar in the bottom, rather than using the left and right arrow to scroll through the video carousel.
Would that be possible? If you have done a customization of JQuery Scrollable and using the scroll bar , Please share some tips with me
Many thanks

You could archive this using plain css:
<div class="scrollMe">
<div>Do what ever you want</div>
</div>
And then just make sure you css is in order:
.scrollMe {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap; /* this is important for you, this means that you will keep everything in a single line which will make this guy scroll on the y-axis. If you need multiline on the childs you need to set: white-space: nowrap; on the childs */
}
And all your block level childs needs display: inline-block;:
.scrollMe > div {
display: inline-block;
}

Related

How to hide element overflow using CSS?

I am trying to make the front end for a very simple chat box using javascript, css, and html.
I have a element overflow issue when user resizes the window, if the chat is greater than 12 messages, the messages overflow from the container.
I made a jsfiddle so you guys can try for yourself: https://jsfiddle.net/fb72uwwq/6/
In the fiddle, click the chat button and spam messages, resize your browser and you can see they overflow.
I tried some stack overflow answers but overflow: hidden; did not work. How can I solve this?
css
#chat{
height: 100% !important;
overflow-y: hidden;
/* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */
}
Setting height to 100% should resolve the issue.
c.style.height = "100%";
overflow: hidden will not work because you're not placing the messages inside the container at all. Instead, you're stacking them with absolute positioning and calculated bottom-margin as its sibling. With your current markup, there's no way to cut off the messages at top, unless you also want to calculate that by hand.
Also, your question is not very clear: do you want to stop adding messages once it's outside the container or you just want to crop them off the screen (but they'd still be visible in the DOM).
Either way, your current structure can be much improved if you create it the following way:
<div id=chat>
<input type=text id=chat-message>
<div class=message>First message</div>
<div class=message>Second message</div>
<div class=message>Third message</div>
</div>
This way, all you have to do to make them appear like you want it to use Flexbox:
#chat {
display: flex;
flex-direction: column-reverse; /* from bottom to top */
}
Your JavaScript will also be much simpler, since you'll just be creating a new element as the last child of #chat, meaning no additional calculations. (You can still remove the oldest messages after a certain amount of messages have appeared on the screen).

Listen to scroll event from overflow:hidden elements

I'm trying to synchronize the scrolling between two separate panels / divs.
One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).
I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).
However, is there a workaround for this? I want to synchronize the scrolling both ways.
Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/
Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.
Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not.
Demo
$("#panel-left > table").on('wheel', function (e) {
// your logic here
}
I'm thinking you don't need jQuery to do that.
Look here: http://jsfiddle.net/ty0jyr4y/
I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.
The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).
Works beautifully. Is this what you want?

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.

hide scrollbar but able to scroll with mouse

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks
I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.
To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality

Content jumps horizontally whenever browser adds a scrollbar

I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

Categories

Resources