Top and Bottom Pagination Sync - javascript

I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});

Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});

You should probably look at using the onChange event to redraw the other pager that didn't incur the change

Related

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Change content on click of button in jquery

So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery

ui - accordion does not work after empty() and append()

I have Four DIVs and I call accordion function to it. It works fine initially. But it fails after I clear all the content and again append the FOUR DIVs.
Kindly take a look at the link
http://jsfiddle.net/p7vUk/2/
You will see that on clicking divA , divAA will slide toggle.
on clicking divB, divBB will slide toggle.
After you click the 'clear all' Button, the div=content is cleared and same four DIVS are appended, but the jquery accordion fails to work.
The accordion styling and behaviour is defined upon creation. Looks like the accordion does not update when the content changes. Nor does there appear to be a method you can call to trigger an update.
Have you tried 'turning it off and on again'?
//change content, then:
$("#content").accordion("destroy");
$("#content").accordion({ ... your options ... }); //create it again
This may require more related work, such as setting the originally selected tab, etc.

jCarousel with keyboard : wrong focus using the tab key

I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.

How to handle Android's Back Button click in a single HTML page webapp using PhoneGap?

I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.

Categories