|
Oh and after you've mastered vanilla JavaScript... study React. But not until you can do what you need to do without it.
Jeremy Falcon
|
|
|
|
|
Hello again...
[Thought I could do this on my own in Adobe Dreamweaver, but I guess not]. I need a basic (responsive) html template whereby everything on the page is centered vertically in divs...both image & text content. (I believe I need what is known as a 'wrapper'...that can be set to a certain width...& then all other content would be centered in that wrapper)
If someone can just get me started, w/ just a few centered divs in a wrapper for placement of images & text, I can learn from that basic code & just add content as I go (& will be very appreciative of any effort, from anyone here).
thanx,
mwForman
modified 8-Nov-22 22:32pm.
|
|
|
|
|
Centering in CSS: A Complete Guide | CSS-Tricks - CSS-Tricks[^]
For example:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
display: grid;
height: 100%;
}
body > div {
margin: auto;
}
</style>
</head>
<body>
<div>
Everything in this element is centered, both horizontally and vertically.
</div>
</body>
</html> Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard...
Thanx. I don't need horizontal centering, tho...only vertical (i.e., all content would be centered on the page vertically, but would be positioned at the top of each div). What would that page code look like?
Thanx again,
MF
|
|
|
|
|
Member 14987492 wrote: I don't need horizontal centering
...
all content ... would be positioned at the top of each div
Those two statements don't match. If you want content positioned at the top, then it's the vertical centering that you don't want. If you don't want the horizontal centering, then you want the content positioned on the left-hand side.
So which is it?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I was pretty clear (I thought). You gave me a code page whereby content was centered on the page but then also centered vertically in the container. I want all the containers (divs) to be centered, but I want the content inside those divs at the *top* of the centered div, not in the *middle* of it.
thanx
|
|
|
|
|
But that's exactly what I gave you. 
The content isn't vertically centered within the <div>; it's just that the <div> is only as tall as the content. If you make it taller, the content will still be at the top of the <div>.
body > div {
margin: auto;
min-height: 5em;
outline: 4px dotted green;
} Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Just to add to Richard's great answer, you may wish to adjust your styles:
html,
body {
display: grid;
height: 100vh;
margin: 0;
padding: 0;
}
Technically, having height 100% on the body works out to be the same in that context. But it means 100% of the parent element. If there is a lot of content this may not mean center on the screen - which can be a good thing. Just depends on your use case. The 100vh always means 100% of the viewport height regardless the size of the body container.
Also, the margin and padding is set to zero to avoid the doubling up of the scrollbar.
Jeremy Falcon
|
|
|
|
|
I am making some modifications in a web and opening it with
Firefox on a Linux Debian 11.2 machine and
I need to change the security preferences, unchecking the box
"Delete cookies and site data when Firefox is closed."
However, it won't let me uncheck this box, as it shows up with a
softer color and ignores the mouse click on the check box.
The person who worked on this project before is gone and I don't
may I ask if you established any security mechanism that does not
Let me modify this option.
I have seen that in /home/myuser/.mozilla/firefox folder
the files exist
-rw-r--r-- 1 myname mygroup 58 Jan 26 2022 installs.ini
-rw-r--r-- 1 myname mygroup 247 Jan 26 2022 profiles.ini
I have tried to change the permissions to 777, but despite that it does not allow me to change
that option in Firefox.
Any suggestion or comment is welcome.
|
|
|
|
|
Hi all, first attempt to set up a file upload on web page.
Pretty basic stuff, but my first try so can't see why it isn't working.
Firstly I'm running on apache2 on a VPS debian 10 install.
/etc/php/7.4/apache2/php.ini contains the following:
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;
; Whether to allow HTTP file uploads.
; <a href="http://php.net/file-uploads">http:
file_uploads = On
; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
; <a href="http://php.net/upload-tmp-dir">http:
;upload_tmp_dir =
; Maximum allowed size for uploaded files.
; <a href="http://php.net/upload-max-filesize">http:
upload_max_filesize = 2M
; Maximum number of files that can be uploaded via a single request
max_file_uploads = 20
index.html looks like this:
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
upload.php as follows:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
Finally, there is a folder named uploads in the path where the index.html and upload.php files reside.
When I test with a jpeg file (286k in size), I get "sorry there was an error uploading your file".
Any advice would be much appreciated, thanks.
|
|
|
|
|
(groan...)
directory wasn't set to be writeable.
sudo chmod 777 ./uploads
did the trick.
|
|
|
|
|
Congratulations - you've just opened up a potential security vulnerability. You allow users to upload files to a folder which is set to allow any user to execute any file in that folder. Guess how long it will take for someone to upload and execute a virus on your server? 
https://linuxize.com/post/what-does-chmod-777-mean/[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
 , glad you figured it out. But you shouldn't chmod 777. That directory should only be writable by the Apache process. Also, it should not live in your document root.
/var/www
- website.com
- html
- index.php
- uploads
- some_file.pdf
Jeremy Falcon
|
|
|
|
|
I'm trying to store a variable from data loaded through a fetch API, so that it's available for use outside the "promise" - i.e. so that I can generate a variable and them compare it on page reload. So far, I have something like this, but it doesn't work:
let extractedVal = await main(x);
let xml = "";
let apiUrl = "link/to/myfile.xml";
async function getXml() {
let response = await fetch("link/to/myfile.xml");
let text = await response.text();
xml = new DOMParser().parseFromString(text, "text/xml");
return xml;
}
async function main() {
xml = await getXml(apiUrl)
console.log(xml);
var x = 1;
return x;
}
i get the error at line 1:
Uncaught SyntaxError: await is only valid in async functions and the top level
or:
x is not defined
if I don't use await
Surely, I'm not seeking to do the impossible here? All the methods I can find for "hoisting" a local variable into global scope seem to fail.
modified 4-Oct-22 19:44pm.
|
|
|
|
|
Top-level await[^] is currently only supported in modules[^]. For regular Javascript code, you would need to wrap it in a function.
For example:
let xml = null;
(async () => {
const apiUrl = "link/to/myfile.xml";
const response = await fetch(apiUrl);
const text = await response.text();
xml = new DOMParser().parseFromString(text, "text/xml");
console.log(xml);
})(); NB: If you access the xml variable before the fetch has completed, it will still be null. Another approach would be to store a promise[^] in the variable, and await that when you want to access it:
const xml = (async () => {
const apiUrl = "link/to/myfile.xml";
const response = await fetch(apiUrl);
const text = await response.text();
const result = new DOMParser().parseFromString(text, "text/xml");
console.debug("xml:", result);
return result;
})();
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
DSB Audio (David Sweeney-Bear) wrote: All the methods I can find for "hoisting" a local variable into global scope seem to fail.
You can't hoist across scopes. Hoisting merely moves definitions of variables to the top of the scope that they are defined in (but the initial value assigned to it is still done in the place where the they appear in the script text). You must define the 'x' in the scope that owns it (pref. not the global scope) and then it is visible in all inner scopes unless hidden by declaring another 'x' in a scope between the defining one and the using one. You can create a variable in the global scope from any other scope by using it without declaring it first (e.g. not in a var statement) - this is bad practice, so please do not do that.
|
|
|
|
|
I'm using JS to fetch data from an xml file on a server, like so:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
I've noticed that when I use this code within my wordpress site, my function is able to get readable data in chrome console, i.e. a drop-down which shows all the xml code,
However if I use the same JS on a static HTML page, it seems to fetch the data but only displays "XML: [object XMLDocument] with no actual data.
Obviously, I'm new to all this, but it would really help my understanding to know why this happens.
|
|
|
|
|
Since this seems to be a new site, and I'm assuming you don't need to support the now officially dead[^] Internet Explorer, you might have better luck using the Fetch API:
Fetch API - Web APIs | MDN[^]
This can help to clean up the code, especially when combined with async[^] and await[^].
Eg:
async function loadSomeData(){
const response = await fetch("/path/to/your/file.xml");
const text = await response.text();
const xml = new DOMParser().parseFromString(text, "text/xml");
myFunction(xml);
} DOMParser - Web APIs | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks, it seems I made a "rookie" mistake... I'm in the habit of adding text strings to console.log outputs, since I tend to use so many to try and figure out what's going on in my code...
So, instead of console.log(xml) I had written console.log("xml: " + xml) which is what caused the data to be "unreadable" in console.
Using just the variable in console.log means that both fetch and XMLHttpRequest work equally well. In fact they were working anyway and the real root of the issue I'm tying to debug lies elsewhere... probably a subject for another post!
|
|
|
|
|
FYI, the console methods accept multiple parameters, which would avoid this problem. 
console.log("xml:", xml); There are a lot of other useful console features, most of which work in all modern browsers:
console - Web APIs | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
helo code project, I am a student my final year project is about to finish but I have a problem, which that, how I can build a web page to only have course content. when I click on it goes to the next page.
like
heading course content for the college
then
consist of course content with icon
Please help me to create
|
|
|
|
|
Hello everybody
i'm looking for a group of person , beginner please, for create a team for dev.
This is for create a projet together.
I am just a beginner ! i start just by the html css et just little js.
Contact me please.
ps: i'm french, so sorry for my english ^^
|
|
|
|
|
That's a nice plan and I am interested in this. Even though I am in the initial stage of learning HTML and CSS therefore I would love to be a part of this group.
|
|
|
|
|
I would also like to be a part of this group as I am in the beginning of my frontend journey and i would like to pratice projects as much as I can so I would love to join this community!
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
