jPaginate - Help Determining Which Page was clicked? - javascript

I am using jQuery's jPaginate plugin to sort data on one of my websites. The problem I am having is determining which page was click on jPaginate. I have posted my code below.
This code loads the plugin on Document Ready.
$("#demo2").paginate({
count : a,
start : 1,
display : 10,
border : false,
text_color : '#888',
background_color : '#EEE',
text_hover_color : 'black',
cookies : true,
onChange : function(){alert(); console.log($(this))},
background_hover_color : '#CFCFCF'
});
See screenshot: http://screencast.com/t/SbxHjn7H
The problem is I need to know what page was clicked whenever the user clicks on a number 1-5.. Any help or further understanding of this will be greatly appreciated. Thanks.

I actually was able to figure this out on my own..
You need to get the current page by writing a function to fire on the 'onChange' event within the jPaginate plugin.
$("#demo2").paginate({
count : a,
start : '<?=intval($page + 1);?>',
display : 10,
border : false,
text_color : '#888',
background_color : '#EEE',
text_hover_color : 'black',
cookies : true,
onChange : function(){
var getPage = $('.jPag-current').html();
var minusPage = getPage - 1;
},
background_hover_color : '#CFCFCF'
});

Related

Appcelerator: Elements are not added to views in android

I've been working on a multi platform mobile application. I almost finished it but I always tested on iOS (because of reasons). Now I am able to test on Android to find out that it fails in many ways.
The main problem here is that when I use:
alloy.createSomeElement({
//params
})
$.someView.add(someElemet);
the element is not added to the view. As I mentioned, this only happens on Android and works just fine on iOS.
Here I show you an example and it's result in both platforms.
e.json.forEach(function(address) {
var addressView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : '90%',
layout : 'horizontal',
touchEnabled : true,
Address_id : address.id
});
var icoCont = Ti.UI.createView({
height : 20,
width : '10%'
});
var icon = Ti.UI.createImageView({
height : '20',
width : '20',
image : "/compartidos/persona3.png",
touchEnabled : false
});
var addressText = Ti.UI.createLabel({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
left : 1,
text : address.street + " - " + address.ext_number,
font : {
fontSize : 12,
fontFamily : "Nunito-Bold",
},
touchEnabled : false,
color: "#000"
});
if (address.alias)
addressText.text = address.alias;
var separator = Ti.UI.createView({
height : 5,
width : '100%',
top : 5,
bottom : 5,
backgroundColor : '#8C000000',
touchEnabled : false
});
addressView.add(icoCont, addressText);
icoCont.add(icon);
$.container.add(addressView, separator);
});
Result on iOS: result on iOS
And this on Android: result on Android
I really hope you can help me with this.
note: Nueva dirección and Dirección actual are not generated this way, those exist in the xml file.
I solved my issue after a long cycle of try & error. I'm posting my solution only in case somebody faces the same problem.
Seems that in Android I can't add multiple elements in a single instruction like this
addressView.add(icoCont, addressText);
The only thing I had to do is separate it in 2 (One for each element) like so
addressView.add(icoCont);
addressView.add(addressText);
You can add many views in single add statement, but you need to pass them as array like : addressView.add( [icoCont, addressText] );

How do I combine aggregate_rollover and linked charts?

How do I combine functionality of both aggregate_rollover and linked charts?
Both of these work for me when used without the other (individually) but when used together only aggregate_rollover is in effect.
Does anyone know if this should work or if it's a bug? I'm using v2.9.
I've tried systematically commenting lines out to see of anything is interfering with the linking but no joy.
var opts = {
data: (linedata.length > 0 ? linedata : undefined),
height: ($scope.config.size === 12 ? 400 : 200),
target: '#' + $scope.mgLineId,
x_accessor: 't',
y_accessor: 'v', //Link all the charts
aggregate_rollover: true,
linked : true,
linked_format : '%Y-%m-%d-%H'
};
etc graphData = MG.data_graphic(opts)

jquery sparkline stacked bar issue

i am trying to use stacked bar in jquery sparkline plugin, mine version in 2.1.2, the normal sparkline work properly, but the stacked bar type, dosen't work, here is my code (similar):
<span class="sparklines" data-sparkline-value="1:2,3:4,5:4,3:2"></span>
and initialising function
$('.sparklines').each(function () {
$(this).sparkline(
$(this).data("sparkline-value"), {
type: $(this).data("sparkline-type") ? $(this).data("sparkline-type") : 'bar',
barWidth: $(this).data("sparkline-bar-width") ? $(this).data("sparkline-bar-width") : 5,
negBarColor: '#f44',
stackedBarColor: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00',
'#dd4477', '#0099c6', '#990099'],
barSpacing: $(this).data("sparkline-bar-spacing") ? $(this).data("sparkline-bar-spacing") : 2,
height: $(this).data("sparkline-height") ? $(this).data("sparkline-height") : '20px',
barColor: $(this).data("sparkline-color") ? $(this).data("sparkline-color") : '#7BB2B4',
enableTagOptions: true
});
});
add to javascript code:
zeroAxis: false
and spark values should be [1,2],[3,4],[5,4],[3,2], there is another method, this method it s prefered to use div with data-spark-value, other method we should use span and the value is seperated by ":" between span tags

Applying style for YouTube Popup Player's popup Window

I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..
You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!
customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);

Plupload - how to open more than one time and refresh the list?

js:
$(".butAnexarDoc").live("click", function(){
$("#anexarArquivos").plupload({
// General settings
runtimes : 'html5,html4',
url : 'js/plupload/examples/upload.php',
max_file_size : '1000mb',
max_file_count : 20, // user can add no more then 20 files at a time
chunk_size : '1mb',
unique_names : false,
multiple_queues : true
});
});
ok, first time work perfect, but if i click in a diferent place to open again, the list its not been reloaded.
its always the same, to reload the list i need to refresh the page.
how can i fix this ?
problem resolved:
$(".butAnexarDoc").live("click", function(){
$("#anexarArquivos").plupload({
// General settings
runtimes : 'html5,html4',
url : 'js/plupload/examples/upload.php',
max_file_size : '1000mb',
max_file_count : 20, // user can add no more then 20 files at a time
chunk_size : '1mb',
unique_names : false,
multiple_queues : true
});
// set to getUploader
var uploader = $('#anexarArquivos').plupload('getUploader');
// use splice to clean the list
uploader.splice();
});

Categories