Hammer.js Carousel Start Pane - javascript

Heyho,
I´am working on a project in my university and I´d like to use "Hammer.js".
I´ve downloaded the Carousel-Example and it works perfectly for me.
But I would like to start a the middle pane of my code and it´s not so simple I think.
It´s something like this:
http://img203.imageshack.us/img203/6326/schemeas.jpg
so Hammer.js starts always with the green screen. But I like to start with the yellow one.
I´ve added one swipe right to the init function but it looks horrible when the page is loading and could not be the goal ^^
I hope anyone of you have an idea how to solve my problem.

Try calling
carousel.showPane(1);
That will display the second pane instantly. You will want to put this near the bottom, right after where it says.
carousel.init();
If you're feeling adventurous you could try and make it automatically start with that pane as there's a variable inside the Carousel function called current_pane which is set to a default of 0 (the first pane). Altering this may work too but might require more code somewhere else. Experiment!
edit
NULL is right, it does animate it. Here's a more in depth method to set it without animation:
I found that the method responsible for changing which pane is showing was the setContainerOffset mthod which could be passed a variable to animate it. I previously told you to use showPane(2) but that then called
setContainerOffset(offset, true)
which caused the animation occur. What you should do instead is make a slightly different version of showPane...
this.setPane = function( index ) {
// between the bounds
index = Math.max(0, Math.min(index, pane_count-1));
current_pane = index;
var offset = -((100/pane_count)*current_pane);
setContainerOffset(offset, false);
};
You'll find it's almost identical to showPane except for the name and the fact that it calls setContainerOffset with animation: false. This will immediately show the pane of your choice and can be called using
carousel.setPane(index);
What I've done is added this to the init function so that it looks like this:
this.init = function() {
setPaneDimensions();
var c = this;
$(window).on("load resize orientationchange", function() {
setPaneDimensions();
c.setPane(current_pane);
//updateOffset();
})
};
Now you can change
var current_pane = 0;
to whatever you want and the carousel will always start with that pane when it's initialised! simple!

Related

JavaScript Help regarding adjusting/delaying Function timings

First and foremost, everything I say is only applicable for mobile version of my website - https://wtstest1.weebly.com so while troubleshooting please use the mobile view.
Secondly I have included the particular JavaScript ( Jquery ) codes relevant to the subject for your reference:
jQuery(window).load(function(){
var wW = $(window).width();
$(document).off('click','.wsite-menu-item');
$(document).on('click','.wsite-menu-item', function(){
var _this = $(this);
var _href = _this.attr('href');
var _top;
if(wW > 992){
_top = $(_href).offset().top - 64;
$('body').removeClass('nav-open')
}else{
_top = $(_href).offset().top - 50;
$('body').removeClass('nav-open')
$('.boo_onepage').removeClass('show')
}
$('html,body').stop().animate({scrollTop:_top},500)
})
When you will load my website in mobile view, you will find a arrow at top having some options, tapping on each of them scrolls to particular sections within my webpage.
Although the arrow didn't minimized on its own after an option was tapped which was inconvenient hence I added the second last line you can see in code:
$('.boo_onepage').removeClass('show')
Now adding this line made the arrow to minimize on its own when a option was chosen
But it lead to another issue - my main reason of posting this.........
Now The arrow minimizes on its own after chosing an option but it happens way too quickly and in the process it skips the active-tab/hover effect which was there originally.
It helped to let the user know where they have tapped by displaying the tab in yellow color for like close to less than 1 second then proceeded to scroll to requested section.
Can someone adjust the jQuery code to make the arrow minimize on its own after choosing an option and still retaining the active tab/hover effect.
What I tried from my end - I tried using setTimeout(function() to delay function - $('.boo_onepage').removeClass('show') by 1 second but it didn't work as well as expected.
( In case someone wants to see how adding that line made the arrow to minimize on its own but removed the hover/active option effect, you can check it here - https://wtstest.weebly.com )
I had read your post...!
You can follow my code below
// When click arrow navbar it's increase size follow 1s
$(document).on('click','.boo_onepage_toggle', function(){
$('.boo_onepage_menu').css({'font-size':'20px','transition':'1s'})
})
// When choose one option the arrow will decrease size follow 1s
// The user when navigation to arrow It's screen point similar button for user understand "Click"
$(document).on('click','.wsite-menu-item', function(){
$('.boo_onepage_menu').css({'font-size':'10px','cursor':'pointer','transition':'1s'})
$('.boo_onepage').removeClass('show')
})
// Hover when user move to arrow
$('.boo_onepage_menu').mouseover(function(){
$(this).css({'font-size':'20px','cursor':'pointer','transition':'1s'})
}).mouseout(function() {
$(this).css({'font-size':'10px','cursor':'pointer','transition':'1s'})
})
Have a nice day...!

Foundation 6 Orbit: Change Slide programatically

On Foundation 6.
I have an orbit slider that, besides the default behaviour, it also needs to be able to change the slide when an outside button is clicked.
Is there a way to make this work?
I've tried this code:
jQuery('#theslider').foundation('changeSlide', true, slide_id);
//slide_id is the jQuery object's slide ex: jQuery(#slideid);
It kind of works, but it works erratically.
It sometimes works fine for a while, but a some point then the slide goes fast and disappears from the screen, or simply freezes.
I can't seem to find a pattern on what's going on.
I'm not an expert on javascript so I might be missing something really obvious.
My solution as follow:
$('.orbit-external-control').on('click', function () {
var activeIdx = ~~$('.orbit .orbit-bullets .is-active').data('slide')
var changeIdx = ~~$(this).data('slide')
var isLTR = (changeIdx > activeIdx) ? true : false
if (activeIdx === changeIdx)
return
var chosenSlide = $('.orbit .orbit-slide').filter(function (index) {
return index === changeIdx
})
$('.orbit').foundation('changeSlide', isLTR, chosenSlide, changeIdx)
})

Skrollr run animation once only then stop

How can I run an animation in Skrollr once, and then kill it?
I've tried:
The beforerender method but that kills all animations
Looking for ways to set individual Skrollr instances, but it's a singleton
Removing or renaming the object's attributes
nullifying the object's className
Toggling a CSS class
Each time, it looks like the values are cached within Skrollr and fire regardless of my efforts. What am I missing here?
I want to improve this question:
https://github.com/Prinzhorn/skrollr/wiki/Tips
In the wiki under Tips tab, there is a snippet that would be useful:
skrollr.init({
beforerender: function(data) {
return data.curTop > data.lastTop;
}
});
In fact, with this code, it will animate only if you scroll down, so it will result that the animation will be played once, or in other words, it wouldn't "turn back" when you scroll up, acting like the CSS animation-fill-mode: forwards;
Well, I finally found a semi-solution. I've removed the node entirely and re-inserted a new one. Here's my code so you can get the idea:
// Before this, poll window.onscroll to wait for the skrollable-after
// class to be applied.
if (!this.flags.learnmore && Toolbox.hasClass(this.dom.learnmoreslider, 'skrollable-after')) {
// Sort of a misleading name, sorry, not an exact clone
var clone = document.createElement("span");
clone.innerHTML = this.dom.learnmoreslider.innerHTML;
// This was the end condition of the animation
// (it slid text horizontally) so it has to look the same.
clone.style.marginLeft = "250px";
var parent = this.dom.learnmoreslider.parentNode;
parent.appendChild(clone);
// This must be removed after in order to maintain the parent reference.
parent.removeChild(this.dom.learnmoreslider);
// Raise a flag or remove the listener or something, you're done
this.flags.learnmore = true;
}
}
A tad clunky but does the trick. I'm definitely still interested in the correct way to kill an animation.
Something like this should work:
skroller = skrollr.init({
render: function(data) {
scroll = data.curTop;
if ((scroll >= 200) && (!element.hasClass('active'))) {
element.addClass('active').removeAttr('data-start data-end');
skroller.refresh();
}
}
});

Trigger event on animation complete (no control over animation)

I've a scenario that requires me to detect animation stop of a periodically animated element and trigger a function. I've no control over the element's animation. The animation can be dynamic so I can't use clever setTimeout.
Long Story
The simplified form of the problem is that I'm using a third party jQuery sliding banners plugin that uses some obfuscated JavaScript to slide banners in and out. I'm in need of figuring out a hook on slideComplete sort of event, but all I have is an element id. Take this jsfiddle as an example and imagine that the javascript has been obfuscated. I need to trigger a function when the red box reaches the extremes and stops.
I'm aware of the :animated pseudo selector but I think it will need me to constantly poll the required element. I've gone through this, this, and this, but no avail. I've checked jquery promise but I couldn't figure out to use that in this scenario. This SO question is closest to my requirements but it has no answers.
P.S. Some more information that might be helpful:
The element isn't created by JavaScript, it is present on page load.
I've control over when to apply the plugin (that makes it periodically sliding banner) on the element
Most of the slideshow plugins I have used use changing classes at the end of the animation... You could extend the "addClass" method of jQuery to allow you to capture the class change as long as the plugin you use is using that method like it should:
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
oldmethod.apply( this, arguments );
this.trigger(methodname+"change");
return this;
}
});
})(jQuery);
I threw together a fiddle here
Even with obfuscated code you should be able to use this method to check how they are sending in the arguments to animate (I use the "options" object when I send arguments to animate usually) and wrap their callback function in an anonymous function that triggers an event...
like this fiddle
Here is the relevant block of script:
(function($){
$.each(["animate"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
var args=arguments;
that=this;
var oldcall=args[2];
args[2]=function(){
oldcall();
console.log("slideFinish");
}
oldmethod.apply( this, args );
return this;
}
});
})(jQuery);
Well since you didn't give any indication as to what kind of animation is being done, I'm going to assume that its a horizontal/vertical translation, although I think this could be applied to other effects as well. Because I don't know how the animation is being accomplished, a setInterval evaluation would be the only way I can guess at how to do this.
var prevPos = 0;
var isAnimating = setInterval(function(){
if($(YOUROBJECT).css('top') == prevPos){
//logic here
}
else{
prevPos = $(YOUROBJECT).css('top');
}
},500);
That will evaluate the vertical position of the object every .5 seconds, and if the current vertical position is equal to the one taken .5 seconds ago, it will assume that animation has stopped and you can execute some code.
edit --
just noticed your jsfiddle had a horizontal translation, so the code for your jsfiddle is here http://jsfiddle.net/wZbNA/3/

iscroll scrollToElement not updating currPage variable

UPDATE:
I was able to get my scroller working as desired but I feel like I have hacked around the actual issue and would love it if anyone has a more solid answer, I've updated and noted in the snippets below the new jQuery I'm using.
I'm using iScroll-4 (http://cubiq.org/iscroll-4) for an iPad/Android web app, everything's working perfectly with the swipes and scrolling but I have a table of contents at the beginning of the app that allows users to jump to specific areas of the scroller --
I'm using the iScroll function scrollToElement(element, duration) in order to jump to the different areas. Also using scrollToPage(page, duration) to allow the user to manually navigate forward and backward one page at a time.
While watching the console logs the currPageX variable updates when I navigate with the scrollToPage function and when I swipe, but when using the scrollToElement the currPageX variable does not update.
Therefore if I jump to an element and then navigate forward with scrollToPage('next', 0) it will go backwards and navigate me to the next page after the table of contents.
I have tried using the scroll.refresh() function after scrollToElement, before, putting the function inside a timeout, etc. and I can't figure out why the currPageX is not updating.
Here's a snippet of the jQuery code that I'm using the two different functions:
// TO NAVIGATE FORWARD AND BACKWARDS
$('span.control').on('click', function() {
var slideDir = $(this).attr('data-dir');
if (slideDir == 'prev') {
var tehPg = tehScroll.currPageX-1;
} else if (slideDir == 'next') {
var tehPg = tehScroll.currPageX+1;
}
tehScroll.scrollToPage(tehPg, 0);
return false;
});
// TO JUMP FROM CONTENTS
$('li[data-page="toc"] span').on('click', function() {
var toPage = $(this).attr('data-page');
tehScroll.scrollToElement('li[data-page="'+toPage+'"]', 800);
// ADDED THE FOLLOWING LINE TO MANUALLY SET currPageX after scrolling!
tehScroll.currPageX = $('#slides li[data-page="'+toPage+'"]').index();
return false;
});
Did you consider using jquery-mobile-iscrollview widget plug-in? - there is a function scrollToPage(pageX, pageY, time), works well for me...
best
M

Categories