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.
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 have a div with with the following css:
.long-table-container {
overflow-x: auto;
}
Instead of attaching scrollbars to .long-table-container, I would like to instead use the browser's scrollbars to do the job. Is this possible?
The reason I need to do this is because I have a long table in .long-table-container and the only way to scroll left and right is by scrolling all the way to the bottom of the page and then moving horizontal scroller of .long-table-container which is a pain for any user.
Fiddle: http://jsfiddle.net/ox5qzp1x/
You can create additional scrollable element with fixed position at bottom of the page and connect these two elements, like in question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window
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;
}
I need a small widget on a web page such that when the page loads in a maximized window, the element appears to be inline.
When the vertical scroll bar moves down, the element scrolls up until it hits the top visible line of the browser control. Thereafter if you scroll further down, this elements sticks at the top border of the browser.
In other words, if there is enough screen area and if it can be visible on the current window, it appears inline and the moment its inline position goes out of the visible window due to scroll, this elements sticks to the border it hit and stays there until the scroll brings its inline position back into the visible window.
I need to achieve this purely via CSS only - no javascript. Any idea how this could be done?
Thanks in advance for looking this post up.
You can make your view with position: fixed, so that it remains on the visible area.
.selector {
position: fixed;
/* rest required styling */
}
I'm considering adding drag and drop functionality to my Webforms application.
One consideration is that the drag source and drop target may be far enough away from each other to require scrolling. So I thought a cool UI would be for an overlay to appear at the top and bottom of the browser window when the user starts to drag.
This overlay would be a shaded area with an arrow (the top overlay would have an Up arrow and the bottom overlay would have a Down arrow). When the user drags over the overlay, the window would scroll in that direction.
Questions:
Does anyone have any experience with anything like this? Do you know if it can be done reliably across browsers?
Can anyone recommend a jQuery plugin that could do the heavy lifting?
Any other thoughts or recommendations?
I got also some issues with that functionality. I solved it by styling my draggable element with margin: 0 and padding: 0 and make it consistent with a width and a height properties.
More I used margin and padding properties on draggable, sortable and droppable elements more I had issues.
Hope it will help you !