dsonesuk

As it is a carousel it probably is looping to add a new ad at a set time. So it might be better to hide than remove. As your script only runs once after 5sec it catch first one only, unless you use setInterval then it will repeat every 5 sec. To reduce repeating loops check this element exists by checking length.

That will look for attribute with empty string value.

Try

$('span').attr('foobar').remove();

You just need to use 'this' which is the element that the onclick event occurred  as in changeImage(this, 'bannerImage_left');

then within function function changeImage(elem, bannerId)

get the src: from 1st parameter elem

elem.src and remove '_thumb' with elem.src.replace('_thumb','');

then add converted src to 2nd parameter bannerid ref src using document.getElementById(bannerId).src

If you are going to table layout which i don't recommend, I suggest you use more columns as most grid based framework use 10 to 12 grid system, with the 12 given you possibility of 1/4s 1/3s  etc and few more division than the 10 grid system.

On 2/12/2024 at 4:55 AM, DavidHenson said:

Thanks, but I don't know what those things are, I wouldn't know where to put them or how to use them. I've decided just to move on. The accordion is fine the way it is.  

Yea, I know what you mean. If only there was a website of some kind that would explain what these things are and how to implement them....👀🤦

1. Use !important.

2. Use higher id ref to parent container or even a sibling using '+' which represents the next following element.

3. Use :not(selector) to not include css of specific selector id, class etc.

$(".foobar > div").eq(0).remove();

$(".sec").prev().remove();

Make sure you use post and not get method, get allows much less characters than post.

create external JSON file and use Ajax to read file contents, clear current, add new, OR append new to current using server language then reread that JSON file to: const event ( don't think variable event won't be allowed being JavaScript 'keyword' an all.

Remember length starts from 1, index from 0, this error usually happens when a index of element doesn't exist because its exceeded the max index number.

else { panel.style.maxHeight = panel.scrollHeight + 'px' } });> } </script>

BOLD angled closing bracket.

Depends if you are debugging it through a localhost server or the o/s file system.

Without link the best guess is its not setup to be responsive using viewport setting meta tag and media queries.

Being only a list of classes you are not required to use class identifier '.' at beginning.

It's not good practice to use number at beginning of id ref.

The error that show's that state's fretboardContainer is undefined as a variable in console, didn't give you a clue?... you didn't look in console log for error, well, maybe you should!

Right click the text "freight home" and select 'inspect' the text should be highlighted and web developers tools panel should appear showing the HTML element to left and CSS rules applied to that element to the right! It also shows the css filename and line of the affecting rule position. That selector with color: property is what controls the text color(It always shows the selector with highest precedence at the top, as if you scroll down you will see multiple anchor selectors with color: properties. )

.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
}

This is the css to change from #9d9d9d; to #ffffff; HEX (white); Although I would create a custom.css file and put this change in that! then make sure the link to the custom.css file is below the link to bootstrap.css so it becomes a higher precedence over same bootstrap rules you are changing.

I prefer to set a varable $IsValid value as true, if a field is empty or not valid, produce error message and set $IsValid to false. If $IsValid is still true at end of validation, set the: to email, subject, content and header values for mail(), this way you only check against a single boolean variable during validation.

Add third element to index to match number slideshows, third slideshow should be as quoted text as it will be treated as non existing variable.

Might be better to give menu a class '.ignore_style_css' and use :not('.ignore_style_css') to styling that targets the menu.

Give link tag a id and where you don't need it! Style with display: none to that id reference.

You have to restrict it to those in tab grouping by placing a container around the grouping and making the function work to that grouping where click event happened.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Tabs</h2>
  <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>
<div class="parent_target">
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity(this,'London1')">London1</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Paris1')">Paris1</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Tokyo1')">Tokyo1</button>
</div>

<div id="London1" class="w3-container city">
  <h2>London1</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris1" class="w3-container city" style="display:none">
  <h2>Paris1</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo1" class="w3-container city" style="display:none">
  <h2>Tokyo1</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>
<div class="parent_target">
<div class="w3-bar w3-blue">
  <button class="w3-bar-item w3-button" onclick="openCity(this,'London2')">London2</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Paris2')">Paris2</button>
  <button class="w3-bar-item w3-button" onclick="openCity(this,'Tokyo2')">Tokyo2</button>
</div>

<div id="London2" class="w3-container city">
  <h2>London2</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris2" class="w3-container city" style="display:none">
  <h2>Paris2</h2>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo2" class="w3-container city" style="display:none">
  <h2>Tokyo2</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>
<div class="w3-container w3-red">
  <h2>The Issue</h2>
  <p>I want the two tab sections to work indvidually of each other. I want to be able to click London 1 and it not close anything in tab bar 2 and vice versa.</p>
</div>

<script>
function openCity(elem, cityName) {

  var i;
  var x = elem.parentNode.parentNode.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
  
    x[i].style.display = "none"; 

  }
  document.getElementById(cityName).style.display = "block";  
}
</script>

</body>
</html>

If you want to use inline CSS you MUST use STYLE to do so.

          
			function hideQuote0()
			{
				document.getElementById("span0").style.color = "rgb(255,0,0)"; 
				setTimeout(hideQuote1, 3000); 	
			}
			function hideQuote1()
			{
				document.getElementById("span0").style.color = "rgb(0,255,0)"; 
				setTimeout(hideQuote2, 3000); 	
			}
			function hideQuote2()
			{
				 document.getElementById("span0").style.color = "rgb(0,0,0)"; 
			}


<div id="div0" style.display = "block";> 
			<span id="span0" style="font-weight: 900; color: rgb(0,0,0);"> QUOTE GOES HERE </span><br><br> 
		</div> 	

Why? Are they used? They don't do anything because there empty. As i said a id must not be a number on its own or be at beginning of id ref, so using that to add text at begginnig would correct that! but the end quotes are not required.

The page is read from top to bottom the element/s in this case with id beginning with 'demox' will be a collection, the index will be i 1 to 5 in each loop.

These referred to in javascript must exist for it to be processed in the for loop, so it must be placed after the elements referred too.