I'm creating a fullpage.js site where I need to have the slides scroll in to view on a particular slide. Like this:
1
X2X
3
4
Where X2X is 3 slides, I want to land on the 2nd one so user can go left or right.
I am using OnLeave to call silentMoveTo but whatever I do doesn't seem to take effect:
onLeave: function(origin, destination, direction) {
var params = {
origin: origin,
destination: destination,
direction: direction
};
//after leaving first section
console.log("leaving...");
if (origin.index == 0 && direction == "down") {
// moves the slides to the 2nd slide
console.log("fire after 1?");
fullpage_api.silentMoveTo(1, 1);
}
}
But silentMoveTo doesn't work. Here's a CodePen https://codepen.io/thetwopct/pen/bZwyRw
Any tips to what I am doing wrong?
Didn't need to do this via OnLeave/silentMoveTo, just add active class to the slide I wanted to show.
As per https://github.com/alvarotrigo/fullPage.js/issues/522
Related
I would like to use Bootstrap slider to represent 3 lengths of axes whose sum doesn't change (the max value of the slider corresponds to this sum).
So I have 2 cursors on bootstrap slider and the 3 intervals represent these lengths.
Here's an example: bootstrap with two cursors
My issue is that I would like to stop dragging the second cursor (on the right) when it is equal (or nearly with a fixed step) to the first one (on the left) and inversely for the first cursor.
I saw there's an slide stop event but this doesn't seem to be the same thing.
I have surely to modify the bootstrap-slider.js source but I don't know how to do for implementing this specific functionality.
It would be like:
slider.on("slide", function(slideEvt) {
if ((cursor2.value - cursor1.value) < step)
{ this.stopSlide();}
});
Using slides events it's possible. The idea is to see which cursor is fixed, and when its value change, block the slide movement, by setting value.
Didn't find a cleaner way to block slide event...
Working code :
var slider = new Slider("#slider1");
var initPos,
fixedCursor,
fixedCursorPos;
slider.on("slideStart", function(slideEvt) {
initPos = slideEvt;
fixedCursor = null;
fixedCursorPos = null;
});
slider.on("slide", function(slideEvt) {
if (initPos[0] !== initPos[1] && (slideEvt[0] !== initPos[0] || slideEvt[1] !== initPos[1])) {
if (fixedCursor == null) {
fixedCursor = (slideEvt[0] === initPos[0] ? 0 : 1);
fixedCursorPos = slideEvt[fixedCursor];
}
if (fixedCursorPos !== slideEvt[fixedCursor]) {
slider.setValue([fixedCursorPos, fixedCursorPos], false, false);
}
}
});
Working JS Bin : http://jsbin.com/kopakiciti/1/edit?html,js,output
By default, menu appears on every page. I want to make the menu not to appear on first page. I did the following:
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 600,
css3: true,
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up'){
$('#menu').css('visibility','hidden');
}
},
afterLoad: function(anchorLink, index){
if (index == 2){
$('#menu').css('visibility','visible');
}
}
Now the menu appears when I scroll to the second page and hides when I scroll to the first page. But in this way the menu is not the part of second page, it just changes visibility depending on position.
I want the following: when it scrolls to the first page, the menu should stay on the second. And conversely, when it scrolls from the first page to the second, the menu should be on the second page.
P.S. Now in html, menu is placed outside the full page wrapper.
P.P.S. The website will have more than two pages and I want to attach menu to the top of the window.
P.P.P.S. I've done what I wanted. But it works bad - http://jsfiddle.net/a3dw6p4w/
I want the following: when it scrolls to the first page, the menu should stay on the second.
Use a fixed position for the menu. That's a thing for CSS, not for jQuery:
#menu{
position:fixed;
top: 30px;
left: 30px;
z-index:999;
}
Here is how you can do it:
Javascript
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 1200,
css3: true,
afterLoad: function(anchorLink, index){
if (index > 1){
$('#menu').fadeTo("slow",1);
}
},
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up') {
$('#menu').fadeTo("slow",0);
}
}
});
});
</script>
It says that if on page load, if you scroll to a section below (index > 1), then the menu will fade in slowly.
Then, if you scroll up from the second section (i.e. to section 1), it will fade out slowly.
I have created a newsfeed. The feed switches every 2 seconds. You can also manually switch left/right, or click the panel from the squares at the bottom. The switching between slides is down using jQuery UI Slide.
Right now, if you are in the middle of a slide, and you click left/right/squares, then another slide occurs on top of the existing, still going slide and the whole system is messed up.
How can I prevent other actions occurring if a slide/switch is already in progress?
This is my code:
$(document).ready(function(){
newsfeedTimer = setInterval(newsfeed, displayDuration);
// Manual change of feed (LEFT)
$('#newsfeeds_wrapper > .left').click(function(event){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
});
// Very similar code for feed right
// Ignore the other method of switching (if it works for above, I can implement it for this one)
});
function newsfeed() {
feedRight();
}
// Feed to the Right
// jump is used to jump multiple newsfeed instead of one at a time
function feedRight(jump)
{
jump = typeof jump !== 'undefined' ? jump : 1;
var current = $('.newsfeed:first');
var next = $('.newsfeed:nth(' + jump + ')');
current.hide('slide',{duration: transitionDuration}, function(){
// Append as many needed
for( var i = 0; i < jump; i++ ) {
$('.newsfeed:first').appendTo('#newsfeeds');
}
next.show('slide',{direction : 'right' , duration: transitionDuration});
}
I don't want to stop() an animation! I want to disable changing the slides IF there is animation happening!!
without seeing the full breadth of the code, I am shooting myself in the foot here. But here is a direction I would take it. You could also have two functions, one to bind, another to unbind. When animation is initiated, you unbind the left/right controls. When stopped, you bind. Or, set a global variable... ala.
var config = {'inProgress': false};
$('#newsfeeds_wrapper > .left').click(function(event){
if(!config.inProgress){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
}
});
in your animation function. Seems like when you cut/paste, some of the code is lost, so lets just assume some animation.
when you enter your animation functions, set config.inProgress = true;
function feedRight(jump)
{
config.inProgress = true;
// removed your code, but just using for simplicity sake
// added a callback
next.show('slide',{direction : 'right' , duration: transitionDuration},
function() {
// Animation complete. Set inProgress to false
config.inProgress = false;
});
)
}
I'm making a jQuery slider (so cliche), and I'm having an issue getting the slide to change when you click one of the bullets in the controls. Other than that, it's fully functional. I found the jQuery timer plugin and swapped it out with the 'setInterval()' function I was using.
So, problem, I can't seem to figure out how to get the slide to change when you click on a bullet in the controls... I tried passing the clicked bullet value (slide#) to the timer function and that didn't work (the way I did it). I don't know much about methods or jQuery plugin formats, so this has proven difficult for me.
And the link on my server (working): http://www.horsepowerfreaks.com/plugins/responsiveSlider/demo.html
Here is the jsFiddle (not working for some reason...): http://jsfiddle.net/derekfoulk/yUqKJ/
Files:
Slider plugin (where the issue is)
http://www.horsepowerfreaks.com/plugins/responsiveSlider/rSlider.jquery.js
Stylesheet
http://www.horsepowerfreaks.com/plugins/responsiveSlider/style.css
Plugin Documentation/Demo:
https://github.com/jchavannes/jquery-timer
http://jchavannes.com/jquery-timer/demo
A portion of my attempt:
/* Bullets - Here is my problem. This is not working the way I need it to.
Basically, when the user clicks a bullet, the slider should make the referenced
slide active and then reset the timer */
else if (action === "bullet"){
// If user clicks on active bullet
if ($(this).hasClass("active")){
// Play/Pause (timer)
Slider.toggleGallery();
}
else {
/* Change slide (by referencing the 'data-slide' attribute of the bullet,
then find the slide using that same value for its 'data-slide' attribute
and make it the active slide and reset the timer */
imageId = $(this).attr("data-slide");
$(".active",$controls).removeClass("active");
$(this).addClass("active");
Slider.changeSlide(imageId);
}
}
...Further down the file...
Slider = new (function() {
var $galleryImages,
$timeRemaining,
incrementTime = options.pause,
/* I am pretty sure this function needs to be fed the slide number that was selected
when the user clicks a bullet. If it is the first run through, then the value of
'imageId' should be '-1'. I would rather have the imageId value be set to '1'
initially, but the configuration below is what worked for me... If I set the imageId
to '0', numSlides to '$galleryImages.length' and the imageId inside the if statement
to 0, then I get slide 2 for imageId 1, slide 3 for imageId 2, slide 4 for imageId 3,
and slide 1 for imageId 4? If there is a way to have the active image (imageId)
iterate '1,2,3,4' instead of '0,1,2,3' that would be awesome. */
imageId = -1, // Which image is being shown
updateTimer = function() {
$galleryImages.eq(imageId).stop(true,true).removeClass("active");
imageId++;
console.log(imageId);
var numSlides = $galleryImages.length - 1;
if (imageId >= numSlides) {
imageId = -1;
}
$galleryImages.eq(imageId).stop(true,false).addClass("active");
},
init = function() {
$galleryImages = $(".slider").find('li');
Slider.Timer = $.timer(updateTimer, incrementTime, true).once();
};
this.toggleGallery = function() {
if (this.Timer.isActive) {
this.Timer.pause();
var remaining = this.Timer.remaining / 1000;
}
else {
this.Timer.play();
}
};
$(init);
});
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});