gaya Posted March 6, 2013 Share Posted March 6, 2013 Hi,Please help me for making a dropdown menu for font size,font name and to make a color palatte in javascript. Link to comment Share on other sites More sharing options...
gaya Posted March 6, 2013 Author Share Posted March 6, 2013 function changeSize(size){for ( var t = 0; t <= x.length; ++t ){ // change div text font size. // document.getElementById("text").style.fontSize = size;document.getElementById(x[t]).style.fontSize = size + "px";}}function updateh1family() { var selector = document.getElementById('selectFontFamily'); var family = selector.options[selector.selectedIndex].value; var a1 = document.getElementById('a1') a1.style.fontFamily = family; }</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><select id="selectFontFamily" name="selectFontFamily" onchange="updateh1family();"> <option> Serif </option> <option> Arial </option> <option> Sans-Serif </option> <option> Tahoma </option> <option> Verdana </option> <option> Lucida Sans Unicode </option> </select><!--<div id="text"> This is a font size changer using javascript .</div>--><textarea name="a1" id="a1" style="width: 200px; height: 100px;"></textarea><textarea name="ques1" id="ques1" style="width: 200px; height: 100px;"></textarea> The above is my code. Its working fine.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 w3schoolsforum". In this i just want to highlight the word w3schoolsforum alone.Is it possible to do. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 6, 2013 Share Posted March 6, 2013 It sounds like you want something like CKEditor or TinyMCE. It's not real easy to build something like that yourself without experience. The code you have will change how the text looks, but if you submit the form it's not going to include all of that information, you're just changing how it looks on the page with the form. If you want a text editor where you can format the text like when you write a reply on this forum then you should look into something like I mentioned. Link to comment Share on other sites More sharing options...
gaya Posted March 7, 2013 Author Share Posted March 7, 2013 Please tell me is it possible to do something like, after selecting the vslue from select box for selected text, it should be viewed in textarea as <font size="3">welcome</font>The welcome is my selected text. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 7, 2013 Share Posted March 7, 2013 I'm sure it's possible, I don't know how easy it is to get the selected text in a text area though. Link to comment Share on other sites More sharing options...
gaya Posted March 8, 2013 Author Share Posted March 8, 2013 The following is my code 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);// IE:Mozif(selectedText!=''){newText='<'+tag+" size="+size+'>'+selectedText+'</'+tag+'>'; if(document.selection){//IE document.selection.createRange().text=newText; return;//prevents the double replacement } else{//Moz el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length); }}}}Font size:<select name="sizeselect" onchange="font([ques1,ques2,opt1,opt2,opt3,opt4],'font',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 want to refresh the slelectbox value automatically when the value is selected for 1st textbox.How to do this.Please tell me. Link to comment Share on other sites More sharing options...
gaya Posted March 8, 2013 Author Share Posted March 8, 2013 Otherwise 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 8, 2013 Share Posted March 8, 2013 It sounds like you need to move the event handler from the select element to a button, and have it call a function to get all of the values from the various dropdowns and build the markup text to wrap the selected text with. 1 Link to comment Share on other sites More sharing options...
gaya Posted March 11, 2013 Author Share Posted March 11, 2013 Yes. The above u have mentioned is that what i am trying to do. Please tell me how to do that. Link to comment Share on other sites More sharing options...
gaya Posted March 11, 2013 Author Share Posted March 11, 2013 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 11, 2013 Share Posted March 11, 2013 You're not getting the selected value from the dropdown. Give the dropdown an ID, use document.getElementById to get a reference to the element and use that to get the selected value, and use that for the size. 1 Link to comment Share on other sites More sharing options...
gaya Posted March 12, 2013 Author Share Posted March 12, 2013 (edited) Thanks for the help justsomeguy.I did it by using document.getElementById.Also please tell me Is it possible to create a color pallate.For example,when we are typing in the reply textarea the optons like bold,italic,font,size,also text color etc are seen above. Now i want to do that text color.Please tell me how to do that using javascript. Edited March 12, 2013 by gaya Link to comment Share on other sites More sharing options...
gaya Posted March 12, 2013 Author Share Posted March 12, 2013 (edited) <script type="text/javascript">function getColor(block){var s_url=block.href;var pColor=s_url.substr(s_url.indexOf("#"));document.getElementById("colorPalDemo").style.backgroundColor=pColor;document.getElementById("colorPalDemo").innerHTML=pColor;}</script><img src="http://www.digimantra.com/blog/wp-content/uploads/2009/06/palette.gif" usemap="#color_pallete" /><map name="color_pallete" id="color_pallete"> <area shape="rect" coords="7,7,31,30" href="#003300" onclick="getColor(this);" /> <area shape="rect" coords="35,7,59,30" href="#003366" onclick="getColor(this);" /> <area shape="rect" coords="63,7,87,31" href="#000080" onclick="getColor(this);" /> <area shape="rect" coords="92,7,115,31" href="#333399" onclick="getColor(this);" /> <area shape="rect" coords="7,33,30,58" href="#008000" onclick="getColor(this);"/> <area shape="rect" coords="36,34,59,57" href="#008080" onclick="getColor(this);" /> <area shape="rect" coords="63,34,86,58" href="#0000ff" onclick="getColor(this);" /> <area shape="rect" coords="92,35,115,57" href="#666699" onclick="getColor(this);" /> <area shape="rect" coords="8,61,31,85" href="#339966" onclick="getColor(this);" /> <area shape="rect" coords="35,62,59,85" href="#33cccc" onclick="getColor(this);" /> <area shape="rect" coords="64,61,86,85" href="#3366ff" onclick="getColor(this);" /> <area shape="rect" coords="92,61,115,85" href="#800080" onclick="getColor(this);" /> <area shape="rect" coords="91,88,115,111" href="#993366" onclick="getColor(this);" /> <area shape="rect" coords="64,88,87,111" href="#00ccff" onclick="getColor(this);" /> <area shape="rect" coords="36,88,59,112" href="#00ffff" onclick="getColor(this);" /> <area shape="rect" coords="8,88,30,111" href="#00ff00" onclick="getColor(this);" /> </map><span id="colorPalDemo" name="" class="" style="height:50px;width:50px;display:block;color:#ffffff;"></span> I googled and seen this code.But the thing want i want is this same as the above thing.I.e)<font size="3" name="times new roman" color="red">"w3schools.invisionzone.com"</font> by clicking the palette the corresponding color code red is included inside the tags.Please tell me how to do that. Also please tell me what the coords is and also please tell me, if i want to add more colors how i shall add. Edited March 12, 2013 by gaya Link to comment Share on other sites More sharing options...
justsomeguy Posted March 12, 2013 Share Posted March 12, 2013 It sounds like you were clicking a button to put the tag in there, so if you're using that then the getColor function should set a global variable that your button handler will include in the style for the color. You should really be using CSS with span tags instead of font tags though. If you want to know about the coordinates and how to add more colors then look into image maps, that's what that is. Link to comment Share on other sites More sharing options...
gaya Posted March 13, 2013 Author Share Posted March 13, 2013 I cann't able to understand how the above code's co-ordinates are find. If i'm adding #ff0000, then how will i find its coordinates. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 13, 2013 Share Posted March 13, 2013 Like I said, research image maps. That is an image map. The coordinates are pixel coordinates that you can get from any image editing program. You edit the image to add a new region to it with whatever color you want, and get the position of the new area that you want them to be able to click on. Link to comment Share on other sites More sharing options...
gaya Posted March 14, 2013 Author Share Posted March 14, 2013 (edited) Sorry justsomeguy. I cann't able to understand what you are saying.Will you please explain me a bit more.Otherwise please tell me some sample code for doing the color palette. Edited March 14, 2013 by gaya Link to comment Share on other sites More sharing options...
justsomeguy Posted March 14, 2013 Share Posted March 14, 2013 I am telling you to research image maps. Go to Google, type in "image maps", and look it up. The color picker you showed is an image map. This is the image: http://www.digimantra.com/blog/wp-content/uploads/2009/06/palette.gif Look at the HTML: <img src="http://www.digimantra.com/blog/wp-content/uploads/2009/06/palette.gif" usemap="#color_pallete" /><map name="color_pallete" id="color_pallete"> The code that lists each area defines which places they are able to click on that image. If you want to add more colors you need to create an image with the colors you want, and define the areas they can click on. Like I said, look up image maps for more information. If you don't want to use an image map for that then there are several other Javascript color pickers you can use. 1 Link to comment Share on other sites More sharing options...
gaya Posted March 15, 2013 Author Share Posted March 15, 2013 Ok thanks justsomeguy, I used the same palette.But now i want to do is by clicking some image i want to show the palette. Please tell me how to do that. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 15, 2013 Share Posted March 15, 2013 Put an onclick handler on the image to run a function that changes the CSS display of the image from none to block or inline. There are several examples of using Javascript to show an element online. If you want the palette to disappear when they click on an image then you can add that code into the getColor function that runs when they click one of the colors. 1 Link to comment Share on other sites More sharing options...
gaya Posted March 18, 2013 Author Share Posted March 18, 2013 I included the image but it still doesn't works for me. Please tell me what i'm doing wrong here. <html><head><script type="text/javascript">function getColor1() { var img = document.createElement("img"); img.src = "img/palette.gif"; document.body.appendChild(img);//getColor(); }function getColor(block){var s_url=block.href;var pColor=s_url.substr(s_url.indexOf("#"));document.getElementById("colorPalDemo").style.fontColor=pColor;getColor1();}</script></head><body> <img src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" /><map name="color_pallete" id="color_pallete"> <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" /> <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" /> <area shape="rect" coords="63,7,87,31" href="#0000FF" onclick="getColor(this);" /> <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" /> <area shape="rect" coords="7,33,30,58" href="#00FFFF" onclick="getColor(this);"/> <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" /> <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" /> <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" /> <area shape="rect" coords="8,61,31,85" href="#32CD32" onclick="getColor(this);" /> <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" /> <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" /> <area shape="rect" coords="92,61,115,85" href="#008B8B" onclick="getColor(this);" /> <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" /> <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" /> <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" /> <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" /> </map><span id="colorPalDemo"></span> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 18, 2013 Share Posted March 18, 2013 its NOT fontColor, there is no such css style, fontFamily, fontSize yes! for changing font colour you use 'color' so it should be .style.color=pColor; Link to comment Share on other sites More sharing options...
justsomeguy Posted March 18, 2013 Share Posted March 18, 2013 I included the image but it still doesn't works for me. Please tell me what i'm doing wrong here.You're appending the image to the body each time you fun that function, and you're not telling it to use an image map. Instead, you're telling the image that you click on to use the image map. You shouldn't append the image to the body, it should be there like it was when you started except with the CSS display set to none, and when you click on the image to run the function it should set the display to inline or block. Link to comment Share on other sites More sharing options...
gaya Posted March 19, 2013 Author Share Posted March 19, 2013 Thanks for the reply dsonesuk. I changed the .fontcolor to .color. Thanks justsomeguy, but i cann't able to understand what exactly you are saying. Please explain me a little more. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2013 Share Posted March 19, 2013 From what i understand, you dont need getColor1() <img src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" />should be similar to below<img usemap="#color_pallete" src="img/palette.gif" />usemap="#color_pallete" tells <map name="color_pallete" id="color_pallete"> with all it co-ordinates (squares areas defined around each colour cube) to use this image.With your image you should assign a id ref to it, and reference this id with current function getColor(block) to hide this image using style display none, or visibility hidden. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now