Solved

Controlling elements of class by use of form in HTML

Posted on 2004-10-14
6
199 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
6 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

856 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