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);
});
Related
I am new to Jquery and learning. I wrote some script, but I know its not efficient. Trying to follow DRY principles. Can someone please make this look nicer...it works fine, but i dont like it.
It works, just not efficient code.
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
});
});
</script>
Since the conditional statement inside the jquery code is same. You can wrap it into single javascript function and call it whereever it is needed.
<script>
$(document).ready(function () {
const showAndHide = (val) => {
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
}
var val = $('#id_ocftype').val();
showAndHide(val);
$('#id_ocftype').change(function () {
var val = $(this).val();
showAndHide(val);
});
});
</script>
The elements to show or hide are always the same, so you can put them all into a single variable and reference that variable.
$(document).ready(function () {
const elms = $('#div_id_date, #div_id_amount, #div_id_signedby');
const onChange = () => {
const val = $('#id_ocftype').val();
if (val <= 3) {
elms.hide();
} else {
elms.show();
};
};
onChange();
$('#id_ocftype').change(onChange);
});
You can look into .toggleClass.
It allows you to specify when to add/ remove class.
function handleVisibility() {
var val = $('#id_ocftype').val();
const hide = val <= 3
$('#div_id_date').toggleClass('hide', hide)
$('#div_id_amount').toggleClass('hide', hide)
$('#div_id_signedby').toggleClass('hide', hide)
}
$(document).ready(function() {
$('#id_ocftype').change(handleVivibility);
handleVisibility()
});
you can create a common function
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
const hideEl = () => {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
const showEl = () => {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
}
if (val <= 3) {
hideEl();
}
else {
showEl();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
hideEl();
}
else {
showEl();
};
});
});
</script>
also you can use toggle
$("button").click(() => {
$("#test").toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">test</div>
<button>Hide/Show</button>
I have a simple javascript function that detects the page scrolling.
Everything works.
The only omission is that when the page is refreshed the scroll is not preserved so needs reinstating.
I thought it might be something as simple as replacing the direct call to docScroll() in pub.init with something like $(window).on("load", docScroll()); in setBindings but unfortunately this doesn't work.
Anyone offer advice?
var scroll = function () {
var pub = {}, timeout = null;
function reset() {
if (typeof (timeout))
clearTimeout(timeout);
timeout = setTimeout(function () {
docScoll();
}, 200);
}
function docScroll() {
$body = $("body");
var headerHeight = $("#header").height();
$(document).scroll(function () {
if ($(window).scrollTop() > headerHeight) {
$body.addClass("scrolling");
}
else {
$body.removeClass("scrolling");
}
});
}
function setBindings() {
$(window).on("resize", reset);
}
pub.init = function () {
setBindings();
docScroll();
}
return pub;
} ();
The scroll event handler should be set once. So I would do something like this:
var scroll = function () {
var pub = {};
function docScroll() {
var $body = $("body");
var headerHeight = $("#header").height();
if ($(window).scrollTop() > headerHeight) {
$body.addClass("scrolling");
}
else {
$body.removeClass("scrolling");
}
}
function setBindings() {
$(document).scroll(docScroll);
}
pub.init = function () {
setBindings();
docScroll();
}
return pub;
} ();
I have a onload function in jquery like:
$(function () {
$('.over').hover(function () {
//FIRST PARAMETER RIGT, LEFT, TOP, BOTTOM
if ($(this).attr('data-direction') == 'right') {
$(this).addClass('flipping-right');
}
else if ($(this).attr('data-direction') == 'left') {
$(this).addClass('flipping-left');
}
else if ($(this).attr('data-direction') == 'top') {
$(this).addClass('flipping-top');
}
//ETC.
//SECOND gal1,gal2,gal3,gal4
if ($(this).attr('gal') == 'gal1'){
img = $(this).find('img');
setTimeout(function() {
img.attr('src', arrFirstYellowCard[i]);
i++;
if(i > arrFirstYellowCard.length-1)
i=0;
}, 100);
}
else if ($(this).attr('gal') == 'gal2'){
img = $(this).find('img');
setTimeout(function() {
img.attr('src', arrSecondPurpleCard[j]);
j++;
if(j > arrSecondPurpleCard.length-1)
j=0;
}, 100);
}
I want a function to execute that function every second but with parameters in array like
var array_param = ["right,gal1","top,gal3","bottom,gal4","left,gal2","right,gal5"];
which are allowed combinations
I want like a timer so each parameter is called every second
var timer = $.timer($('.over').hover(array_param( 0 ) ), 1000);
timer.play();
but I do not know how to implement this function, and how to add parameters to a function allocated in onload :
$(function () { $('.over').hover(function () {...
Please take a look at my jsfiddle
You can't trigger ready again. You can create a named function and call it a bunch.
$(function () {
index = 0;
window.setInterval(function () {
if (index > array_param.length) index = 0;
myFunction(array_param[index++]);
}, 1000); // call myFunction every second
});
myFunction = function (image) {
$('.over').hover(function () {
// rest of your code goes here
...
};
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');
});
});
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);
});