I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.
Initially Active and Visible
-1a Initially Active and Visible
-1b Inactive
-1c Inactive
Inactive
-2a Initially Active but NOT Visible
-2b Inactive
-2c Inactive
2a is not visible at first because its parent(2) is not active however 2a does have the tag:
<li class='active'>
When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.
I placed the HTML code in this jsfiddle because it was too long to include in the post.
http://jsfiddle.net/vhFFf/
EDIT:
Here is a working fiddle that accurately shows the issue I am trying to correct:
http://jsfiddle.net/52VtD/4862/
Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.
I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE
that was the simplest solution I could think of hope it helps.
Related
I am working on a front end developement. I have tabs and these tabs are developed using "UI=TABSET"
So My question is , Lets assume i have 2 tabs.. tab1 and tab2. Firstly am on tab1..under tab there is a form where i entered details while moving to tab2..there will be modal popup with 2 buttons cancel and discard changes. If i click cancel..the details i have entered should remain same and stay on the same tab tab1 instead moving to tab2.
tab1 > entered details>click tab2 > modalpop>discard click> stay on tab1
Could you help me how to acheive this.
If you are looking for step like feature you can try this
http://mgonto.github.io/angular-wizard/
As it works if step 1 is finished move to step 2 and so on
Easy to implement
I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});
Is it possible to add a class active to a known tab in different page.
When i navigate to page 2 from page 1 i have to make tab 2 as active. I have the tab Id with me.
Can any one tell me what should I do?
My code
<div ng-repeat="t in data" class="time-tab-adspace" ng-class="{'tab-align-center':data.length==2}">
<a class="nav-people-tab text-hover" data-toggle="tab" ng-class="{'nav-people-tab-hover in':seltab=='ticket'+t.id}" ng-click="selecttab(t)"></a>
</div>
In the above code i get what is my selected tab and css like nav-people-tab-hover in gets applied when i click on it. Now when i click on continue below controller button gets executed.
$scope.seltab= tselected; // here I get the selected tab in page 2
$('#?????').addClass("active").show();
window.location.replace("page1");
In the above code What should I write in ????? or some piece of code inorder for me to work this?
I have a working toggle me code except for one small issue and I am not sure what to do to fix it. Can some one please help me. I have duplicated the code in jsfiddle... http://jsfiddle.net/ydvuN/10/
Issue: If you click on Tab 1 or Tab 3 as your initial click, then the menu hides and then you must click on Tab 2 in order for it to show back up. After the initial click the script works like it should, switching between the tabs showing and hiding the menus appropriately.
Now, reload the page and click on Tab 2 as your initial click, the menu works like it should right off the bat, toggling between the different tabs showing their appropriate menus.
I don't ever want to hide the menu completely... I always want one menu to show at all times, however never want more than one menu to show. The menus should toggle with each other no matter what Tab you click on first.
I understand that this may be happening because I have display: none on Tab 1 and Tab 3 and a display: block on Tab 2. I did this because I want Tab 2 to display as the default when the page loads.
Any help on correcting my issue would be greatly appreciated. Thanks!
.style.display is different from just checking whether the item is displayed. It's actually checking the style="something" attribute on the HTML - which overrides the CSS you've setup in the stylesheet.
So - when you start out, your elements do not have style.display = 'none'. In fact, style.display is not set.
To solve this, I'd just set the selected tab to style.display='block' regardless of what it's already set to:
...
for (var i = 0; i < allIds.length; i++) {
if (allIds[i] != a) {
document.getElementById(allIds[i]).style.display="none";
}
}
e.style.display="block";
return true;
}
I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!