Tabs UI using Jquery - javascript

http://jqueryui.com/tabs/#manipulation the tabs manipulation does a click to add a tab. but i need a little tweak in there. after i click the add tab i.e., clicking add tab creates a tab2..but the screen doesn't takes the view to the second tab. It remains in the first tab but add the second tab(which is not active after click)
I need tab2 to be active after clicking the add button...this process continues for all the adding tabs.
I need a example or a way..coz it's a showstopper for my current project

There’s a link of the bottom of that page, “Want to learn more about the tabs widget? Check out the API documentation.”
And to get from there to http://api.jqueryui.com/tabs/#option-active should not be an impossible task for a developer, don’t you think …?

Related

How to detect save and tab change event using angular8 with bootstrap4

i have used bootstrap4 tabs in angular8. Now if i have not filled details in first tab, (i.e) user tab and click on submit, then the other tab must be disabled, once the submit button is click then the other tab must be enabled.
Here based on click of other tab, the contents in the other tab must be loaded, if other tab is not clicked, then the details in others tab must not be filled. I have tried by using click event and tabChange event, but everything works in app.component but the data doesnt come to the user or other tab based on click on other tab.
I am not getting anyway to move forward, i have even used event emitters and storage inside the app, through service files, but nothing worked for me.
Demo
I looked at your Demo and I think I understand your problem. I personally am a fan of using ReplaySubjects, and EventEmitters to pass data up and down through my components. Here is a working demo : Working Demo
Let me know if it is not what you were looking for.

Tabbed menu in CSS and Javascript - tab sets to active after refreshing page

I have tabbed menu written mainly in HTML and CSS. There are 5 tabs, the first one is set to active when we first load the page. I had to add little JS script, because that active tab wouldn't change its look to "not-active" when we clicked on another tab (so we had two tabs with "active" look). Everything works fine, but if we click on, let's say, 3rd tab and then refresh website, the first tab changes its look from "not-active" to "active", so there are two tabs with "active" look. Only the styling is wrong, content in the tabs views the right content... So if we click on another tab and refresh the page, we have two tabs with "active" look, but the website still views the content from the right tab. I don't want the first tab to set its look to "active" after refreshing page. I don't know JS and I don't know how to fix it.
Javascript:
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
Here's the full code: http://jsfiddle.net/y5SzQ/1/
The simplest solution
$(".tabmenu").children("div").click(function () {
$(".current").removeClass("current");
})
.filter(location.hash).click();
(to test: change tab, right click Reload resule frame)
Demo: http://jsfiddle.net/y5SzQ/3/
What it does is just triggers click event similarly to what happens when user clicks with a mouse. If there is location.hash (say '#french-tab') and tab other then Polish has to be selected, then .filter(location.hash) will become for example .filter('#french-tab') and corresponding tab will be selected.

How to figure out browser scrolling issue

I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks

How to capture open link in new tab or window using jQuery?

Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.

Debugging strange javascript behavior

I have a page that uses JQuery UI Tabs and some other bits and pieces. When a user opens this page and quickly clicks on some tab, after a second or so the page reverts to the first tab again!
I am trying to use Firebug to see what's going on, but as far as I can see, when that reversion occurs the body tag highlights, but nothing within it. I am a novice with Firebug - how can I use it to better understand what's going on here?
I can only take a guess without a concrete example, but it sounds you're initialising the tabs twice. The tabs must already be enabled which is allowing the initial navigation between tabs. Then a second initialisation of the tabs is resetting the view back to the first tab.
You are initialising the tabs inside $(document).ready and not window.onload, right?

Categories