Solved

Controlling elements of class by use of form in HTML

Posted on 2004-10-14
6
207 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 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
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
really easy css change help please 4 35
Selected in an option list 13 27
displaying 3 dropdownlist  horizontally 3 32
Telerik RadEditor Control Save 8 18
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

730 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