Tab index get increased in Jquery UI tab - javascript

I am using Jquery UI tab plugin.
Here is my DEMO
In my code I use
var tabControl = $("#tabs");
tabControl.tabs();
tabControl.tabs({ heightStyle: "auto",
beforeLoad: function (event, ui) {
},
load: function (event, ui) {
alert(ui.panel.selector);
if (ui.panel.selector == "#ui-tabs-1") {
m1();
} else if (ui.panel.selector == "#ui-tabs-2") {
m2();
}
}
});
When I moved to page 1st time it displays ui-tabs-1 correctly on pop up. But when I moved to some other page and come back and select the tab it shows an increased index (ui-tabs-4) and my desired method is not called. I don't know why my tab index gets increased. Your help is really appreciated.
Edit 1:
Thanks Rahul for creating the Demo. This code is part of a web application. This is related to one single page. In other pages also there are tabs. When I first load the page alert(ui.panel.selector) shows as "#ui-tabs-1" and when I go to other pages and come back it shows increased id such as #ui-tabs-4". I found that in the source code (jquery.ui.tabs.js) I found following implementation.
var tabId = 0,
rhash = /#.*$/;
function getNextTabId() {
return ++tabId;
}
Seems like tabId is increased and not being reset # . I want to reset that # every page load. Thank you very much for concerns.
Edit 2:
I have created a demo. when tabs clicked u get #ui-id-3 and #ui-id-5. In my scenario when I go back and come to the same page it displays as some increased number like #ui-id-7 for which it displayed #ui-id-3 previously.
Thank You!

Related

How to use cookies to make a certain window only need to be displayed once when you log in again [duplicate]

There have already been answers to this question but I am still unsure exactly how it works.
I am using the following HTML in my footer.php:
<div id="popup">
<div>
<div id="popup-close">X</div>
<h2>Content Goes Here</h2>
</div>
</div>
and the following Javascript:
$j(document).ready(function() {
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
});
Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.
I know that I will have to load the cookie JS in my footer with this:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?
Thanks
James
*Note : This will show popup once per browser as the data is stored in browser memory.
Try HTML localStorage.
Methods :
localStorage.getItem('key');
localStorage.setItem('key','value');
$j(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$j('#popup').delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$j('#popup-close, #popup').click(function() // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hidden.
});
});
Working Demo
This example uses jquery-cookie
Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):
if($.cookie('popup') != 'seen'){
$.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
};
You could get around this issue using php. You only echo out the code for the popup on first page load.
The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.
Pseudo code:
if(cookie_is_not_set) {
show_pop_up;
set_cookie;
}
Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.
$scope.storage = $localStorage; //connects an object to $localstorage
$scope.storage.hasSeenPopup = "false"; // they haven't seen it
$scope.showPopup = function() { // popup to tell people to turn sound on
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<p class="popuptext">Turn Sound On!</p>',
cssClass: 'popup'
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 2000);
$scope.storage.hasSeenPopup = "true"; // they've now seen it
};
$scope.playStream = function(show) {
PlayerService.play(show);
$scope.audioObject = audioObject; // this allow for styling the play/pause icons
if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
$scope.showPopup();
}
}
You can use removeItem() class of localStorage to destroy that key on browser close with:
window.onbeforeunload = function{
localStorage.removeItem('your key');
};
The code to show only one time the popup (Bootstrap Modal in the case) :
modal.js
$(document).ready(function() {
if (Cookies('pop') == null) {
$('#ModalIdName').modal('show');
Cookies('pop', '365');
}
});
Here is the full code snipet for Rails :
Add the script above to your js repo (in Rails : app/javascript/packs)
In Rails we have a specific packing way for script, so :
Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModul
...
Add //= require js.cookie to application.js
It will works perfectly for 365 days!
You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by #Shaunak D. Just replace key with user's unique field and value with popup state.
Like:
ID : popup_state
Sorry for the mistakes in the reply. I am not on my pc today 😅😛

Ionic 2 push() direction: 'back' option not functioning properly

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!!!

Liquid Slider (Link to another page at end of scroll, rather than scroll back to first tab?) jQuery

jQuery / Javascript / PHP
I am using the Liquid Slider as a pagination mechanism on a website, how I use it is I basically have it smoothly scroll through the pages left-right & vice versa.
What I'm trying to accomplish right now is: to have the dynamic arrows link to an external page at the end of the scroll (once it detects it is at its last page/tab), rather than to have it scroll back to where it first began.
Since such option variety is not originally supported from the author website, I am wondering if anyone from here would have an idea how to accomplish this?
A snippet of my dynamic arrows with their callback functions (functions not included):
$('#slider-id').liquidSlider({
continuous:false,
dynamicArrows:true,
dynamicTabs: false,
callbackFunction: function(){ drawLines() }
});
$('.liquid-nav-right-arrow').click(function(){
simRefresh(), simRefresh2();
});
$('.liquid-nav-left-arrow').click(function(){
simRefresh(), simRefresh2();
});
You can set conditionals based on the current panel (tab).
callbackFunction: function () {
var sliderObject = $.data( $('#slider-id)[0], 'liquidSlider');
if ( (sliderObject).currentTab === 4 ) {
//turn off click event
//update link
}
Then if you want to reset the events again, you can try sliderObject.registerArrows(), although I haven't tested this out.

Issue on steriotab system

I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/
You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).
I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..
this javascript may causing the issue..
activate: function(tab) {
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: 'front'});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: 'end'});
} else {
$(this.showPanel).show();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
}
you guys have any thought?
You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.

Single paged website, which i want to get at a certain point after refreshing page

I have a single paged website, in which i've got a div named sitecontent with the width of 4400, which holds 4 "pages". The pages start at 0px of sitecontent, 1100 px of sitecontent, 2200px of sitecontent, and 3300px.
I use Jquery to set de div position to the right px, so i get the right text displayed. After pressing a link i get for example:
<div id="site-content" style="left: -1100px;">
At one of the pages i have to refresh the page, and after this refresh i want the page to display the same "page" on 1100px, but it starts at 0px, the home page.
Is there any way how i can make sure that the sitecontent starts at -1100px of home?
Thanks in advance,
Cheers
You need to append some identifier onto the hash of the URL that you can parse on the page load.
For example:
http://www.somewebpage.com/somepage#page1
Then in the load of the page, you can inspect this hash value and immediately change the UI to show the new page:
var hash = window.location.hash;
if(hash == "#page1")
$('#site-content').css('left', '-1100px');
You can use a cookie to store the value, then, every time the page loads, you need to check the cookie and deal with the value collected:
The link for Jquery Cookie with download and usage manual!
HTML (example)
<a href="#" title="Go Page 1" id="page_01" class="setCookie">
Click to view page 01
</a>
JQUERY (jquery.cookie)
// SET THE COOKIE
$('.setCookie').bind("click", function() {
var pageNumber = $(this).attr("id");
$.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' });
});
// READ THE COOKIE
$(function() {
var oldNumber = $.cookie('the_cookie_name');
if (oldNumber !== NULL) {
$("#page_"+oldNumber).trigger("click");
}
});
Note:
The link that you currently use to change pages, should have the class "setCookie" to trigger the cookie creation, and also the id that is being used to identify the page number.
One advantage of this is that you can control for how long is the cookie preserved and thus allowing the visitant to resume the website experience.
An approach very similar to what Tejs is proposing would be to use a hash-based routing framework that listens to hash changes. That will result in much cleaner code since you don't need to define the scrolling in two different places.
Every link in your page is currently being observed by a jQuery event listener (onclick -> moves the content container to the show the desired content). The HTML looks probably somewhat like this: Contact details.
With this approach, you don't need to watch those links. Instead, simply make them change the hash: Contact details.
Now observe the hash and react to changes. I'm using the Simrou framework (https://github.com/buero-fuer-ideen/Simrou) but you can go with any other framework that provides similar functionality.
jQuery(document).ready(function() {
// Define a function that moves the content, e.g. moveContent(3300);
function moveContent(pixelPosition) {
$('#site-content').css('left', '-' + pixelPosition + 'px');
}
// Setup the router
var router = new Simrou({
'page1': function() { moveContent(0); },
'page2': function() { moveContent(1100); },
'page3': function() { moveContent(2200); },
'page4': function() { moveContent(3300); }
});
router.start();
});
That's all the javascript you need!
(and here is a quick and dirty fiddle, demonstrating the whole thing: http://jsfiddle.net/R7F6r/)

Categories

Resources