I have an ASP.NET text control "FromDate" whose visible property is set to false, but I wanted a client side javascript to be able to toggle the visibility property using CSS properties
element1.style.display = "none"; // hides the element
element1.style.display = ""; // shows the element
but when I attempt to get the textbox, I get null on
var element1 = document.getElementById("FromDate");
When I try the same code with visble=true as the default on the "FromDate" ASP.NET control, it works (although that is not the behavior I need)
Any ideas?
When you set Visible = false to a control, it is not rendered. That means there is no HTML representation of that control sent to the page. Set the style only.
You can set the style as display: none from server side code like this:
FromDate.Style.Add(HtmlTextWriterStyle.Display, "none")
If you want to hide this control, you can try CSS like this:
<asp:somecontrol id="FromDate" style="display:none" />
I think hiding the control with CSS is easier to understand.
Instead of setting Visible=false, set its style.display to none, that way the element is still there for JavaScript to manipulate.
Related
I have the following checkbox with a class on it, for future use
.class{onClick: "doSomething()"}= check_box #var, :var
But there's a problem. Let's pretend |AAAA| is the buton, if i click on the ==.. it still triggers doSomething().
|AAAA| ====================
I tryied with
display: block
in css but it doesn't work
Thanks
That's because both the label and input area are enclosed in the .class.
Instead, specify via js that you only want the checkbox input to trigger your JS action, and not the label.
= check_box #var, :var, id: 'my-id'
Then:
:javascript
$("input#my-id").click(function() {
doSomething();
});
What is generated html?
Looks like you've set onClick handler to outer div, not to the checkbox.
( I assume you have reasons to use inline javascript instead on unobtrusive one)
There may be 2 reasons this:
1: You have a label tag around the checkbox as well as element containing ==================== (As you said in the question )
2: You may not have given the class to checkbox, rather it is bound to another element that contains checkbox.
I'm trying to make an AjaxControlToolkit Accordion control change the header style on mouseover and mouseout. It works fine but when the user mouses over the currently selected header then leaves it the special CSS for selected headers is overwritten by the mouseout class that I've assigned. I'm just using onmouseover="this.className='AccHover'" and onmouseout="this.className='AccMouseOut'" in a <div> tag inside the accordions header sections.
Is there a way to remove the AccHover class on the mouseout event and have it revert back to either the unselected CSS style or the Selected header style depending on the accordion panes state automatically?
I would use:
onmouseover="this.classList.add('AccHover')"
and
onmouseout="this.classList.remove('AccHover')"
EDIT: Ok I just remembered classList doesn't work in IE, I assume that's what you are testing in. In that case I would use something like:
onmouseover="this.className = this.className + ' AccHover';"
and
onmouseout="this.className = this.className.replace('AccHover', '');"
See example http://jsfiddle.net/RgRUN/2/
But I would call your own javascript function rather than write inline.
I hope this isn't too difficult, obviously you can call HTML tags such as fieldset, label and legends and also textboxes. However how does one call an asp:textbox, i have tried just textbox, asp:textbox, input.textbox but nothing seems to work. This is something that should be really straight forward to do and I can't waste any more time figuring it out.
Thanks.
You can try input[type=text] but that will not work in IE6. Or you can create a class like .asp-textbox and set the CSSClass property of the textbox to asp-textbox which will work across browsers.
Example:
<asp:TextBox ID="TextBox1" runat="server" CssClass="asp-textbox"></asp:TextBox>
/*CSS*/
.asp-textbox{background-color:red;}
Understand that all of the ASP processing is done on the server, before anything gets to the user. When the user's browser is applying stylesheets, it doesn't see any of your ASP code — all it has is the HTML that's been generated by your ASP code.
So what you're trying to find out is what HTML is generated by the textbox tag. The answer is: it depends on the way the textbox is defined. If the TextMode attribute is set to "multiline", then it's rendered in HTML as a textarea element. If it's set to "password", then it's rendered as an input element of type "password". Otherwise, it's an input element of type "text".
Your best bet is probably to assign a class to your textboxes and reference that in your stylesheet.
it's an input (of type text)
it renders as <input type="text" />
The only cross browser way is to add a class to the textbox using CSSClass property and style that using the class. Also you can use the id selector. When using the id selector check for naming container also.
.test { }
<asp:textbox id="txt1" CssClass="test" runat="server" />
Try the following:
.myclass td.col1 input
{
background-color: #D1FFC1;
}
This should work in IE also.
If I've understood you correctly, change the word "call" to "select", it's what CSS does (selects and element for styling). Use the property CssClass on the asp:Text in order to make it easily available to your CSS. Example:
.myClass { color: red; }
I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.
I'm trying to "single source" a form page which can be in edit mode or view mode. For various reasons, this isn't using the ASP.Net FormView or DetailsView controls.
Since there is no way to disable a textbox without turning its contents gray (well, we could "eat" all of the keystrokes into it, but that isn't very elegant either) and disabling a dropdown list or listbox isn't what we want, our first try was to duplicate all of the form input controls with a label and use CSS to select which ones are visible depending on the mode of the form. That works, but it's ugly to edit and the code-behind has to populate both controls every time.
We could control the visibility in the code-behind to avoid filling both controls, but we still have to add them both to the form.
So I had the idea to use jQuery to swap out the input controls for <label>, <div>, or <span> elements. This works, to some extent, by creating the appropriate selectors and using the replace() jQuery method to swap out the elements dynamically.
The problem is that I not only need to copy the contents, but also the styles, attributes, and sizing of the original input controls (at this point we're only talking about textboxes - we have a different solution for dropdown lists and listboxes).
Brute force should work - "backup" all of the attributes of the input control, create the new "read only" element, then replace the input control with the new element. What I'm looking for is something simpler.
Succinctly, using jQuery, what is the best way to replace a textbox with a label and have the label have the same contents and appear in the same location and style as the textbox?
Here is what I have so far:
$(":text").each( function() {
var oldClass = $(this).attr("class");
var oldId = $(this).attr("id");
var oldHeight = $(this).outerHeight();
var oldWidth = $(this).outerWidth();
var oldStyle = $(this).attr("style");
$(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
$("div#" + oldId).attr("class", oldClass);
$("div#" + oldId).attr("style", oldStyle);
$("div#" + oldId).width(oldWidth);
$("div#" + oldId).height(oldHeight);
$("div#" + oldId).css("display", "inline-block");
});
This may not suit your needs, but it's a possibility.
<input> and <textarea> tags support the read-only property. The behavior of read-only fields is slightly different than disabled. Here's what the HTML 4.01 Recommendation says:
When set, the readonly attribute has the following effects on an element:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful. ("Successful" means it will be submitted as a parameter.)
Another key difference is that elements with this attribute can be styled however you like. (You could remove or change the borders and background for instance.) So instead of having to create new elements and copy attributes, you could merely add or remove the read-only attribute.
You could then create a style for these fields "input[readonly] {}". Noting of course that popular versions of IE ignore the attribute selector in CSS. (So maybe just define a class that you add and remove.)
Why not use an edit in place plugin like Jeditable. This way you can generate your view mode and have each field editable at the click of a button.
When I've done this, I've had to "eat" each keystroke as you describe and mirror it into a "hidden" span tag that mirrors the <input or <select element. The span tags all have a css class that's styled using media selectors to only show for print, and the inputs have a css class that's styled to only show for the screen.
If you don't mind the static width that doesn't scale to the size of the text, you could also just style your <input tags to not show a border for print, but that's pretty ugly.