dsonesuk

Adjust padding or margin on .navbar

body > h1:first-child {

margin: 0;

}

Also missing </head> tag

$("img.sample").closest('div') or maybe

$("img.sample").parents('div').eq(0) or

$("img.sample").parentsUntil("div")

removing element type 'img' will target any element using class .sample

You can use media queries to adjust width according to device width

Because you have removed display: none from tabcontenta, its just following your instructions.

Replace display: none, and as with setting the active class to highlight, add attribute  style="display: block;" to the tabcontenta you wish to have shown on loading of page.

The active class defines the tab that should be highlighted, so add 'active' to the tab you require to be highlighted on loading of page. After that, JavaScript code will go through process of removing 'active' class and applying to the tab selected. you don't require 'defaultOpen' id or coding for that.

database connection details should outside if, $conn->close(); should be last. With SELECT before before that.

When you submit a form the form refreshes clearing everything, the post/get arrays data exists for that one time. So don't use values from form submission to display values. Instead use values to INSERT in database table. After that! retrieve the values using SELECT to show data including the one you just submitted through form.

Note: the database connection using include or required is only needed once above all Database processing such as INSERT  or SELECT.

1: check IF post array exist with specific name attribute value (form submission) and validate. Then process data for INSERT within IF condition.

The submitted form data should now exist in the database.

2: Now After above IF condition retrieve data from table making sure required data to display and filter is listed

SELECT tomcolumn, billcolumn, harrycolumn FROM prisonTable.

This SELECT sql statement,  uses no data from form submission, Its job is to just retrieve current saved data in database.

https://www.w3schools.com/php/php_forms.asp

https://www.w3schools.com/php/php_mysql_insert.asp

https://www.w3schools.com/php/php_mysql_select.asp

No input with name attribute of 'submit'

All form inputs, textarea, select etc, MUST have name attribute  with value. The value is the index name used in post/get array.

Id's,  a user table with singular data username, email etc should have there own unique id. If you have a table with multiple comments for each user, you would have a column containing userid that would refer to users table id, this is a one to many relationship. Then its just a matter listing columns required from both tables WHERE userid in users table equals user userid in comments table.

A simple method:

Loop each userid with if condition checking if it is the same as previous if not! show next user username email data from singular user table, and continue to loop through comments related to that current user id.

When that is sorted! This

printf("%s (%s)\n", $row["username"], $row["comment"],$row["imageId"]);

Should show data related to sql statement of column listing and table used.

But! you are listing 3 columns and only providing 2 formatting types https://www.w3schools.com/PHP/func_string_printf.asp

printf("%s (%s)\n", $row["username"], $row["comment"],$row["imageId"]);

For the number of column used there should be the same number of formatting types in same order, within text

THIS

$sql = "SELECT imageId FROM output_images ORDER BY imageId DESC";

Will only allow you to get and show data from imageId column.

To show comment data and the rest you would need to add them individually

$sql = "SELECT imageId, username, comment FROM output_images ORDER BY imageId DESC";

OR list all using universal selector *

$sql = "SELECT * FROM output_images ORDER BY imageId DESC";

Your sql lists only one column name to refer to (You can use * to refer to all columns). While the loop refers to three. The printf refers to two type strings but not what i would assume is a decimal number type.

That is why it would fail.

You then need to on validation of all fields, update the database in if condition == post.

Then while loop all comments and show each or last comment found depending on you needs.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 17px;  /*amended dsonesuk*/
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  /*border-color: transparent transparent #fff transparent; dsonesuk*/
  top: 10px; /*amended dsonesuk*/
  transform: rotate(180deg);  /*added dsonesuk*/
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/* added dsonesuk */
.custom-select [data-custoptcol="CustOptCol1"] {
background: red;
color: #fff;
}
.custom-select [data-custoptcol="CustOptCol2"] {
background: orange;
color: #000;

}

.custom-select [data-custoptcol="CustOptCol3"]{
background: yellow;
color: #000;
}

.custom-select [data-custoptcol="CustOptCol4"] {
background: green;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol5"] {
background: blue;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol6"] {
background: indigo;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol7"] {
background: violet;
color: #000;
}

/* change pointer color to match black text */
.custom-select [data-custoptcol="CustOptCol2"]:after,
.custom-select [data-custoptcol="CustOptCol3"]:after,
.custom-select [data-custoptcol="CustOptCol7"]:after {
border-color: #000 transparent transparent transparent;
}
</style>
</head>     

<body>

<h2>Custom Select</h2>

<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

<script>
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    /* add custom data- attribute with index ref for each custom option div - added dsonesuk*/
    c.setAttribute("data-custoptcol","CustOptCol"+j)
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h, sl, yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            /*set custom data- and retrive selected data- value -  added dsonesuk*/
            h.setAttribute("data-custoptcol", this.getAttribute("data-custoptcol"));
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>

</body>
</html>

You are missing the vital part of sending the email using php mail() at https://www.w3schools.com/php/func_mail_mail.asp

Quote

Is it because I'm testing this on my laptop? The files are not on a server yet.

??? You need a localhost server to process php , the validation and mail() won't work without it!

The link element is used to link to a stylesheet and i can't remember using it for anything else to be honest. The form 'action' tells it where to go after form submission.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .showdiv-wrap {display: inline-flex; align-items: start;justify-content: flex-start;flex-flow: row; position: relative;flex: 1 1 auto;}
            .showDiv { display:flex; align-items: center;justify-content: center; flex: 1 1 auto; margin:1em;}
            .showDiv:hover::before {
                content: " (" attr(data-mediasrc) ")";
                background: red;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <h1>The content Property</h1>
        <p>The content property is used to insert generated content.</p>

        <p>Look at our:</p>
        <p>
            <a href="https://www.w3schools.com/css/">CSS Tutorial</a><br>
            <a href="https://www.w3schools.com/cssref/">CSS Reference</a>
        </p>
        <div class="showdiv-wrap">
            <p class="showDiv">
                <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="300" height="400">
            </p>
            <p class="showDiv">
                <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="300" height="400">
            </p>
        </div>
        <script>
            var vFindImgParent = document.querySelectorAll(".showDiv");

            console.log(vFindImgParent.length);
            for (i = 0; i < vFindImgParent.length; i++) {
                var vParentImage = vFindImgParent[i].querySelector("img").src;
                var vFilename = vParentImage.split('/').pop();
                console.log(vFilename);
                vFindImgParent[i].setAttribute("data-mediasrc", vFilename);


            }
        </script>

    </body>
</html>

If you reversed the double quotes to single for HTML text, you wouldn't require that?

$r1 = '<span class=" w3-tag w3-round' . $color1 . $color2 . '" onclick="document.getElementById(\'' . $id_tag . '\').style.display=\'block\';">' . $alias . '</span>';

        echo "\n" . $r1 . "\n";

Matches surrounding HTML using double quotes for attributes and less use of slashes. But you still have to use double quotes for newline characters.

Any of those will do, but as you are calling a js function to apply the stored values i suggested a javascript method of array.

nameTagArr[

["John123",123,"John","w3-red","w3-hover-blue"],

["Josh456",456,"Josh","w3-blue",w3-hover-red"]

]

All you have to do is use array index of nameTagArr[0][0],

nameTagArr[0][1],

nameTagArr[0][2]

to get each value in first array listing of values.

And all you have to do is pass index parameter of 0 or 1...

<code>

function nameTag(indexRef) { //assume code here for taking 'C' above and calculating what colors to use//

let color1 = nameTagArr[indexRef][3];

let color2 = nameTagArr[indexRef][4];

let result = '<span  class="w3-tag w3-round' + color1 +' '+color2 +'">'+nameTagArr[indexRef][2]+'</span>';

let vTargetelem = document.getElementById(nameTagArr[indexRef][0]);

vTargetelem.style.display="inline";

vTargetelem.innerHTML=result;

}

</code>

Not tested, did on mobile.

Because you have applied the string values, BUT! not doing anything with result, it should refer to a id ref of the element you are targeting and use that to apply new classnames,  click event and styling.

Consider using multi-dimensional array to store grouping of different values.

https://www.w3schools.com/tags/att_global_title.asp

well yeah, left, right, top etc would give the same result, because cover fills the whole parent container, BUT! if you used 'contain' instead the result would represent what you used for portrait align left or right, landscape top or bottom.

Try center/cover

first of all, NEVER use spaces in file names, use alternative of hyphen '-' or underscore '_', as in practise-css.html oor practise_css.html. secondary, this should be done on web server, WAMP for example not your computer filesystem.

I would imagine the problem is you have no content in body, so the height is 0, so the background image has no area to show. Try setting body and html elements to min-height: 100vh;