So I found a problem with my website so have added in
“-webkit-overflow-scrolling: touch”
So that the scrolling left-right now works when content overflows (all the content is within an iframe). However I've noticed that when you scroll either vertically or horizontally within this iframe any content that wasn't initially draw on the page is not shown, it's just white.
Is there something I'm missing?
http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
This pretty much sums it up, and provides one pretty poor but usable implementation. The fault lies with Apple and this will be a temporary workaround.
Related
I've integrated a Dash dashboard into a Flask application. Basically I've sticked to this medium and tailored it to my needs. Everything works as expected and the dashboard's content shows up as an iframe element. My problem is that the whole iframe situation feels a little hacky since the website has two scroll bars. The outer one for the main content and the inner one for the iframe. The UX is just not perfect as the iframe content sometimes starts scrolling before it's entirely visible.
There's one obvious solution to this problem that sadly isn't suitable for my dashboard. I could just increase the height of the iframe element until it fits the entire dashboard. That way I would get rid of the scrollbar. However, I have a sticky element in my dashboard that follows the user from a certain element onwards. Getting rid of the iframe's scrollbar would break the sticky element and I would really like to keep it.
Another solution I thought about that I'm just not capable of developing on my own is the following:
Enable main scrollbar and disable iframe scrollbar if the iframe element is not entirely visible. If the iframe element is entirely visible check if the iframe's scrollbar is at its topmost/bottommost position and enable upwards/downwards scrolling while disabling downwards/upwards scrolling.
I guess (hope) it's a lot harder to phrase than to actually code it. So I prepared some top-notch powerpoint visuals for easier understanding.
Blue background: main content
Red bordered rectangle: current view (scrollable)
Yellow rectangle: iframe (scrollabe)
Is there a way to achieve this behavior? I'm not particularly good at js & css so I would really appreciate if you could help me out.
Cheers
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE
I am working on a website and added an animation of clouds flowing using adobe edge animation.
http://avuedesigns.com/iaq/
I have created a thread over at the adobe community (http://forums.adobe.com/thread/1128782) and it seems that my code to make it responsive, and the overflow are correctly setup.
So basically I have no idea why WordPress is either breaking it. Or why my little bit of code thinks the website is wider than it really is. Maybe fresh eyes can see something I am not.
correct your container has an overflow attribute most likely set to scroll within your css file.
set this to;
overflow: hidden;
Well, wordpress is just a cms engine that spits out html - it is hardly to blame. I do see that the width keeps changing and the horiz scroll bar appears and disappears which is definitely not optimal.
I think the starting place is with the main container div....do you have overflow:hidden set? This should allow your clouds to appear outside of the visible pane without forcing the div to change width.
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?
I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.
There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?
Cheers,
Phil.
It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.
Edit
I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3
Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html
That is created using JavaScript.
I can see by using FireBug to inspect the div#stalker that it changes class and style attributes when you are scrolling.