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);
}
Related
I'm trying to get the currentpage number using jQuery each function. This is how I am doing it
var CurrentPageView = 1;
var check = true;
var Bookmark = [];
var CurPage = 1;
$(function() {
$(window).scroll(function() {
if (check) {
var PagesPosition = [];
var CurrentWindowPosition = $(window).scrollTop();
var CurrentCenterWindowPos = CurrentWindowPosition + $(window).height() / 2;
$(".Page").each(function() {
var PagePos = $(this).offset().top;
if (PagePos / CurrentCenterWindowPos <= 1) {
CurPage = $(this).index() + 1;
}
});
$(".CurrPageNumber").val(CurPage);
CurrentPageView = CurPage;
}
});
});
And it is working pretty well. If i am scrolling up and down he changes and gives me the currentpage number. The problem happens if between those with the class page there is something like a span. When this happens the counter resets to 1..
I would like to know if there is a way to keep the counting working for every div with the class "A4 Portrait" even if inside a span.
So instead of the actual count
1
2
1
2
It would be
1
2
3
4
Try using the index in the list of .Page instead of the index in its parent:
$(".Page").each(function(i) {
var PagePos = $(this).offset().top;
if (PagePos / CurrentCenterWindowPos <= 1) {
CurPage = i + 1; // Use the index in the array.
}
});
$(".CurrPageNumber").val(CurPage);
CurrentPageView = CurPage;
I build a custom carousel in ember and Jquery. Is pretty much straight forward. when click nextImage the slider move the the next image and when clicked previewsImage the slider goes back to the previews image. That part is working perfect. The problem is that when clicked on goToImage(AKA Dots controllers) the images don't move to the corresponding dots order. Look like my logic may have some problems in the.
<nav class="dots">
<a href="#" class="carousel-bullet "{{action 'goToImage' 1}}></a>
<a href="#" class="carousel-bullet"{{action 'goToImage' 2}}></a>
<a href="#" class="carousel-bullet"{{action 'goToImage' 3}}></a>
</nav>
App.SliderComponent = Ember.Component.extend({
currentIndex: 0,
actions: {
runSlider: function(x){
var currentIndex = this.get('currentIndex');
var indexDiff = this.$().find('.carousel ul li').index();
var carousel = this.$().find('.carousel ul'),
slideWidth = carousel.find('li').width();
console.log(indexDiff);
if(x == 1){
carousel.animate({left: - slideWidth }, 200, function () {
carousel.find('li:first-child').appendTo(carousel);
carousel.css('left', '');
});
}else{
carousel.animate({left: + slideWidth}, 200, function () {
carousel.find('li:last-child').prependTo(carousel);
carousel.css('left', '');
});
}
},
nextImage: function(){
this.send('runSlider', 1);
},
previewsImage: function(){
this.send('runSlider',0);
},
goToImage: function(newIndex){
var currentIndex = this.get('currentIndex')
var indexDiff = newIndex - currentIndex;
var direction = (newIndex > currentIndex) ? 'nextImage' : 'previewsImage';
for (var i = 0; i < indexDiff; i++){
this.send(direction);
}
}
}
});
Your indexDiff may be negative. For example, if new index is 0 and current index is 2. In this case, for loop in your code will not work. I guess changing var indexDiff = newIndex - currentIndex; to var indexDiff = Math.abs(newIndex - currentIndex); will help. If this will not help, I would suggest to put console.log(x); in the first line of runSlider action to look if it is called and what is passed.
I have a Previous/Next link on my site that lets me go thru the images with this code:
Previous | Next
<span id='num'></span>
I have placed the images in the codes below. The Previous / Next links are working great but I would like to be able to click on the images itself to navigate to the next images: so click on 1.jpg then goes to 2.jpg so forth and once clicked on 5.jpg goes back to 1.jpg. Please advise, thanks in advance for your help. I am a beginner building my site blindly and any help is much appreciated.
<script type="text/javascript">
var image = new Array("jpegs/1.jpg",
"jpegs/2.jpg",
"jpegs/3.jpg",
"jpegs/4.jpg",
"jpegs/5.jpg"
)
var imgNumber=1
var numberOfImg = image.length
function previousImage(){
if(imgNumber > 1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
</script>
How about:
document.slideImage.onclick = nextImage;
I would also suggest using event registration (also for the anchors):
document.slideImage.addEventListener('click', nextImage);
I wouldn't recommend using href="Javascript:function()", so to give you an idea of how to approach it...
<script type="text/javascript">
window.onload = function() {
var n = 0;
var src = ["jpegs/1.jpg", "jpegs/2.jpg", "jpegs/3.jpg", "jpegs/4.jpg", "jpegs/5.jpg"];
var e = document.getElementById('slideImage');
var prev = function() {
n -= 1;
if(n < 0) n = src.length - 1;
e.setAttribute('src', src[n]);
};
var next = function() {
n += 1;
if(n >= src.length) n = 0;
e.setAttribute('src', src[n]);
};
e.onclick = next;
document.getElementById('nextlink').onclick = next;
document.getElementById('prevlink').onclick = prev;
};
</script>
This method does not write variables to window (excluding onload) and only requires an id attribute.
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.
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.