The Issue
Smoothstate.js keeps the <head> of the page that I was just on and injects it back into the home page when I navigate back to index.html.
For example: I click a link that takes me to proj1.html Then I want to leave that page by clicking the home link which directs back to index.html. Page directs back to home but the layout is broken because the home page <head> contains the contents from <head> of proj1.html..Thus making all my styles are broken on the home page.
Smoothstate is caching the <head> and I am not sure how to prevent this from happening...
I tried using the cache clearing method they have but no success. smoothState.clear();
Here is my JS
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 0,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onStart: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
Fixed. The <head> loading issue was caused by not adding the appropriate classes to $page object.
#main contains all the content I wanted to fade.
head is our <head> element that contains all styles.
body entire body of the page.
var $page = $('#main','head','body')
$(function(){
'use strict';
var $page = $('#main','head','body'),
options = {
debug: true,
prefetch: true,
cacheLength: 1,
blacklist:'.luxbar-item',
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onStart: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
Related
I'm using Smoothstate.js to add page transitions to my website and I'm trying to show a loading page between each page transition using the onStart, onProgress and onReady functions.
The code I have works, but every now and again it get's stuck on the loading page and the container div isn't removing the class 'is-loading'. However, it is removing the is-exiting class even though they're with the same removeClass line?
I'm so confused as to why It's not removing. Can anyone help please?
// Photoswipe
$(function(){
'use strict';
var options = {
prefetch: true,
debug:true,
cacheLength: 0,
repeatDelay: 500,
onStart: {
duration: 0, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onProgress: {
// How long this animation takes
duration: 0,
// A function that dictates the animations that take place
render: function ($container) {
setTimeout(function() {
$container.addClass('is-loading');
$('#progressBar').append('<div id="bar"></div>');
var progress = '100%';
$('#bar').animate({
width: progress
}, 400);
}, 500);
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-loading is-exiting');
// Inject the new content
$container.html($newContent);
},
},
onAfter: function() {
navbarAnimate();
closeMenu();
ImageSliders();
initPhotoSwipeFromDOM('.gallery');
ImageOverlay();
}
},
smoothState = $('#main').smoothState(options).data('smoothState');
});
Just a hint:
you add is-loading, 500ms after the loading process started. So may it be possible that onReady gets fired before your 500ms timeout? And therefore is-loading will be added as class again, after your removeClass call?
tl;dr: the problem is most likely the timeout here
setTimeout(function() {
$container.addClass('is-loading');
$('#progressBar').append('<div id="bar"></div>');
var progress = '100%';
$('#bar').animate({
width: progress
}, 400);
}, 500);
I am using smoothStates default settings and I wanted to know if I can add a class to the main wrapper so I can change the background color of the site? I don't want to add another div under main as its just extra markup.
At the moment I can only add page-index and then the rest of the pages don´t change as smoothState doesn't load the page again.
EDIT: So I want to add a class for each page, like: page-index, page-about and so on.
I have a div like so:
<div id="main">
// stuff here
</div>
When you click on /news:
<div id="main" class="page-news">
// stuff here
</div>
My functions:
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $('#main').smoothState(options).data('smoothState');
});
To achieve what you want, you can use onAfter.
The function to run when the new content has been injected into the page and all animations are complete. This is when to re-initialize any plugins needed by the page.
Create a function:
function addClass() {
$('#main').addClass('your_class second_class');
};
Then inject this into your smoothState initialization:
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
},
onAfter: function($container, $newContent) {
addClass();
}
},
smoothState = $('#main').smoothState(options).data('smoothState');
});
Update: How to dynamically set classes:
<!-- HTML -->
<div id="cms-classes" class="Put your classes in here">
</p>
/* CSS */
#cms-classes { display: none }
// JavaScript
function addClass() {
cmsClasses = $('#cms-classes').attr('class');
$('#main').addClass(cmsClasses);
};
Hope this helps!
Reference
Am loading a page in a modal popup and before the modal completely loads i would like to display a loading message which hides even when the modal is not completly loaded
This is what i have tried
$('#modaltrucks').modal('show')
.find('#modalContent')
.before(function() {
$.noty.closeAll();
var n = noty({
text: 'Loading ...',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
}
});
})
//am trying to show the above noty before load
.load("view-report-trucks", params)
//after loading close the notif
.after(function() {
$.noty.closeAll();
});
What is wrong
Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);
I used a flowplayer tutorial to make some ajax tabbed content but the it doesn't use any kind of a loading indication in between content load. How can I add that to this script? http://pastebin.com/PebcJspn
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
You can try add an element with a loading gif before call the method .load() and it will be removed when .load() inserts the html result.
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
//add this
pane.append("<img src='http://mentalized.net/activity-indicators/indicators/ilcu/roller.gif'/>")
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>