I'm now building a webapp for iPhone, and I have problem with the scrolling on an ajax compoment.
Basically, I have a php page which is changed according to the function clicked on a button, and this page's size isn't a set height, so because of that I added the iScroll script which allows me to make it scrollable (because I needed a fixed header & footer), and what happens now, is that because the page is being loaded dynamically, the iScroll doesn't know it's height - so it gets stuck, I tried using refresh function on different pages, i'm afraid it doesn't work.
Ok, so I've found a solution:
using jQuery, simply write this below your scroller div, and it should work.
<script>$('#scroller').css('height', (window.innerHeight - 1) + 'px');</script>
that is for those who use iScroll 4.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I am using the Pikachoose plugin for the image galleries on my website (http://www.clare-eileen-callahan.com/inthehangar/). Everything seems to be working except for the thumbnail carousel. They just pile up on the bottom of the page, where I want the carousel to be horizontally scrollable, so that only x amount of thumbnails are visible. I can't figure out what is going on with the CSS and Javascript that is preventing it from displaying as it should.
Here is the code I'm using: http://codepen.io/anon/pen/ybExq
Sorry there is a lot of it for the plug in!
For whatever reason, there was an unexpected element in the original jquery carousel script. I was able to find it by breaking apart the script into short lines and referring back to the console.
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I have implemented a prettyphoto lightbox for a inline-div which will require custom scrollbar for its lengthy content. So used jscrollpane to implement custom scroll.
They individually work in background but when the inline-div is called in prettyphoto lightbox the drag / scroll does not work.
Please help.
I have update the scrollpane, updated the prettyphoto, even used many lightbox and other scrolling js but no success.
I'm currently trying to figure out the same thing. I've gotten as far is might involve this http://www.kelvinluck.com/assets/jquery/jScrollPane/ajax_example.html and the prettyPhoto changepicturecallback function (http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/), but haven't gotten the two to successfully work together.
I'm having a problem with the canvas height in my app. I've got it set to FB.Canvas.setAutoGrow(); but when I'm loading a page into a div via ajax, it's not picking up the canvas height.
What happens is if the page I'm loading is quite long, then I load a page into the same div which is smaller, the canvas height stays the same as the larger page. It's not resizing the scrollbars to fit the smaller page.
Any help would be appreciated.
Also make sure you have a FB.init(); before your setAutoGrow();
i just had the same problem, FB.Canvas.setAutoGrow() did not work. in the end it was a weird problem, i had a javascript variable named "name". renamed it to "username" and now it works perfectly fine.
the rest did not show any error and my code worked without any problems, only the resizing did not work while i had "name". so maybe you should also just try to rename variables and/or functions...