Solved

fancy checkboxes or other toggle-switches

Posted on 2003-10-22
6
342 Views
Last Modified: 2006-11-17
Hi,

is it possible to use javascript (or any other web-development language to make a web-page that contains a toggle switch that changes color upon being pressed.

for example,  press once on a square and the square goes from white to black.  press again and it goes from black to white.  etc. etc.

basically, it behaves like a checkbox, but maybe is easier to see visually.

Thanks for any help!
0
Comment
Question by:pdanese
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 7

Accepted Solution

by:
Xxavier earned 38 total points
ID: 9604599
Try this

<script>
col="cRed"
function swap(){
 if (col=="cRed")
     {col="cBlue"
     return "#0000FF"}
 else
    {
     col="cRed"
     return "#FF0000"}
}
</script>
<table bgColor="red" width="30" onclick='this.bgColor = swap()'>
<tr><td>&nbsp;&nbsp;</td></tr>
</table>

0
 
LVL 3

Expert Comment

by:alexgreen
ID: 9605071
pdanese

are you wanting it to be available for submitting a form (don't think it's possible) or just as an aesthetic thing (Which X's code wil provide without any problem)

0
 
LVL 18

Assisted Solution

by:Plucka
Plucka earned 37 total points
ID: 9605377
You can do it easily. I'm not going to write it for you, but i've seen it before.

1. Create your tick box as an image.
2. Have an onclick event that toggles the image between the two states. This will also need to set the value of a hidden form variable.
3. Do normal form processing as the hidden form variables will contian you results.

Hope this helps.

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Xxavier
ID: 9610421
Oh dear I was coding late last night and the code I gave you looks terrible, this is better


<table bgColor="#FF0000" width="30" onclick="(/ff0000/.test(bgColor))?bgColor='blue':bgColor='red'">
  <tr>
    <td>&nbsp;&nbsp;</td>
  </tr>
</table>


Alex surely you can add formName.submit() to the onclick

Xx
0
 
LVL 3

Expert Comment

by:alexgreen
ID: 9610639
yep, not thinking straight! soz
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9611527
looking at the code I submitted late last night neither was I. :-)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Visual Studio npm 1 29
Coding for the first time 9 67
Use "if not" in a condition 2 19
Html using "Or" in condition 3 26
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question