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();
});
Related
I've searched a lot to try and solve my problem. I'm building a website locally using the Fullpage.js library. Fullpage.js gives the body a class which refers to the section that is in the viewport. On the second last section I have hidden the dotted slider navigation with the css code below. I've made a simplified html structure.
<body>
<div class="section-1">
.. some content
</div>
<div class="section-2">
.. some content
</div>
<div class="section-3">
.. some content
</div>
<div class="section-4">
.. some content
</div>
<div class="section-5">
.. slider with the navigation turned off when this section is in viewport, see used css.
</div>
<div class="sectie-footer">
.. footer, navigation above reappears because this section is in viewport and css doesn't apply anymore; Body has now class fp-viewing-section-footer.
</div>
</body>
The CSS:
CSS that applies to sectie-5 but not when footer is in viewport.
body.fp-viewing-section-5-0 .fp-slidesNav.fp-bottom {
display:none;
}
Everything works fine but when trying to write a small piece of jQuery code, that hides this navigation element on sectie-5, when the sectie-footer is in viewport, and the body has the class which refers to the footer. I can't get it to work. It shows no errors but the code doesn't do what I thought it would.
I've tried checking if the body .hassClass and if so adding a class with .addClass. I tried .hide and .show, also no effect. I wrote:
jQuery(document).ready(function() {
function hideonfooter() {
jQuery('.fp-slidesNav.fp-bottom').hide();
};
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
hideonfooter();
}});
And some code I found in an earlier question on Stackoverflow (class jsnoshow has display:none):
jQuery("fp-slidesNav").toggleClass(function() {
if ( jQuery("body").hasClass( "fp-viewing-section-footer" ) ) {
return "jsnoshow";
} else {
return "";
}
});
I also tried:
jQuery(document).ready(function() {
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
.hide('.fp-slidesNav .fp-bottom');
}});
I hope you guys want to help me out.
Please check how to use of fullPage.js state classes or callbacks for that.
Also, do not forget to check the callbacks examples in the examples folder.
You might also want to check this video tutorial I did making use of the state classes to create animations.
For example:
new fullpage('#fullpage', {
afterLoad: function(origin, destination, direction){
if(destination.index == 4){
alert("Section 4 ended loading");
}
}
});
Instead of the alert, you can run your code there on the section that you want by using its index in the callback.
I have been trying every combination under the sun of parent()/children()/find() and selector syntax to .show() an element of my webpage that i hid on document ready, but I just can't get it to work! I'd really appreciate it if someone could take a look..
If you go to the portfolio section you can see it live here -> http://holly.im/ .
In any case the html looks something like this:
<div id="portfolio">
<h1>Heading</h1>
<div class ="little_column">
<div class="project">
click
</div>
</div>
<div id="c++_games_engine_construction" class="big_column">
<?php include "projects/C++_game_engine_construction.php"; ?>
</div>
</div>
And the relevant jquery:
$(document).ready(function() {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function(){
$('.project').click(function () {
var selectedProject =
$(this).children('a.projlink').attr('href');
$(this).parent().parent().find(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
That's it really, thanks!
Having the character + in the ID of an element causes jQuery to become confused because the + character is reserved for the Next Adjacent Selector.
If you remove those characters from your code, it works just fine. As was mentioned in one of the comments to this answer, since the href is essentially the ID of the item to be shown, you can select it directly.
HTML
<div id="portfolio" class="section">
<h1>Heading</h1>
<div class="little_column">
<div class="project"> click
</div>
</div>
<div id="c_games_engine_construction" class="big_column">
I'm hidden at first!
</div>
</div>
JS
$(document).ready(function () {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function () {
$('.project').click(function () {
var selectedProject = $(this).children('a.projlink').attr('href');
$(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
jsfiddle
The issue is with the + in the selector. It needs to be escaped because it has special meaning in the Selectors API (and is invalid for an ID).
If you removed the ++ from the href and the id, it works.
Alternately, you can do .replace(/\+/g, "\\+")
var selectedProject = $(this).children('a.projlink').attr('href').replace(/\+/g, "\\+")
Off topic: You don't need two .ready() calls, which is what you have, but using different syntax.
As others have mentioned, your problem are the + characters mistreated by jQuery. So the simple solution is: do not use jQuery - or at least, not for the selector thing. Since every target you have is an id selector, we can easily change it to
$(document).ready(function() {
$('#portfolio').find('.big_column').hide();
$('.project').click(function () {
var selectedProject = $(this).find('a').attr('href'); // a littebit simplified
var el = document.getElementById(selectedProject.slice(1));
$(el).show();
return false;
});
});
Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!
You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/
Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.
jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});
I have a menu that is animated to slide across the page when triggered by clicking on an image of an arrow. I'd like to switch the arrow to a different image source once the menu's animation has completed, and then return back to the original file when the menu has been closed.
Best way to do this?
Thank you!
HTML:
<div id="slider">
<div id="trigger_right">
<img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
</div>
<div class="trans" id="overlay"></div>
<div id="content">
<p>This is content</p>
</div>
</div>
Javascript:
$(function() {
$('#trigger_right').toggle(function (){
$('#slider').animate({'width':'100%'}, 1500);
$('.arrow_small').attr('src','images/right_small.png');
}, function() {
$('#slider').animate({'width':'30px'}, 1500);
$('.arrow_small').attr('src','images/left_small.png');
});
});
jQuery's .animate has a callback that is called when the animate is finished so you can use that to change the images at the appropriate time:
$(function() {
$('#trigger_right').toggle(function () {
$('#slider').animate({'width':'100%'}, 1500, function() {
$('.arrow_small').attr('src','images/right_small.png');
});
}, function() {
$('#slider').animate({'width':'30px'}, 1500, function() {
$('.arrow_small').attr('src','images/left_small.png');
});
});
});
The above assumes that you only have one .arrow_small element of course. Using a class for the arrow and a sprite sheet for the images would be better but that would only require changing the $('.arrow_small').attr() parts to $('.arrow_small').toggleClass() calls as Rob suggests.
If I understand correctly, you only want the images to change after the menu animation has completed.
One way, perhaps not the best, would be to make the JavaScript that changes the src attribute occur after a set period of time using setTimeout(). Instead of:
$('.arrow_small').attr('src','images/right_small.png');
You would have:
setTimeout("toggleImages()", 1500);
function toggleImages(){
// some code to toggle them
}
I haven't tested this, but give it a try. Hope it helps!
I would suggest you set the images up in CSS as classes and then do something like:
.toggleClass("right-small left-small");
I'm using JQTOUCH using the AJAX example provided in the demo:
$('#customers').bind('pageAnimationEnd', function(e, info){
if (!$(this).data('loaded')) { // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
$('.loadingscreen').css({'display':'block'});
$(this).append($('<div> </div>'). // Append a placeholder in case the remote HTML takes its sweet time making it back
load('/mobile/ajax/customers/ .info', function() { // Overwrite the "Loading" placeholder text with the remote HTML
$(this).parent().data('loaded', true); // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
$('.loadingscreen').css({'display':'none'});
}));
}
});
This then returns a nice UL which outputs just fine..
<ul class="edgetoedge">
<li class="viewaction" id="715">
<span class="Title">Lorem Ipsum is simply dummy text of the...</span>
<div class="meta">
<span class="dateAdded"> 1d ago </span>
</div>
</li>
</ul>
This is where I get stuck. How can I then make it so when you click on the link above, it loads the URL wrapped near the class="Title" ?
I'd like it to load JQTouch like the first code example.
I tried the following two things without success:
$('.viewaction').bind('click', function() {
alert('wow');
});
$('.viewaction').live('pageAnimationEnd', function(e, info){
});
Thank you!
Put this one somewhere outside your first bind function
$("span[class=Title]").delegate("a", "click", function(){
alert('LOLCAT');
});