Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Styling Javascript

Posted by: UptonGirl May 1 2012, 03:31 PM


I've been asked to give the help function for a online program a little more 'style.' (It has none) This is a program that tutors math, and is browser based. The only code I was given as an example is below.

If you go here: http://wayangoutpost.info/ and click on the words bold & underlined[u] in the 3rd paragraph, you'll see an example of how they would like it to look (possibly - or a variation thereof) But, I did that with a plug in and i'd like this to be less messy in the code, as they will be re-using it and changing the content for various pages/links.

This may be a 'can't see the forest for the trees' situation, as it doesn't SEEM like it should be hard but i'm lost.

any thoughts? Tutorials you could suggest?

Thanks.

CODE
<HTML>
<HEAD>
<TITLE>Instructions to this Interactive Activity</TITLE>
<script type="text/javascript">
    function retrieveInstructions() {
        var urlArray = window.location.href.split('');
        var i = 2;
        for(i=2; i < urlArray.length; i++) {
            if(urlArray[i-2]=='o' && urlArray[i-1]=='n' && urlArray[i]=='s' && urlArray[i+1]=='=') {
                var parameterString = "";
                var j;
                for(j=i+2; j < urlArray.length; j++) {
                    if ( urlArray[j] == '%20' ||  urlArray[j]== '%' ||  urlArray[j]== '2' || urlArray[j] == '0' )
                        parameterString+=" ";
                    else
                        parameterString+=urlArray[j];
                }
                return  parameterString;
            }
        }
    }
</script>
</HEAD>

<BODY>
  <script>
    document.write("<p>"+retrieveInstructions()+"</p>");
  </script>
</BODY>

</html>


Posted by: Christian J May 1 2012, 07:53 PM

I don't see what the code example has to do with the question. The code example just prints out (an edited version of) the querystring when the page is loaded. unsure.gif

Regarding the "tooltip" on the linked page, it uses the following HTML:

CODE
<span id="p7Tooltip_2" class="tText p7TTM_trg" title=" This is where definitions and explanations of terms in bold, underlined text appear."><strong>bold &amp; underlined</strong></span>

so I guess you could style it with an ordinary stylesheet using its CLASS and/or ID selectors.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)