Welcome to WebmasterWorld Guest from 34.204.169.76

Forum Moderators: open

Message Too Old, No Replies

How to clear the border color (preserving the existing one)?

     
8:46 am on Jul 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2006
posts:104
votes: 0


Hello Forums!
I had following script for marking the fields with certain color border and clearing that color border , preserving the fields original border color.
<!-- Javascript --> <script language="javascript"> function FMark(){ document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000"; }

function FClear(){ document.forms['frm_mark'].test_field.style.border = "none"; } </script>
<!-- HTML --> <form name="frm_mark" action="#" method="get"> <input type="text" name="test_field" style="border: 1px solid #0066FF" /> <input type="button" value="Mark" onclick="FMark();"/> <input type="button" value="Clear" onclick="FClear();"/> </form>
Whats my problem?
- I am able to mark the field but also able to clear that marked one but couldnt preserve the existing border color

What I want?
- I want to clear the marked border color preserving the existing border color ie #0066FF
Any Suggestion and Help are warmly welcome
Thanks in advance to all of you

8:55 am on July 15, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Umm, maybe I'm misunderstanding something here ... but it appears that the answer to your question is quite simple. So, you want the color to be #0066FF? Well, don't set it to "none" then ... eh?

So, instead of:

function FMark(){
document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000";
}

function FClear(){
document.forms['frm_mark'].test_field.style.border = "none";
}

Do this:

function FMark(){
document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000";
}

function FClear(){
document.forms['frm_mark'].test_field.style.border = "1px solid #0066FF";
}

Or even better:

function FMark(){
document.forms['frm_mark'].test_field.style.borderColor = "#ff0000";
}

function FClear(){
document.forms['frm_mark'].test_field.style.borderColor = "#0066FF";
}

9:12 am on July 15, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2006
posts:104
votes: 0


Thanks for the reply
But that color is dynamic not fixed so that cannot be applied..
Any alernatives?
thanks again
10:03 am on July 15, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3131
votes: 3


Just a quick 2cents... If the colour is dynamic or varies for each element, then you're going to have to 'remember' what the original colour was before you change it - it's not going to remember it for you, since you are replacing it with a different value.

Either have a global object/array that holds the original colour of each element, or store the original colour on the element itself, as part of the ID or something? It may be possible to read the original colour from the element and build the 'original colour array' automatically, without having to directly code it.

2:03 pm on July 15, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


From his code example, it looks like PHPycho is hiding the border completely, not changing the colour. This gives the opportunity to change the border-width alone, this will leave the border-color intact.
4:09 am on July 16, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2006
posts:104
votes: 0


Thanks everbody ..
I got the solution:
Javascript:
function FClear(){
document.forms['frm_mark'].elements['test_field'].style.border = "";
}

Note: just keep the border style to blank (also 0)

I would love to know if there are other alternatives

6:53 am on July 16, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3131
votes: 3


Note: just keep the border style to blank (also 0)

Is that different to setting the border-style to 'none'...?

Presumably this clears the border completely, as Bernard suggests, whilst keeping the colour intact? And if so, doesn't your design/element jump a px when you then set the border again?

3:49 pm on July 16, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


I got the solution:
Javascript:
function FClear(){
document.forms['frm_mark'].elements['test_field'].style.border = "";
}

Err .. that does not work.

4:48 am on July 17, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 29, 2007
posts:228
votes: 0


try this approach.

define both borders under different classes in your stylesheet. Then, instead of changing the border color on the object, change the 'className' attribute

such as...

<style>
.classA {border:1px solid #ff0000;}
.classB {border:1px solid #0066FF;}
</style>

<script language="javascript">
function FMark(){
document.forms['frm_mark'].test_field.className = "classA";
}

function FClear(){
document.forms['frm_mark'].test_field.className = "classB";
}

<form name="frm_mark" action="#" method="get">
<input type="text" name="test_field" class="classB" />

this approach will give you the ability to edit your css file without changing all your html docs.

[edited by: Drag_Racer at 4:50 am (utc) on July 17, 2007]