How to incorporate text customization buttons above a text area form ?

Discussion in 'PHP' started by eritrea1, Jul 14, 2012.

0
  1. #1
    Well, as the title says it. I want to know where to get, or how to create simple functions like Bold, Italic, Underline, Indent.. in my text are in my site.


    Thanks for the help in advance.
     
    eritrea1, Jul 14, 2012 IP
  2. superlinksworld

    superlinksworld Member

    Messages:
    127
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    43
    #2
    Hi,
    you can get this with help of jquery .

    you need to download jquery.js just google it and download fresh jquery file from its real website and if its name is like jquery-1-7-4.js etc just rename it to jquery.js and place it in js folder then later you have to link it to html file . Folowing is code what u looking for ..

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Transferring value from one select box to another with help of Javascript</title>
<script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

  <form>
    Bold:<input name="textStyle" type="checkbox" value="bold"/>
    Italic:<input name="textStyle" type="checkbox" value="italic"/>
    Underline:<input name="textStyle" type="checkbox" value="underline"/>

    <input name="styledText" type="text" value="">
</form>

<script type="text/javascript">
    $('input[name="textStyle"]').change(function(){
        if ($(this).val() == 'bold'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
            else $('input[name="styledText"]').css('font-weight', 'normal');
        }
        else if ($(this).val() == 'italic'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
            else $('input[name="styledText"]').css('font-style', 'normal');
        }
        else if ($(this).val() == 'underline'){
            if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
            else $('input[name="styledText"]').css('text-decoration', 'none');
        }
    });
</script>

</body>

</html>
    Code (markup):
    Regards,

    D Najmi
     
    superlinksworld, Jul 14, 2012 IP
  3. eritrea1

    eritrea1 Active Member

    Messages:
    182
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    70
    #3
    Hi there, Thanks so much. I thought this would be a lot of work but I was wrong. I just tried it, and I would like it to have more function specially indenting & coloring texts and indenting paragraph like the to left, center and right . And, font size as well. Could you please send me a link as this is obviously asking too much?


    Thanks.
     
    eritrea1, Jul 14, 2012 IP