Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Styles - Changing Dynamically

Status
Not open for further replies.
Jimuniguy

Jimuniguy

Technical User
Mar 6, 2002
363
GB
Hi,

I am currentley involved in a project where the user is given some columns allowing them to change the colour of the background and of the text.

They click on the colour and the background or font changes instantaneously for them.

Question is , I now want to be able to add different font sizing in and different font styles in, but i need to be able to do this without modifying any of the other tags, e.g I want the user to be able to select, independantly of each other, the size, colour, font type and background colour of the text they are seeing.

Anyone know how to do it correctly?

Cheers

James
 
Sort by date Sort by votes
how about:

<html>
<head>
<script language=javascript>
function SetColor()
{
var colorval=prompt(&quot;Choose colour:&quot;)
DataTable.style.color=colorval
}
function SetFont()
{
var fontval=prompt(&quot;Choose font:&quot;)
DataTable.style.fontFamily=fontval
}
function SetSize()
{
var sizeval=prompt(&quot;Choose size:&quot;)
DataTable.style.fontSize=sizeval
}
</script>
</head>
<body>
<table id=DataTable>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
</table>
<input type=button onclick=&quot;SetColor()&quot; value=&quot;Colour&quot;>
<input type=button onclick=&quot;SetFont()&quot; value=&quot;Font&quot;>
<input type=button onclick=&quot;SetSize()&quot; value=&quot;Size&quot;>
</body>
</html>


I have let the user supply the text values for colour size and font however it may be better for you to restrict input to only valid values, may be ask user to select values from a drop down list
 
Upvote 0 Downvote
Hi,

Unfortuantley, this is for disabled users, and thoose people who can not see too clearly, therefore they have to have large bits to click on.

Also you style means that I can then not change the background etc with CSS. It needs really to be done in CSS.

Any solutions?

Cheers

james
 
Upvote 0 Downvote
im not sure how you intend to implement classes when you dont know what combination of styles the user is going to pick. Are you saying you want classes set up for each variation the user may choose (hope not) or you just want them to be able to alter the style of the table?

along with the code i wrote you can still apply classes to the table and change the background:

<html>
<head>
<style type=&quot;text/css&quot;>
.TableData {
font-family: Arial;
font-size: 15pt;
color: white;
background-color: black;
width:600px;
border: 2px solid red;
}
TD
{
border: 2px solid white;
}
.ButtonStyle {
font-size: 20px;
font-weight: bold;
width: 100PX;
}
</style>

<script language=javascript>
function SetColor() {
var colorval=prompt(&quot;Choose colour:&quot;)
DataTable.style.color=colorval
}

function SetFont() {
var fontval=prompt(&quot;Choose font:&quot;)
DataTable.style.fontFamily=fontval
}

function SetSize() {
var sizeval=prompt(&quot;Choose size:&quot;)
DataTable.style.fontSize=sizeval
}

function SetBG() {
var bgval=prompt(&quot;Choose BG:&quot;)
DataTable.style.backgroundColor=bgval
}
</script>
</head>
<body>
<center>
<input type=button onclick=&quot;SetBG()&quot; class=ButtonStyle value=&quot;BG&quot;>
<input type=button onclick=&quot;SetColor()&quot; class=ButtonStyle value=&quot;Colour&quot;>&nbsp;&nbsp;&nbsp;&nbsp;
<input type=button onclick=&quot;SetFont()&quot; class=ButtonStyle value=&quot;Font&quot;>
<input type=button onclick=&quot;SetSize()&quot; class=ButtonStyle value=&quot;Size&quot;><br>
<table id=DataTable class=TableData>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
</table>
</center>
</body>
</html>
 
Upvote 0 Downvote
James,

Have you done any research on this?

CSS is not implememted on most (Perhaps all) disabled browsers so your page would be totally useless to a disabled browser. The same also goes for javascript.

I am currently going through the exact same situation just now as I am working on a disabled version of my design site.

The way that I am doing it at present is to allow the user to choose the selection from a form and then pass the info to the page in the query string.

On the pages, I have SSI conditional includes that dynamically generate the page based on the users input from the form. Because this is server side, it does not rely on the users browser having any particular feature enabled.

The other problem is that I have been lead to beleive that cookies are also unavailable on a few disabled browsers so that means I have 2 choices:

1) Make the user complete the form again every time they change to a new page.

2) Dynamically pass the info to the other pages without the use of cookies.

The way that I have decided is best for me is to have all links on a page automatically update depending on the form input and therefor pass the query string from page to page and eliminate the need to manually complete the form over and over again.

All of the main code behind the pages are in external files that are dynamically included in the pages, this keeps the site as low maintenance as possible as each page only has a few lines of code and then the actual unique page content.

You can see a basic example of it at the following url.


This was where I started off and the background code has totally changed since then but this will give you the basic idea of what can be acheived by using the SSI includes. Most of the links dont work on that example but if you scroll down the page to the DOMIAN NAMES link you will see that the query string is passed through the pages.

Now, as harsh as this may seem, I am not going to just hand you the code to do this as I currently have a few clients wanting the same thing, if I just hand out the code then they will wonder why I am charging them for it. I will however give you pointers and help along the way if you want to do this yourself.

Hope this helps Wullie

sales@freshlookdesign.co.uk

 
Upvote 0 Downvote
Hi,

Wullie
Yes i have relised this, and after talking to alot of people, it has been decreed that the design should be designed with the disabled user having IE and using a screen reader and screen magnifier.

Infact, its been suggested by alot of people that CSS is the best way to do it.

To this end, I have had to design 2 versions, the 1st is just the normal version, the second version, needs all the extra ability, to tailer make the colour, font look etc, as well as having it speakable in a screen reader.

So far I have been able to use Microsoft Agent to speak the text, but i need to make it changeable.

Your form idea is good, but is the user is bliind or has a disability in seeing it, then its near impossible to fill the form in.

Check out to see if you page is viable for someone with disability.

If you would like to confer offline about this via email about the difficulties involved, then please do so.

Sjravee
Cheers, yes I need the abilty to apply the following choosen abilies:

Text Colour
Text Size
Background Size

So far, i am working on the ability to bring up a seperate layer which can change all this.

Cheers for your coding so far, as above, i can not use the prompt ability so seaching for another way. I can do text colour and background but not size yet.

James
 
Upvote 0 Downvote
Hi mate,

Your form idea is good, but is the user is blind or has a disability in seeing it, then its near impossible to fill the form in.

That is incorrect. As I already stated, this was the starting point for the page and the background code is totally different. The form uses special html tags to specify what text goes with each form field and it is comptible with disabled browsers. The new coded pages pages have already been through the Bobby checks and passed with flying colours!!

There are a lot of things that you need to do differently than you would with a normal html page, but most are simple tasks that take a few seconds. Others take longer but are mostly still easy to accomplish.

Also as previously mentioned, to be accessible with a disabled browser, your pages must never use javascript to convey important information. Using javascript to change the colour etc is totally pointless and your page will not pass a usabilty test and most, if not all disabled users will never be able to use that script.

If you want to talk through email, then my address is in my sig.

Hope this helps Wullie

sales@freshlookdesign.co.uk

 
Upvote 0 Downvote
Hi,

Granted about the form. Have contacted you about the javascript thing.

Cheers

James
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
732
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
587
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
623
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top