I need what this...
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance
The following seems to have worked:
$('#gatewayDimmer').css({display:'block', position:'fixed'});
Related
I found a carousel (https://codepen.io/paulnoble/pen/yVyQxv) that has some awesome transitions and thought it'd be nice to integrate into a project I'm working on: https://joshrodg.com/halloffame/
My code is here: https://codepen.io/joshrodgers/pen/MWBPXBx
The responsiveness of the design needed to be adjusted slightly because to me having the content split (left, right) doesn't quite work that well on smaller screens (like phones) - it'd make it almost impossible to read. So, my idea was just to remove the right-side content all together.
I have that working and it looks exactly as I expect, except one thing...
Basically, there is vertical paging on the right-side of the slideshow. When you click on the next circle it rotates forward to the next slide, when you click on the previous circle, it rotates backwards to the previous slide. On a desktop screen (larger than 900px) the paging area stays on top of the rotating images, which makes the slideshow rotation look really nice. On my iPhone, and I'm guessing on other small screens, the rotating images appear to rotate on top of the paging area and then it re-appears.
I'm sure this is a simple tweak, but is there a way to keep the paging area on top while rotating through the images on a desktop and smaller screen like an iPhone?
This is also an issue on the original carousel, so I'm not sure how to fix it.
The paging area does have a z-index: 1 but for some reason the images still rotate on top of the paging area. I even tried setting it higher: z-index: 1000, but that didn't seem to do anything.
Anyone have any ideas?
Thanks
Josh
After looking into this a little more, I was able to find a solution!
My carousel__control div is what was controlling the vertical pagination, this was in carousel container and rightfully so, as it was controlling the position of everything inside. However, this also caused the issues I described, not really sure why.
All I did to fix this was move carousel__control out of the carousel container - basically right above it in the document. Then had to set my margins to match and adjust it's position. I couldn't keep the margin: auto and top: 0. Once I adjusted those two properties, everything started working as expected.
I have updated the pen here: https://codepen.io/joshrodgers/pen/MWBPXBx
Thanks,
Josh
I have a roadmap component where bars are arranged by time in horizontal axis (and by anything depending on filters for vertical axis)
I am trying to scroll to an HTMLElement using scrollIntoView. The scrolling involves both vertical and horizontal scrolling.
I am using scrollIntoView method.
roadmapItemEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'auto' });
It generally works as expected. However, when it autoscrolls to a bar in the right side of the current activeElement, the whole page shifts to the left, exposing white space. This happens only in Chrome.
(Note: I tried all combinations of the scrollIntoView options. Nothing changed)
Normal:
After autoscroll to a bar on the right:
(Note: This only gets fixed if I autoscroll to a bar on the left)
I unfortunately cannot share much code, thus I don't expect complete hand-holding here. However, I just need to know what to look for. Here are my questions:
What is this white space part of exactly? (body?) Can it be rid of?
In what situations does this generally occur?
Are there alternatives to scrollIntoView that could be more suitable for such autoscrolling (more fine-tuned for horizontal scroll perhaps?)?
Probable reason why only Chrome is affected.
I have a modal that has a horizontal scrollbar when the modal is resized on small screens. When that horizontal scrollbar appears, the vertical scrollbar disappears because it is stuck to the right. I would like the vertical scrollbar to stay at the right side of the modal while I scroll horizontally to the right. A picture of this behavior is show below. I want the vertical scrollbar stuck on the right while I horizontally scroll to the right rather than only being present when I finish horizontally scrolling to the right.
Is there a way to accomplish this? I believe another issue is that on Windows devices the scrollbar takes up space unlike in Mac devices.
You can customize the scrollbar a bit (see https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp), however, I don't know if you can change the position.
I did find a javascript scrollbar-plugin, which I haven't tried, but maybe it is worth a try? You can find it at https://grsmto.github.io/simplebar/.
I have 2 columns of content, the left content has some fixed content at the top with some text at the bottom, the right column is a big long list of text & small images. Currently when I vertically scroll the browser the content below the fixed content on the left scrolls with the content on the right.
What I want is, if the content on the left fits within the browse window, not to scroll, if it does have enough content, scroll with the right column, but stop before all the content hides behind the fixed content, but without stopping the right column from scrolling.
Not sure if this is even possible, can't recall having seen it done before.
Thanks,
Chuck
something like this?: http://jsfiddle.net/S3xda/
things to be careful of:
only tested in the latest FF and chrome
not tested with contents of different length
in that example, i'm using a fixed height wrapper, as i needed to attach the scroll() event to it but you could use window on your own page.
ZenMaster has the right idea. The other part of this I would do "overflow-y: auto" on the fixed div, this will make it have its own scroll bar if the content you have in it is higher than the browser window.
What else you can do is just absolutely position the stuff at the top, to top, left and then position the stuff at the bottom for bottom, left - And dont do anything more than a total of 500px high in that box and the content should never need to be scrolled, the bottom stuff will always be at the bottom of the window and likewise the top stuff will always be at the top, while your user can scroll the big section up and down with the other side staying constant and static on screen...
Well zenmaster removed his answer for some reason, I thought it was pretty good.
anyhow, you want the one column to either be position: fixed or you could do it with absolute positioning. Set the height to 100% (body must also be 100% and any other containers, you need the 100% height to bubble all the way to the "window" and not some container in between. Also if you do position absolute, remember that the container of the absolute element needs to be relative if you are giving positioning coordinates to the absolute element.
I would prefer a plugin like THIS in that way you get a scroll bar for each and not scrolling on both. GL & HF
And btw this works in all browsers ie7-9 ff,chrome,safari,opera and so on (even works on mobiles)
I had a same problem as you and finally I have found this jQuery plugin http://dhlavaty.github.io/jQuery-SmartColumnScroller/ . It has nice demo which shows exactly the solution. It moves all columns on scroll. However when a column content ends the column stops while other still go. TADA!
HI all,
I have and issue that looks like it's due to IE's box model bug, but I'm not quite sure how to solve it in dojo.
I have a ContentPane which I put into a typical AccordionContainer, and static content is palced in the ContentPane. On all other browsers, if the content in the ContentPane overflows the bottom, a vertical scrollbar appears as we would expect. However, in IE, a horizontal scrollbar appears as well when the vertical scrollbar appears.
It seems evident that the ContentPane in IE is not taking the size of the vertical scrollbars into account, so when they show up, it is adding a horizontal scrollbar to accomodate them.
I would like a horizontal scrollbar to appear when it's appropriate, not simply because a vertical scrollbar was added.
Any idea how to accomplish this cleanly in dojo?
You might try playing with overflow, overflow-x and overflow-y in CSS.
Try adding overflow-x:auto and overflow-y:hidden in your contentpane.