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);
});
Related
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);
});
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');
});
});
I'm using the following jquery (theres a lot of it, sorry) to load in a dynamic dropdown and to update when one of them changes. In IE it loads the dropdowns at the start, but doesn't seem to fire on the onchange events (even in IE9)
Any help will really be appreciated
<script type="text/javascript">
$(document).ready(function() {
<%= loadValues%>
$('.dropone').change(function() {
var tmpRoomID = $('.drpChg1').val();
$(".drpChg2").empty();
$(".drpChg2").load("ajaxdropdown.aspx?drpType=room&roomid=" + tmpRoomID, function() {
updateTB()
});
});
$('.droptwo').change(function() {
updateTB()
});
$('.dropfive').change(function() {
updateTB()
});
$('.dropfour').change(function() {
updateTB()
});
$('.dropthree').change(function() {
var tmpRoomID = $('.drpChg3').val();
$(".drpChg4").empty();
$(".drpChg4").load("ajaxdropdown.aspx?drpType=cat&catID=" + tmpRoomID, function() {
updateTB()
});
$(".drpChg5").load("ajaxdropdown.aspx?drpType=subcat&subcatID=" + tmpRoomID, function() {
updateTB()
});
});
function updateTB() {
$('#drop1').val($(".drpChg1").val());
$('#drop2').val($(".drpChg2").val());
$('#drop3').val($(".drpChg3").val());
$('#drop4').val($(".drpChg4").val());
$('#drop5').val($(".drpChg5").val());
}
function loadValues() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx', function() {
$('#drop1').val($(".drpChg1").val());
});
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
$('#drop2').val($(".drpChg2").val());
});
$('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
$('#drop3').val($(".drpChg3").val());
});
$('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
$('#drop4').val($(".drpChg4").val());
});
$('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
$('#drop5').val($(".drpChg5").val());
});
}
function loadNewValues() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx', function() {
$('.drpChg1').val($("#drop1").val());
});
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
$('.drpChg2').val($("#drop2").val());
});
$('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
$('.drpChg3').val($("#drop3").val());
});
$('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
$('.drpChg4').val($("#drop4").val());
});
$('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
$('.drpChg5').val($("#drop5").val());
});
}
});
</script>
Try out those links you refer to as normal links.
Sometimes there's a confusion between browsers needing a link to:
Somefile.asp?blah=yaddah
/Somefile.asp?blah=yaddah
./Somefile.asp?blah=yaddah
I see this with CSS sometimes.
I need to refactor this to avoid code repetition.
$('#showmore-towns').toggle(
function() {
$('.popularTownsAdditional').show();
console.log(this);
$('#showmore-town .showless').show();
$('#showmore-town .showmore').hide();
$('#showmore-town').removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
$('.popularTownsAdditional').hide();
$('.showless').hide();
$('.showmore').show();
$('#showmore-towns').addClass('sd-dark28').removeClass('sd-dark28down');
});
$('#showmore-cities').toggle(
function() {
$('.popularCitiesAdditional').show();
$('#showmore-cities .showless').show();
$('#showmore-cities .showmore').hide();
$('#showmore-cities').removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
$('.popularCitiesAdditional').hide();
$('#showmore-cities .showless').hide();
$('#showmore-cities .showmore').show();
$('#showmore-cities').addClass('sd-dark28').removeClass('sd-dark28down');
});
basically, it shows the same functionality but only on different divs with different IDs.
Probably just need to reference a named function or two instead of the anon ones.
function showStuff(typeToShow) {
$('.popular' + typeToShow + 'Additional').show();
$('#showmore-' + typeToShow + .showless').show();
$('#showmore-' + typeToShow + .showmore').hide();
$('#showmore-' + typeToShow).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
}
function hideStuff(typeToHide) {
$('.popular' + typeToHide + 'Additional').hide();
$('#showmore-' + typeToHide + .showless').hide();
$('#showmore-' + typeToHide + .showmore').show();
$('#showmore-' + typeToHide ).addClass('sd-dark28').removeClass('sd-dark28down');
}
NOTE: a) You could probably make these methods a bit slicker, but you get the idea!
NOTE: b) You'd need to rename '#showmore-town' to '#showmore-towns' (with an S) if you want to use the substitution suggested.
Then in your toggle you could reference these functions:
$('#showmore-towns').toggle(showStuff(towns),
hideStuff(towns));
$('#showmore-cities').toggle(showStuff(cities),
hideStuff(cities));
I mean...if it's always going to start with #showmore-...we can work it down
$('[id^=showmore-]').toggle(
function() {
var id = $(this).prop('id');
id = id.split('-')[1];
var upperID = id.charAt(0).toUpperCase() + id.slice(1);
$('.popular'+upperID+'Additional').show();
$('#showmore-'+id+' .showless').show();
$('#showmore-'+id+'.showmore').hide();
$('#showmore-'+id).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
var id = $(this).prop('id');
id = id.split('-')[1];
var upperID = id.charAt(0).toUpperCase() + id.slice(1);
$('.popular'+upperID+'Additional').hide();
$('#showmore-'+id+' .showless').hide();
$('#showmore-'+id+' .showmore').show();
$('#showmore-'+id).addClass('sd-dark28').removeClass('sd-dark28down');
});
you could do:
(function() {
$('#showmore-towns').toggle(
function() { showmorelessOn('#showmore-town'); },
function() { showmorelessOff('#showmore-town'); }
);
$('#showmore-cities').toggle(
function() { showmorelessOn('#showmore-town'); },
function() { showmorelessOff('#showmore-town'); }
);
var showmorelessOn = function(context) {
$('.popularCitiesAdditional').show();
$('.showless', context).show();
$('.showmore', context).hide();
$(context).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
};
var showmorelessOff = function(context) {
$('.popularCitiesAdditional').hide();
$('.showless', context).hide();
$('.showmore', context).show();
$(context).addClass('sd-dark28').removeClass('sd-dark28down');
};
})();
though I agree, could perhaps be better served on codereview.stackexchange.com
I would do this almost entirely in the CSS. Only use .toggleClass() and determine what is shown and what is hidden in the CSS.
(function() {
$('#showmore-towns').toggle(
function() { showmorelessOn.call($('#showmore-town')); },
function() { showmorelessOff.call($('#showmore-town')); }
);
$('#showmore-cities').toggle(
function() { showmorelessOn.call($('#showmore-town')); },
function() { showmorelessOff.call($('#showmore-town')); }
);
var showmorelessOn = function() {
$('.popularCitiesAdditional').show();
$('.showless', this).show();
$('.showmore', this).hide();
$(this).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
};
var showmorelessOff = function() {
$('.popularCitiesAdditional').hide();
$('.showless', this).hide();
$('.showmore', this).show();
$(this).addClass('sd-dark28').removeClass('sd-dark28down');
};
})();
(function() {
$('#showmore-towns').toggle(
function() { showmoreless(); }
);
$('#showmore-cities').toggle(
function() { showmoreless(); }
);
var showmoreless = function() {
if(this.hasClass('sd-dark28'){
$('.popularCitiesAdditional').show();
$('.showless', this).show();
$('.showmore', this).hide();
$(this).removeClass('sd-dark28').addClass('sd-dark28down');
}
else
{
$('.popularCitiesAdditional').hide();
$('.showless', this).hide();
$('.showmore', this).show();
$(this).addClass('sd-dark28').removeClass('sd-dark28down');
}
}.bind($('#showmore-town'));
})();