Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: drop down menu

  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts

    drop down menu

    Hi,
    Please help me for making a dropdown menu for font size,font name and to make a color palatte in javascript.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    What have you tried, already? And how good a color palette do you want? Just the standard web colors, or all 16 million possible colors in standard #xxxxxx notation?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gayathri (03-06-2013)

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Code:
    <script language="JavaScript" type="text/javascript">
    function changeSize(size){
        // change div text font size.
      // document.getElementById("text").style.fontSize = size;
       document.getElementById("a1").style.fontSize = size;
    }
    </script>
    </head>
    <body>
    Select size:
    <select name="sizeselect" onchange="changeSize(this.value)">
     <option value="10">10</option>
     <option value="13">13</option>
     <option value="15">15</option>
     <option value="17">17</option>
     <option value="19">19</option>
     <option value="21">21</option>
     <option value="23">23</option>
     <option value="50">50</option>
    </select>
    <!--<div id="text">
      This is a font size changer using javascript .
    </div>-->
    <textarea id="a1" rows=10 cols=5>adasda</textarea>
    The above code i've already tried for size of font. But by increasing the font size also the text area size is increasing. I want only the input text size to be increased. How shall i do this

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Don't specify the text area by columns and rows. Use CSS style, instead.

    Example:
    Code:
    <textarea id="a1" style="width: 500px; height: 200px;"></textarea>
    You should also specify the *UNITS* on the font size.

    That is:
    Code:
    document.getElementById("a1").style.fontSize = size + "px";
    // or maybe
    document.getElementById("a1").style.fontSize = size + "pt";
    You can do font-family in much the same way, but remember that it will only work if the user has that font installed on his/her machine.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gayathri (03-06-2013)

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant. Please also tell me the above code is for only one textarea.If i'm having more than one textarea means how to do that.
    Last edited by gayathri; 03-06-2013 at 07:00 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    You would just do it for each text area, one after the other.

    If you gave them names ending in numbers, you could just do it in a loop:
    Code:
    function changeSize(size)
    {
        for ( var t = 1; t <= 5; ++t )
        {
            document.getElementById("a"+t).style.fontSize = size + "px";
        }
    }
    That would change text areas with id's of "a1", "a2", "a3", "a4", "a5".

    If they need to have very different id's:
    Code:
    var areaids = [ "cancelReason", "notes", "comments", "feedback" ];
    function changeSize(size)
    {
        for ( var t = 0; t <= areaids.length; ++t )
        {
            document.getElementById( areaids[t] ).style.fontSize = size + "px";
        }
    }
    And that would change all the elements with the ids given in that areaids array.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gayathri (03-06-2013)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Another option:

    If you grouped all the <textarea>s that need changing inside a single <div>, such as:
    Code:
    <div id="changeThese">
        <span>...</span>
        <textarea ... />
        <input ... />
        <textarea ... />
        <textarea ... />
        <textarea ... />
    </div>
    Then you could do:
    Code:
    function changeSize(size)
    {
        var changes = document.getElementByID("changeThese").getElementsByTagName("textarea");
        for ( var t = 0; t <= changes.length; ++t )
        {
            changes[t].style.fontSize = size + "px";
        }
    }
    And there are several other ways to do this. For example, you could do it based on the class name of the areas.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Still having another problem.If i want to increase the size for anyone text area means how to do for that.Because now for all the textarea input the size is increasing.
    Also please tell me how to work with the above code for font name and also i want to know how to do the color palatte.For example in our word document button A will be there.By clicking the A the colour palatte is viewed and from that we can select the colour what we want.Please tell me how to do this. Else is there any other way for doing this. Please tell me.

    Also please tell me is it possible to do like,for example i'm entering a text as "welcome to codingforum". In this i just want to highlight the word codingforum alone.Is it possible to do.
    Last edited by gayathri; 03-06-2013 at 08:10 AM.

  • #9
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Even in our mail box the color pallate and the text highlight is there. Simply i want to do like that.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    You can't highlight text inside a <textarea>. HTML doesn't support that. (Well, you could highlight *ALL* the text, but not just part of it.)

    It sounds to me like what you want is a WYSIWYG editor.

    Look here: http://ckeditor.com/
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Ok. Please tell me is it possible to do like after selecting the value from select box for selected text the tag is to be seen like

    <font size="3">codingforums<font>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Not inside a <textarea>.

    *ALL* characters in a <textarea> *WILL* get the same kind of display (color, bold, font, etc.). You can't control any individual characters or groups of characters.

    You can, of course, do so inside a <div>. But then the user can't type in a <div>.

    That's why you need a WYSIWYG editor such as CKEditor.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Please tell me, is it possible to do the select box for font name and size also the color palatte and mathematical expressions.
    I'm entering a text like "Hi, Welcome to w3schools.invisionzone.com" in a textbox. Now what i want to do is, i want to select the size,name color of font from the select box and after selecting the values i'll select the entered text from textarea, for example "w3schools.invisionzone.com". After selecting all these if i click a font button all the selected values has to be viewed inside the font tag as
    <font size="3" name="times new roman" color="red">"w3schools.invisionzone.com"</font> in my textarea.How shall i do this.Please tell me.
    Last edited by gayathri; 03-08-2013 at 09:14 AM.

  • #14
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Code:
    var x=["ques1","ques2"];
    function changeSize(size){
    for ( var t = 0; t <= x.length; ++t ){
    document.getElementById(x[t]).style.fontSize = size + "px";
    }
    }
    function font(elems,tag,size){
    var i=0, el, selectedText, newText;
    while(el=elems[i++]){
    selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);if(selectedText!=''){
    newText='<'+tag+' size='+size+'>'+selectedText+'</'+tag+'>';
      if(document.selection){
      document.selection.createRange().text=newText;
      return;
      }
      else{//Moz
      el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
      }
    }
    }
    }
    
    <input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',size);">
    Font size:
    <select name="sizeselect" onchange="changeSize(this.value)">
    <option value="select">select</option>
    <option value="10">10</option>
    <option value="13">13</option>
    <option value="15">15</option>
    <option value="17">17</option>
    <option value="19">19</option>
    <option value="21">21</option>
    <option value="23">23</option>
    <option value="50">50</option>
    </select>
    I dont know what i am doing wrong here. when clicking the font button the font size shows in the tag is 20 even if i select the font value as 10. Please tell me what i am doing wrong here.
    Last edited by gayathri; 03-11-2013 at 12:18 PM.


  •  

    Posting Permissions

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