Archive for January, 2012

EAP Study Guide Updated

Jan 31 2012 Published by under Courses

The Engineering as a Profession question and answer sheet was made about 3 years ago. Last time I changed the URL to make it more relevant in searches. However, I was still surprised to see more answer submissions this time. Today, I added those answers and fixed character issues that appeared since I converted files to UTF-8.

It definitely makes answering those questions on the exam easier. I developed and used it myself, with the goal of spending minimal amount of time on it. Separate files stored questions from the PDF study guide and the answers from Word, which are combined using a simple PHP program.

No responses yet

jQuery Scrolling Menu

Jan 30 2012 Published by under CourseTree

When implementing the scrolling menu for Chrome and Firefox, I prototyped the menu using fiddlesalad’s LESS CSS editor. Then, I copied the compiled CSS and started coding with a straight forward procedural approach.

function displayMenu() {
    var selected = [$('#menu ul:first li.selected'), $('#menu ul:eq(1) li.selected')];
    if (selected[0].length) $('#menu div:first').scrollTo(selected[0]);
    if (selected[1].length) $('#menu div:eq(1)').scrollTo(selected[1]);
    $('#menu ul:first').parallax({
        takeoverFactor: .2,
        mouseport: $('#menu ul:first').parent(),
        xparallax: false
    });
    $('#menu ul:eq(1)').parallax({
        takeoverFactor: .2,
        mouseport: $('#menu ul:eq(1)').parent(),
        xparallax: false
    });
    $('#menu ul:first li').click(function () {
        window.location.assign(ajax_url + 'calendar/' + $(this).text() + '/');
    });
    $('#menu ul:eq(1) li').click(function () {
        var course = $(this).text().split(' ');
        window.location.assign(ajax_url + 'calendar/' + course[0] + '/' + course[1] + '/');
    });
}

$('#menu ul:first li.last').livequery(displayMenu);

Later, I noticed that the performance can be improved by caching jQuery results. Also, many lines of code were repetitive. Before moving onto the more challenging part of the menu design, scrolling to the current location, I made it object oriented using plain JavaScript.

function Menu(selector) {
    this.selector = selector; // #menu ul:first
    this.$list = $(this.selector);
    this.$container = this.$list.parent();
    this.display = bindMethod(this, function () {
        var selected = this.$list.find('.selected').prev(),
            prevCount = 0;
        var prev = selected.prev();
        while (selected.length && prevCount++ < 3)
            selected = selected.prev();
        // only course pages have enough height, otherwise the courses at the top cannot be reached
        if (selected.length && window.location.pathname.split('/').length == 5)
            this.$container.scrollTo(selected);
        this.$list.parallax({
            takeoverFactor: .2,
            mouseport: this.$container,
            xparallax: false
        });
    });
    this.$list.find('.last').livequery(this.display);
    this.scrollTop = bindMethod(this, function () {
        if (this.activated)
            this.$container.scrollTo(this.$list.find('li:first'));
    });
    this.$container.mouseenter(bindMethod(this, function () {
        this.activated = true;
    }))
    this.width = function () {
        return this.$container.width();
    }
}

Writing classes in JavaScript brings unexpected quirks, such as this being set to an HTML Element. However, using an additional helper, bindMethod, this problem is avoided. I used the scrollTop method to scroll to the top of the menu:

var deptMenu = new Menu('#menu ul:first'), courseMenu = new Menu('#menu ul:eq(1)');
var $deptTop = $('#menu').prev().find('div:first'), $courseTop = $('#menu').prev().find('div:eq(1)');
$deptTop.width(deptMenu.width());
$courseTop.width(courseMenu.width());
$deptTop.hover(deptMenu.scrollTop);
$courseTop.hover(courseMenu.scrollTop);

 

No responses yet