I'm newbie here. I was try to make every single page have a swipe method for jQuery mobile site as below:
$("#page1").swipeleft(function () {
$.mobile.changePage("#page2", {
transition: "slide"
});
});
$("#page2").swipeleft(function () {
$.mobile.changePage("#page3", {
transition: "slide"
});
});
when i try to make a loop like this it doesn't work.
var i = 1;
if(i <= 3;) {
$("#page" + i).swipeleft(function () {
$.mobile.changePage("#page" + (i + 1), {
transition: "slide"
});
});
};
something missing for my code?
updated: tried this code but seem doesn't work
for (var i = 1; i<=3; i++) {
$("#page"+i).swipeleft(function () {
$.mobile.changePage("#page"+(i+1), {
transition: "slide"
});
});
}
here is my code:
http://jsfiddle.net/lansinz/FHnp6/1/
You don't actually seem to a loop in your code. Try the following
//Create a loop for pages 1 to 3
for (var i = 1; i <= 3; i++) {
//When page is 'swiped' call the nextPage() function
$('#page' + i).on('swipeleft', nextPage);
}
function nextPage(event) {
//Get the ID attribute of the element swiped
var id = $(event.target).attr('id');
//Get the number at the end of the elements ID (to work out the page number)
var pageNo = parseInt(id.substr(4), 10);
//Call the changePage function, increasing the page number by one
$.mobile.changePage($('#page' + (pageNo + 1)), {
transition: 'slide'
});
}
jsFiddle Link
try this simple way...
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
Or the old school way of doing it with lengthy code :)
$(document).on('pageshow', '#page1', function(){
$( "#page1" ).on( 'swipeleft', function(){
$.mobile.changePage('#page2');
});
});
$(document).on('pageshow', '#page2', function(){
$( "#page2" ).on( 'swipeleft', function(){
$.mobile.changePage('#page3');
});
$( "#page2" ).on( 'swiperight', function(){
$.mobile.changePage('#page1');
});
});
$(document).on('pageshow', '#page3', function(){
$( "#page3" ).on( 'swiperight', function(){
$.mobile.changePage('#page2');
});
});
Related
I got a problem that wastes more and more time. Now I want to ask you guys to help me out. I really think it's not a big thing but I can't find the solution:
I have two code snippets, both really similar:
$(function () {
$('.plus--article').on('click', function () {
var $qty = $(this).closest('form').find('input[name="sQuantity"]');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
$('.change-quantity--form').submit(function (e) {
var form = this;
e.preventDefault();
var timeout = setTimeout(function () {
$.overlay.open();
form.submit();
}, 2000);
});
}
});
$('.minus--article').on('click', function () {
var $qty = $(this).closest('form').find('input[name="sQuantity"]');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
window.clearTimeout(timeout);
$('.change-quantity--form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
$.overlay.open({
closeOnClick: false
});
form.submit();
}, 2000);
});
}
});
});
I just want to reset the timeout after a click on one of the buttons.
var time;
}, 2000); use this-> }, time);
$(".test").on("click", function(){
time = 0;
});
Im new to jQuery and wanting to make this a little cleaner and also add functionality but not sure on how rto do it so hoping someone could give me a hand.
tabs (working) so far
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).show();
});
At the moment only works on click event but want to add something so i can add auto changing of tabs like using
hokTabs.pause();
etc.. this is mainly for when you hover an iutem it will pause and start again when you hover of button.
Anyone have any ideas?
// New Veritcal Tabs JS
(function (hokTabs, $) {
var internal = '5000'; // Internal
// start auto tabs
hokTabs.start = function () {
console.log('started');
}
// start auto tabs
hokTabs.stop = function () {
console.log('started');
}
// start auto tabs
hokTabs.pause = function () {
console.log('started');
}
}(window.hokTabs, jQuery));
These are simple start and stop functions, you just simply link them to hover events:
$(document).ready(function($) {
var activateTab = function(index) {
var tab = $(".tabs-menu li:eq(" + index + ")"),
tabContent = $(".tab div:eq(" + index + ")");
tab.addClass("current");
tab.siblings().removeClass("current");
tabContent.siblings().css("display", "none");
tabContent.show();
}
var automation = {
start: function() {
this.current = setInterval(function() {
var currentIndex = $(".tabs-menu li.current").index(),
max = $(".tabs-menu li.current").parent().children().length;
activateTab(currentIndex + 1 < max ? currentIndex + 1 : 0);
}, 2000);
},
stop: function() {
if (this.current) {
clearInterval(this.current);
}
}
}
$(".tabs-menu a").click(function(event) {
event.preventDefault();
activateTab($(event.currentTarget).parent().index());
});
automation.start();
});
JS Fiddle: https://jsfiddle.net/5zmcn3h2/10/
I have a next and previous page function using jquery. what I want to do is hide the previous button when the page = 1. I haven tried to create an if/else function but doesn't work. I hope you can help me and thank you for your time.
Below is my current jquery code:
$('document').ready(function () {
var $wrap = $('#wrap'),
page = 1;
$('#next').on('click', function () {
getPage(++page);
});
$('#prev').on('click', function () {
getPage(--page);
});
var getPage = function (page) {
$wrap.load('site/proxy.php?page=' + page + ' #postsArea');
};
getPage(page);
});
Below is my HTML code:
<body>
<div id="wrap" style="overflow-y: scroll; height:800px; width:480px;"></div>
<button type="button" id="next">Next</button>
<button type="button" id="prev">Previous</button>
</body>
Below is the jquery code I badly created:
if ((page)= 1) {
$('input[id=prev]')
.click(
function () {
$(this).hide();
});
} else {
$('input[id=prev]')
.click(
function () {
$(this).show();
});
}
Below is working jquery code:
$('document').ready(function () {
var $wrap = $('#wrap'),
page = 1;
$('#next').on('click', function () {
getPage(++page);
});
$('#prev').on('click', function () {
getPage(--page);
});
var getPage = function (page) {
$wrap.load('site/proxy.php?page=' + page + ' #postsArea');
if (page == 1) {
$("#prev").hide();
} else {
$('#prev').show();
}
};
getPage(page);
});
if ((page)= 1) is doubtless wrong. Perhaps you meant if (page == 1).
= performs assignment
== performs a check for (loose) equality
Try this js:
DEMO: http://jsfiddle.net/c5bA4/7/
$('document').ready(function () {
var $wrap = $('#wrap'),
page = 1;
$('#next').on('click', function () {
getPage(++page);
});
$('#prev').on('click', function () {
getPage(--page);
});
var getPage = function (page) {
$wrap.load('site/proxy.php?page=' + page + ' #postsArea');
if (page == 1) {
$("#prev").hide();
} else {
$('#prev').show();
}
};
getPage(page);
});
make a single click handler and use the page type condition within it.
$('input[id=prev]')
.click(
function () {
if (page == 1) {
$(this).hide();
}
else {
$(this).show();
}
});
Well, why not just:
var getPage = function (page) {
$wrap.load('site/proxy.php?page=' + page + ' #postsArea');
$('#prev').toggle(page !== 1);
};
You could set code inside load() complete callback but i don't see any reason here.
Well. as you have asked to make it invisible when page == 1 you could simply put it inside the click event of `#prev'
$('#prev').on('click', function () {
if(--page <= 1 ) $(this).hide()
getPage(page);
});
We had a developer work-up a piece of javascript for animating markers on a map for us. See http://luniablue.com/clients/endowment for it's current state.
The issue I'm having, is that the rollover is too sensitive and I want there to be a 1sec pause before executing the rollover function. From what I've read, I need to declare a setTimeout() function, but I'm not clear on where to insert that.
I have tried every place that I can see and I've had no luck except in breaking the script. I'm sure it's something stupid simple, but javascript isn't my stong point. Can anyone help me out?
Here's the code:
var firstEntry = true;
var lastOn = '';
function showAllPins() {
if ($('#communities').hasClass('theMouseIsOff')) {
var citiesArr = [];
$('.pin').each( function () {
citiesArr.push(this.id);
$('#'+this.id).hide();
});
var stillHidden = citiesArr.length;
while (stillHidden > 0) {
var a = Math.floor(Math.random()*citiesArr.length);
if ($('#'+citiesArr[a]).is(':hidden')) {
$('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
opacity: 1,
top: '+=40',
}, Math.floor(Math.random()*900), 'easeOutBounce');
stillHidden--;
}
}
firstEntry = true;
$('#communities').removeClass('theMouseIsOff');
}
}
function showPin(relid){
lastOn = relid;
if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
if (firstEntry == true) {
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
firstEntry = false;
} else {
$("#communities div[id=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
}
}
function removeLastPin() {
$('#communities').addClass('theMouseIsOff');
$("#communities div[id=" + lastOn + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
setTimeout('showAllPins()',600);
}
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
$(document).ready(function() {
$('.pin').each(function() {
var selector = '#' + $(this).data('tooltip-id');
Tipped.create(this, $(selector)[0], { skin: 'light', hook: { target: 'topmiddle', tooltip: 'bottomleft'}});
});
});
Where you see:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
You can change it to:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
setTimeout(function(){showPin(relid)}, 1000);
}).mouseleave( function () { removeLastPin() });
});
By changing the showPin() function to execute after a timeout, the pin should appear after the specified interval.
Update:
If you would like the function only to run if the mouseleave hasn't occurred during the specified interval, you can clear the interval on mouseleave like this:
$(document).ready(function() {
$('.pin').mouseenter(function() {
relid = $(this).attr('rel');
var awaiting = setTimeout(function() {
showPin(relid)
}, 1000);
}).mouseleave(function() {
removeLastPin();
clearInterval(awaiting);
});
});
Why doesn't this work? What would be a plausible solution to get this effect?
$(document).ready(function() {
$('#myLink1').click(
function() {
$('#myLink1').replaceWith('<a id="myLink2" href="#panel2">#panel2</a>');
});
$('#myLink2').click(
function() {
$('#myLink2').replaceWith('<a id="myLink3" href="#panel3">#panel3</a>');
});
});
I'm new to loops and how I'm supposed to add strings and variables.
$(document).ready(function() {
var panelNum = 8;
for (i=1;i<=panelNum;i++){
$('#myLink'+i).click(function() {
$('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>');
});
};
});
The problem is myLink2 doesn't exist until mylink is clicked. You have to add the mylink2 handler after it is created. Try the following:
function add_replace_with(i){
$('#myLink'+i).click(
function() {
do_replace_with(i)
return false;
});
}
function do_replace_with(i){
$('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>');
$('#myLink'+(i+1)).click(
function() {
do_replace_with(i+1)
});
}
$(document).ready(function() {
add_replace_with(1);
});
I should note, that you might be better of hard-coding the links and just using .show() to toggle them.
Alternatively:
$(function() {
$('body')
.delegate('#myLink1', 'click', function() {
$(this).replaceWith('<a id="myLink2" href="#panel2">#panel2</a>');
})
.delegate('#myLink2', 'click', function() {
$(this).replaceWith('<a id="myLin32" href="#panel3">#panel2</a>');
})
;
});
To generalize this for a whole bunch of such link, with similar naming convention:
$(function() {
for (var link = 1; link < 8; ++link)
(function(link) {
$('body').delegate('#myLink' + link, 'click', function() {
var nxt = link + 1;
$(this).replaceWith('<a id="#myLink' + nxt + '" href="#panel' + nxt + '">panel ' + nxt + '</a>');
});
})(link);
});