I have a three-column layout of three news scrollers (using Tiny Scrollbar http://baijs.nl/tinyscrollbar/).
Business needs dictate that this page function in IE7. To further complicate things, each div contains an iFrame, as each of these scrollers had to be a separate HTML file. If I position the divs as relative, when a user clicks on the scrollbar to scroll, the entire frame shifts to the left a few pixels. Holding down and moving the mouse will move it side to side. When I position the divs as fixed, the frame stays in place but it's content (links, scrolling, etc.) are completely disabled.
I apologize in advance, I'm fairly new to these things and learning as I go. Any suggestions?
I guess that content shifts to left because browser's scrollbar appears. You can disable scrollbars of iframe. Add some style to iframe tag like the following:
<iframe style="overflow:hidden;"></iframe>
If it is not enough, add some attributes to the body tag of the page which is loaded into iframe like:
<body style="overflow:hidden;" scroll="no">
Related
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.
Set position:fixed for parent element of image.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.
I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.
I have a iframe(https) within a div. The div(lightbox overlay) has overflow-y:auto;overflow-x:hidden; which causes a vertical scroll bar to appear. the content of iframe is much bigger than the height of overlay and the overlay scroll bar doesn't scroll the whole iframe content.the iframe scrollbar is hidden by the overlay scrollbar.I want to scroll over the whole iframe content. I face this issue only in IE.
The overlay is used at many places so I cannot directly modify its styles.
Had anyone faced this kind of problem.
Please assist if anyone has any idea how to hide the overlay scrollbar in order to view the iframe scroll bar.
I've got this fixed by playing around with the styles.
I created a new style 'div.iframe-overlay' in css, which is same as the style 'div.overlay' but without overflow-y:auto;overflow-x:hidden;
Then toggle the class of div from 'overlay' to 'iframe-overlay' only for IE browser.
This helped the scroll bar to appear properly.