Jump to content

Does tabulators_active work with more then one color?


ForM4iN

Recommended Posts

Not in present state but with

function openCity(evt, cityName) {

var Tabcolor=['red','blue','green'];// set colours for tabs same sequence order the tabs are in

  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
      
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
  tablinks[i].dataset.indexRef=i;
  var tabColorRef=Tabcolor[tablinks[i].getAttribute("data-index-ref")];
  tablinks[i].className = tablinks[i].className.replace(" w3-"+tabColorRef, "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-"+Tabcolor[evt.currentTarget.getAttribute("data-index-ref")];
}

Yes!

  • Like 1
Link to comment
Share on other sites

Not in present state but with

function openCity(evt, cityName) {

var Tabcolor=['red','blue','green'];// set colours for tabs same sequence order the tabs are in

  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
      
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
  tablinks[i].dataset.indexRef=i;
  var tabColorRef=Tabcolor[tablinks[i].getAttribute("data-index-ref")];
  tablinks[i].className = tablinks[i].className.replace(" w3-"+tabColorRef, "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-"+Tabcolor[evt.currentTarget.getAttribute("data-index-ref")];
}

Yes!

 

Thank you so much!!

Link to comment
Share on other sites

Not that we talk different things:

 

If i have this navbar:

 

<ul class="w3-navbar w3-dark-grey w3-xlarge">
<li><a class="w3-hover-black" href="#0">Home</a></li>
<li><a class="w3-hover-blue" href="#1">Link 1</a></li>
<li><a class="w3-hover-red" href="#2">Link 2</a></li>
<li><a class="w3-hover-yellow" href="#3">Link 3</a></li>
</ul>
and these ids:
<div id="0" class="w3-black">
0
</div>
<div id="1" class="w3-blue">
1
</div>
<div id="2" class="w3-red">
2
</div>
<div id="3" class="w3-yellow">
3
</div>
i want, that when i am in id 1that the link text color which was white before to be blue!
and when i am in id 2 i want id 1 to be white again and id2 to be red.
what do i have to do?
Link to comment
Share on other sites

The code uses class name 'tablink' to reference the anchor link elements and class name 'city' for content container elements, withouts these to refer to nothing is going to happen so you have to make sure these are present.

It then uses other class name on the tablinks anchor element to manipulate to target background " w3-"+arraycolor[x] where arraycolor will be array of colour names and [x] will be index ref to a specific colour, by changing " w3-" to " w3-text-"+arraycolor[x] with colour array ref it will now change the anchor link text colour.

 

So the sooner YOU begin setting up the code as described, the sooner YOU will see the result you require.

Link to comment
Share on other sites

Okay yeah sry!

It works for the tabs!

 

But then the scroll function is disabled!

 

Can also do this with scrolling from id to id and the color changes?

 

Like this: (scrollspy?)

http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

but with a different active color in the menu!

Edited by ForM4iN
Link to comment
Share on other sites

Of course you will need to include bootstrap and w3css together, since the latest link you provided is a Bootstrap example, the code I provided is for w3css, which may course a bit of conflict.

 

 

Yes! It should as long as the links have the required class name, and onclick event to call required function.

 

The Problem was, that your code is focused on tabs, isnt it? Because when i clicked that link i couldnt scroll anymore and could only see the content of the linked id.

Link to comment
Share on other sites

NO! the code does not affect scrolling, it just changes text or background colour of tabs, menu links, scrolling will not happen if there is not enough content that warrants scrolling, or you are using position absolute on content which is taken out of the flow of the normal flow of content and therefore does not occupy any area to warrant any scrolling either.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...