changing the background when the mouse button is held down

yawnmoth

I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. Any ideas? Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!

Aug 22 '08 #1

Subscribe Reply

2480

SAM

yawnmoth a écrit :

I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.

function bck(color) {
document.body.s tyle.background Color = color;
}

<body onmousedown="bc k('black');" onmouseup="bck( '');">

Here's my code:

http://www.frostjedi.com/terra/scrip...mousedown.html

<html>
<body>
<script type="text/javascript">
var body = document.getEle mentsByTagName( 'body')[0].style;
document.onmous eup = function() { body.background = ''; }
document.onmous edown = function() { body.background = '#000'; }
</script>
<p>some text
</body>
</html>

--
sm

Aug 22 '08 #2

yawnmoth

On Aug 22, 2:55*pm, yawnmoth <terra1...@yaho o.comwrote:

I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. *When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. *Any ideas? *Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!

Never mind... I figured it out...

Aug 22 '08 #3

Doug Gunnoe

On Aug 22, 2:55*pm, yawnmoth <terra1...@yaho o.comwrote:

I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. *When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. *Any ideas? *Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Thanks!

onMouseDown(), onMouseUp()

http://www.w3schools.com/jsref/jsref_onmousedown.asp

But there are some issues in regard to what you're trying to do,
depending on where you use onMouseDown/onMouseUp and exactly when you
want this event to be triggered.

see this: http://www.quirksmode.org/js/events_order.html

As to changing the background color, there is different ways to grab a
reference to the body element, but here we go:

<script>
function toggleBG(bgcolr ){
document.getEle mentsByTagName( 'body')[0].style.backgrou ndColor =
bgcolr;
}
</script>

<body onmousedown="to ggleBG('black)" onmouseup="togg leBG('white')">

good luck

Aug 22 '08 #4

Thomas 'PointedEars' Lahn

yawnmoth wrote:

I'm trying to write a script whereby the body background is changed to
back (from white) when the mouse button is held down and kept held
down. When you lift it up, I'd like it to change back to white.
Unfortunately, I'm not sure how to do that. Any ideas? Here's my
code:

http://www.frostjedi.com/terra/scrip...mousedown.html

Now, that is so little code that you could have posted it, too:

| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

You do not want to use XHTML. Use HTML 4.01 instead.

| <head>
| <title>onmoused own / onmouseup</title>
| </head>
|
| <body id="body">

The `body' element does not need an ID to be referred to.

| <script type="text/javascript">
| body = document.getEle mentById('body' );

`body' was not declared, which is error-prone. And you don't need the
additional identifier anyway:

document.body

is mostly standards-compliant:

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62018039>

| document.onmous eup = body.style.back ground = '#fff';
| document.onmous edown = body.style.back ground = '#000';

It if works, this is assigning "#fff" to `document.onmou seup' and "#000" to
`document.onmou sedown' because the right-hand side of the whole assignment
evaluates to the result of the right-hand side assignment.

Because there is no delay in the evaluation of the right-hand side
assignment, the background color of the `body' element would turn white and
immediately black afterwards.

You should not use the `background' CSS property when all you want to do is
to change the background color.

The `onmouseup' and `onmousedown' properties are proprietary and should not
be used but as a fallback for the standards-compliant approach.

It is not necessary here to use scripting to define the event listeners; the
HTML BODY element (and the XHTML `body' element) has intrinsic event handler
attributes for that.

<body
onmouseup="docu ment.body.style .backgroundColo r = '#fff';"
onmousedown="do cument.body.sty le.background = '#000';">

(Usually, by convention you could refer to the handling element with `this',
but the `body' element has a peculiarity here.)

RTFM.

<http://jibbering.com/faq/>
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Aug 23 '08 #5

Similar topics

342

How to handle hover + mouse down on a control ?

by: Tom | last post by:

Is there any C++ .NET best practice for handling the case where a mouse is held on a control and the right-button is held down - signifying a rapidly repeating action equivalent to clicking the left button a bunch of times? For example, I have a button that one mouse click increments the value. I would like to add the feature where...

.NET Framework

12688

Changing color of hyperlink when mouse over it

by: Martha | last post by:

When I move my mouse over a hyperlink component, the hyperlink does not change color. How do I change the color of a hyperlink when the mouse goes over the hyperlink? or Change the color of a button component when the mouse goes over the button? I am using Microsfot Visual c#.net Version 7.1.3008

C# / C Sharp

1327

Stopping an onMouseDown process when the mouse is up

by: stef | last post by:

Hello: I would like a process to continue as long as the mouse is held down on a button and to stop as soon as it is released. Something ideally like this: "while (ButtonIsDown) {i+ = 1}" I tried the following in the button tag: onMouseDown = "isDown = true; while(isDown) {i+=1}"

Javascript

3758

Trouble with mouse click

by: Morten Snedker | last post by:

If I have a number of random applications open, move the mouse cursor to a given position and do a click, the application gets the focus. That is what this simple code should illustrate: Dim pt As Point Dim wnd As IntPtr Const WM_LBUTTONUP = &H202 '//LButton up Const WM_LBUTTONDOWN = &H201 '//LButton down

Visual Basic .NET

1961

Tkinter: Strange behavior using place() and changing cursors

by: Mudcat | last post by:

I was trying to design a widget that I could drag and drop anywhere in a frame and then resize by pulling at the edges with the mouse. I have fiddled with several different approaches and came across this behavior when using the combination of place() and configure(cursor = ...) This problem doesn't occur if you remove either one of these...

Python

3543

Is there a way to detect a held-down button while the mouse is moving?

by: Eric Layman | last post by:

Is there a way to detect a held-down button while the mouse is moving? Thanks. Posted Via Usenet.com Premium Usenet Newsgroup Services

Javascript

1852

Mouse behavior of ToolStripMenuItems

by: =?Utf-8?B?bGpsZXZlbmQy?= | last post by:

I've noticed that if you click on a Windows.Forms.ToolStripButton then a MouseLeave event will not occur until the button is released. ToolStripMenuItems on the other hand will raise a MouseLeave event as soon as the mouse moves outside of the item, even if the mouse button is held down. You can observe this behavior using the following...

Visual Basic .NET

1939

Show Splitter-like box when resize a form

by: =?Utf-8?B?bGpsZXZlbmQy?= | last post by:

I want to implement the following: If the user clicks on the border of a form, then I want to show a box around the form that represents the form's bounds. As the user moves the mouse only the box's bounds would change. When the user releases the mouse the form's bounds would be set to the bounds of the box. Note that this is very similar...

Visual Basic .NET

2313

Changing the background color of menu items based on mouse proximity.

by: metaphysics | last post by:

I'm not sure if this is possible, but I thought I saw it somewhere and I'd like to know how to do it. This is rather difficult to explain, so bare with me. Lets say you have 3 background colors, going from lightest to darkest (so color 1 would be the lightest and color 3 would be the darkest). I'll try to illustrate what I mean. Let's...

Javascript

7695

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...

General

7922

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. ...

C / C++

7668

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...

Windows Server

6281

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...

Career Advice

5509

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...

Microsoft Access / VBA

5218

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...

C# / C Sharp

2111

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1209

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

936

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...

General