Need help to code a simple non-profit website, (not hosted yet)


#21

When you post code to the forums, you need to format it so that it will display properly. You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

I find it much harder to try to work from screenshots rather than actual code, and it makes it impossible to copy the code and replicate any issues.

Off Topic:

I think you should review your colour scheme, as much of your text is too pale to be read easily again a white background. I’m struggling, and I have pretty good vision. Use a tool such as https://webaim.org/resources/contrastchecker/ to test for sufficient background/foreground contrast.


#22
<!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);
} 

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 > li {
	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 li li {
	margin:.5em 0; 
	color: rgb(185, 185, 185); 
	font-size: 0.85em;	
	font-family: monospace;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>


</head> 
<body> 
	<h1><br></br>Melbourne, AU</h1> 
	<ul class="wrap">  
		<li>
			<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>
		</li> 
	
	<!-- Tab links -->
		<div class="tab">
			<button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
			<button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
		</div>

	<!-- Tab content -->
		<div id="Global" class="tabcontent">
			<h3>Global</h3>
			<p>abcdefg.</p>
		</div>

		<div id="Local" class="tabcontent">
			<h3>Local</h3>
			<p>wxyz.</p> 
		</div> 
	
		<li>
			<h2>Useful</h2>
			<ul> 
				<li>Time</li> 
				<li>Weather</li>
				<li>Alexandra</li>
				<li>Alfred</li> 
				<li>Q&A</li>  
				<li>Evolve</li> 
			</ul>
		</li> 
		<li>
			<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>	
		</li> 
		<li>
			<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>
		</li> 
</ul> 

<script type="text/javascript"> 
		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>

I can finally post the code, thanks technobear! Much appreciated!

And thanks for the feedback on the color-scheme. It’s actually designed to be almost invisible, other than when you turn your gaze to look at it, so the information is emphasized. From far away, it would not look like there are any boxes, or the tabs. So yeah, only in our periphery and when you look for it closely :slight_smile:

Of course, if users give lots of feedback that we should have those elements clearer, we will do that when we go live! The webpage is for our users after all.

So any advice on how to fix the tab?


#24

Sorry, I’m a bit lost.

What exactly is wrong with it? The clearer you are with your questions, the more likely you are to get replies. smile


#25

Thanks for your reply, technobear. Sorry, it just doesn’t look like what they are showing on w3school, https://www.w3schools.com/howto/howto_js_tabs.asp.

The code is based on that, so I’m just wondering where the problem is, that’s all!


#26

Well, the first thing to do (always) is run your code through the validators and fix any errors.

For HTML: https://validator.w3.org

For CSS: https://jigsaw.w3.org/css-validator/


#27

For a start you don;t have the tabs inside a list element as all content inside a list must be inside a pair of list tags.

e.g.

  <li> 
    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
      <button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
    </div>
    
    <!-- Tab content -->
    <div id="Global" class="tabcontent">
      <h3>Global</h3>
      <p>abcdefg.</p>
    </div>
    <div id="Local" class="tabcontent">
      <h3>Local</h3>
      <p>wxyz.</p>
    </div>
  </li>

You still forgot it in the last code you posted :slight_smile:


#28

I see… but semantically, the content of the tabs should be in the lists as paragraphs, right? Or should the structure be different?

Sorry, I posted an older code, I did fix it in the actual code!


#29

I’ll do that, thanks!


#30

That doesn’t have anything to do with my suggestion as such unless it was a different question? The tab content is fine as it is but as I said you need to wrap the list tags around the tab block or it won’t be valid and it won’t render correctly.

It should look like this:

<ul class="wrap">
  <li>
    <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>
  </li>
  <li> 
    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
      <button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
    </div>
    
    <!-- Tab content -->
    <div id="Global" class="tabcontent">
      <h3>Global</h3>
      <p>abcdefg.</p>
    </div>
    <div id="Local" class="tabcontent">
      <h3>Local</h3>
      <p>wxyz.</p>
    </div>
  </li>
  <li>
    <h2>Useful</h2>
    <ul>
      <li>Time</li>
      <li>Weather</li>
      <li>Alexandra</li>
      <li>Alfred</li>
      <li>Q&A</li>
      <li>Evolve</li>
    </ul>
  </li>
  <li>
    <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>
  </li>
  <li>
    <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>
  </li>
</ul>

You will also need to remove the padding from the list that holds the tab.

The semantic problem is the fact that you are using a nested list for your whole page and I don’t like that and do not think it is semantically correct. Not only is it harder to manage it is also easier to break as you have shown and of course doesn’t make semantic sense.

You can make a case for each block to be a list but I would code each block like this:

<div class="block useful">
    <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>

(Use a more semantic class name than ‘block’ of course :slight_smile: )

Lastly don’t use breaks to make space as you have done in your header as that is not what they were designed for. Use margins or padding to make the space you require. Breaks are designed to break lines as in a poem or address and not for a visual effect.


#31

I get what you mean now, the four ‘boxes’ are a group but not necessarily a list, so we should use the generic div, not li. Okay, I fixed it, thanks! I’ve also wrapped list tags around the tab.

After modifying everything for our purposes, I got this:

<!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 */
.tab {
	
}

/* 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);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 0px;
  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> 
	<ul class="wrap">  
		<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> 
	
		<li>
	<!-- Tab links -->
		<div class="tab">
			<button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
			<button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
		</div> 
		
	<!-- Tab content -->
		<div id="Global" class="tabcontent">
			<h3></h3>
			<p>abcdefg.</p>
		</div>

		<div id="Local" class="tabcontent">
			<h3></h3>
			<p>wxyz.</p> 
		</div> 
		</li>
		
		<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> 
</ul> 

<script type="text/javascript"> 
		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>

The only thing is how to position it inside/atop the News box… now, should I use absolute positioning or a wrap, I’m not sure?


#32

No, a div cannot be a direct child of a list, only li can.


#33

Oh, it’s the first list that got changed to div, not the nested one.


#34

I gave you the full working code :slight_smile:

You’ve left the erroneous list tags in place and haven’t changed .wrap to a div.

Here is the full validated working code.

<!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;	
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: #000;
	font-family: monospace;
	font-size: 0.85em;
	color: rgb(255, 255, 129);
	display:inline-block;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}
.tab button:hover{background:red;} 
button.active{background:red;}
/* 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="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 class="tabs"> 
    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
      <button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
    </div>   
    <!-- Tab content -->
    <div id="Global" class="tabcontent">
      <h3>Tab global</h3>
      <p>abcdefg.</p>
    </div>
    <div id="Local" class="tabcontent">
      <h3>Tab Local</h3>
      <p>wxyz.</p>
    </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>

I changed the buttons to display:inline-block rather than floated otherwise the tabs will snag on them and the parent won’t contain them.

[quote=“martin6613142928chun, post:31, topic:320492”]'The only thing is how to position it inside/atop the News box
[/quote]

Not sure what you mean by that ?

(As an aside please use colours that I can actually see :slight_smile: I’m having a hard time seeing anything on that page. )


#35

Thanks for that, let me try to understand what is going on with this code… a bit confused myself now, I think there must be something simple that hasn’t quite clicked yet…

Okay, great, that should help!

I just meant so that it can be positioned as in the word-doc screenshot I posted. The tabs just above the box, aligned to the right side of the box.

Alright, due to public consensus, I will make the colors more visible! :slight_smile:


#36

Are you talking about #post 5?

You have some text on top of the News box that says 'global icon and Local icon". Are they supposed to be the tab content triggers?

If so where is the tab content supposed to appear when clicked?

Or are you changing the content of all those 4 boxes when you click the 2 links?

It’s not clear at all from what you have coded so far as it does not marry up with the above design. In your demo you are showing the content of the tabs as new and separate items.

We need a clearer description of the function you want to achieve. At the moment the code I gave you will produce the layout as in my screenshot in post #30.

If you can clarify your intentions without ambiguity then we can work towards a solution :slight_smile:


#37

Yes, that’s what I meant. Yep, those are the trigger buttons. The tab content appears inside the box, sorry about the ambiguity, here’s a clearer concept illustration.

Concept%20Illustration

I’ve made the text a bit bigger for clarity. And I think we should have a button that allows the user to switch it to all dark text, if they wish. Have you checked that your monitor is dust and muck free, it could just be that? Because I showed it to a neigbour, and they said it was legible… let me know :slight_smile:

The tab content displays global and also local news, and can switch between these.

Do you mean that the tab should be inside the box, in terms of semantic structure? That seems to make sense, but how on earth do I put all the code inside the div box?

Here’s the code so far, I tried to modify your code a bit, hope it’s alright! :smiley:

<!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;	
}

/* 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;
}
.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="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 class="tabs"> 
    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
      <button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
    </div>   
    <!-- Tab content -->
    <div id="Global" class="tabcontent">
      <h3></h3>
      <p>abcdefg.</p>
    </div>
    <div id="Local" class="tabcontent">
      <h3></h3>
      <p>wxyz.</p>
    </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>

#38

I gave you a link in post #21 to a resource which will allow you to check that your colour contrast meets agreed standards for accessibility, and you can easily test for yourself and see that every colour you have used fails badly on every test against a white background. If I can’t read it with good vision (and a clean monitor), what hope for somebody with cataracts or any other visual problem?

The best and worst results:

(If you have trouble converting your RGB values to hex to use the analyser, try this converter: https://www.rgbtohex.net/.)


#40

Yes, I did check it out technobear! Thanks! And I understand that some people struggle to read the yellow text (though now, when you hover over it there is a blue background that appears for contrast and movement), and perhaps the light blue border, when we are not looking closely :slight_smile:

But that is how it is by design, it’s not an obvious page. Or rather there are things that are emphasized when you look quickly or from afar, but there are also details that you only discover when you look closely!

In terms of design, it’s a bit like a plain designer t-shirt, with imperfect hand-sewn stitches, and a tiny logo which is almost invisible :smiley:

But the site will be highly customizable, for accessibility, after people sign in, they can change the color scheme, the feeds they prefer to see, etc.

I hope that explains my standpoint, you’re welcome to bring up any further points!

Thanks :slight_smile:


#41

It isn’t just the yellow text; the greys are also much too pale.

(a) Is there a reason why folk would think to hover over it? (Especially if they can’t see it? wink)

(b) Have you remembered to cater for those using keyboard navigation? What about someone on a touchscreen device?

If they need to change the colour scheme after they sign in, how are they going to manage to sign up and sign in on the “main” colour scheme?

Of course, it’s your site and you must do as you see fit. When I put in work building a site, I want to ensure as many people as possible can use it. If I, as a visitor, arrive on a site which is difficult to read or difficult to use, I’ll leave and not return. Having an interesting and original design is great, but you do need to look at it from the viewpoint of potential visitors. If you still think near-invisibility is a good design choice, then that’s your choice. We can only advise. smile


#42

IMHO you should think about the colors and contrast from the perspective of first time visitors.

Are you willing to accept that the design choice may alienate some that might otherwise become return visitors?

True, a lot depends on your target audience, but as the saying goes:

You can make a first impression only once.