jQuery - Spiffing up your page where you can't edit the HTML!

[Kyttias]

Want to modify page elements not directly part of your template? Need to add a class to something so you slap some CSS on it, but you just can't find where the HTML for that widget is being rendered by Mysidia's GUI php scripts?

Take a seat!

This is relatively painless.

1. Decide what you're modifying!
Before we get into writing up our custom jQuery script, let's chose what page element we want to modify. For this example, let's say we want to turn the submit button on the login form blue.

Let's get a good look at what this button looks like by default!

Visit your website (and log out so you can clearly see the login button we're wanting to modify). Anywhere on the page, right-click and view the page's source. In Google Chrome, you can even right-click the element you're wanting to modify, and by selecting 'Inspect Element' at the bottom of the list, it'll take you right where the element is in the source code, or very near by. By default, our dull little button looks like this:

<button id="submit" value="submit" name="submit" type="submit">Log In</button>

As we know, CSS makes the web pretty. If we want to fulfill this button's lifelong dream of being blue, we're going to have to add some CSS.

Okay, but...? It's got an id attribute already, you say. You could go into your stylesheet right now and say:

#submit { background-color: blue; };

But that wouldn't make this much of a tutorial, would it? No! We don't want to add css to the id, ids can only be used once. We want to add a class that turns any button with that class blue. We could use it on any button anywhere on the site that we've added this class to! Let's add this amazing class to this button pronto! And once we do that, we can add it to any button we want ever, and we will have spectacular buttons!

2. Let's add to your stylesheet!
Find your template's stylesheet (templates/name of your template/style.css) and open it up. We're going to add two classes. Why two? You'll get to see easily how multiple classes are added later on in our actual scripting. For the sake of this tutorial, here's the css:

.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

As you can guesstimate from the above, the first class is just adding colors, the second is modifying the shape! With this in mind, you could make multiple classes for multiple colors, and if you find yourself wanting a red cancel button and a green confirm button (or whatever floats your boat).

3. Great, but, just how does this work?
Well, first, you will need add jQuery to your template. (What is jQuery?)

jQuery is hosted as a file by Google's CDN, freely provided, so all we need to do is link to it. (Optionally, you can go to the jQuery website linked above and download the file yourself, place it somewhere in your stuff, then figure out how to link to it. I prefer using Google's CDN as it's highly likely it's already been cached by your users after viewing any website that also links to it from Google's CDN - and this means faster load times! )

Now let's go open up your template.tpl file (templates/name of your template/template.tpl). Find where the </body> tag ends. Immediately above it, link to jQuery, like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{$home}{$temp}{$theme}/YOUR_JS.js"></script>

The second script being linked to above is where we're going to work our real magic. Linking your custom script with {$home}{$temp}{$theme} directs it to where Mysidia installed/template/the name of your template/ automatically. So now we're going to make the YOUR_JS.js file right there, in that the same folder as template.tpl. (We're done with the template file now, by the way, so we can close it.)

4. Ok, magic time!!
Now we get to why we're really here. YOUR_JS.js (or whatever you actually decide to name it) can be opened with Notepad, or your preferred editor. (Make sure it gets saved as a .js and not anything else, of course.)

Without going into it, this is what we're putting in here:

 $("#submit").addClass("btn btn-primary");

Piece of cake!

Save everything and let's load up our site again. Now our HTML source code should be rendering this change:

<button id="submit" value="submit" name="submit" type="submit" class="btn btn-primary">Log In</button>

5. Comprehension:
Now, let's get a quick lesson in jQuery 101 so you can kind of grasp what's going on here. jQuery is surprisingly beginner friendly, and it took me a very short time to get so comfortable with it. The basic method syntax is as follows:

$("selector").event(function(){
$("selector").effect("parameters");
});

In our case, only using the line in orange, because we don't have any prerequisites and we want this to happen asynchronously when the page loads. We're selecting the page element with the id of submit. The effect we're performing on the thing we're selecting is the rendering of an additional class, and the parameter is the name of the class. There's no need for the CSS designation (a . because it's a class) in the parameter, even though the selector had it's CSS designation (a # because it's an id) -- parameters are just different in this regard. In this case, the class parameters we're adding are just separated by mere spaces.

For a full list of selectors (page elements and how to designate children of them), events (on resize, on click, on mouse over, etc), and effects (adding and removing parameters, fading in and out, hiding and showing, etc) just check out the official jQuery documentation. If you're interested in learning jQuery, I also recommend W3Schools because it has code examples and tutorials.

Because this was such a small line of code, alternatively, it could have been included anywhere in the page itself, rather than linked as a separate file, like this:

 <script>$("#submit").addClass("btn btn-primary");</script>

Best practice is to load jQuery and all other javascript libraries at the end of the page, to save load time.