I'm trying to figure out how to customize the Pagination Plugin's Navigation; the First, Prev, Page 1, Page 2, Next, Last. I want to make it 'Prev, Next, Page 1 of 2'
http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
The documentation states I can hide 'First/Last' by declaring show_first_last as false -
However, this didn't work.
UPDATE: Here's a link with the full code, and struggle. http://tinyurl.com/buab7ah
OK so it doesn't support it out of the box and I had to modify it a little. Here's the link:
http://dl.dropbox.com/u/24657596/Pajinate/jquery.pajinate.js
So how does it work? Simple - specify the order via a string array, like so:
$(document).ready(function(){
$('#paging_container1').pajinate({
nav_order : ["prev", "next", "num"]
});
});
Or like so:
$(document).ready(function(){
$('#paging_container1').pajinate({
nav_order : ["prev", "next", "num", "first", "last"]
});
});
Related
Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}
When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});
is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.
I want to be able to remove the album contents from my div when pressing a button. Something like $("#myDiv").html(""), so the gallery is removed from the DOM and then I am able to recreate the gallery in the same div, but with a different data source array when clicking another button.
Right now I have a function that creates the nanoGallery and I call it when the user clicks on a button, then when the user clicks another button I need to remove the nanoGallery and recreate it with different data.
The code that is not working right now:
function createAlbum()
{
// This object has a different array every time button is clicked!
var pics = currentOrder["vehicle-pictures"];
$("#repairPictures").nanoGallery({
items : pics,
colorSchemeViewer : 'light',
photoset : 'none',
viewerDisplayLogo : true,
thumbnailLazyLoad : true,
thumbnailLabel : { display: true, position: 'overImageOnBottom', titleMaxLength: 35 },
colorScheme : { thumbnail:{ labelBackground: '#444 !important' } },
locationHash : false,
thumbnailHoverEffect :'borderLighter,imageScaleIn80'
});
}
Then to remove it...
//---------------------------------------------------------------------
function cleanAlbum()
{
$("#repairPictures").html("");
}
How can I accomplish this?
BTW, the $("#myDiv").html("") approach is just an example, if you know a better way to remove the gallery html from the div, please feel free to suggest it.
If you want to remove album from DOM, use: $('#yourElement').nanoGallery('destroy');, but you can set new items for nanoGallery and just do $('#yourElement').nanoGallery('reload');
1 I have a product page that has a list of options.
2 When clicked, this opens a new page with all the options listed.
3 When I click an option, such as 'black', I want the page to go back to the product, but update the page with the new option selected. This looks like it worked, but I cannot scroll or select anything on the page.
(For some reason the product variation page is being shown over the new product page, which is why I can't select anything or scroll)
4 And when I try to go back again to the product listings page, I get this mess.
View
<ion-item *ngFor="#option of productData">
<ion-label>{{option.val}}</ion-label>
<ion-radio (click)="goToProduct($event, option.catalogId)" [checked]="option.val == selected"></ion-radio>
</ion-item>
Function
goToProduct(event, catalogId) {
this.nav.push(ProductPage, {
catalogId: catalogId
},{
direction: 'back'
});
}
I thought that I needed to remove the older product page, so I was doing:
goToProduct(event, catalogId) {
this.nav.remove(1);
this.nav.push(ProductPage, {
catalogId: catalogId
},{
direction: 'back'
});
}
And all sorts of variations like this, but nothing has worked.
I know that Ionic 2 is still in beta, is this a known issue? Or am I missing something? How can I select an option and make the updated page direction go backwards without destroying my app?
If I use insert() instead of push() it goes backwards to the updated product just as desired, and completely removes the old product page. I didn't expect this behavior by reading the documentation, but I guess it's a nice and easy solution.
goToProduct(event, catalogId) {
this.nav.insert(1, ProductPage, {
catalogId: catalogId
},{
direction: 'back'
});
}
I am thankful for the above answer, it helped me a lot.
I was in the need to apply the transition of my app pages which I got accomplished with this but there was one issue as-
When ever I was boing back, It was overlapping some page at some point of time.
After doing some search, I got this issue resolved.
This is the code which I have as-
goBack() {
{
this.nav.insert(0,MyPage, {
PId: this.parentId
},{direction: 'back'});
}
{
this.nav.pop();
}
}
We can also use {direction: 'forward'} Depending upon our requirement.
I have just replace 1 with 0 parameter and working for me.
Have a nice Day!!!
I installed the js bootstrap iconpicker (http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html, http://victor-valencia.github.io/bootstrap-iconpicker/) but I do not see how to detect the selected icon.
The example code to configure the button is:
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
But there's nothing in the examples telling how to get the selected icon. I'ld think of a callback or something like that.
How can I get the selected icon?
I've updated the plugin at Github, so a change event is fired when the user change the iconpicker.
I've already sent a pull request to the owner of the plugin (Victor Valencia).
While he doesn't approve the changes you can use the version modified by me.
How you use it:
$('#iconpicker').on('change', function(e) {
console.log( e.icon );
});
Log:
fa-key
fa-info-circle
fa-flag-checkered
Edit:
Victor Valencia already approved my pull request so you can download the source from his repository.
Theres a hidden input that changes based on what you select - you can access it with this: $('input[name=icon]')
As fas as mi knowledge, It just change the css of the component. You will not get the image value here or the path.
Can you please elaborate what you trying to achieve here.
the event is "iconpickerSelected"
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
$('#convert').on('iconpickerSelected', function (e) {
//here you can get the value
$(this).val()
})
I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.