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
Related
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');
});
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);
function showImage() {
var toggleImage = document.getElementById("loadingImage");
if(toggleImage.style.display == "inline") {
document.getElementById('loadingImage').style.display='none';
} else {
document.getElementById('loadingImage').style.display='inline';
document.getElementById('loadingImage2').style.display='none';
document.getElementById('loadingImage3').style.display='none';
document.getElementById('loadingImage4').style.display='none';
}
}
<img class="TeamMembersPictures" `enter code here`src="http://www.ishop247.co.uk/TeamPictures/Yvonne.jpg" onclick="showImage();"/>
<img id="loadingImage" src="http://www.ishop247.co.uk/TeamPictures/YvonneBG.jpg" style="display:none"/>
This is the code i have to display a new image on click of another image but what i want is for it to be a smooth slide down on the image that is displayed onclick
Better yet, why not use CSS animation? Check out Animate.css (I have no affiliation) which allows you to simply include the css file at the top of the page and then do something like this...
<img src="whatever.png" class="animated bounceInDown"/>
You can download the css here...
http://daneden.github.io/animate.css/
To slide an element down with jQuery, you want the slideDown function. For example:
function showImage() {
$('#loadingImage').slideDown();
}
As you can see from the link to the slideDown documentation, there are many ways you can customize the slide.
function showImage() {
$('#loadingImage').slideDown({
duration: 400,
easing: 'swing',
queue: true,
specialEasing: {/*key: value...*/},
step: function(now, tween) {
// ...
},
progress: function(animation, progress, remainingMs) {
// ...
},
complete: function() {
// ...
},
start: function(animation) {
// ...
},
done: function(animation, jumpedToEnd) {
// ...
},
fail: function(animation, jumpedToend) {
// ...
},
always: function(animation, jumpedToend) {
// ...
}
});
}
If you don't need much of that, there are a couple smaller variations on the function (all parameters are optional):
$('#loadingImage').slideDown(400, function() {
// complete...
});
$('#loadingImage').slideDown(400, 'swing', function() {
// complete...
});
Core jQuery only offers 'swing' and 'linear' for the easing values. Plugings such as jQuery UI can offer additional values. Duration can be a number (in milliseconds) or a string ('fast' = 200ms or 'slow' = 600ms).
I just finished developing this Wordpress theme:
http://www.minnesdiner.com/
Everything is working well, but I'm not 100% happy with the navigation.
The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.
Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.
Here's my current jQuery code:
$(document).ready(function() {
var $currentpos = $("#menu-indicator").css("left");
$("#menu-indicator").data('storedpos', $currentpos);
$(".current-menu-item").mouseenter(function () {
$("#menu-indicator").stop().animate({left: $currentpos}, 150);
});
$(".menu-item-26").delay(500).mouseenter(function () {
$("#menu-indicator").stop().animate({left: "52px"}, 150);
});
$(".menu-item-121").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "180px"}, 150);
});
$(".menu-item-29").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "310px"}, 150);
});
$(".menu-item-55").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "440px"}, 150);
});
$(".menu-item-27").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "570px"}, 150);
});
$(".menu-item-164").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "760px"}, 150);
});
$delayamt = 400;
$("#header-row2").click(function () {
$delayamt = 5000;
});
$("#header-row2").mouseleave(function () {
$("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
});
});
As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).
Thanks!
If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.
For example:
var hover_timer;
$('.menu-item').hover(
function() {
hover_timer = setTimeout(function() {
...
}, 500);
},
function() { clearTimeout(hover_timer); }
);
EDIT: by the by, you should be combining all those hover functions into one. You can do something like:
$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...
And then in the code to slide, call it back:
$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);
And that's just a start - you can generalize it even more, I bet.
I am trying to get an image to change opacity smoothly over a duration of time. Here's the code I have for it.
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/>
Also, is there a way for this to happen automatically without the need of a mouseover? Thanks.
I'm assuming your code is for the jQuery pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
If your above code is not working, then fix "jquery" to be "jQuery".
For starting it on page load, just do:
jQuery(function() {
jQuery('#yourImageId').pulse({
opacity: [0,1]
}, {
duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
alert("I'm done pulsing!");
}
});
Add an id to your image and you're golden.
});
To fire the animation of your own accord:
pulsate( $('#waterloo') );
revised code to continually pulsate (wasn't sure if this was what you're after) - the pulsate effect is relegated to it's own function so you can call it directly or in your event handler
<script type="text/javascript">
$(function() { // on document ready
$('#waterloo').hover( //hover takes an over function and out function
function() {
var $img = $(this);
$img.data('over', true); //mark the element that we're over it
pulsate(this); //pulsate it
},
function() {
$(this).data('over', false); //marked as not over
});
});
function pulsate(element) {
jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() {
if( $(this).data('over') ){ // check if it's still over (out would have made this false)
pulsate(this); // still over, so pulsate again
}
}});
}
<img src="waterloo.png" border="0" class="env" id="waterloo"/>
Note - to trigger events, you can use .trigger() or the helper functions, like
$('#waterloo').mouseover() // will fire a 'mouseover' event
or
$('#waterloo').trigger('mouseover');
this might be what you're looking for.
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/
I personally do something like this to pulse when the mouse hovers over the image and return to full opacity on mouse out...
$(document).ready(function () {
function Pulse(Target, State) {
//Every 750ms, fade between half and full opacity
$(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
}
$("#ImageId").hover(function () {
$(this).stop()
Pulse(this);
}, function () {
$(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
});
});