I have a fullpage.js site setup here.
The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes), for it to be a scrollable section.
The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section.
Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in that section without having the resize the window manually?
It's worth noting, I've been able to get the same thing working using the fullpage.js example page for scrollOverflow. That is setup right here. However, I haven't been able to figure out why it works there, but not in my original page!
That's probably because the content of your section or slide is being generated (or modified somehow) after fullPage.js gets initialized.
You should have used that javascript code inside the afterRender callback as fullPage.js documentation details:
afterRender()
This callback is fired just after the structure of the page is
generated. This is the callback you want to use to initialize other
plugins or fire any code which requires the document to be ready (as
this plugin modifies the DOM to create the resulting structure).
In any case, I believe you can solve it by calling the method reBuild provided by fullPage.js.
You can try to use it in the afterRender callback or directly after the code you use to generate the layout/content of the section to which you want to apply the scrollOverflow option.
$('#fullpage').fullpage({
//your options
});
//code used to generate the content of your section
//...
//re-building fullPage.js to detect the current content of each section
$.fn.fullpage.reBuild();
If that doesn't work, you can always try to use a timeout which should also solve it with some delay:
setTimeout(function(){
$.fn.fullpage.reBuild();
}, 1000);
Related
I'm having a weird bug where load() is breaking my carousel.
I have a Slick Slider with 3 slides. You can click the NEXT button to move to the next slide. You can also click the slide itself and it loads content into the div of a cat and some text using:
$('.frame').load(url);
The bug is that after you view the loaded content and click BACK, the NEXT button no longer works. Somehow it breaks the nav. I've tried show() and hide() but that doesn't help.
Please see my codepen demo
And this is the url I'm loading into that demo if you find that useful.
Thanks for taking the time to help me :)
As I stated in a comment to your question, the reason your Slick Slider plugin stops working after you load the other document is because the other document is re-including the jQuery library into your top-level browsing context.
jQuery plugins make themselves accessible by defining a new method and then attaching it to the jQuery.prototype (aliased as jQuery.fn) object.
When you include the jQuery library into your document via a script tag, you can call console.log(jQuery.fn); and you will see an object with all of the convenient methods that make up the jQuery library.
After you have similarly included the Slick Slider library, you can again call console.log(jQuery.fn); and you can find that it has a method property named slick.
The problem is that when you load the document that resides at url that document is inserting a fresh script tag into your parent document whose src is jQuery. This causes a fresh loading of the jQuery library which obliterates your initial instance. If you call console.log(jQuery.fn.slick); at this point, you will find that it is undefined.
I have never before seen an entire HTML document (as opposed to a snippet of HTML) loaded into a div of another document. This is inserting elements into the body of your top-level document that should not be there, like <head> and <body>. I am actually surprised that this is causing so few issues for you.
The way documents are normally nested within other documents is by the use of an iframe. The document within the iframe will be its own sandbox, and its styles and scripts will not be in conflict with those in the parent frame.
You could implement an iframe into your project by replacing $('.frame').load(url); with something like the following:
var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);
I use the js-Plugin fullpage on my webpage and have a submit-button in the second section which should start a js-based demo-function. Unfortunately pressing the button just let's me jump back to section 1 without starting the function (or starting and immediately stopping it again, I'm not sure). This is the code:
HTML
<input type="submit" value="Start" id="btn1"/>
js
$('#btn1').click(function(){
$.WizDemo();
});
function WizDemo() {
some code;
};
From fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
From fullPage.js docs:
afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).
There you have your answer. Add the code in the afterRender callback.
OK, i got it.
<input type="submit"/>
reloads the page so you have to use
<input type="button"/>
which doesn't.
I found the answer here How do I make an HTML button not reload the page
I have set up a page using bootstrap. (http://ethnoma.org/about.html) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <head>).
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.
Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.
I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page http://ethnoma.org/about.html
I just came across this issue myself, so I thought I'd provide some explanation, and a possible solution, in case anyone else finds themselves in this bind.
First, scrollspy is working correctly. At the time that it computes the offsets of the various elements on the page, the images haven't loaded yet, so they have an effective height of 0. Later, when the images load, the browser determines their native dimensions, recalculates the page layout, and then repaints the page with the images. However, scrollspy is completely unaware that the page has been repainted, so it continues to use the stale offsets.
If you were to refresh scrollspy after all the images loaded, you'd find that the offsets would be correct. So, the question is how to do this.
One solution is to attach an onLoad event handler on every image, and then refresh scrollspy inside the handler. A simplified approach might look like this:
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
Here's a working jsfiddle example. Note that that image's load handler has to be registered before the image actually loads. Otherwise, it won't get fired. That's why I'm using an inline event handler here. A more elegant solution is left to the reader.
Came across this issue myself while trying to use the Scrollspy from Bootstrap, and it seems that the script doesn't take into account of the image's height while calculating, thus causing the Scrollspy to be in accurate.
I believe this is due to that the image doesn't have a height set to it. By inspecting the page, I have found that the floating images I have included in the page had the height set to auto, and when I've set it to a specific value after media queries in the CSS, my Scrollspy was working perfectly.
I have this jsfiddle.
When I move the script from the upper panel to the lower panel, it does not work any more.
And why can't I use jQuery to target the buttons? Now, I have to use vanilla JavaScript, because jQuery does not work.
Any ideas?
In JSFiddle, at the left panel screenshot, you can choose where to place the script. By default, it's wrapped in an onload event within the head. By default, the Mootools library is loaded.
The reason that the YouTube Player API does not work with the default settings is that the API expects a global onYouTubePlayerAPIReady event to be defined. When the code is wrapped in an onload event, the function isn't global any more.
The solution is to properly use JSFiddle: Use no wrap (body) and jQuery 1.7.2: http://jsfiddle.net/4WPmY/12/.
Another solution, though less nice than the recommended one, is to globally define onYouTubePlayerAPIReady by setting it as a property of window: http://jsfiddle.net/4WPmY/13/
window.onYouTubePlayerAPIReady = function () {
From the left pane of jsFiddle, in the section titled "Choose Framework" you need to change the first setting to no wrap (body) so the JS panel is run after the DOM is loaded. You should also change the second option to jQuery 1.7.2 if you wish to use that library.
Your fiddle, updated: http://jsfiddle.net/Marcel/4WPmY/11/
I am trying to implement the JScrollPane plugin on my website. Having taken a look through numerous FAQ/tutorials for this and double checked my scripts but cannot see where something is going wrong.
All of the scripts are being correctly referenced, I am calling the latest version of the JQuery library and I have the CSS being called before the scripts.
The page I am trying to implement this on is:
http://theindiecinema.com/walking-backwards/99 (click on the rate button on the right side of the tv)
To see the scrolling box that the JScrollPane should be being applied I have set up a duplicate page but with the JScrollPane stuff removed:
http://theindiecinema.com/testing-nopane
Please can I get some advice of how I can get this working.
Much Appreciated
Francis
Call jScrollPane on .commentslist when it's revealed (by clicking Rate), not on $(document)ready. jScrollPane is having trouble initializing while the target element's parent is hidden. You should only have to do this once, but it won't really even matter if you re-call it every time you show #comments.
Alternately, you could un-hide #comments in your external CSS, then on document-ready, first initialize jScrollPane on .commentslist and then hide #comments.