Button in texteditor

IkBenHet

Hello,

I am creating a toolbar for an richtext editor. I already managed to
make the images act as buttons (hovering,...) But now I want to be able
to keep a button selected (down) when clicking on it.
An example: when a user clicks the "Bold" button, this button must
appear to be selected until the user again clicks on it. Like you have
in all regular texteditors like M$ Word.

The code:

<HTML>
<HEAD>
<style type="text/css">
.IsButton
{width:22;heigh t:22;margin:0;p adding:0;border-width:1px;borde r-color:#D0E4FC;b order-style:solid;}
</style>
<script language="JavaS cript">
function mouse_out() {
var src=event.srcEl ement;
if(src.classNam e=="IsButton") {
window.status=" ";
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "#D0E4FC solid 1px";
src.style.borde rRight = "#D0E4FC solid 1px";
src.style.borde rLeft = "#D0E4FC solid 1px";
src.style.borde rBottom = "#D0E4FC solid 1px";
}
}

function mouse_over() {
var src=event.srcEl ement;
if(src.classNam e=="IsButton") {
window.status=s rc.alt;
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
}
}

function mouse_down() {
var src=event.srcEl ement;
if(src.classNam e=="IsButton") {
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "buttonshad ow solid 1px";
src.style.borde rRight = "buttonhighligh t solid 1px";
src.style.borde rLeft = "buttonshad ow solid 1px";
src.style.borde rBottom = "buttonhighligh t solid 1px";
}
}

function mouse_up() {
var src=event.srcEl ement;
if(src.classNam e=="IsButton") {
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="22" cellpadding="0" cellspacing="0" border="0">
<tr valign="middle" width="100%" height="22">
<td height="22" bgcolor="#D0E4F C"
ondragstart="ev ent.returnValue =false;"
onselectstart=" event.returnVal ue=false;">
<span name="toolbar" onmouseover="mo use_over();"
onmousedown="mo use_down();" onmouseup="mous e_up();"
onmouseout="mou se_out();" ondragstart="ev ent.returnValue =false;"
onselectstart=" event.returnVal ue=false;">
<img alt="Bold" class="IsButton " src="images/bold.gif">
<img alt="Italic" class="IsButton " src="images/italic.gif">
</span>
</td>
</tr>
</TABLE>
</BODY>
</HTML>

Jul 23 '05 #1

Subscribe Reply

1460

Stephen Chalmers

IkBenHet <ik********@hot mail.com> wrote in message news:11******** **************@ g14g2000cwa.goo glegroups.com.. .

Hello,

I am creating a toolbar for an richtext editor. I already managed to
make the images act as buttons (hovering,...) But now I want to be able
to keep a button selected (down) when clicking on it.
An example: when a user clicks the "Bold" button, this button must
appear to be selected until the user again clicks on it. Like you have
in all regular texteditors like M$ Word.

One way is to maintain a table of source elements representing buttons that have been locked, and have a function to
scan it.

var buttonLocks=[];

function isLocked( elem, table )
{
for(var i=0; i<table.length && elem!=table[i]; i++)
;

return i==table.length ? -1 : i;
}

Use the mouse_down function to set/remove locked elements thus:

function mouse_down()
{
var src=event.srcEl ement, index;

if( (index=isLocked (src, buttonLocks)) == -1 )
buttonLocks[buttonLocks.len gth]=src; // add element to table
else
buttonLocks.spl ice(index, 1); // remove from table

if(src.classNam e=="IsButton")
{
......

In the other css functions:

if( isLocked(src, buttonLocks) == -1 ) // only change style if not locked
if(src.classNam e=="IsButton")
{
.....

BTW Mozilla doesn't seem to respond to the mouse events of your spans inside table elements so you'll need to find a way
around that, unless it's an intranet job.
Another snag is that I.E. 5.0 forgot about the .splice method, so again if it's an issue you'll have to implement your
own.

if(typeof Array().splice= ='undefined')
Array.prototype .splice=functio n(start, count)
{
for(var i=start; i+count<this.le ngth; i++)
this[i] = this[i+count];
this.length-=count;
}

--
Stephen Chalmers
547265617375726 520627572696564 206174204F2E532 E207265663A2054 51323437393134

Jul 23 '05 #2

IkBenHet

Hello Stephen,

I probably was not clear enough. But I don't want to remove the button.
I just want to have an indication (like a colored border around the
button) when it is selected/clicked. e.g. when a user clicks on the
"bold" button, there is a border around the "bold" icon and the text in
the form will be bold. As soon the user clicks the "bold" button again,
the border is removed, and stops typing bold text.

Thanks

Jul 23 '05 #3

Randy Webb

IkBenHet wrote:

Hello Stephen,

I probably was not clear enough. But I don't want to remove the button.
I just want to have an indication (like a colored border around the
button) when it is selected/clicked. e.g. when a user clicks on the
"bold" button, there is a border around the "bold" icon and the text in
the form will be bold. As soon the user clicks the "bold" button again,
the border is removed, and stops typing bold text.

Use the onclick to fire a function to check the src of the image, and if
its not outlined, swap it with an outlined image. If its outlined, swap
it with the original.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

Jul 23 '05 #4

Stephen Chalmers

IkBenHet <ik********@hot mail.com> wrote in message news:11******** *************@g 14g2000cwa.goog legroups.com...

Hello Stephen,

I probably was not clear enough. But I don't want to remove the button.
I just want to have an indication (like a colored border around the
button) when it is selected/clicked. e.g. when a user clicks on the
"bold" button, there is a border around the "bold" icon and the text in
the form will be bold. As soon the user clicks the "bold" button again,
the border is removed, and stops typing bold text.

Thanks

Then there was no misunderstandin g and the modification I provided will do exactly what you describe, and certainly does
nothing to remove the button. If you click on the button, the style applied by the mouse_down function is maintained
until it is clicked again, regardless of other events. All you need add is the code to style the textarea.

I had hoped to avoid posting the entire code...

<HTML>
<HEAD>
<style type="text/css">
.IsButton
{width:22;heigh t:22;margin:0;p adding:0;border-width:1px;borde r-color:#D0E4FC;b order-style:solid;}
</style>
<script type="text/JavaScript">

if(typeof Array().splice= ='undefined')
{
Array.prototype .splice=functio n(start, count)
{
for(var i=start; i+count<this.le ngth; i++)
this[i] = this[i+count];
this.length-=count;
}
}

var buttonLocks=[];
function isLocked( elem, table )
{
for(var i=0; i<table.length && elem!=table[i]; i++)
;

return i==table.length ? -1 : i;
}

function mouse_out()
{
var src=event.srcEl ement;

if( isLocked(src, buttonLocks)==-1 )
if(src.classNam e=="IsButton")
{
window.status=" ";
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "#D0E4FC solid 1px";
src.style.borde rRight = "#D0E4FC solid 1px";
src.style.borde rLeft = "#D0E4FC solid 1px";
src.style.borde rBottom = "#D0E4FC solid 1px";
}
}

function mouse_over()
{
var src=event.srcEl ement;
if( isLocked(src, buttonLocks)==-1 )
if(src.classNam e=="IsButton")
{
window.status=s rc.alt;
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
}
}

function mouse_down() {
var src=event.srcEl ement, index;

if( (index=isLocked (src, buttonLocks))==-1 )
buttonLocks[buttonLocks.len gth]=src;
else
buttonLocks.spl ice(index, 1);

if(src.classNam e=="IsButton")
{
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "buttonshad ow solid 1px";
src.style.borde rRight = "buttonhighligh t solid 1px";
src.style.borde rLeft = "buttonshad ow solid 1px";
src.style.borde rBottom = "buttonhighligh t solid 1px";
}
}

function mouse_up()
{
var src=event.srcEl ement;

if( isLocked(src, buttonLocks)==-1 )
if(src.classNam e=="IsButton")
{
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
}

}
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="22" cellpadding="0" cellspacing="0" border="0">
<tr valign="middle" width="100%" height="22">
<td height="22" bgcolor="#D0E4F C"
ondragstart="ev ent.returnValue =false;"
onselectstart=" event.returnVal ue=false;">
<span name="toolbar" onmouseover="mo use_over();"
onmousedown="mo use_down()" onmouseup="mous e_up();"
onmouseout="mou se_out();" ondragstart="ev ent.returnValue =false;"
onselectstart=" event.returnVal ue=false;">
<img alt="Bold" class="IsButton " src="images/bold.gif">
<img alt="Italic" class="IsButton " src="images/italic.gif">
</span>
</td>
</tr>
</TABLE>
</BODY>
</HTML>
--
Stephen Chalmers

547265617375726 520627572696564 206174204F2E532 E207265663A2054 51323437393134

Jul 23 '05 #5

RobG

Stephen Chalmers wrote:

IkBenHet <ik********@hot mail.com> wrote in message news:11******** *************@g 14g2000cwa.goog legroups.com...
Hello Stephen,

I probably was not clear enough. But I don't want to remove the button.
I just want to have an indication (like a colored border around the
button) when it is selected/clicked. e.g. when a user clicks on the
"bold" button, there is a border around the "bold" icon and the text in
the form will be bold. As soon the user clicks the "bold" button again,
the border is removed, and stops typing bold text.

Thanks

Then there was no misunderstandin g and the modification I provided will do exactly what you describe, and certainly does
nothing to remove the button. If you click on the button, the style applied by the mouse_down function is maintained
until it is clicked again, regardless of other events. All you need add is the code to style the textarea.

[...]

You could toggle the image between bright and greyed and at the same
time toggle the border style between outset and inset respectively.
--
Rob

Jul 23 '05 #6

IkBenHet

Hello again,

I tried what you suggested and for some reason it is not working.

<html>
<head>
<title>Rich Text Editor</title>
<style type="text/css">
.IsButton
{width:22;heigh t:22;margin:0;p adding:0;border-width:1px;borde r-color:#D0E4FC;b order-style:solid;}
</style>
<script type="text/JavaScript">
if(typeof Array().splice= ='undefined')
{
Array.prototype .splice=functio n(start, count)
{
for(var i=start; i+count<this.le ngth; i++)
this[i] = this[i+count];
this.length-=count;}
}
var buttonLocks=[];
function isLocked( elem, table )
{
for(var i=0; i<table.length && elem!=table[i]; i++);
return i==table.length ? -1 : i;
}
function mouse_out()
{
var src=event.srcEl ement;
if( isLocked(src, buttonLocks)==-1 )

if(src.classNam e=="IsButton")
{
window.status=" ";
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "#D0E4FC solid 1px";
src.style.borde rRight = "#D0E4FC solid 1px";
src.style.borde rLeft = "#D0E4FC solid 1px";
src.style.borde rBottom = "#D0E4FC solid 1px";
}
}
function mouse_over()
{
var src=event.srcEl ement;
if (isLocked(src, buttonLocks)==-1 )

if(src.classNam e=="IsButton")
{
window.status=s rc.alt;
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
}
}

function mouse_down() {
var src=event.srcEl ement, index;
if( (index=isLocked (src, buttonLocks))==-1 )
buttonLocks[buttonLocks.len gth*]=src;
else
buttonLocks.spl ice(index, 1);

if(src.classNam e=="IsButton")
{
src.style.backg roundColor = "#D0E4FC";
src.style.borde rTop = "buttonshad ow solid 1px";
src.style.borde rRight = "buttonhighligh t solid 1px";
src.style.borde rLeft = "buttonshad ow solid 1px";
src.style.borde rBottom = "buttonhighligh t solid 1px";
}
}
function mouse_up()
{
var src=event.srcEl ement;
if (isLocked(src, buttonLocks)==-1)
if(src.classNam e=="IsButton")
{
src.style.backg roundColor = "#D0E4FC";
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
}
}
</SCRIPT>
</head>
<body bgcolor="#D0E4F C">
<script language= "JavaScript " type= "text/javascript" src= "editor.js"

</script>

Jul 23 '05 #7

Stephen Chalmers

IkBenHet <ik********@hot mail.com> wrote in message news:11******** **************@ z14g2000cwz.goo glegroups.com.. .

Hello again, I tried what you suggested and for some reason it is not working.

When I pasted the code you posted I got the syntax error shown below; a '-' character that did not actually show in the
message. I cannot explain why but it's definitely there when the code is pasted into an editor.
Either way, the I.E. error console pointed straight to it.
Once I removed your external function calls, the code worked.

function mouse_down() {
var src=event.srcEl ement, index;
if( (index=isLocked (src, buttonLocks))==-1 )
buttonLocks[buttonLocks.len gth*-]=src;
---------------------------------^

--
Stephen Chalmers

Jul 23 '05 #8

IkBenHet

Stephen,

It is working now! Thank you very very much!

Jul 23 '05 #9

RobG

IkBenHet wrote:

Hello again,

I tried what you suggested and for some reason it is not working.

Your code does not work for me at all - even with the '-' issue fixed.
[...]
src.style.borde rBottom = "buttonshad ow solid 1px";
src.style.borde rLeft = "buttonhighligh t solid 1px";
src.style.borde rRight = "buttonshad ow solid 1px";
src.style.borde rTop = "buttonhighligh t solid 1px";
What I was suggesting is that you replace the above with something like:

src.style.borde rStyle = 'outset';

[...] src.style.borde rTop = "buttonshad ow solid 1px";
src.style.borde rRight = "buttonhighligh t solid 1px";
src.style.borde rLeft = "buttonshad ow solid 1px";
src.style.borde rBottom = "buttonhighligh t solid 1px";

and the above with:

src.style.borde rStyle = 'inset';

Both could be achieved by toggling to an 'in/out' function that changes
the background colour and border style as below. Then all your style
stuff is in one place and not buried in your script.
<html><head><ti tle>Button play</title>

<style type="text/css">
.butOutset, .butInset {
border: 2px outset #D0E4FC;
color: black;
background-color: #EBF3FE;
width: 4em; height: 4em;
text-align: center; line-height: 4em;
}
.butInset {
border-style: inset;
background-color: #D0E4FC;
}
</style>

<script type="text/javascript">
function inOut( el ) {
if ( el.className && /\bbutOutset\b/.test(el.classN ame) ) {
el.className = 'butInset';
} else {
el.className = 'butOutset';
}
}
</script>

</head><body>

<div class="butOutse t" onclick="inOut( this);">click me</div>

</body></html>
<div id="demoDiv" onclick="inOut( this);">click me</div>
[...]
--
Rob

Jul 23 '05 #10

Similar topics

7548

BUTTON tag has extra padding, not sure why.

by: Skip Hollowell | last post by:

I am working on a menu bar for a site, and am using buttons in the bar (because the customer wants to use accessKeys for each selection, apparently it is too much work to click on them with a mouse, but I digress) It seems that the longer the text is in a button, the more padding there is around that text in the button, thus making the button itself much to wide, and wasting too much space on the page. I have tried width:auto in the...

HTML / CSS

7556

Back button functionality

by: KK | last post by:

Hi, I am using history.go(-1) for implementing the back button functionality. Its working fine but with this exception. 1. The page which is having back button has some hyperlinks on it. 2. When anybody click on those links, it will open a new windown.

HTML / CSS

6077

Datagrid Button

by: Zürcher See | last post by:

Someone has implemented a Datagrid Button for the Windows.Form?

C# / C Sharp

3058

Need a way to tell if a System.Windows.Forms.Button is "depressed" (pushed down)

by: jrhoads23 | last post by:

Hello, I am trying to find a way to tell if an .NET windows forms Button (System.Windows.Forms.Button) is "depressed" (pushed down). For my application, I can not use a check box control set to button style, I must use a System.Windows.Forms.Button. I can not find a way to tell when it is momentaraly pressed. I tried calling the API SendMessage with the button handle and BM_GETSTATE to get the state of the button. This will only return...

C# / C Sharp

2956

REPOST: Popup form on button

by: Colin McGuire | last post by:

Hi - this was posted last weekend and unfortunately not resolved. The solutions that were posted almost worked but after another 5 days of working on the code everynight, I am not further ahead. If you do have any ideas I would really like to hear them. Thanks Colin - 0 - 0 - 0 - I want a glorified popup/context menu on a button that shows only when

Visual Basic .NET

4609

iCSharpcode Texteditor control

by: Ray Cassick $Home$ | last post by:

Has anyone here used this control in their own product at all? I am very interested in some sample code that shows how to implement a folding strategy so I can do code regions in my custom language. I know how to use the folding manager to get code segments to fold up into collapsible regions but I cannot figure out how to know when a user enters in a line that I want to setup as a foldable bit of code. I have a construct in my script...

.NET Framework

6860

button click event

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

Hi, All, I create button in the code ( Dim Button as new Button), not using button web component (means not drap button and drop it ont he webform), after that I try to use button_click event, it is not work, anyone can tell how to use button click event ? Thanks in advance, Martin

Visual Basic .NET

5247

how to insert close button in each tabs.

by: ebyogendra | last post by:

Hello friends. Am new to this forum. Am having some doubts on TabbedPane. Thing is i need to insert "Close button" on each tab as and when new tabs are included in TabbedPane. Please any help in this. My problem is like this.. In a TextEditor, we should open two or more documents with in the editor by tabs when we click "Open" button on the toolbar. As and when i click particular tabs respective tabs components should be displayed in...

Java

19102

Display .htm files content in .aspx page control

by: shashi shekhar singh | last post by:

Dear sir, I have a word document file contains text and images, now i have saved it as a web page and wants to display it on browser , using , string str=directory.getfiles(""); response.contentType="text/html"; response .writefile(""); it displayed in different format and images not shown blank spaces shown as ?????????? and image as X.

ASP.NET

8294

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8816

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

8494

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

8596

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7309

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

4150

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4297

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2719

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

1597

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