Solved

Controlling elements of class by use of form in HTML

Posted on 2004-10-14
6
193 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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
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 …

773 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