Auto-Updating User Statuses
Back to Tutorials
Let's say you want to add a little "user status" thing to your NeoCities, one that displays in the sidebar like I have here on my site. However, what happens when you have that on every page, and then you want to update it at some point..? Wouldn't that be difficult to do, since you would need to go into every page and edit it manually?
No need to do that! I'm going to show you how I set this up on my page, and how it can be applied to further content! We're going to make use of HTML and JavaScript to do this, hopefully without requiring major understanding of either to do so!
Before we go any further...
Keep in mind that, for any of this to display on your website, you will need JavaScript enabled on your browser. Obvious, I'm sure, but a really good methodology for building website is not to require JavaScript for your core. So, as much as you could use this method to, say, make your navigation out of this, or auto-populate your silly little buttons with this, don't over-rely on this! I say this only because I almost did this, and then realized what a mistake I was making.
Setup
First, let's add jQuery to all pages where this will be displayed. This will manage plugging in our information for us! Google hosts a jQuery library we can take advantage of, by placing this snippet of code into our page, in our <head>...</head> section.
After that, under that line of code, we're going to be linking in a separate JavaScript file that we will be using to hold all of our information. You can use this code to do so:
<script type="text/javascript" src="FILENAME.js"></script>
Make sure to make this file! It must be the same name as the one we just placed into our script code link.
The HTML
Now that that's all set up, you'll want to set up a container for your user status info. You can put as many options in here as you'd like! The important part is that we have separate elements with unique IDs; you'll be using these IDs as reference points.
This is all you need for your HTML, actually! We won't be putting any text into these, as we'll be using JavaScript to do so...
The JavaScript
Now that we have the framework for our HTML, let's set up our JavaScript file! You can name this anything you want; I use "globals" on my site, as this is text that is "globally used" across most, if not all, of my pages.
For clarity's sake, let's use comments to separate our information from one another. If you put // at the start of a line, that will make that line into a comment! After those two slashes, you can put whatever text you want! In this case, you can label it as "user status info" or something like that.
Underneath that, we're going to define some variables; these store information which can be called to in your code, so you don't have to continually refer to longer strings of code or values! Super helpful. In the case of a user status box, this means you can make variables for your mood, what you're up to, that sort of thing. It should look something like this:
// User Status Info
var userMood = "";
var userPlay = "";
var userListen = "";
var userWatch = "";
The equals sign assigns what we want our variables to be, so don't forget that. These quotation marks are also important, as we are going to be assigning a string to our variable! This lets us put in text or HTML as our variable!
Feel free to put whatever you want in-between these quotes; since we can use HTML in here, which will be parsed with jQuery, you can use this to do italics for pieces of media, if you like to give proper syntax like that!
If you want to include quotation marks, you can totally do that! Put \" to make it an "escape character", so that it's not included as part of the script.
This is all we need to do with our JavaScript file, actually! You'll see why we do this in a second...
The jQuery
Now, we're on to our final bit! And here's where we are going to do some very light programming.
First thing first, we are going to go back to our HTML page and scroll down to the bottom. Right at the bottom of our </body> tag, we're going to add in a new section, using <script>...</script>. It should look something like this:
...
<script></script>
</body>
Here, make a new comment header, just so you know what this is. Since jQuery is just a library add-on for JavaScript, you can use the same comment method as we did before!
Now, we are going to start plugging in our variables where they should be. We'll be using jQuery code to select a specific ID out of our entire HTML body! With this bit below, place in the name of your ID in question: (You can also select a class, if you so choose, but we have used IDs in this tutorial so far, so let's stick with that.)
$("#IDNAME")
Once we have that, we're going to add behind it to edit the HTML of the ID in question. In the parenthesis parameters for this, we will put in the name of our matching element! So, if you're doing a mood status message, it should look something like this:
$("#currentMood").html(userMood);
Now, you might be asking: "if you're doing all of this with jQuery anyways, why do you need the external JavaScript file? Can't you just define the variable here, and save some extra effort?" And the answer to that is because, without the external file, every time we wanted to update our user status info, we would have to hard edit every page that we want this to display on. But because we're pulling a variable set to a status from one single file — our JavaScript file — and we're programming our HTML page to plug that in for us, we don't have to do that!
With this in place, you should be able to save your work and refresh your HTML page to see the text auto-displaying! Easy as that, and it doesn't require much JavaScript knowledge!
