How to hide textbox in jquery

Question

1.43/5 (3 votes)

See more:

hi

I ma trying implement a simple colorpicker in my application after lot of search i have fond jquery this

C#

var imageUrl = '\Content\color.png';

function iColorShow(id, id2) {

    var eICP = jQuery("#" + id2).position(); jQuery("#iColorPicker").css({ 'top': eICP.top + (jQuery("#" + id).outerHeight()) + "px", 'left': (eICP.right) + "px", 'position': 'absolute' }).fadeIn("fast"); jQuery("#iColorPickerBg").css({ 'position': 'fixed', 'top': 0, 'left': 20, 'width': '100%', 'height': '100%' }).fadeIn("fast");
    var def = jQuery("#" + id).val();
    jQuery('#colorPreview span').text(def);
    jQuery('#colorPreview').css('background', def);
    jQuery('#color').val(def);
    var hxs = jQuery('#iColorPicker');
    for (i = 0; i < hxs.length; i++) {
        var tbl = document.getElementById('hexSection' + i);
        var tblChilds = tbl.childNodes;
        for (j = 0; j < tblChilds.length; j++) {
            var tblCells = tblChilds[j].childNodes;
            for (k = 0; k < tblCells.length; k++) {
                jQuery(tblChilds[j].childNodes[k]).unbind().mouseover(function (a) {
                    var aaa = "#" + jQuery(this).attr('hx');
                    jQuery('#colorPreview').css('background', aaa);
                    jQuery('#colorPreview span').text(aaa)
                }).click(function () {
                    var aaa = "#" + jQuery(this).attr('hx'); jQuery("#" + id).val(aaa).css("background", aaa);
                    jQuery("#iColorPickerBg").hide();
                    jQuery("#iColorPicker").fadeOut();
                    jQuery(this)
                })
            }
        }
    }
}
this.iColorPicker = function () {
    jQuery("input.iColorPicker").each(function (i) {
        if (i == 0)
        { jQuery(document.createElement("div")).attr("id", "iColorPicker").css('display', 'none').html('<table class="pickerTable" id="pickerTable0"><thead id="hexSection0"><tr><td style="background:0;" hx="0"></td><td style="background:#ff0" hx="ff0"></td><td style="background:#0f0" hx="0f0"></td><td style="background:#0ff" hx="0ff"></td><td style="background:#00f" hx="00f"></td><td style="background:#f0f" hx="f0f"></td><td style="background:#fff" hx="fff"></td><td style="background:#ebebeb" hx="ebebeb"></td><td style="background:#e1e1e1" hx="e1e1e1"></td><td style="background:#d7d7d7" hx="d7d7d7"></td><td style="background:#cccccc" hx="cccccc"></td><td style="background:#c2c2c2" hx="c2c2c2"></td><td style="background:#b7b7b7" hx="b7b7b7"></td><td style="background:#acacac" hx="acacac"></td><td style="background:#a0a0a0" hx="a0a0a0"></td><td style="background:#959595" hx="959595"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#898989" hx="898989"></td><td style="background:#7d7d7d" hx="7d7d7d"></td><td style="background:#707070" hx="707070"></td><td style="background:#626262" hx="626262"></td><td style="background:#555" hx="555"></td><td style="background:#464646" hx="464646"></td><td style="background:#363636" hx="363636"></td><td style="background:#262626" hx="262626"></td><td style="background:#111" hx="111"></td><td style="background:#000" hx="000"></td></tr><tr><td style="background:#f7977a" hx="f7977a"></td><td style="background:#fbad82" hx="fbad82"></td><td style="background:#fdc68c" hx="fdc68c"></td><td style="background:#fff799" hx="fff799"></td><td style="background:#c6df9c" hx="c6df9c"></td><td style="background:#a4d49d" hx="a4d49d"></td><td style="background:#81ca9d" hx="81ca9d"></td><td style="background:#7bcdc9" hx="7bcdc9"></td><td style="background:#6ccff7" hx="6ccff7"></td><td style="background:#7ca6d8" hx="7ca6d8"></td><td style="background:#8293ca" hx="8293ca"></td><td style="background:#8881be" hx="8881be"></td><td style="background:#a286bd" hx="a286bd"></td><td style="background:#bc8cbf" hx="bc8cbf"></td><td style="background:#f49bc1" hx="f49bc1"></td><td style="background:#f5999d" hx="f5999d"></td></tr><tr><td style="background:#f16c4d" hx="f16c4d"></td><td style="background:#f68e54" hx="f68e54"></td><td style="background:#fbaf5a" hx="fbaf5a"></td><td style="background:#fff467" hx="fff467"></td><td style="background:#acd372" hx="acd372"></td><td style="background:#7dc473" hx="7dc473"></td><td style="background:#39b778" hx="39b778"></td><td style="background:#16bcb4" hx="16bcb4"></td><td style="background:#00bff3" hx="00bff3"></td><td style="background:#438ccb" hx="438ccb"></td><td style="background:#5573b7" hx="5573b7"></td><td style="background:#5e5ca7" hx="5e5ca7"></td><td style="background:#855fa8" hx="855fa8"></td><td style="background:#a763a9" hx="a763a9"></td><td style="background:#ef6ea8" hx="ef6ea8"></td><td style="background:#f16d7e" hx="f16d7e"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#f16522" hx="f16522"></td><td style="background:#f7941d" hx="f7941d"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#8fc63d" hx="8fc63d"></td><td style="background:#37b44a" hx="37b44a"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00a99e" hx="00a99e"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#0072bc" hx="0072bc"></td><td style="background:#0054a5" hx="0054a5"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#652c91" hx="652c91"></td><td style="background:#91278f" hx="91278f"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#ee105a" hx="ee105a"></td></tr><tr><td style="background:#9d0a0f" hx="9d0a0f"></td><td style="background:#a1410d" hx="a1410d"></td><td style="background:#a36209" hx="a36209"></td><td style="background:#aba000" hx="aba000"></td><td style="background:#588528" hx="588528"></td><td style="background:#197b30" hx="197b30"></td><td style="background:#007236" hx="007236"></td><td style="background:#00736a" hx="00736a"></td><td style="background:#0076a4" hx="0076a4"></td><td style="background:#004a80" hx="004a80"></td><td style="background:#003370" hx="003370"></td><td style="background:#1d1363" hx="1d1363"></td><td style="background:#450e61" hx="450e61"></td><td style="background:#62055f" hx="62055f"></td><td style="background:#9e005c" hx="9e005c"></td><td style="background:#9d0039" hx="9d0039"></td></tr><tr><td style="background:#790000" hx="790000"></td><td style="background:#7b3000" hx="7b3000"></td><td style="background:#7c4900" hx="7c4900"></td><td style="background:#827a00" hx="827a00"></td><td style="background:#3e6617" hx="3e6617"></td><td style="background:#045f20" hx="045f20"></td><td style="background:#005824" hx="005824"></td><td style="background:#005951" hx="005951"></td><td style="background:#005b7e" hx="005b7e"></td><td style="background:#003562" hx="003562"></td><td style="background:#002056" hx="002056"></td><td style="background:#0c004b" hx="0c004b"></td><td style="background:#30004a" hx="30004a"></td><td style="background:#4b0048" hx="4b0048"></td><td style="background:#7a0045" hx="7a0045"></td><td style="background:#7a0026" hx="7a0026"></td></tr></thead><tbody><tr><td style="border:1px solid #000;background:#fff;cursor:pointer;height:60px;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;" colspan="16" align="center" id="colorPreview"><span style="color:#000;border:1px solid rgb(0, 0, 0);padding:5px;background-color:#fff;font:11px Arial, Helvetica, sans-serif;"></span></td></tr></tbody></table><style>#iColorPicker input{margin:2px}</style>').appendTo("body"); jQuery(document.createElement("div")).attr("id", "iColorPickerBg").click(function () { jQuery("#iColorPickerBg").hide(); jQuery("#iColorPicker").fadeOut() }).appendTo("body"); jQuery('table.pickerTable td').css({ 'width': '12px', 'height': '14px', 'border': '1px solid #000', 'cursor': 'pointer' }); jQuery('#iColorPicker table.pickerTable').css({ 'border-collapse': 'collapse' }); jQuery('#iColorPicker').css({ 'border': '1px solid #ccc', 'background': '#333', 'padding': '5px', 'color': '#fff', 'z-index': 9999 }) } jQuery('#colorPreview').css({ 'height': '50px' }); jQuery(this).css("backgroundColor", jQuery(this).val()).after('<a href="javascript:void(null)" id="icp_' + this.id + '" onclick="iColorShow(\'' + this.id + '\',\'icp_' + this.id + '\')"><img src="' + imageUrl + '" style="border:0;margin:0 0 0 10px" align="absmiddle" ></a>')
    })
};
 jQuery(function () { iColorPicker() })

in html

HTML

<input id="mycolor" name="mycolor" type="text" value="#ffcc00" class="iColorPicker" />

it is working fine when i rum my page its shows one image and a textbox, when i click on the image the colorpicker willl popup and i will select one color from the list, the value of the color is loaded in textbox,

Now my question is how can hide that text box but not image

the aim of this the code is the value color should not seen by user

i am trying this from last one day please anybody help me

Posted 20-Oct-14 0:26am

murkalkiran

Updated 20-Oct-14 1:18am

SRS(The Coder)

v3

Add a Solution

Comments

[no name] 20-Oct-14 6:39am

Why dont you hide the text input or your textbox by using a property like Visible="False" in asp .net

SRS(The Coder) 20-Oct-14 6:45am

Rather you can use a hidden input type like below :-
<input id="mycolor" name="mycolor" type="hidden" value="#ffcc00" class="iColorPicker" />

OR

You can go for hiding it using .hide() method of jQuery & .css() method to set its display property to none to make it ivisible as below :-

$('#divToHideID').hide();
$('#divToHideID').css('display', 'none');

Hope this will be helpful.

murkalkiran 20-Oct-14 6:49am

Thnaku verymuch brother it worked for me

SRS(The Coder) 20-Oct-14 6:56am

Great, then can you please mark it as answer ?

murkalkiran 20-Oct-14 7:05am

i think u removed this
<pre lang="HTML"><input id="mycolor" name="mycolor" type="hidden" value="#ffcc00" class="iColorPicker" /></pre>

murkalkiran 20-Oct-14 7:06am

brother i think u removed this
<pre lang="HTML"><input id="mycolor" name="mycolor" type="hidden" value="#ffcc00" class="iColorPicker" /></pre>

it worked for me

murkalkiran 20-Oct-14 6:45am

Thanku for quick replay
if i use this property both image and textbox will be hided but i want only textbox should be hide

SRS(The Coder) 20-Oct-14 6:55am

You can also do like below one :-
$('input[type=text]')('#divToHideID').hide();

This will get all the inputs of type textbox and filter the id holding input and hides it.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SRS(The Coder) · Accepted Answer · 2014-10-20T00:56:00

Rather you can use a hidden input type like below :-

HTML

<input id="mycolor" name="mycolor" type="hidden" value="#ffcc00" class="iColorPicker" />

OR

You can go for hiding it using .hide() method of jQuery & .css() method to set its display property to none to make it ivisible as below :-

JavaScript

$('#divToHideID').hide();
$('#divToHideID').css('display', 'none');

Hope this will be helpful.