Hi, if I may add my perception using a regular TNT panel:
I have. The gray is very hard to read, too little contrast. The yellow is even worse, I can’t read it without tilting my screen way back (to darken it).
Just my two cents. 
2 Likes
OK from that drawing I assume you are showing the tab content inside the news box only? (and not all the other boxes).
If so then you need to move the news block inside the tabcontent div and then add the alternative content inside the other tabcontent div. You can then size the tab buttons exactly and then pull them up on top of the blue box.
The following code will do that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-family: monospace;
text-align: center;
color: rgb(255, 255, 129);
margin: 2em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 1.5em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.8em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.85em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs {
padding:0;
}
.tab {
text-align:right;
margin-top:-28px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
height:27px;
}
.tab button:hover {
background: rgb(156, 209, 224);
}
button.active {
background: rgb(156, 209, 224);
}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.85em;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Melbourne, AU</h1>
<div class="wrap">
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'Global')">Global</button>
<button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
</div>
<!-- Tab content -->
<div id="Global" class="tabcontent" style="display:block;">
<div class="News feeds">
<h2>Global News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
<div id="Local" class="tabcontent">
<div class="News feeds">
<h2>Local News</h2>
<ul>
<li>Local Front Page</li>
<li>Local Political</li>
<li>Local Finance</li>
<li>Local Sports</li>
<li>Local Entertainment</li>
<li>Local Trending Online</li>
<li>Local Public Opinion Poll vote!</li>
</ul>
</div>
</div>
</div>
<div class="Useful feeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Q&A</li>
<li>Evolve</li>
</ul>
</div>
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
<div class="Market feeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Other Local Deals</li>
<li>Garage Sale</li>
<li>Call in a Favour</li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Let me think … Hmm after 40 years of working with computers and coding upwards of 2000 sites and with access to the latest monitors on PC and Mac systems … No you’re right I didn’t think to wipe my monitor
You ask for advice on a web design forum where three or four people (with probably over 100 years of web experience between them) have independently pointed out that the colours are illegible and not suitable for the web and yet you choose the advice of your neighbour! Unless your neighbour is ‘Bruce Lawson’ or ‘Jakob Nielsen’ then I wouldn’t pay too much heed
(Please don’t take offence at the above I am just having a little bit of fun).)
4 Likes
Thanks for letting me know, technobear. I’ve made the h1 3em, the h2 0.9em, and the texts 1.9em; I realise this isn’t exactly what you are asking for, but I think it should help.
a) I understand. But they will find it, if they stick around!
b) I forgot about that… I think we will add these customizable options later. Thanks for reminding me.
Good point! But I’d be lying if I said I think everyone will make it to heaven! j/k j/k The site isn’t for everyone - some people will not give it a chance and that’s fine I think it should be popular with some more enlightened people though, and when the others realise what this is, they may come back!
Yeah, we decided not to really strive for mass appeal or going to change ourselves to get more users, Mittineague. This website and my other projects will change the world and the people, for the better!
There are many things that can only be found on here, like the Evolve project, and the chess variant Chantrangi that I created because of chess getting stale and approaching a draw-death.
Thanks for your feedback, Eric! Wow, I honestly didn’t think people would have this much trouble… so you can’t even read it when you look directly at it, huh? Okay, let me have a think.
Yes, that’s right, only the news box and the interests box will have their own global and local tabs! Thanks paul, I’ll check this code out Wow, you make really good diagrams and the little screenshots!
Haha! No offense taken! A bit of humor and fun on a coding forum is great!
Alright everyone, this is no fun if there’s nothing at stake… if we get a lot of complaints about the colour contrast, I’m buying everyone a bottle of champagne 
2 Likes
So the funny thing is, I was tilting my laptop monitor to see what that would do to the visibility, and as I tilted it below or beyond the optimal angle (parallel to the retinas in our rotating eyeballs; not the face, because unless our monitor is exactly at eye level, usually we have to rotate our eyes downwards or upwards a bit) - I found that the words become near-invisible, as you’re all saying.
I think this is because if the screen is not parallel to our retinas, not enough of the photons travelling from the screen actually go into our retinas, as they are moving in a straight line and so most go flying off at the suboptimal angle, hence the near-invisibility! So yeah, wow, this page actually helps us to adjust our monitors!
Thanks very much for clearing that up, eric!
I can see that the yellow text in the buttons are still only barely visible when on the plain background, even at the right angle. Maybe our eyes are adapted to not be able to differentiate too much between light-yellow and white light very much… for obvious reasons, I guess. But in any case, a sense of discovery of the hidden, and its fading away, is not really a bad thing in a website like this!
Okay, so I’ve understood the code, and tried to implement the tabs to the Interests box too. It didn’t quite work, until I added unique ids to the tab contents, but it seems the buttons also need to be separately identified or referred to, because now when you click on either Global, only the Global News appears, vice versa. And I couldn’t manage to add unique ids to the buttons, as much as I tried – some very strange things have happened, haha!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-family: monospace;
text-align: center;
font-size: 3em;
color: rgb(255, 255, 129);
margin: 2em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 1.5em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.95em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.95em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs {
padding:0;
}
.tab {
text-align:right;
margin-top:-28px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
height:27px;
}
.tab button:hover {
background: rgb(156, 209, 224);
}
button.active {
background: rgb(156, 209, 224);
}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.95em;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Melbourne, AU</h1>
<div class="wrap">
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'Global News')">Global</button>
<button class="tablinks" onclick="openCity(event, 'Local News')">Local</button>
</div>
<!-- Tab content -->
<div id="Global News" class="tabcontent" style="display:block;">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
<div id="Local News" class="tabcontent">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
</div>
<div class="Useful feeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Q&A</li>
<li>Evolve</li>
</ul>
</div>
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'Global Interests')">Global</button>
<button class="tablinks" onclick="openCity(event, 'Local Interests')">Local</button>
</div>
<!-- Tab content -->
<div id="Global Interests" class="tabcontent" style="display:block;">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li
</ul>
</div>
</div>
<div id="Local Interests" class="tabcontent">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li
</ul>
</div>
</div>
</div>
<div class="Market feeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Other Local Deals</li>
<li>Garage Sale</li>
<li>Call in a Favour</li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
1 Like
As I said before:
Try that and see if it solves any problems. 
Thanks technobear, I just validated it. It seems the html has a few errors, I will try to see if I can fix it up
Quick question: I’m using Notepad++, is there any way to have the code checker part of the program? Like an add-on? It seems similar to a spell-checker in word processors, so I wonder why we can’t do that automatically as we code… hmm…
I’m not familiar with Notepad++, but my editor colour-codes HTML, which helps to highlight errors, and has an option to use HTML-Tidy. I imagine both those features are standard for most editors.
You can also get browser extensions which will do a similar job. http://users.skynet.be/mgueury/mozilla/
Yeah, mine also color codes it, but underlining the errors like in ms word would seem inuitive… Alright, I’ll look into these, if there’s nothing good, I might have another project to do, later of course! Thanks again , technobear
1 Like
Alright, all fixed 
No spacing should be in id names, and the closing bracket of the last was left off when I copied and pasted
<li>
1 Like
So has that resolved any of your issues, or are you still having problems? If you still have problems, then please post the updated code.
Unfortunately not, the same problem is still there, I think the errors did not affect the functionality of the code. So yeah, still only one tab from a box will display itself.
Here’s the code I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-family: monospace;
text-align: center;
font-size: 3em;
color: rgb(255, 255, 129);
margin: 2em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 1.5em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.95em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.95em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs {
padding:0;
}
.tab {
text-align:right;
margin-top:-28px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
height:27px;
}
.tab button:hover {
background: rgb(156, 209, 224);
}
button.active {
background: rgb(156, 209, 224);
}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.95em;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Melbourne, AU</h1>
<div class="wrap">
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalNews')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalNews')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalNews" class="tabcontent" style="display:block;">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
<div id="LocalNews" class="tabcontent">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
</div>
<div class="Useful feeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Q&A</li>
<li>Evolve</li>
</ul>
</div>
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalInterests')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalInterests')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalInterests" class="tabcontent" style="display:block;">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
</div>
<div id="LocalInterests" class="tabcontent">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
</div>
</div>
<div class="Market feeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Other Local Deals</li>
<li>Garage Sale</li>
<li>Call in a Favour</li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Hi,
The script is getting all the tabcontent elements in the page and turning all but one off. You need to only get the tabs within the current context of the item you just clicked.
I’ve adjusted the code so it is working but you should probably ask on the JS forum for this to be packaged up better without having the inline click handlers and without specifying all the targets manually. It should be done automatically so that you can add to any blocks as required.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-family: monospace;
text-align: center;
font-size: 3em;
color: rgb(255, 255, 129);
margin: 2em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 1.5em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.95em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.95em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs {
padding:0;
}
.tab {
text-align:right;
margin-top:-28px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
height:27px;
}
.tab button:hover {
background: rgb(156, 209, 224);
}
button.active {
background: rgb(156, 209, 224);
}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.95em;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Melbourne, AU</h1>
<div class="wrap">
<div id="tab1" class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalNews', 'tab1')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalNews', 'tab1')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalNews" class="tabcontent" style="display:block;">
<div class="News feeds">
<h2>Global News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
<div id="LocalNews" class="tabcontent">
<div class="News feeds">
<h2>Local News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
</div>
<div class="Useful feeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Q&A</li>
<li>Evolve</li>
</ul>
</div>
<div id="tab2" class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalInterests', 'tab2')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalInterests', 'tab2')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalInterests" class="tabcontent" style="display:block;">
<div class="Interest feeds">
<h2>Global Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
</div>
<div id="LocalInterests" class="tabcontent">
<div class="Interest feeds">
<h2>Local Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sports</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
</div>
</div>
<div class="Market feeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Other Local Deals</li>
<li>Garage Sale</li>
<li>Call in a Favour</li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName, nearestTab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
//tabcontent = document.getElementsByClassName("tabcontent");
tabcontent = document.getElementById(nearestTab).getElementsByClassName('tabcontent')
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
//tablinks = document.getElementsByClassName("tablinks");
tablinks = document.getElementById(nearestTab).getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
1 Like
Hi,
Oh, I see. And that’s how you give id to the tabs… wow, cool!
Thanks a lot, paul I will ask on the JS pages. For now I’m going to try to focus on html and css, of: different language options, icon links to google, bing, yahoo, baidu, youtube, youku, qiyi, facebook, twitter, and weibo, etc. Plus, adding content: previews, pages, and apply for passport, check-in buttons and forms!
I’ll keep you all posted!
1 Like
I don’t know if this is allowed but some interesting codes I watch is from a a youtuber named DesignCourse, he also shows some of the plugins he uses for contrast and even fonts etc if u look at his channel You may find a lot of useful info there.
It’s allowed to be somewhat off topic. But you really don’t add anything.
In post #21 @TechnoBear already mentioned a good place to check for contrast and font-weight.
And then in post #38 posted the results from that tool.
Though the OP choosed to ignore it.
Oh, hi 0_0Nathan, thanks for stopping by and for the link! I’ll look into that youtube channel if I want to learn some interesting things for fonts and contrast. For now, I’m doing alright with the code
Update! This is how the project is looking at this point! Notice the select list with a few of the most populous cities in Italy and Japan. These two countries are highest in their civilization index: taking into consideration factors such as happiness (family life, working life, average disposable income, GDP, food & eatery variety, entertainment & sport industries, hobbies & facilities, time wasted travelling over lifetime, holiday citizen outbound and foreigner inbound, suicide rate, travelling death-toll, average life expectancy, quality of life after retirement, etc.), harmony (divorce rate, crime rate, incarceration rate, instances of reported corruption, equality of migrants at work and in civil rights, availability of courts of law, number of law suits, unemployment rate, minimum wage, average wage, competitiveness of job market, competitiveness of university entrance, etc.), science & technology (availability of resources, environmental health, degree of automation, impact of natural disasters, potential of spreading into space, etc.)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: none;
}
.center {
text-align: center;
font-size: 3em;
}
.dropdown {
text-align: center;
font-family: monospace;
font-size: 1em;
font-weight: bold;
color: rgb(255, 255, 55);
background: none;
margin: 0.8em;
}
.dropdown option {
color: black;
background: rgb(255, 255, 55);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 2em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.95em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.95em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs {
padding:0;
}
.tab {
text-align:right;
margin-top:-28px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: rgb(255, 255, 255);
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
height:27px;
}
.tab button:hover {
background: rgb(200, 200, 200);
}
button.active {
background: rgb(156, 209, 224);
}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.95em;
font-family: monospace;
}
a {
color: rgb(180, 215, 157);
text-decoration: none;
font-family: monospace;
}
.sidebar div {
text-align: center;
}
#divnavigationlinks {
display: inline;
}
#ulnavigationlinks li {
display: inline;
list-style-type: none;
}
</style>
</head>
<body>
<div class="center">
<form action = "">
<select id = "City" class="dropdown">
<option value = Milan>Milan, IT</option>
<option value = Rome>Rome, IT</option>
<option value = Naples>Naples, IT</option>
<option value = Tokyo>Tokyo, JP</option>
<option value = Yokohama>Yokohama, JP</option>
</select>
</form>
</div>
<div class="wrap">
<div id="tab1" class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalNews', 'tab1')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalNews', 'tab1')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalNews" class="tabcontent" style="display:block;">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sport</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
<div id="LocalNews" class="tabcontent">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sport</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
</div>
</div>
<div class="Usefulfeeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Enlightenment</li>
<li>Universal Language</li>
<li>Ask a Question</li>
<li>Ask for a Favour</li>
<li>Evolve</li>
<li>Civilization Index</li>
</ul>
</div>
<div id="tab2" class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'GlobalInterests', 'tab2')">Global</button>
<button class="tablinks" onclick="openCity(event, 'LocalInterests', 'tab2')">Local</button>
</div>
<!-- Tab content -->
<div id="GlobalInterests" class="tabcontent" style="display:block;">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sport</li>
<li>Book</li>
<li>Game</li>
<li>Technology</li>
<li>Science</li>
</ul>
</div>
</div>
<div id="LocalInterests" class="tabcontent">
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Sport</li>
<li>Book</li>
<li>Game</li>
<li>Technology</li>
<li>Science</li>
</ul>
</div>
</div>
</div>
<div class="Marketfeeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Local Travel Deals</li>
<li>Other Local Deals</li>
<li>International Deals</li>
<li>2nd Hand Market</li>
</ul>
</div>
</div>
<div class="sidebar">
<div id="divnavigationlinks"class="navigationpanel">
<ul id=ulnavigationlinks>
<li><a href="http://www.google.com/">Google  </a></li>
<li><a href="http://www.bing.com/">Bing  </a></li>
<li><a href="http://www.yahoo.com/">Yahoo  </a></li>
<li><a href="http://www.baidu.com/">Baidu  </a></li>
<li><a href="http://www.youtube.com/">Youtube  </a></li>
<li><a href="http://www.youku.com/">Youku  </a></li>
<li><a href="http://www.facebook.com/">Facebook  </a></li>
<li><a href="http://www.twitter.com/">Twitter  </a></li>
<li><a href="http://www.weibo.com/">Weibo  </a></li>
<li><a href="http://www.amazon.com/">Amazon  </a></li>
<li><a href="http://www.alibaba.com/">Alibaba  </a></li>
<li><a href="http://www.ebay.com/">Ebay  </a></li>
<li><a href="http://www.etsy.com/">Etsy  </a></li>
<li><a href="http://www.simbi.com/">Simbi  </a></li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName, nearestTab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
//tabcontent = document.getElementsByClassName("tabcontent");
tabcontent = document.getElementById(nearestTab).getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
//tablinks = document.getElementsByClassName("tablinks");
tablinks = document.getElementById(nearestTab).getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.