event handling through CSS and modifying style dynamically

Kirk Is

Hi there.
I'm trying to improve a simple javascript based graphics editor for
Atari 2600 games (long story) with better use of CSS and Javascript.
I'm a little weak on what CSS can and can't readily do (sometimes I'm
stuck in a Netscape 3 world, mentally) so I have a few questions:

Say I had an editor with some CSS like this:
<html><head>
<style type="text/css">
td.edt {background-color: yellow; height: 50px; width:50px}
</style>
</head><body>
<table>
<tr>
<td class="edt" name="00"></td>
<td class="edt" name="01"></td>
</tr>
<tr>
<td class="edt" name="10"></td>
<td class="edt" name="11"></td>
</tr>
</table>
</body></html>

1. Is there anyway to associate event handlers like onMouseDown with
every td of class "edt", or will I need to put the onMouseDown in the
tag of each td ? (Or do I need to get very complex with javascript
prototypes etc, so it would be easier just to do the individual
onMouseDowns ?)

2. Via javascript, can I modify the edt class so that, say, every
element using that class will change, like color or size?

3. Is there a better way of doing a basic graphics editor than to just
monitor onMouseDown / onMouseUp / onMouseOver ? It seems like I might
have a problem turning the "pen off" if the mouse leaves the table
entirely...can I capture a onMOuseOut for the whole table, or a <div>
surrounding it? When I tried that, it seemed like it was also setting
up a onMouseOut for the children <td> elements...

THanks

Jul 23 '05 #1

Subscribe Reply

2384

Baconbutty

>>1. Is there anyway to associate event handlers like onMouseDown with

every td of class "edt", or will I need to put the onMouseDown in the tag of each td ? (Or do I need to get very complex with javascript
prototypes etc, so it would be easier just to do the individual
onMouseDown s ?)

Some events "bubble". I.e. if you click on the TD, the event will fire
for every parent element up to the "document".

So you could set an event on the document thus:-

document.onmous edown=function( eEvent)
{
var eEvent=eEvent|| window.event;
var eElement=eEvent .target||eEvent .srcElement;

if (eElement.tagNa me=="TD"){//do something;}

};
2. Via javascript, can I modify the edt class so that, say, every
element using that class will change, like color or size?
Yes, you will need to learn about modifying rules within styleSheet
objects.

See: http://www.quirksmode.org/dom/changess.html

3. Is there a better way of doing a basic graphics editor than to just monitor onMouseDown / onMouseUp / onMouseOver ?
Within the confines of Javascript and HTML, I don't know.
It seems like I might
have a problem turning the "pen off" if the mouse leaves the table
entirely...c an I capture a onMOuseOut for the whole table, or a <div>
surrounding it? When I tried that, it seemed like it was also setting
up a onMouseOut for the children <td> elements...

This is because events "bubble". An onmouseout on a TD element, will
also bubble up and fire the same event on the TABLE element.

It is a problem, and I am sure others will have better solutions.

You could try detecting whether the "srcElement " or "target" for the
onmouseout event is the the TABLE element. But if you move the mouse
quickly, or the table has no border, this may fail.

Or, for all "onmouseout s" and "onmouseove r" events in the document as a
whole, you could get the srcElement or target, and if it is not a TD
within the table, fire your pen up event.

IE has also "onmouseent er" and "onmouselea ve" which you might
investigate.

Julian

Jul 23 '05 #2

Kirk Is

Baconbutty wrote:

2. Via javascript, can I modify the edt class so that, say, every
element using that class will change, like color or size?

Yes, you will need to learn about modifying rules within styleSheet
objects.

See: http://www.quirksmode.org/dom/changess.html

Ugh -- might be better to iterate over the relevant elements.

It seems like I might
have a problem turning the "pen off" if the mouse leaves the table
entirely...c an I capture a onMOuseOut for the whole table, or a <div>surrounding it? When I tried that, it seemed like it was also settingup a onMouseOut for the children <td> elements...

This is because events "bubble". An onmouseout on a TD element, will
also bubble up and fire the same event on the TABLE element.

A reasonably clean solution I've found is to just set the handler for
the document:
document.onmous eup=function(eE vent) {
mouseIsDown = false;
}
I don't care *where* the mouse is released, so this works well.

Thanks! I'm actually posting a related post w/ example code elsewhere
here.

Jul 23 '05 #3

Similar topics

12585

dynamically assign event to element

by: Eric | last post by:

How can I dynamically assign an event to an element? I have tried : (myelement is a text input) document.getElementById('myelement').onKeyUp = "myfnc(param1,param2,param3)"; document.getElementById('myelement') = new Function("myfnc(param1,param2,param3)");

Javascript

5052

Need help with screen update during event processing

by: Bob | last post by:

Below is sample code that illustrates what I'm trying to do. For sake of brevity I didn't include the properties of buildBtn that determine what data to request. The problem is I never see "Processing request" and depending on server utilization the response can take several seconds to load leading the users to wonder if the system is working. Unfortunately getting rid of the users is not an option :) so any help I can get on making...

Javascript

6088

Simple Event Framework - Suggestions?

by: Mark | last post by:

Hi, I'm looking for some ideas on how to build a very simple Event processing framework in my C++ app. Here is a quick background ... I'm building a multithreaded app in C++ (on Linux) that uses message queues to pass pointers to Events between threads. In my app there are simple events that can be defined using an enum (for example an event called NETWORK_TIMEOUT) and more complex events that contain data (for example an event called...

C / C++

2811

handling events between webpages..

by: scsharma | last post by:

Hi, I am working on creating a webapplication and my design calls for creating main webform which will have menu bar on left hand side and a IFrame which will contain all the forms that are shown when menu items are clicked.Besides these i would like to put a custom status bar. Any error message encountered in any of the webpage will be displayed in the banner. The problem iam encountering is how to access the customer status bar in child...

ASP.NET

2337

event handling in a user control

by: Sridhar | last post by:

Hi, I have created a web page which includes a place holder. I also have a dropdown list in that webpage. when I select one of the choices in that dropdown list, It will load a user control into the place holder. This is done dynamically based on the choice they selected. This user control has a datagrid in it that supports paging. When I click on the next or prev buttons of the datagrid in a user control it should display the next page...

ASP.NET

26518

How to create Event Handler for Dynamically added control

by: Amit D.Shinde | last post by:

I am adding a new picturebox control at runtime on the form How can i create click event handler for this control Amit Shinde

Visual Basic .NET

2533

Assigning dynamically declared event handlers to an object

by: Ron Goral | last post by:

Hello I am new to creating objects in javascript, so please no flames about my coding style. =) I am trying to create an object that will represent a "div" element as a menu. I have written several methods that are working fine. The problem is if I want to dynamically assign an event handler to the object, the event handler is not called. What am I doing wrong? Below is a sample HTML doc with everything in place. <!DOCTYPE HTML PUBLIC...

Javascript

1492

access 'event' in a handler from in-line registration

by: VAXman- | last post by:

I have code which is created from a content mamagement system. It places some handlers on tags with in-line registration: <tag... onmousedown="mousedownHandler(this);" ...> I want to modified the handler and access the event. Here's an example of such (very contrived example): fucntion mousedownHandler(obj) {

Javascript

9691

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10505

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10276

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10253

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9090

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7580

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6813

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

3764

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2945

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General