JavaScript Help!

Ciphon · 10 Nov 2011 at 19:00

Hi All,

I'm a complete beginner when it comes to JavaScript and could use a little help...

I've basically googled and mashed up what people have put on the net to get to where I am now...

The JS I have operates on table cells, and changes the css class on the cell.

My code is as follows:

Code:

var currentDate = new Date();

function setStyles(obj) {

    if (obj.className == "" || obj.className == "today") {
        obj.className = "fullDay";
    }

    for (i = 1; i < 366; i++) {
        document.getElementById("calHolidayPlanner_" + i).onmouseover = document.getElementById("calHolidayPlanner_" + i).onmousedown
    }


    obj.onmouseup = function() {
        for (i = 1; i < 366; i++) {
            document.getElementById("calHolidayPlanner_" + i).onmousedown = document.getElementById("calHolidayPlanner_" + i).onmouseover;
            document.getElementById("calHolidayPlanner_" + i).onmouseover = null;
        }
    }
}

function setHolidayType(obj) {

    if (obj.className == "" || obj.className == "today") {
        obj.className = "fullDay";
    }
    else if (obj.className == "fullDay") {
        obj.className = "halfDayPM";
    }
    else if (obj.className == "halfDayPM") {
        obj.className = "halfDayAM";

        //daysOff.splice(daysOff.indexOf(id), 2, id, "halfDayPM");
    }
    else if (obj.className == "halfDayAM") {
        if ("calHolidayPlanner_" + dayOfYear(currentDate) != obj.id) {
            obj.className = "";

            //daysOff.splice(daysOff.indexOf(id), 2);
        }
        else if ("calHolidayPlanner_" + dayOfYear(currentDate) == obj.id) {
            obj.className = "today";

            //daysOff.splice(daysOff.indexOf(id), 2);
        }
    }
}






/**************************************************************************/
/* Function used to get the Day Of The Year - I.E - Jan 1st = Day 1 */

function dayOfYear(d) {
    var yn = d.getFullYear();
    var mn = d.getMonth();
    var dn = d.getDate();
    var d1 = new Date(yn, 0, 1, 12, 0, 0);
    var d2 = new Date(yn, mn, dn, 12, 0, 0);
    var ddiff = Math.round((d2 - d1) / 864e5);
    return ddiff + 1;
}

The first function is click and drag, every cell dragged over whilst the mouse is down has the CSS class set to "fullDay". It's called as: OnMouseDown="setStyles(this)"

The second function is OnDblClick="setHolidayType(this)" and changes the class depending on what it already is.

The problem I'm having only exists in IE & FF, the code works perfectly in Chrome. I haven't tested any other browsers yet.

Basically, I want to be able to use the click and drag function, then use the double click function, and go back to the click and drag.

In IE and FF, I can use both functions, but as soon as I use the double click function, the click and drag stops working!

I'm sure its probably something to do with having two mouse down type events, but I just can't see what's wrong.

Any help appreciated!

Dj_Jestar · 10 Nov 2011 at 19:18

I strongly encourage you to use jQuery, then the code is much, much more simple with examples like:

Code:

$("td").mousedown(function() {
  $(this).addClass("fullDay");
});

Ciphon · 10 Nov 2011 at 19:30

Dj_Jestar said:
I strongly encourage you to use jQuery, then the code is much, much more simple with examples like:

Code:

$("td").mousedown(function() { $(this).addClass("fullDay"); });

I've been told this by a few people now...

I assume jQuery is just JavaScript on steriods? Do I just code it in a usual .js file?

Excuse my ignorance, but I mention in my OP, I'm a complete newb to JS / JQ :/.

sharkkk · 10 Nov 2011 at 19:45

It's just a JS library, giving you a ridiculous about of handy things pre-made so you can't just get on and make stuff work. As such, yeah you use it the same as any other JS

Ciphon · 10 Nov 2011 at 19:59

So I just put this:

http://code.jquery.com/jquery-1.7.min.js

into a JS file, and off I go?

sharkkk · 10 Nov 2011 at 20:08

Or just stick

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

in your header so the client downloads it from the google cdn

Then you have a whole load of documentation and examples plus you'll find help on google if you need it!

Ciphon · 10 Nov 2011 at 20:53

sharkkk said:
Or just stick

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

in your header so the client downloads it from the google cdn

Then you have a whole load of documentation and examples plus you'll find help on google if you need it!

Cool - I'll give it ago, thanks guys

Phunky · 11 Nov 2011 at 09:18

Dj_Jestar said:
I strongly encourage you to use jQuery, then the code is much, much more simple with examples like:

Code:

$("td").mousedown(function() { $(this).addClass("fullDay"); });

Be warned from 1.7 onwards they are deprecating the event helper functions you would need to start using .on() & .off() instead.