Jump to content
ForM4iN

Does tabulators_active work with more then one color?

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

Share this post


Link to post
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!!

Share this post


Link to post
Share on other sites

Is there also a function, where i can use scrollup and scrolldown to switch the tabs right and left?

 

Imean when i sroll down the first tab switches to the second?

Share this post


Link to post
Share on other sites

It does not use JavaScript, you would just add required text colour class to link that represents current page you have landed on.

 

And how do i do this with a onepager and a #example url navigation? sry for asking so much :D

Share this post


Link to post
Share on other sites

But isnt the link-color then always black? i want it just in the specified section!

Could you give me an example please :( i dont get it :/

Edited by ForM4iN

Share this post


Link to post
Share on other sites

No it will change to w3css text colour the colour will the colour in used in array of colours w3-text-red for red text, w3-text-blue for blue text and so on.

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...