Ingolme

December 3, 2021

If you use a flexbox you can organize the items however you like. Here's the tutorial page for flexbox:

https://www.w3schools.com/css/css3_flexbox_items.asp

If you set the flex-basis to 50% you'll have two items in each row.

December 3, 2021

The email address is too wide and causes the box to stretch. You can use the overflow-wrap rule to fix it.

fieldset {
  overflow-wrap: break-word;
}

I can't use a more specific selector since I don't know what the HTML on the details page looks like.

December 1, 2021

That's a mark of invalid HTML.

Your <form> doesn't have a closing </form> tag, so the browser was not expecting a closing </body> tag there and marked it red.

There are other HTML errors as well, you have <script> tags outside of the <body> element. Nothing is permitted to be outside the <head> or </body> elements.

November 30, 2021

If there's no message then how do you know there's an error? I have nothing to work with right now.

November 30, 2021

You need to set the encoding in your text editor. The <meta> tag doesn't set the encoding, it just tells the browser which encoding the file is currently using. If the <meta> tag's encoding isn't the same as the document's encoding then the page will appear broken when certain characters are shown.

November 30, 2021

What does the error message say?

You really need to fix your SQL to prevent people from hacking your website with SQL injection. You should never have variables in SQL strings. Use prepared statements instead. Here's the tutorial page for prepared statements: https://www.w3schools.com/php/php_mysql_prepared_statements.asp

November 29, 2021

There are two things you need to take into account:

id attributes must be unique, so they can never go inside a loop since that would create multiple elements with the same id.
Only things that need repeating should go in the loop. The modal box does not need to be repeated, so it must be outside of the loop.

This code will solve the problem:

<?php
require_once "db.php";
$sql = "SELECT imageId,comment FROM output_images ORDER BY imageId DESC;";
$result = mysqli_query($conn, $sql);
?>

<!-- Make one single modal window by keeping it outside of the PHP loop -->
<div id="myModal" class="modal">
  <span id="close-modal" class="close">&times;</span>
  <img class="modal-content" id="img01">    
</div>

<!-- Each image in the loop uses a class instead of an id, because ids must be unique -->
<?php while($row = mysqli_fetch_array($result)) { ?>
  <img class="preview" src="imageView.php?image_id=<?php echo $row["imageId"]; ?>" /><br/>
<?php } ?>

<script>
// Add event listener to the close button
document.getElementById("close-modal").addEventListener("click", closeModal);

// Add event listeners to all the images
var images = document.getElementsByClassName("preview");
for(let i = 0; i < images.length; i++) {
  let img = images[i];
  img.addEventListener("click", showImage);
}

/** Declare event handlers **/
// Close the modal
function closeModal(e) {
  var modal = document.getElementById("myModal");
  modal.style.display = "none";
}

// Open the modal and show an image
function showImage(e) {
  var img = e.currentTarget;
  var modal = document.getElementById("myModal");
  var modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");
  modalImg.src = img.src;
  captionText.innerHTML = img.alt;
  modal.style.display = "block";
}
</script>

November 25, 2021

CSS cannot cause elements to focus, this has to be done with Javascript.

You cannot replace the browser's default cursor. You could possibly position a blinking element in front of the field with CSS but it's not going to be very useful:

<style> 
.textfield-wrapper {
  position: relative;
}
.textfield-wrapper::after {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50px;
  display: block;
  content: "*";
  animation: 1s blink infinite;
}
@keyframes blink {
  0% {opacity: 0;}
  49% { opacity: 0;}
  50% { opacity: 1;}
  100% { opacity: 1;}
}
</style>
<div class="textfield-wrapper">
  <input type="text">
</div>

The problem is that you need Javascript to somehow measure the width of the text that the user has typed and then move the element to that position which is very complicated.

You can target elements which are not focused using the :not() selector:

input[type=text]:not(:focus) {   }

CSS does not currently have a selector for empty fields. There's a possible future selector ":blank" but browsers haven't implemented it yet. For now, you will need to use Javascript to find and modify empty fields.

November 24, 2021

You can ask any question on the forums and if somebody knows the answer they'll reply to the thread.

November 23, 2021

Javascript is not a server-side language. It's available to you in the browser, so none of the code is hidden. Javascript code is usually very complex, so you might not understand it when you look at a website's source code, but it is there. Often, websites will load Javascript from a separate js file using a <script src="..."> tag, you can see the Javascript code in that file.

Here's the example you're talking about: https://www.w3schools.com/js/tryit.asp?filename=tryjs_statements All of the code in that example is visible.

The tutorial pages themselves don't show all of the code, just the parts that they're talking about because it would be hard to highlight the part of the code they want you to focus on if the entire program was there. You can always click the green "Try it Yourself" button to see the missing code.

Even those these small pieces of code seem useless, they are the basics. You need to learn them because the more advanced tutorials won't make any sense without this knowledge. The part of the tutorial that tells you how to modify things on the page is in the HTML DOM section but you need to know all of the basics like variables, functions and object before you can understand how to use the HTML DOM.

If you would like to see real world applications and try to understand them for yourself, W3Schools has a whole series of examples in their How To section.

November 21, 2021

It's not that each rectangle is replacing the previous one, it's that you're changing the position of the same rectangle 1000 times over.

In your second code example, the square brackets just create an array of size 1 with that single element in it.

There's only one element on the page named <div class="rect"> right now, but even if there were more, document.querySelector() only selects the first one. To select multiple elements, you need to use document.querySelectorAll().

What you want, though, is not to select elements which already exist on the page, but to generate new ones. You can create copies of the first one by using the cloneNode() method. Here's how you would do that:

<script>
// Set the source rectangle's position
let rect = document.querySelector(".rect");
rect.style.left = String( Math.floor(Math.random() * 101)) + "vw";
rect.style.top = String( Math.floor(Math.random() * 101)) + "vh";

// Make 1000 copies of the source rectangle
for (let count = 0; count < 1000; count++) {
  // Create a copy. The "true" value meand that we want to copy the element's children as well.
  let copy = rect.cloneNode(true);
  
  // Set the position of the copied rectangle
  copy.style.left = String( Math.floor(Math.random() * 101)) + "vw";
  copy.style.top = String( Math.floor(Math.random() * 101)) + "vh";
  
  // Add the copy to the document as a child of the source rectangle's parent
  rect.parentNode.appendChild(copy);
}
</script>

November 18, 2021

Javascript is not an equivalent to PHP, they serve two different functions and can't replace each other.

Forms cannot be submitted to a Javascript file. To make something similar to form handling with Javascript, you would have to have code running on the form page which prevents the form from being submitted and reads values from the inputs.

Unless you're using Node.js server software, Javascript runs on the user's browser, so it does not have access to the server's database. You're allowed to save data on the user's computer using localStorage, but only that user can see the data, other people cannot. You can read about localStorage on this page: https://www.w3schools.com/js/js_api_web_storage.asp

Javascript is able to read query string values using location.search but you need to do a lot of string manipulation to identify the variable names and values. Its not as simple as in PHP.

November 18, 2021

That means that XAMPP is not running.

First, you should open XAMPP. If you have installed it correctly, there should be an icon on your desktop like this:

That should open the XAMPP configuration window. If it doesn't, click on the XAMPP icon in the windows task bar:

This is what the XAMPP configuration window looks like:

Click on the "Start" button in the row that says "Apache." Once you've done that, PHP files in the htdocs folder will be accessible from the //localhost/ domain in your browser.

November 17, 2021

Once the software is installed and running on your computer, you will be able to run PHP files from the htdocs/ folder of your XAMPP installation directory by typing http://localhost/ in your browser.

November 17, 2021

People mainly use the let keyword because in most cases you won't need to use a variable outside of the block it was declared in. Though this doesn't mean there's any problem with using the var keyword. Understanding both of them and choosing the right one for the job is my recommendation.

November 17, 2021

For easy development, I used XAMPP (server software) to test PHP on my computer. Here's where you can download it: https://www.apachefriends.org/index.html

November 17, 2021

What you need to do is hide all of the fields except for the one that you want visible. To be able to loop through all of the fields it would be good to give them a class name.

I recommend keeping the Javascript separated from the HTML by removing the onchange attributes and using Javascript's addEventListener() method.

This updated HTML structure will help:

<select name="Channel" id="Channel">
  <option value="Banner_">Banner</option>
  <option value="Retailer_">Retailer</option>
  <option value="Print_">Print</option>
  <option value="Social_">Social</option>
  <option value="Website_">Website</option>
</select>

<div class="optionfields" id="retailerOption" style="display:none">
  ...
</div>

<div class="optionfields" id="printOption" style="display:none">
  ...
</div>

<div class="optionfields" id="socialOption" style="display:none">
  ...
</div>

<div class="optionfields" id="webOption" style="display:none">
  ...
</div>

Then the script can look like this:

// Only attach the event once the element is available
window.addEventListenr("DOMContentLoaded", function() {

  var channel = document.getElementById("channel");
  channel.addEventListener("change", channelChoice);

});

function channelChoice(e) {
  // Associate options with element ids.
  // This step could be removed if the ids are identical to the option values.
  const lookup = {
    "Retailer_" : "retailerOption",
    "Print_"    : "printOption",
    "Social_"   : "socialOption",
    "Website_"  : "websiteOption"
  };
  
  // Hide all of the fields for now
  let fields = document.getElementsByClassName("optionfields");
  for(let i = 0; i < fields.length; i++) {
    fields[i].style.display = "none";
  }
  
  // The variable e contains information about the event.
  // The channel dropdown can be accessed from e.currentTarget.
  let channel = e.currentTarget;
  
  // Show the field that we care about.
  // The value of the dropdown will tell us which element
  // to show by using the lookup table we created earlier.
  let id = lookup[ channel.value ];
  if(id) {
    let visibleOption = document.getElementById(id);
    visibleOption.style.display = "block";
  }
  
}

November 17, 2021

The scripts I provided already synchronizes the cursor with the video timeline without resetting. If that's not working it's probably because a different script is interfering with it.

November 17, 2021

There are some reasons which might cause the code not to work:

The cursor images do not exist.
The cursor images are in the wrong location in the filesystem.
A different script on the page is interfering.

Without seeing the website for myself I can't know why it's not working.

2 hours ago, Winston said:
  let a = document.getElementById("clock");
  
  a.style.cursor = timecursors[index];
Wouldn't this replace all <a> elements? it says "a".

"a" is the name of the variable which was declared in the line above with the let keyword. It contains a reference to getElementById("clock")

It doesn't have to be called "a", I could call it whatever I want. This code is exactly the same as the above code:

let whateverIwant = document.getElementById("clock");
whateverIwant.style.cursor = timecursors[index];

You should read about variables in the tutorial: https://www.w3schools.com/js/js_variables.asp

November 16, 2021

No, CSS cannot use Javascript variables. None of this work can be done by CSS, it can only be done with Javascript.

I've finished writing the code for you. I have put comments explaining exactly what each line of code is for in the hope that if you need to change something you understand how it works and will know what to change.

<video id="video"> ... </video>
<br>
<a class="clocktime">Video Clock: <a id="clock">00.00</a>%</a>

<script>
// This line of code tells the browser to call the function timeCursor() every 200 milliseconds.
setInterval(timeCursor, 200);

// This is the timeCursor function
function timeCursor() {
  
  // This array has a all of the possible cursors in order.
  const timecursors = [
    "url(point/Percent00.cur)",
    "url(point/Percent05.cur)",
    "url(point/Percent10.cur)",
    "url(point/Percent15.cur)",
    "url(point/Percent20.cur)",
    "url(point/Percent25.cur)",
    "url(point/Percent30.cur)",
    "url(point/Percent35.cur)",
    "url(point/Percent40.cur)",
    "url(point/Percent45.cur)",
    "url(point/Percent50.cur)",
    "url(point/Percent55.cur)",
    "url(point/Percent60.cur)",
    "url(point/Percent65.cur)",
    "url(point/Percent70.cur)",
    "url(point/Percent75.cur)",
    "url(point/Percent80.cur)",
    "url(point/Percent85.cur)",
    "url(point/Percent90.cur)",
    "url(point/Percent95.cur)",
    "url(point/Percent00.cur)",
  ];
  
  // A reference to the video is REQUIRED in order to measure how much time has passed.
  // The variable is named "video" and any code that says "video" in the rest of this
  // script is using THIS variable.
  let video = document.getElementById("video");
  
  // This generates a number between 0 and 20 based on the
  // amount of time that has passed in the video which will
  // let us select the right cursor from the array above.
  let index = Math.floor(20 * video.currentTime / video.duration);
  
  // We need a reference to the link which will show the cursor.
  // We use getElementById() because the link we want has an id attribute with a value "clock"
  let a = document.getElementById("clock");
  
  // The variable "a" we created above lets us change the cursor for this link.
  // "timecursors" is the array we defined above and "index" selects
  // one of the values from that array.
  a.style.cursor = timecursors[index];
}
</script>

A lot of the mistakes you are making in your code show that you are not familiar with the basics of Javascript, you need to study the Javascript tutorial thoroughly.

November 16, 2021

I'm not sure what kind of link you're looking for.

Both CSS and Javascript are connected to the HTML. Javascript can read and write data into the HTML DOM while CSS changes the appearance of the HTML.

Through use of an HTML element's style property, Javascript is able to assign CSS rules to an HTML element.

November 15, 2021

I have a job, so I'm not able to check the forums during work hours.

Your code is almost perfect, all you need to do is get a reference to the link. The JavaScript DOM Mehods tutorial has information on how to get a reference to the link that you want. You just need to use getElementById() which is explained on that tutorial page.

You won't be able to learn if I write all of the code for you, it would be helpful if you go through the tutorials again to get a better idea of how the languages work.

November 15, 2021

They're not images, they're actually text. There are these rules in the stylesheets:

.rte__abs--frage::before {
    content: "?";
}

.rte__abs--antwort::before {
    content: "!";
}

This rule is the one that determines the size by using the font-size property:

.rte__abs--antwort::before, .rte__abs--frage::before {
    color: #5a5a5a;
    color: var(--a-theme-secondary,#5a5a5a);
    float: left;
    padding: 0 1rem 0 0;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
}

November 15, 2021

The code I wrote which updates the cursor while the video is playing just needs one change to put the cursor on the link.

Just change this line:

video.style.cursor = cursors[index];

Replacing the variable "video" with a reference to the <a> element you want the cursor to be attached to.

November 15, 2021

The first example I wrote will do that. But you haven't specified where and when to show the cursor.

Sign In

Ingolme

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by Ingolme

How do I put the donation buttons in a row for two?

How do I get the containers with the same width?

Code Structure help

Code Structure help

Endcoding question

Code Structure help

Using a popup modal with a while loop

Input questions, CSS reference

Java help/guidance

I am not understanding JS Try It Yourself

Very Basic SVG: width and height and bizarre double stroke on the right and bottom of a rectangle

Converting PHP Form Handling to JS

How to make virtual server in virtual disk

How to make virtual server in virtual disk

Var vs. Let

How to make virtual server in virtual disk

Showing / hiding a different set of fields depending on selection from a dropdown

How to make video-time-based cursors?

How to make video-time-based cursors?

How to make video-time-based cursors?

How to make video-time-based cursors?

How to make video-time-based cursors?

Where in CSS code is the image hidden? How to shrink it?

How to make video-time-based cursors?

How to make video-time-based cursors?

Browse

Activity