Remove the left scroll bar html - javascript

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>

Related

Fixed side menu inside wrapper

So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?
there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/
If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/

Issue with scrollbars when centering my div with css top and left

I tried looking up an answer to my issue and found this css - margin top causes unwanted body scroll bar but it doesn't seem to fix my issue.
Here is my code to center
if(W > H)
{
scale = (height-45) / H;
}
else if(H > W)
{
scale = (width-5) / W;
}
var left = (width*0.5)-(0.5*W*scale);
var top = ((height+40)*0.5)-(0.5*H*scale);
$("#plan").css({"position":"absolute", "left": left,"top": top});
Basically I am centering my div's center in the center of the screen, and I am having 2 issues.
I have it set so that there is a scale for my div, that is based on the smaller of height or width, and in the example I have a 1285x910 div. My height will be maxed out, but I still get scrollbars. The horizontal is also there.
Using the same example as above there is a horiz scrollbar, that if I scroll over, will bring me over to the left a random amount, for each of my plants it's different. 1 brought it over to make the plan 0,0, the next made it so that it made the plan's center be at 0,0.
When I switched from position"relative" to "absolute" it changed one plan to only scroll a little bit, but it's still there.
So basically (in this example) I am looking to stop the verticle scrollbar for appearing since there is nothing to scroll, and by the scrollbars being there it takes up too much room and it's not full screen anymore.
As well as stop the horizontal scrollbar from appearing when my plan is centered and not big enough to scroll. If my plan is big enough and needs to scroll left or right, that should be allowed and enabled.
The answer in the above link is
"One simple solution, margin:0; and padding:0; on the body.
The reason of this, is to reset all the defauls set on the margins and paddings.
html, body {height:100%; margin:0; padding:0;}
"
Which seems to be what I want to do for at least #1, but if it works for #2, that would be great (i.e., I want my div to be centered but it to be as if nothing was moved so it doesn't throw off the scrollbars, unless it got big enough to do so, or it was big enough to do so based on it's size).
Fiddle: http://jsfiddle.net/Lh3ze3m6/18/
Any comments or questions please let me know,
Thanks all!
To disable both horizontal and vertical scrollbars apply this to your css stylesheet:
body {
overflow: hidden;
}

Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden

Make only part of a div visible

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/

Allow vertical scroll in my website only up to a fixed limit

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.

Categories

Resources