Develop Reference

Change page name based on the tab

Im having a small app built using jquery mobile and nativedroid2.
I would like to know if its possible to change the page heading name based on the tab name?
For an example http://jsfiddle.net/livewirerules/2a7so7r5/1/ You will see the page heading is Friends and my active tab is Friends so when i move to the next tab. Work the page title should change accordingly
Below is my demo JS code
$(document).on("pagecreate", "#page1", function () {
$("div[role=main]").on("swipeleft", function (event) {
changeNavTab(true);
});
$("div[role=main]").on("swiperight", function (event) {
changeNavTab(false);
});
});
function changeNavTab(left) {
var $tabs = $('ul[data-role="nd2tabs"] li');
console.log($tabs);
var len = $tabs.length;
var curidx = 0;
$tabs.each(function(idx){
if ($(this).hasClass("nd2Tabs-active")){
curidx = idx;
}
});
var nextidx = 0;
if (left) {
nextidx = (curidx >= len - 1) ? 0 : curidx + 1;
} else {
nextidx = (curidx <= 0) ? len - 1 : curidx - 1;
}
$tabs.eq(nextidx).click();
}
any help will be appreciated

You want to attach to the click handler of each tab item. Just add this block of code to your $(document) function. And set an id for your page heading element.
<h1 id="heading" class="wow fadeIn" data-wow-delay='0.4s'>Friends</h1>
$('ul[data-role="nd2tabs"] li').on('click',function(){
$("#heading").html($(this).html());
});
Here's the updated fiddle
http://jsfiddle.net/2a7so7r5/18/

I don't know what expected but this is my aproach
Modified example
function changeNavTab(left) {
var $active = $('ul[data-role="nd2tabs"] li.nd2Tabs-active');
if(left){
var $moveto = $active.next().length ? $active.next() : $('ul[data-role="nd2tabs"] li:first');
}else{
var $moveto = $active.prev().length ? $active.prev() : $('ul[data-role="nd2tabs"] li:last');
}
var title = $moveto.text();
$("h1.ui-title").text(title);
}

Stop .animate() on last image

I'm trying to make a gallery of images to scroll using up/down buttons. So far I go the animation but now I need to make it stop on the first and last image.
This is what I got so far, jsfiddle.net/sJDMq/47 (don't mind the buttons, I still need to work on them but they are there, top and bottom red boxes)
Thanks!
$(document).ready(function() {
$(".down_button").click(function () {
$(".scroll-products").animate({marginTop: '-=700px'}, 300);
});
$(".up_button").click(function () {
$(".scroll-products").animate({ marginTop: '+=700px' }, 300);
});
});

I wouldn't have done it this way but just going with what you started with I would just let this JS do the trick:
$(document).ready(function(){
var curIndex = 0;
var height = 700;
var maxHeight = 0;
var allImages = document.getElementsByClassName("sidebar_images");
for(var i=0; i<allImages.length; i++) {
maxHeight += allImages[i].offsetHeight;
}
var maxIndex = Math.ceil(maxHeight/height);
$(".down_button").click(function () {
if(curIndex < maxIndex) {
$(".scroll-products").animate({marginTop: '-='+height+'px'}, 300);
curIndex++;
}
});
$(".up_button").click(function () {
if(curIndex > 0){
$(".scroll-products").animate({ marginTop: '+='+height+'px' }, 300);
curIndex--;
}
});
});
I just updated your fiddle here.

jQuery Slider Fade

I'm looking for a decent jQuery slider. I would like it so during the transition phase, the image fades away, hides, then fades in the next image. Like this: http://i47.tinypic.com/6gygko.gif
Right now I'm using Plus Slider but it doesn't exactly hide the image during the transition. Instead it loads the next image then, hides it while showing the second. See this: http://jsfiddle.net/EgkFq
Does anyone know of a decent slider that does what I asked above or at the very least help me with the fiddle to do what I'm suggesting? Also, the images will be dynamic and have transparent backgrounds.
Additionally I would like numeric pagination so the transition only works if you click on the number. I was told I would have to use jQuery to detect how many images, etc.
Other than than the scrollbar issue, it's solved. http://jsfiddle.net/h7Y3F

http://jsfiddle.net/EgkFq/5/
(function slider(){
var slides = $("#slider > img");
var currentIndex = 0;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
$(slides[currentIndex ]).fadeOut(fadeDuration);
$(slides[nextIndex ]).fadeIn(fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, timePerSlide);
})();
Plugin shmugin.
Here is an example of how to center the image within the "slider" http://jsfiddle.net/EgkFq/9/
(function slider(){
var slides = $("#slider > img");
var currentIndex = -1;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
var me = $(slides[currentIndex]);
var nxt = $(slides[nextIndex]);
var w = nxt.width();
var h = nxt.height();
me.fadeOut(fadeDuration);
nxt.fadeIn(fadeDuration);
nxt.css({
"left":"50%",
"margin-left":w/2 * -1,
"top":"50%",
"margin-top": h/2 * -1
});
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, 0);
})();

There are a lot of sliders for you to choose from. Have a look at 70+ Awesome jQuery Slider Plugins. Most of them have fading effect.

Make a jQuery slider work with divs instead of images

I am working on this website page poochclub.com and I am trying to make all of it text instead of images. The problem is when I want to work on the panels below with all the information the js file (called about.js) is set to work with images instead on divs where I could potentially add text.
I am not very good at writing javascript and I need help to fix the original file which looks as follows:
<script type="text/javascript>
(function ($) {
var pages, panels, arrows, currentClass = 'current',
currentIndex = 0, currentSize = 0;
function showPage() {
var ctx = jQuery.trim(this.className.replace(/current/gi, ''));
$(this).addClass(currentClass).siblings().removeClass(currentClass);
$('.panel')
.removeClass(currentClass)
.find('img')
.removeClass(currentClass)
.removeAttr('style')
.end();
panels.find('.' + ctx)
.addClass(currentClass)
.find('img')
.removeClass(currentClass)
.removeAttr('style')
.eq(0)
.fadeIn()
.addClass(currentClass)
.end()
currentIndex = 0;
currentSize = panels.find('.' + ctx + ' img').length;
return false;
}
function showArrows(e) {
arrows['fade' + (e.type === 'mouseenter' ? 'In' : 'Out')]();
}
function getPrev() {
currentIndex = currentIndex - 1 < 0 ? currentSize - 1 : currentIndex - 1;
return currentIndex;
}
function doPrev() {
var ctx = panels.find('div.current img');
ctx.removeClass(currentClass).removeAttr('style');
ctx.eq(getPrev()).fadeIn().addClass(currentClass);
}
function getNext() {
currentIndex = currentIndex + 1 >= currentSize ? 0 : currentIndex + 1;
return currentIndex;
}
function doNext() {
var ctx = panels.find('div.current img');
ctx.removeClass(currentClass).removeAttr('style');
ctx.eq(getNext()).fadeIn().addClass(currentClass);
}
$(document).ready(function () {
pages = $('.panels-nav a');
panels = $('.panels');
arrows = $('.arrows');
pages.click(showPage);
panels.bind('mouseenter mouseleave', showArrows);
arrows.find('.prev').click(doPrev).end().find('.next').click(doNext);
pages.eq(0).click();
});
});
</script>
My questions is, how do I change the js file from finding img to finding several different div id's attached to the sliding panles?
Thanks.

any reference to img should be a new selector. Something like 'div.slider', a div with a class slider.
Look at all the finds, thats where you will see the img selectors.

javascript 'over-clicking' bug

I have a bug in Javascript where I am animating the margin left property of a parent container to show its child divs in a sort of next/previous fashion. Problem is if clicking 'next' at a high frequency the if statement seems to be ignored (i.e. only works if click, wait for animation, then click again) :
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
//roll margin back to 0
}
An example can be seen on jsFiddle - http://jsfiddle.net/ZQg5V/
Any help would be appreciated.

Try the below code which will basically check if the container is being animated just return from the function.
Working demo
$next.click(function (e) {
e.preventDefault();
if($contain.is(":animated")){
return;
}
var marLeft = $contain.css('margin-left'),
$this = $(this);
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
$contain.animate({
marginLeft: 0
}, function () {
$back.fadeOut('fast');
});
} else {
$back.fadeIn(function () {
$contain.animate({
marginLeft: "-=" + regWidth + "px"
});
});
}
if (marLeft > -combinedWidth) {
$contain.animate({
marginLeft: 0
});
}
});

Sometimes is better if you create a function to take care of the animation, instead of writting animation code on every event handler (next, back). Also, users won't have to wait for the animation to finish in order to go the nth page/box.
Maybe this will help you:
if (jQuery) {
var $next = $(".next"),
$back = $(".back"),
$box = $(".box"),
regWidth = $box.width(),
$contain = $(".wrap")
len = $box.length;
var combinedWidth = regWidth*len;
$contain.width(combinedWidth);
var currentBox = 0; // Keeps track of current box
var goTo = function(n) {
$contain.animate({
marginLeft: -n*regWidth
}, {
queue: false, // We don't want animations to queue
duration: 600
});
if (n == 0) $back.fadeOut('fast');
else $back.fadeIn('fast');
currentBox = n;
};
$next.click(function(e) {
e.preventDefault();
var go = currentBox + 1;
if (go >= len) go = 0; // Index based, instead of margin based...
goTo(go);
});
$back.click(function(e) {
e.preventDefault();
var go = currentBox - 1;
if (go <= 0) go = 0; //In case back is pressed while fading...
goTo(go);
});
}
Here's an updated version of your jsFiddle: http://jsfiddle.net/victmo/ZQg5V/5/
Cheers!

Use a variable to track if the animation is taking place. Pseudocode:
var animating = false;
function myAnimation() {
if (animating) return;
animating = true;
$(this).animate({what:'ever'}, function() {
animating = false;
});
}
Crude, but it should give you the idea.
Edit: Your current code works fine for me as well, even if I jam out on the button. On firefox.