-2

This is what I try to do, and I know this will take many hours to get the good looking UI.

$("input[type=text],textarea").bind("focus", function()![enter image description here][1] {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");

}).bind("blur", function() {
   $('.css-editor').remove();
});

Above code is just a prototype. Redactor air mode http://imperavi.com/redactor/examples/air/ is the closest thing I can find on the net.

I wonder if there are currently any jQuery plugins or Javascript to do this?


    <table style="width:100%" class="remark" cellspacing="0" cellpadding="0">
        <tr  class="invoice-cell-section">
        <th colspan="6" class="invoice-cell-top">
            **<input type="text" value="{_ Remark}"/>**
        </th>
        </tr>
        <tr>
        <td colspan="6" class="invoice-footer invoice-cell-bottom">
                **<textarea class="invoice-remark static"></textarea>**
        </td>
    </tr>
</table>

You see input box with value Remark and empty Textarea up here.. I want when people click on it.. there is a stylesheet editor to edit only that textarea/input element...


For anyone just reading this question.. I know there is several way to add/enable this .css-editor to the DOM.... I see right to it now how to implement it if I need to code myself.. + better UI than select dropdown + hours of debugging... It like a small version of TinyMCE or CLEditor that works for single HTML element not the whole HTML in textarea.

I just want to know if there are any plugin/snippet that I can instantly use..

3
  • @Vorapoap to do what?
    – user2869113
    Oct 14, 2013 at 10:37
  • OK Here is just a small piece of code from the invoice template I am creating...
    – Vorapoap
    Oct 14, 2013 at 10:38
  • This is hard to explain by wording alone.. I am not an English native speaker... Please check the link to redactor air mode I have given imperavi.com/redactor/examples/air .. It simply works on any part of HTML document.. I just want this for the single input/textarea.. (see my html code.. I just want it for Remark input box and textarea class=invoice-remark)
    – Vorapoap
    Oct 14, 2013 at 10:43

3 Answers 3

0

why not just:

$(document).on('focus', 'input[type=text],textarea', function(){
    $(this).addClass('focused');
});
$(document).on('blur', 'input[type=text],textarea', function(){
    $(this).removeClass('focused');
});

define a css class called focused and apply the style there.

hope that helps.

EDIT:

after better understanding of what you need, think about something like this.

create an invisible, floating (absolute positioned) panel- it will be the "css editor".

now, on every focus on an input, get to know it's location on document, and display the invisible floating css editor relatively. look at this idea:

$(document).on('focus', 'input[type=text],textarea', function(){
    $('.css-editor').css({left: $(this).offset().left+'px', top: $(this).offset().top+'px'}).show();
});
$(document).on('blur', 'input[type=text],textarea', function(){
    $('.css-editor').hide();
});

note that there's no need to remove and re-create this hidden element. you can create it once on DOM and manipulate it's position & visibility.

hope it's better :-)

2
  • No this is not what I want to do.. Please check the link to redactor air mode imperavi.com/redactor/examples/air .. when you click on text.. there is a stylesheet editor popup next to it.. I don't want this for the whole textarea.. I just want for one input/textarea box
    – Vorapoap
    Oct 14, 2013 at 10:42
  • HA haaa no.. Thanks for trying.. I know there are several ways to add and remove element from DOM.. in my case is the CSS Editor... I know it will take probably 50-100 lines of code to do the stylesheet editor I want. I also need to implement a better UI than this dropdown select. + hours of debugging. I just want to know if there is already one on the internet so I can use instantly.
    – Vorapoap
    Oct 14, 2013 at 11:00
0

No need to bind focus event on the textbox, it itself have the focus,focusin and focusout events attached in it. So you can simply use either .onfocus or you can also use .live function.

Using onfocus handler directly:

$("input[type=text],textarea").focus(function() {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});

Using Live event handler:

$("input[type=text],textarea").live("focus",function() {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});
0

You need to add function() {}

$("input[type=text],textarea").click(function(){
   $(this).removeClass("your_old_class").addClass("your_new_class")
});
6
  • No this is not what I want to do.. Please check the link to redactor air mode imperavi.com/redactor/examples/air .. when you click on text.. there is a stylesheet editor popup next to it.. I don't want this for the whole textarea.. I just want for one input/textarea box
    – Vorapoap
    Oct 14, 2013 at 10:46
  • is it to change only the selected text what you want?
    – webduvet
    Oct 14, 2013 at 10:51
  • Change the INPUT[type=text] or TEXTAREA that have focus.
    – Vorapoap
    Oct 14, 2013 at 11:09
  • I'm sorry I'm not getting what are you after. if you want reasonable help you need to describe clearly what you want.
    – webduvet
    Oct 14, 2013 at 11:21
  • I want a complete jquery script or javascript that..when I click on the INPUT or TEXTAREA.. the simple font style editor shows up like [B][U][I][LEFT ALIGN][RIGHT ALIGN][CENTER ALIGN]. Then when you click on any of this button.. the style of that textarea/input changes altogether for any text in that input box.
    – Vorapoap
    Oct 14, 2013 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.