CSS custom property

[FancyPrairie]

I’ve created a style like this:

<STYLE id=MyDefaults type=text/css>
.MyTextbox {Locked: TRUE}
</STYLE>


My tag looks like this:

<TEXTAREA class=MyTextbox id=MyControl…>


The following gives me an error. Says style.locked doesn’t exist

MyControl.style.Locked = "True"


However, this works

<TEXTAREA Id=MyControl style="Locked: TRUE">


Am I doing something wrong???? Can I not add a custom property to a css?

 

[j4606]

try disabled instead of locked.

I don't know the answer but my good friend Google does.

 

[cLFlaVA]

Am I doing something wrong????

i'd say so. how would you expect it to know what you're talking about? if that's the case, i could just do this:

<textarea style="getsMeABeer: true;">

*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[FancyPrairie]

The problem with disabled is that I can't tab into the field or select the field (i.e. to do searches or filter by selection). So, I decided to create a "new" property called Locked. In the onKeyDown event I check to see if the Locked property is set to "True" or "False". If false, the user can edit the field else they can't.

 

[cLFlaVA]

why would you want to enter the field if you wanted to lock people from using it? sounds like what you need is javascript to set/unset the "disabled" property of the text box.



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[j4606]

Also might wanna brush up on your css. The sytax is made up of three parts: a selector, a property and a value:
and from what I know there is no locked property, and I doubt you can make one.

I don't know the answer but my good friend Google does.

 

[FancyPrairie]

To make it simple, I have 3 columns showing 16 records at a time:

Phone# EmployeeName Dept

When the page is first displayed no one is allowed to edit the data. If they want to edit the record they must loggon by clicking a button. A pop-up page is then displayed that asks them to enter their Network username and password. The username and password is then validated via windows authentication (not LDAP). If the user is part of the Admin group (via ActiveDirectory), then they are allowed to edit all of the fields for all employees and allowed to click another button to remote into the user's machine (if necessary). If they are a manager they can only edit those employee records that belong to the manager's department. All other users can only edit the phone number of their employee record.

Consequently, since 16 records are shown at a time and 0 or more of the 16 records can be edited, I need a way to prevent the user from editing certain fields. However, suppose the user wants to show only those employees that belong to DeptA. By allowing them to enter the "locked" field, the user can select the field and then select another button that will filter the records based on the selected item. That is one reason why disabled won't work. There are other reasons I want the user to be able to enter a locked down field.

 

[FancyPrairie]

You are right. I don't know much about css. This is the 3rd html page I have created. You are also correct that locked is not a valid property. But, so what? IE won't complain. It's just a way for me to store something. And it works for "in-line" styles. But doesn't seem to work as a css. And that is my question. Can I not define it in a css? Or do I have to define style="Locked: True" for every field on my page?

 

[cLFlaVA]

1) [tt]locked: true[/tt] is invalid, regardless of whether or not it "works" in IE. maybe it "works" because IE barfs at the style and doesn't know what to do with it.

2) no, you cannot define it in CSS, because it is not valid. check out the validators for HTML and CSS.

it may sound like we're attacking you, but we're not. we're trying to make you understand what's going on with your code.



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[FancyPrairie]

That's what I wanted to know. Since I can't do it in a css I guess I'll have to do it in-line.

Thanks

 

[Foamcow]

the thing you are trying to change is an attribute and not a style.

CSS is concerned with the visual appearance of elements and not their behaviour (unless you include the psuedo selector :hover)

To disable the element you need to set the disabled attribute to "disabled". You can do this either in line as in:

<input type="text" disabled="disabled" id="myElement" />

You could apply styling to the element too, either by an inline style using the style attribute. Like so:

<input style="border:1px solid #ff9933;padding:3px" type="text" disabled="disabled" id="myElement" />

A cleaner way to do this would be use a class and apply the class attribute to the element. Then define that class in your CSS.

<input class="myclass" type="text" disabled="disabled" id="myElement" />
[code]

then define that class in your CSS

[code]
<style type="text/css">
.myclass { 
    border:1px solid #ff9933;
    padding:3px;
}
</style>

You can use that class on lots of different elements and they will take on the visual appearance defined by it.

Yet another way would be to target the element directly using it's ID as the "hook" for the CSS

<input type="text" disabled="disabled" id="myElement" />

and in the CSS

<style type="text/css">
#myElement {
    border:1px solid #ff9933;
    padding:3px;
}
</style>

Remember though, ID's must be unique.

You can even use combinations of classes and ID's and, if you like, inline styles.

But at the end of it all.... locking or disabling the element is done with an attribute and NOT with CSS.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[FancyPrairie]

I understand that css deals with styles (i.e. visual appearance) and that "disabled" is a behavior. I was looking for someplace to store a variable for each control on the page. So, (since as I stated earlier that disabled will not work for what I want) I just added my own in-line style and called it "Locked". Obviously, IE will not recognize it and just ignore it. But, my code can do what it wants with it. And in-line works. Defining "Locked" in a css does not work.

For example,

<Input id=MyControl style="Locked: True">

Now my code can do this:

MyControl.style.Locked = "False"

or this:

MyControl.style.Locked = "True"

However, if I do this:

<STYLE id=MyDefaults type=text/css>
.MyTextbox {Locked: TRUE}
</STYLE>

<Input class=MyTextbox id=MyControl…>

Then I get an error when I do this:

MyControl.style.Locked = "False"

So, it works in-line, but not in a css. Like I said, I just needed someplace to store a variable. And, since the elements don't have a "Tag" property (as in Access), I improvised. Unless I'm missing something, I don't see any ramifications to what I'm doing. Maybe not conventional...

Rather than having to type "Locked: True" for every control I was hoping to add it in the css. But it appears I can't add it in a css but must manually type it in for every control.

 

[cLFlaVA]

IT DOESN'T WORK!!! Run your code through a validator, I guaruntee it. You need JavaScript if you want to properly do what you think you are properly doing.



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

What you are doing is creating a css class and then defining a non-existent CSS directive.

There is no CSS instruction for "locked" or "disabled".
Equally you cannot set a class to "TRUE".

It simply won't work as it's incorrect use of CSS.

What you need to do is use Javascript to set a value then apply that value to the attribute of your element.

In this case, try the readonly attribute (it might do what you want).

var element = document.getElementById('myElement');
element.setAttribute('readonly','readonly);

The core problem is that you are confusing CSS with Javascript. Your initial style declaration is non-sensical and will not work.
You cannot use CSS classes to store behavioural information. Classes do not have boolean values they are simply identifiers or shortcuts if you like to a set of style instructions.
You are wanting to effect behaviour so use Javascript. Define your variable in Javascript and apply it to the element with Javascript.

When you say

Now my code can do this:

MyControl.style.Locked = "False"

or this:

MyControl.style.Locked = "True"

Where in your code are you doing that?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[BillyRayPreachersSon]

Come back, ... all is forgiven ;-)



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Rieekan]

Just to be devil's advocate, but why have form fields on sections a user cannot edit anyway? If it's just to allow them to "filter" or sort on a given field's value, just create that section for the user at the top of the form.

Also, if a user logs in, it doesn't make much sense to have then scroll through a ton of data if they can only edit a small fraction of it. The user should just see what they can edit at that point.

Just my 2 cents,

- George

 

[traingamer]

FancyPrairie,
Problem: You want to present the users with different pages depending on their access levels. This cannot and should not be done with css.
You need to use your server / scripting language (guessing you use ASP knowing your background) to direct the users to different pages. (Or to present different error messages).

Skillful use of JavaScript is another possibility.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill