We Keep Coding

fullpage.js - Add dynamic section in between sections on click

I created a on click function to create a new section and place it under the previous section, then calls in content from another file and scrolls to it. I can get it working but the problem lies when I bring in the content the JS does not recognize the new section and does not adjust it with scrolloverFlow. Here is the code that I'm using to make this happen. I know I'm supposed to destroy and rebuild it but I can't get it to rebuild to adjust the new height in the newly created section. Any help would be great.
HTML:
<div id="fullpage">
<div class="section" id="section0">Sec0</div>
<div class="section" id="section1">Sec1
<ul>
<li><span id="addSection">Add Section</span></li>
</ul>
</div>
<div class="section"></div>
</div>
JS:
$(document).ready(function(){
function fullPageInit() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollOverflow: true,
});
};
fullPageInit();
$(document).on('click', '#addSection', function(){
if($('#section2').length) {
$('#section2').remove();
}
$('#section1').after('<div class="section" id="section2">New Content goes here</div>');
$('#section2').load('content.php);
$.fn.fullpage.reBuild();
var activeSec = $('.fp-section.active').index();
$.fn.fullpage.destroy('all');
$('.section').eq(activeSec).addClass('active');
$('#section2').fadeIn('fast', function(){
setTimeout(function(){
fullPageInit();
$.fn.fullpage.moveSectionDown();
}, 0);
});
});
});

Thanks for commenting, that's what helped me get started. But I cant seem to figure out how to get the scrollOverflow working on the new section being created.
Use the reBuild function for it just after adding the section.
$.fn.fullpage.reBuild();
As detailed in the docs:
Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.
Updated
You probably need to use the fullPageInitafter the fadeIn took takes place.
$('#section2').fadeIn("normal", function() {
fullPageInit();
$.fn.fullpage.moveSectionDown();
});

How do I dynamically adding a collapsible div element on a web form

I have a html file whose skeleton is as follows:
<div id ="QBForm">
<h3>Query1</h3>
<div class ="QBSubForm">...</div>
</div>
I have a "AddQuery" button and on clicking that, I want to add another subform to the existing form and here's how I do that:
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
});
And I have this in my jQuery Ready() function:
$("#QBForm").accordion();
But every time, I click on my add query button, the subform is added but it is not collapsible, its just its own static thing.
How do I add a sub-form and make each sub-form collapsible?

You should try passing accordion with active: false and collapsible: true.
I haven't really tested the code below, but try:
$("#QBForm").accordion({ active: false, collapsible: true });
if you do not set collapsible to true, jQuery UI will set at least one section open.

Use refresh method of accordion to include dynamically added content.
Then if you want the new section opened you could also set the last panel to active by using -1 as index
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
/* only refresh*/
$("#QBForm").accordion('refresh');
/* refresh and set new panel active */
$("#QBForm").accordion('refresh').accordion( "option", "active", -1 );;
});
Accordion Refresh docs()

How to initialize Bootstrap script plugins on callback (Infinite Scroll)

I'm working on a website and everything is going great: the elements are rendering and responding to clicks and hovers as I'd like them to, courtesy of Bootplus [a derivative of Bootstrap], the elements are all being put into place correctly, courtesy of Isotope, and elements are even being put into place correctly by Isotope after pagination using Infinite Scroll, courtesy of a callback in the Infinite Scroll function.
However nothing after the first page responds entirely correctly to being clicked in the way that the first page's worth does. (They actually do open as they should (Collapse plugin), but currently as soon as the collapsible comment toggle is selected the website scrolls down so that the toggle button clicked is barely in sight at the top.)
So how do I use a callback function [or something] so that elements loaded by Infinite Scroll behave the same as the original page's elements??????
Current Script:
$(function(){
var $container = $('#ISCONTAINER');
$container.isotope({
itemSelector : '.shifty-item'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)',
bufferPx:900,
itemSelector : '.shifty-item', // selector for all items you'll retrieve
loading: {msgText:"Patience is a virtue.",
finishedMsg: 'Out of new things to show you today.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}//SOMEWHERE HERE IS WHERE I NEED TO ADD IN WHATEVER FUNCTION ISN'T FIRING YET TO MAKE BEHAVIOR AWESOME
);
});

NavBar Item in Footer

I have one problem need help.
My jquery mobile page, if I put the Navbar content static into the page:
<div data-role="footer">
<div id='footerButton' data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
The navbar button display Horizontally button nicely and automatically equal the width of each button.
But if I leave the Navbar DIV empty and dynamically insert the UL and LI:
$('#userMainPage').on('pagebeforecreate', function() {
$('#footerButton').html('<ul><li>One</li><li>Two</li><li>Three</li></ul>');
});
With the above code, the Item will not listed as Horizontal. It will became Vertical li without button styling.
May I know what is wrong with my code to insert the content dynamically? Please advice, thank you.

The pagebeforecreate event doesn't emit on page, it emits on document. Thus, you can't bind it to a specific page.
/* has no effect on #pageID */
$("#pageID").on("pagebeforecreate", function (event)
$(document).on("pagebeforecreate", "#pageID", function (event)
/* to know which page is going to be created */
$(document).on("pagebeforecreate", function (event) {
console.log(event.target);
});
/* this works, but you'll need to enhance dynamically added elements manually */
$(document).on("pagecreate", "#pageID", function (event) {
/* do something */
$("footer").append( $("<div data-role='navbar'></div>").navbar() );
});
In light of the above, if you want to perform something on pagebeforecreate event based on page that is being created:
$(document).on("pagebeforecreate", function (event) {
var page = event.target.id;
if(page == "pageID") {
/* do something */
}
});
Demo
However, since pagecreate and pagebeforecreate fires ONCE per page, if you want to change Navbar every time a specific page is shown, you need to utilize pageContainer events, e.g. pagecontainershow. Those events don't emit on a specific page as well, so you need to retrieve ActivePage's id.
Note that you will also need to inject "fresh/new" Navbar since this widget has no refresh methods.
$(document).on('pagecontainershow', function (event) {
/* retrieve ID of active page */
var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if (page == "page1") {
$('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>One</a></li><li><a href='#'>Two</a></li><li><a href='#'>Three</a></li></ul></div>").navbar());
} else {
$('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>Four</a></li><li><a href='#'>Five</a></li><li><a href='#'>Six</a></li></ul></div>").navbar());
}
});
Demo
Enhancement / manual initialization of Widget:
.navbar() is enhancement method of data-role="navbar" when it is injected dynamically. Static elements, e.g. Navbar, are auto-initialized when jQM framework is first initialized, or when they are retrieved via Ajax. However, when elements are dynamically injected, they need to be initialized manually, .navbar() is used for Navbar widget.

Initializing a jquery mobile widget on a page gives "Cannot read property 'jQuery....' of undefined"

Fiddle Example
The site has 2 (or more) pages defined in HTML like this:
<div id="page1" data-role="page">
<div data-role="content" id="page1-content">
Next Page
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content" id="page2-content">
Go Back
</div>
</div>
In Javascript - I am at once initializing everything:
$(function(){
$('#page1-content, #page2-content').each(function(){
var ul = $('<ul>');
$.each(['one','two','three'], function(item){
ul.append('<li>'+item+'</li>');
});
ul.appendTo(this).listview();
});
});
But the page only initializes the list view on the 1st page, and the list view on the 2nd (and not currently visible) page does not initialize and gives me an error.
Cannot read property 'jQuery19107783124386332929' of undefined
What am I doing wrong?
I really want to be able to start fetching the data and at least create the DOM in every page at once in the beginning, rather than waiting till the user clicks "Next Page".
Also - the list view on the first page is overlapping the "Next" button. I see this overlapping often and would like to fix/understand this too.

Page data-role=page in jQuery Mobile passes through different stages, as shown in the diagram below.
Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html
Enhancing widgets manually should be called on active page only, otherwise it will result in a error.
To do add fresh elements on different pages, you need to do this when pagecreate or pagebeforecreate events occur, without the need to call any enhancement method. As the widget will be auto-initialized/enhanced during that stage.
Also, you have a mistake in your code where you didn't close ul tag. However, this didn't cause the error.
The below code shows how to add elements to different pages without the need to call any enhancement method manually.
$(document).on("pagecreate", "[data-role=page]", function (e) {
var ul = $('<ul data-role="listview" data-inset="true"></ul>'),
html = '';
$.each(['one', 'two', 'three'], function (item) {
html += '<li>' + item + '</li>';
});
ul.append(html);
$('[data-role=content]', this).append(ul);
});
Demo

This might be a particular issue of the versions combination you're using, but before checking that, I would try delegating on the 'pageinit' event instead of the regular document ready.
Please try this:
$(document).on('pageinit',function(){
$('#page1-content, #page2-content').each(function(){
var ul = $('<ul>');
$.each(['one','two','three'], function(item){
ul.append('<li>'+item+'</li>');
});
ul.appendTo(this).listview();
});
});