www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] help with function

  1. #1
    Join Date
    Apr 2013
    Posts
    6

    resolved [RESOLVED] help with function

    I have to write a function that causes a rollover behavior for 3 different div elements that when a mouse goes over, the size increases 25% larger font size and then goes back to normal when the mouse moves off of them.
    Here is where I think I am messing up.
    The function must receive two passed parameters that indicate the id of the div to be altered and the font size to be applied to the division. Each div must have two event handler attributes that will call the function and pass the related parameters to it. Here is what I have so far:

    Code:
    function divFontSize(id, percent)
    { 
     id.style.fontsize = size;
    }
    </script>
    
    
    <div id="objectives" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">  
    <h3>OBJECTIVES</h3>
    </div>
    
    <div id="details" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">
    <h3>DETAILS</h3>
    <p> We are here</p> 
    </div>
    
    <div id="submission" onmouseover="divFontSize(this, '125%')" onmouseout ="divFontSize(this, '100%')">
    <h3>SUBMISSION</h3>
    </div>
    Any help would be appreciated.

  2. #2
    Join Date
    Oct 2012
    Posts
    42
    Try 'percent' instead of size in the line:

    id.style.fontsize = size;

    i.e.:

    id.style.fontsize = percent;

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there olddog,

    and a warm welcome to these forums.

    The answer to your javascript question is that this...
    Code:
    
        id.style.fontsize = size;
    ...should be...
    Code:
    
        id.style.fontSize=percent;
    That said, you really should not be using clumsy javascript for this task at all.

    It should be coded using CSS like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #objectives:hover,#details:hover,#submission:hover {
        font-size:125%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="objectives">  
     <h3>OBJECTIVES</h3>
    </div>
    
    <div id="details">
     <h3>DETAILS</h3>
     <p> We are here</p> 
    </div>
    
    <div id="submission">
     <h3>SUBMISSION</h3>
    </div>
    
    </body>
    </html>
    coothead

  4. #4
    Join Date
    Apr 2013
    Posts
    6
    @coothead- the reason I am doing it this way is because that is the way the instructor told us to do it. He has us using this website w3c.com and it is really hard to glean understanding from it because it is all over the place and the examples are easy to understand but not really covering what he is having us do on the assignments, or at least I can't find it on the many pages of that website.

    Could you please tell me why I would use percent? Is it a keyword or is it because it is one of the parameters in the function? Also is fontSize a keyword? The name of the function is divFontSize so why is fontSize what I would use? Thanks for the help.

  5. #5
    Join Date
    Apr 2013
    Posts
    6
    Had one more question that maybe you could help me with.
    Here are the instructions.
    A function in the head section that can toggle the division's display on or off based on the state of the related checkbox. This function must also receive two passed parameters that indicate which checkbox is triggering the event, and the id of the division to be altered. All three division must display by default when the page loads.

    Here is the code I came up with but I am not even sure if this is right or on the right track.
    Code:
    <script type = "text/javascript">
    
    function showHide(checkboxid, divid)
    {
    if (document.getElementById('checkboxid').checked = true
     	{
    	document.getElementById('divid').visibility:visible	
    	}
    else  document.getElementById('divid').visibility:hidden
     
    }
    </script>
     
    </head>
    
    <table style="border:groove; width:100%" >
    <tr>
    <td style="border:none">
    <label for="show">Show:</label>
    </td>
    
    <td style="border:none">
    <input type = "checkbox" name="objchk" id="objchk" onchange="showHide('objchk', 'objectives')"> 
    <label for="objchk">Objectives</label> 
     
    </td>
    
    <td style="border:none">
    <input type = "checkbox" name= "detchk" id="detchk" onchange="showHide('detchk', 'details')"> 
    <label for = "detchk">Details</label>
    </td>
    
    <td style="border:none">
    <input type = "checkbox" name = "subchk" id="subchk" onchange="showHide('subchk', 'submission')"> 
    <label for = "subchk">Submission</label>
    </td>
    </tr>
    </table>

  6. #6
    Join Date
    Oct 2012
    Posts
    42
    You need to use percent because it's the parameter defined in the function definition, through which you are passing the font size.

    function call: divFontSize(this, '125%')

    function definition:
    function divFontSize(id, percent)
    {
    id.style.fontsize = percent;
    }

    You can replace 'percent' with anything you want, so long as you use the same name in the function definition and inside the function itself.

    fontSize is the formal name used to access the font size property of a DOM element via javascript:
    http://www.w3schools.com/jsref/prop_style_fontsize.asp
    Last edited by rh_lloydnorthov; 04-17-2013 at 10:40 AM.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there olddog,

    Could you please tell me why I would use percent?
    It is one of the functions attributes...
    Code:
    function divFontSize(id, percent)
    ...and in this case represents the value - "125%".

    Also is fontSize a keyword?
    No, in JavaScript, fontSize corresponds to the CSS property font-size.
    JavaScript does not allow hyphens in names, so "camelCase" is used instead.

    Further Reading:-


    If you must use javascript, then at least remove it from the mark-up...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    
    <style type="text/css">
    .fsize {
        font-size:125%;
     }
    .color {
        color:#f00;
     }
    </style>
    <script type="text/javascript">
    (function() {
       'use strict';
    
    function init(){
    
       var ids=['objectives','details','submission'];
    
    for(var c=0;c<ids.length;c++){
    document.getElementById(ids[c]).onmouseover=function() {
       this.className+=' fsize';
    
    this.onmouseout=function(){
       this.className=this.className.replace(' fsize','');
        }
       }
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    
    </script>
    
    </head>
    <body>
    
    <div id="objectives" class="color">  
     <h3>OBJECTIVES</h3>
    </div>
    
    <div id="details">
     <h3>DETAILS</h3>
     <p> We are here</p> 
    </div>
    
    <div id="submission">
     <h3>SUBMISSION</h3>
    </div>
    
    </body>
    </html>
    coothead

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there olddog,

    this is how I would approach your second problem...

    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>hide and show content</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
        color:#666;
     }
    #container {
        width:760px;
        padding:20px;
        border:1px solid #999;
        border-radius:15px;
        margin:auto;
        background-color:#fff;
        box-shadow:10px 10px 10px rgba(0,0,0,0.4);
     }
    input[type=checkbox] {
        margin-right:20px;
        cursor:pointer;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script type="text/javascript">
    (function() {
       'use strict';
    
    function init(){
    
       var cbids=['cb0','cb1','cb2'];
       var ids=['objectives','details','submission'];
    
    for(var c=0;c<cbids.length;c++) {
    
       document.getElementById(cbids[c]).checked=true;
       document.getElementById(cbids[c]).number=c;
    
    document.getElementById(cbids[c]).onclick=function(){
    
       var obj=document.getElementById(ids[this.number]);
    
       this.checked==false?
       obj.className+=' hide':
       obj.className=obj.className.replace(' hide','');
    
       }
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <h3><input id="cb0" type="checkbox">OBJECTIVES</h3>
    <div id="objectives"> 
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p> 
    </div>
    
    <h3><input id="cb1" type="checkbox">DETAILS</h3>
     <div id="details">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div>
    
    <h3><input id="cb2" type="checkbox">SUBMISSION</h3>
    <div id="submission">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles