?
Solved

Controlling elements of class by use of form in HTML

Posted on 2004-10-14
6
Medium Priority
?
212 Views
Last Modified: 2010-05-18
I need to be able to allow user to control the look of a page for reasons of accessibility.  I have a form and input buttons in html but whilst

onclick="document.body.style.fontweight='bold" (and similar)

works for the whole page I only want to give the user the opportunity to change text in one div with a  CSS class name of ".caps".  I have tried many things without success.

(I can't use external stylesheets because of clashes with other elements in xhtml+smil.  The solution should err on the side of simplicity as its needs to be fed back into xsl sheet))

thanks in anticipation

David
0
Comment
Question by:Toulmindrive
[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
6 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 12312120
if the .caps classed div would have an id="someid" then you could always use onclick="document.getElementById('someid').style.fontweight='bold';" wouldn't you?

-r-
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12313786
I'm not clear on what you are trying to do.  If you are just trying to change one div the using an id as Roonaan posted is all you need.

If you are trying to modify the properties of the class, that is also possible with scripting. If you are trying to add the property... also possible; as is modifying an existing property.  If you need the scripting to manipulate the styles just give a little more detail of what you actually need changed, and I will post some script.

Cd&
 
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12315199
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21168781</title>
      </head>
      <body>
            <div>
                  <fieldset>
                        <input type="button" value="bold" onclick="this.parentNode.parentNode.style.fontWeight = 'bold'">
                        <input type="button" value="caps" onclick="this.parentNode.parentNode.style.textTransform = 'uppercase'">
                  </fieldset>
                  <p>
                        This is text inside the div which has a toolbar for altering it's appearance.
                  </p>
            </div>
      </body>
</html>
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!

 

Author Comment

by:Toulmindrive
ID: 12317148
Thanks everyone.  If it is not considered too cheeky, it would easier to show by example that to explain and I have put a sample presentation at:
http://homepage.ntlworld.com/kraithman/EE/ie.html

to summarise; there is text in a class (.caps) that is contained in a wider div and I want the user to have some control on the look of the text in this part of the page but the pages change dynamically and any changes should persist.

David
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12319172
This is the scripting that will do it.  You can fire it off of any event. However, I can't guarantee it because you are using IE only styling in the form of expressions that are known to reduce DOM integrity, so you may find that the methods intended to manage the CSS are not reliable because of the M$ specific code designed to prvent other browser from working correctly.  I hope this is for an internal intranet app, because you definitely do not want to put it on the Internet unless you are not interested in non-IE user.  The page is adisaster in anything but IE.

<script type="text/javascript">
   function set2bold()
   {
      if (!document.styleSheets) return;
      var mycss = new Array();
      if (document.styleSheets[0].cssRules)  // Mozilla
        {
         mycss = document.styleSheets[0].cssRules;
        }
      else
        {        
           mycss = document.styleSheets[0].rules;  // IE
        }
        for (i=0;i<mycss.length;i++)
        {
           if(mycss[i].selectorText.toLowerCase()=='.caps')
             mycss[i].style.font-weight='bold';
        }
   }
</script>

Cd&
0
 

Author Comment

by:Toulmindrive
ID: 12327932
Thanks, I have gone for the easier solution of defining classes that are based on 'caps' such as 'capsBlack' and then calling them in a form.  

<form action="[URL]" accesskey="z">
  <div align="right" ><strong><font face="Verdana, Arial, Helvetica, sans-serif" size="-1">Set Background(z):</strong>
  <select size="1"  onChange="document.getElementById('captions').className=value;">

<option selected value="caps">White</option>
<option value="capsBlack">
Black\contrast text</option>

<option value="capsBlue">Blue</option>

</select>
</div></form>

this is not elegant but works to meet current needs.   Only problem now: I can't remember how to reset the list to 'White' after a refresh.  Ideas?

All the answers were helpful but I will give the points to Roonaan.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

771 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