About JQuery on these pages
I have added JQuery to my installation of ScrewTurn.
If you look at the menu area, you see that a marker continuously runs up and down. If you hover the mouse over a link in the menu, the marker seeks the mouse position. When the mouse is removed from the menu, the marker returns to its up down cycle.
Another effect you can see is to hover the mouse over the title "Seneste ændringer" in the navigation area to the left. The list of changes now appear. If you remove the mouse, the list disappers by itself.
These effects was made by a few lines of JQuery calls, only made possible if you add JQuery support to your site.
Adding Jquery support
First of all the site needs to load the JQuery code on every page.
In ScrewTurn this is done by editing the MasterPage head area by using the
Adminstration menu, and then click the
Content editing tab.
In the Content editing window, you can select a Namespace, but this have no effect, since the root
HTML Head is always used, no matter what namespace is selected when viewing pages. So select <root> namespace and then click the
HTML Head area.
Insert this line in the editing area somewhere.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
This line tells you site to load Jquery from google, which is the fastest and most reliable way to load JQuery.
From now on your ScrewTurn site supports JQuery.
Making your first effect
After adding JQuery support to your ScrewTurn site, you can now create one or more effects.
One thing I have found extremely annoying on ScrewTurn is the tooltip on links, that unessacerely pop up to say exactly what is already printed on screen.
Another thing is the lack of access keys on often used buttons, for instance the
save button. I have therefore added
ALT+S to the save button in the page editor. the other buttons can be altered by JQuery the same way, but I'll leave this to you to figure out.
<script type="text/javascript"><nowiki>
google.setOnLoadCallback(
function() {
// turn off titles on all a elements in PageHeaderDiv
$("#PageHeaderDiv a").attr("title", "");
// Add keypress ALT+S to the SAVE button if one exists
$("input[type=submit][value=Save]").attr({accesskey: "s"});
</nowiki></script>
Ensure a good practice
You can through the administration menu, put this and future code in the
Header file for a specific namespace or in the global
HTML Head to address all namespaces.
One nice extra feature that comes out of this, is that you now can change aspects of your site, simply by editing the content files.
From this on you dont need to edit files directly on the server, like in the Theme folder - to make small fixes. Its very quick to change the text color on all p elements, and then see the effect of it. You can change the actual texts on specific elements, change colors, make quick fixes or ad-hoc changes.
Example for changing text color on all p elements in the right pane id="rigthpane" of your pages:
$("#rightpane p").css({color: "#555"});
I will therefore urge you to follow good practice and do refactoring. You should always stop and think about, whether the changes you make to your site using JQuery in the header files, should really be placed in theme files instead.
Refactoring is a good practise which is sometimes forgotten. Consider refactoring as cleaning up. You should clean up, because if your toolbox is a mess, it takes longer to do a simple job later on.