Develop Reference

Swiper Scroll to Top slide with customscrollbar

I lost a few days trying to make top position in view on other slide than active slide. I use plugin: idangero.us/swiper/. However, didn't work when I join above plugin with malihu.plugin and I dont know what I'm doing wrong.. PLEASE help me, anbody...
If I use only idangero.plugin then everythink work: fiddle but after join next plugin scrollbar no working scroll to top on (other than active) slides.
How I can join both plugin?
In malihu plugi part of code responsible for srolling:
_wrapperScroll=function(){
var $this=$(this),d=$this.data(pluginPfx),
namespace=pluginPfx+"_"+d.idx,
wrapper=$("#mCSB_"+d.idx+"_container").parent();
wrapper.bind("scroll."+namespace,function(e){
if(wrapper.scrollTop()!==0 || wrapper.scrollLeft()!==0){
$(".mCSB_"+d.idx+"_scrollbar").css("visibility","hidden"); /* hide scrollbar(s) */
}
});
},
In dev show code in browser (ff) I can see:
mCSB_scrollTools mCSB_3_scrollbar (...) mCSB_scrollTools_vertical
Where:
mCSB_X_scrollbar
is propably equal X malihu scrollbar in X slide.
X is number of slide and scrollbar
So what should I edit/do to make it work and where paste it in idangero plugin
I realy need to your help with that...
best regards

Since you're using custom scrollbar on the slides, you need to use the script's API to control it. The mCustomScrollbar plugin defines a scrollTo method, which is available on the element you attached the scrollbar to.
If you want to reset scrollbar position on all slides in the slider except current slide, inside the onSlideChangeEnd callback call
$(hook.slides).not(':eq(' + hook.activeIndex + ')').mCustomScrollbar('scrollTo', 0);

Show/Hide JQuery Slider Navigation Based On First & Last Slide

I am seeking help in showing and hiding the directional nav arrows on a self-made JQuery Slider. The slider shows 2-3 images at a time depending on the viewport. I want to be able to hide the next(right) arrow when the last slide has appeared in full view and hide the previous(left) arrow whenever the first slide is back to the first item in view.
Trying to find a way to know the positions of the first and last slide because the number of list elements will change and not be a set number.
$(document).on( 'click', '.control-right', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) - itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
$(document).on( 'click', '.control-left', function() {
var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) + itemWidth;
$(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
The markup template is as follows
<div class="module">
<div class="slider-control control-left"></div>
<div class="slider-control control-right"></div>
<div class="module-slider">
<ul class="slider-list">
<li class="slider-item"></li>
</ul>
</div>
</div>

I see two ways of doing this. Because I do not know your slider code I will suggest something.
If you want to detect the position of an element you can use JQuery's position() method
That way you can detect the position of an element and have something happen. But besides that what I would do if I made a slider would be to give the current slider a class like ".active" and then in my javascript I would use conditionals to check for the element with the class of ".active" meaning it is shown.
Something like this:
if( $(".element").hasClass("active") ){
//do something
}
Again those are only suggestions, you can go about in whatever way suits your needs.

Swiper slider. Prepeding one slide and simulating transition to it

I want to achieve a specific behaviour with this awesome JS slider (Swiper) using its complete API, but I am out of luck until the moment... Need some help with this:
Current situation:
Only one slide at the beginning.
What I want each time I click a button is:
The dynamic creation of a new slide BEFORE the first one in each case --> Easy thing, with the prepend() method of Swiper API :)
But (and here is the problem) I want the final users to have the sensation of being just loading the preceding slide, i.e., clicking the button and seeing the swipe transition towards left...
I want this "rare" behaviour because my slider has to show several hundreds of slides, and loading all of them at a time from the beginning results in an extremely slow page load since it has to download hundreds of images...
Thanks in advance.

I finally got it working, like this:
Once the button (with class="prev") is clicked:
$(document).on('click', '.prev', function() {
// If it is the first slide...
if (mySwiper.activeIndex == 0) {
// Slide content
var slide = '<p>New slide</p>';
// Creation of the slide (it instantly moves to index 0 --> the new slide)
mySwiper.prependSlide(slide);
// And then instant (speed = 0) swipe to slide with index 1
// (the one we were watching before creating the new...)
mySwiper.swipeTo(1, 0, false);
// Finally, we implement the visual transition to new slide (index 0)
mySwiper.swipePrev();
}
});
I hope it helps somebody.
Thanks.

Use JQuery Mobile to slide and delete list elements

I'm experimenting with a JQuery Mobile page that has a simple list set up:
When I click the list elements, they are highlighted and stored by id into a local array. Is there a simple (or not so simple) way to make the selected elements slide to the right off the screen and the rest of the elements collapse to fill the gaps?
Relevant code:
var selectedItems = []; // This is updated as items are selected
var deleteButtonTapped = function() {
// code here
};
Edit: If it is of any pertinence, in the actual implementation of the page, the items that I am populating the list with will be drawn from a database, so I will be able to reload the page and the deleted elements will no longer appear.

jsFiddle - This is close to what you are looking for...
using .animate()
EDIT: Adding code...
The .animate() function is saying, if the elements left property is 0, then move it to the right as many pixels as it is wide, then hiding it using the .fadeOut() function. This same formula can also be used to slide the element back into place if needed.
HTML
<ul id="list" data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<button id='btnDelete'>Delete</button>
CSS
.yellow{
background-color: yellow;
}
jQuery
$('#list li').click(function(){
$(this).addClass('yellow');
});
$('#btnDelete').click(function(){
$('.yellow').each(function(){
$(this).animate({ marginLeft: parseInt($(this).css('marginLeft'),10) === 0 ? $(this).outerWidth() : 0 }).fadeOut('fast');
});
});

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!