side menu
Quick and dirty trick to add a class to content links (and use grep!)
February 16, 2009 - 11:31 — Vegard A. JohansenWe've had several requests from clients that wants certain content pages stand out more than other content pages. This is easy to do with CSS, but then you need a hook to hang the CSS on, which is not available by default in ATutors content navigation.
I decided to have a closer look at this today, and my goal was adding an unique class to each content link in the side meny.
What you do is:
find include/classes/ContentManager.class.php
and within this file you need to find a link to content, I found one at line 696 that I got to work. It looks like:
<?php
$link .= $img_link . '<a href="'.$_base_path.url_rewrite($in_link).'" title="';
?>(not including the php start and end tag)
I'll be honest and say that I don't know if this is the best line to alter, but at least the end result works in all my tests. I changed the line to:
<?php
$link .= $img_link . '<a class="cid-'.$content['content_id'].'" href="'.$_base_path.url_rewrite($in_link).'" title="';
?>(again, not including the php start and end tag)
that is, adding class="cid-'.$content['content_id'].'" which will create an end result like <a class="cid-123" href=".." when you view source, which you can use to style!
Bonus tip
Finding code you wish to alter is easy if you have a terminal (which means you use Mac or Linux), and I'll write down here how you can use the grep command in a terminal to find this, mostly because I need a place where I can look it up myself:
Go to the directory where you wish to start searching, and fire away:
grep -R "I am the eggman!" test/*You will now search for I am the eggman! recursively within all the files in the test directory.
To find HTML code you will probably find that you need to search for the "-character too, and then you need to escape them. Here's what I used to find the file with the code I needed to change in the example above:
grep -R 'alt=\"\" class=\"img-size-tree\"' atutor/*Hat tip to Lon, the terminal ninja, for helping me with this
Create a side menu toggle function with cookies in jquery
September 16, 2008 - 13:01 — Vegard A. JohansenThis one is for Google: I struggled for quite a bit to find a good way to create a togglable side menu for the new ATutor theme using jQuery, but finally got it right with the help of a tutorial by Matt Rossi.
I adapted this to fit my needs, which were:
- Having a togglable side menu ment that I had to manipulate the width of my main content to make space for the side menu, in addition to just showing and hiding the side menu itself.
- I also wanted the initial state of the menu to be showing, not hiding.
- ..and it needs to remember the users' choice when navigating through the site, using cookies.
You need
Link to these from the <head> of your site, and then place the following code underneath it (that is, still in the <head>, either as a link to a file or inline, but below the reference to the two above).
The code
<?php
// Author: Matt Rossi. Apated for ATutor by Vegard A. Johansen
// Links and info: http://atutor.no/2008/09/create-side-menu-toggle-function-cookies-jquery
$(document).ready(function() {
// set initial state: the main container has enough space, and the side menu shows.
$(".main-content-container").width("72%");
$("#side-menu-container").show();
// create a variable which is the link to toggle the menu
// this creates a link to # with the class "togglemenu"
var a = $("<a>toggle side menu</a>").attr('href','#').addClass("togglemenu");
// .. and place this link within the element with class "toggle-menu"
$('.toggle-menu').append(a);
// define a function when you click the link with the class togglemenu
$(".togglemenu").click(function(){
// if the menu is visible (initial state), the function allows you to hide it
// ..and sets the cookie to hidden after, so the state is remembered
if ($("#side-menu-container").is(":visible")) {
$("#side-menu-container").hide();
$(".main-content-container").width("98%");
$(this).addClass("active");
$.cookie('side-menu', 'hiding', {path: "/"});
return false;
} else {
// and if not visible, the function let's you show it
$("#side-menu-container").slideDown("fast");
$(".main-content-container").width("72%");
$(this).removeClass("active");
$.cookie('side-menu', 'showing', {path: "/"});
return false;
}
});
// cookie time!
// creates a variable with the contents of the cookie side-menu
var sidemenu = $.cookie('side-menu');
// if cookie says the menu is hiding, keep it hidden!
if (sidemenu == 'hiding') {
$("#side-menu-container").hide();
$(".main-content-container").width("98%");
$(".togglemenu").addClass("active");
};
}) // jquery ends
;
?>Do ignore the php start and end tags here, they are inserted by the code filter. Also feel free to remove my excessive commenting!
What the script does is:
- Manipulate the width of the div with class "main-content-container", and show the div with id "side-menu-container". This is the initial state.
- Create a variable with a link within it.
- Places this link within the div with class "toggle-menu" (not neccessary)
- Defines a function for what should happen when you click a link with the class of "togglemenu": a) if visible, the function can hide the menu, set the width of the main container to full, and write "hiding" to the cookie, so it remembers your choice. Then, if the menu isn't visible, the functon can make room for the menu, and show it.
- It then reads the cookie, and if the cookie says the menu is hiding (because the user changed it from the initial state) it simply keeps the menu hidden and lets the content take full width.
That's it! Thanks again to Matt Rossi for writing this down! The difference between his version and this is:
- The initial state shows the menu, not hides.
- This one also manipulates the width of the main-content-container which is not neccessary when it's not a side menu
- There's a path set on the cookie. I found this to be neccessary so the script doesn't set a new cookie for each directory you're in.
You see it in action at this site, hope it's usable for someone else too!
Browser compatibility
Works in IE 6+, Firefox 1,5+, Opera 7+, the current Safari (not tested lower versions) and Google Chrome.
Thus, does not work in IE 5.5 and below, as well as Opera 6 and below. If you have more test results leave it in the comments!
The observant reader will notice the redesign on these pages, which means it's theming time again!
The new Hopper theme for ATutor only exist at my localhost so far, but to get some initial feedback and to be able to test it on more browsers than those available on my localhost, I adapted some features from it here on the blog part of atutor.no (which is the Drupal part).
Background
The Redux theme was initially created to mimic the look and feel of the default theme for ATutor 1.5, in an effort to create a table free theme for that ATutor version. The Hopper theme is still based on much of Redux, but for other reasons. First of all it's not designed to mimic a look, but to create a new look, and maybe more important it will change some of the GUI elements we know from ATutor now, probably making it the most different ATutor theme when ready.
Why Hopper?
I don't really take theme names very seriously, but everything needs a name. This is named after the late great Edward Hopper, because I like his art, and I used his picture Nighthawks for the initial banner when I first started working on the new theme, and borrowing some colors from it.
(It's the banner you see here now, but it will not be the banner it ships with, nor the banner for these pages for a very long time, for obvious reasons).
Main changes
The new look will have stronger colors and contrast than Redux, and the whole top bar + banner section is higher, creating more air and giving us the possibility to use a bit larger banner images. Hoppers top section, banner, main and sub menu is around 180 pixels high, while the equivalent for Redux is around 140 pixels.
More important is that the javascript for the showing and hiding of the side menu is completely replaced and rewritten with the use of jQuery! This has some good sides and probably some bad sides too. First the good ones:
- jQuery is both cool and very elegant.
- ..and it's also included in ATutor by default, allthough I don't really know what it's used for (?)
- it's all in the head! all inline javascript that was used for the side menu is removed, and replaced with around 20 lines in the head, making the code less obtrusive, easier to understand, and also making it much simpler to create even new themes based on the Hopper theme.
- most important for us: the previous side menu would only work if the menu was absolute positioned in CSS, which had the side effect that you could only use a flexible site width in your themes, not a fixed one (like atutor.no is). With the new method you can use what you'd like, and the CSS is far simpler!
bad sides:
- This really doesn't matter much for me compared to the good sides, but there are some additional Kb's to load for the user. On the other hand, javascript is cached, and jQuery is good to have available anyways - we use it increasingly for course content too, now that the custom head feature is available in ATutor.
- Probably something else too - I haven't tested it on other browsers than Firefox 3 and Safari on Mac, which is where you can help!
Test it!
The only place it can be tested so far is here, on the blog part of atutor.no, and the only thing to test is how the the side menu works (click "toggle side menu" above the menu), and also see if the design burnes your eyes out or not! Comments are open and welcome, more posts to come as we go!
