I am using jquery dialog to show a dialog. I am able to place it bottom left corner which is where I want it. Trouble is if the main window has a scrollbar, the dialog goes to bottom left of the scrollbar, thereby overlaying the scrollbar. One would expect that bottom left of the window means bottom right of the scrollbar and not the bottom left of the scrollbar.
I have tried specifying position object option to jquery dialog without success. I have tried all four values fit, flip, flipfit and none of the collision option in the position object. But none of them seem to do the trick.
I know there is a hacky way to calculate the width of the scrollbar and move the dialog by that much and I have already employed this hack in a number of places. But I am hoping for an API way of doing it.
Does anybody know of a way ?
Actual Behaviour
Expected Behaviour
The following example worked for me (code, fullscreen):
$("#dialog").dialog({
position: {
my: "right bottom",
at: "right bottom",
of: window
}
});
Note that the code is wrapped in $(function(){}) construct which means that the dialog is created after DOM is loaded and the browser has calculated whether a scrollbar is needed or not. Perhaps you are calling the dialog too early.
There is no real way to do this, all browsers suck at displaying scrollbars on the left. The ideal way is not to use the scrollbars on the left. Most famous news paper websites in Hebrew and Arabic seem to use right scrollbars. So, the defacto standard is to use a scrollbar on the right irrespective of the language.
This is not the only problem that a left scrollbar introduces.
Safari won't even show a scrollbar on the left even if you mark the html RTL.
Firefox shows the scrollbar on the left. But it mangles the absolute left and top calculation.
Let's suppose you have an image inside html marked RTL. You want to overlay a div over the image. So you need to get the left, top, width and height of the image. Your scrollbar is on the left because it is a RTL language. When you ask for the dimensions of the image, firefox will return correct dimensions. Now if you apply these dimensions to a div that you want to overlay on the image, firefox will consider the right-top side of the left scrollbar as the origin. Notice that the image was rendered with left-top of the left scrollbar as the origin, therefore your overlay is off by scrollbar width.
Chrome seems to be the only browser that implements this well. But because other browsers don't implement this well, we end up doing browser specific stuff anyway.
IE9 and IE8 behave exactly like Firefox.
Anyway, my answer is more of a rant so other people might find this helpful.
I'm guessing you are on a Mac with those pesky auto hiding scrollbars? What you could try is use CSS to always show the scrollbar on the body:
body { overflow-y: scroll }
There isn't really a way to define the area inside the div minus the scrollbar because the scrollbar is within the div. The scrollbar doesn't exist as a container. At least this is the case when you use css and set overflow: scroll. It may be possible with some of the jQuery plugins for Scrollbars.
The best I can do is offset the position by a standard 20px wide space. Here is what I used.
$( "#dialog" ).dialog({
position: {
my: 'right bottom',
at: 'right-20px bottom',
of: $("#some_div")
}
});
Try this at css
#dialog{
position: fixed;
bottom:0;
left:0;
}
this trick may help you on getting the scrollbar width for any browser, you can use it as a function:
How can I get the browser's scrollbar sizes?
and if you're woried about leaving the white space if the scrollbar isn't showing, you can force it with css:
body {
overflow-y: scroll;
}
Related
I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran
The image is background image to the body.
When the off-canvas menu is opened, the background image shifts.
I will like to keep the background image to stay in the exact location where it was before opening the background image.
You will notice the following css is there for the body
body.has-background {
background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}
When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?
Combining the two images into one is not an option for our case at this moment.
Also, to replicate,
Go to the link using any browser in Desktop
scroll a bit down the page.
Open the off-canvas menu (the one on the left-hand top side)
You will notice the shift of the background
If i've understood your problem correctly then the following should fix it.
Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using #media (min-width: 1200px).
Make the following declaration additions to the following selectors:
.disabledInteraction {
position: relative;
}
(or delete the position: fixed; from .disabledInteraction)
and then:
.header-fixed .site-wrapper {
margin-top: 0 !important;
}
The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.
The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.
Hope this helps!
As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).
What you need to do is append a scroll once the sidebar is open.
I had a play with your website and it works, however there must be some javascript which removes the scroll bar.
I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.
Selector:
body > div.site-wrapper.off-canvas-menu-overlay
Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.
I guess you mean the "hidden" menu on the left side of the page.
The background shifts because the scrollbar is removed when you open the menu.
You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.
I wonder if there is a way, via css or javascript, to force the scrollbar to appear on top of the website content (like z-index 9999), instead of moving all the elements to the left ?
My design include a blank space on the left no matter the resolution or screen size, so it would not be a problem, compared to the constant move left/move right imposed by the scrollbar when it appear/disappear.
If not I will simply get with the overflow-y:scroll method, but another solution would be good if possible :)
Thank you for your response !
As Mike 'Pomax' Kamermans has already mentioned... the scrollbar moving content around is pretty basic browser behavior which should not really bother anyone. Nonetheless, we can make it appear as though the scrollbar appears above the content by using some js or jquery.
The idea would be to add padding to replace the scrollbar while your content is not overflowing. So for example:
// If there is no scrollbar, add some padding to replace it.
if ($(document).height() > $(window).height()) {
$('body').css('padding', 'none');
} else {
$('body').css('padding', '0 '+scrollbarwidth+'px 0 0');
}
See this jsfiddle for a working example.
Note: There is some flickering while resizing that I could not fix. It seems to have something to do with the window width. Maybe someone else can figure out what is causing this.
I got a html page with a sliding panel on the right. This panel is 200px wide, position: fixed, and its position is initially set to right: -100px (halfway outside of the clientArea). Overflow-x is set to hidden for body, html (css), and the panel accepts mouseover events and drop events. On mouse over, the panel slides to right: 0.
If I drag a draggable element on this panel, the panel correctly slides to left, but the window starts to scroll to right, which is an unwanted behaviour.
I also tried a javascript solution as described here: Disable horizontal scroll with JavaScript
but is's a bad workaround because it make the clientArea start flickering.
What is the best way to completely disable horizontal scrolling? Possibly a cross browser solution.
Thanks
Update:
It's not the sliding panel causing the issue, but the helper object of the draggable element (I'm using jquery-ui), which is anchored to the mouse position at top left while dragging. Imagine the helper object as a div 200x100px. When dragged to the rightmost part of the window area, the issue shows up scrolling the window to the right, instead of clipping the helper (and not scroll the window). I sort of manage this by anchoring the mouse to the top right corner of the helper during the drag operation, but I'm still curious if there is any way to completely disable the horizontal scroll of the window. I supposed the helper object to be completely "detached" from the page flow (as happens using position: absolute in css), but apparently it's not.
I ended up changing my initial requirements and thus the page design.
And what if you do not place the panel at right: -100px, but give it a width of 100px and place it at right: 0px?
Then on mouseover animate the width to 200px. It still feels like a slide. I don't know if the content of your panel allows the change of the width, but maybe you can give the panel an overflow: hidden too.
i want to create a grey out as that of gmail when we try to upload an exe.
the grey out screen should cover the whole screen even the scrollbars, the scrollbars should be visible through it but disabled
how this can be achieved using javascript and css
please dont tell me to set the overflow of body to hidden.
It only works if you wrap your whole page inside a div and set this div to allow scrolling but disallow the body from scrolling (or use iframes).
In gmail, the body has overflow:hidden. The scrollbars you see belong to an iframe with id canvas_frame.
Did you try looking at the gmail page, with a tool like Firebug, when it's greyed out this way ?
It'll allow you to see exactly how they do it ;-)
Apparently, after a quick look, it seems they're using a <div> such as this one :
<div class="Kj-JD-Jh" style="opacity: 0.5; width: 1560px; height: 366px;"></div>
The interesting thing here is that this 1560px is bigger than the visible area of my screen : it includes the right scroll bar.
Top level Scrollbars are browser components and not part of the canvas. Thus it is not possible to grey them out. You can only grey out scrollbars that are part of the HTML view.
Otherwise see this
CSS/JavaScript Use Div to grey out section of page
I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...