Set Fileupload size through Jquery - c#

I have FileUpload Control on my Page:
<asp:FileUpload runat="server" ID="fuAttachment" CssClass="fileUploadCSS" size="76" />
I want to change size of this Control on Button's Click event though Jquery.
How do i set it? because ($("#fuAttachment").size doesn't working. and ($("#fuAttachment").width returns null
Thanks in Advace

Try this for your button onclick method:
$('#fuAttachment').css('width',200);
You can find more information about the jQuery css method here
Update
During my conversation with devjosh i came up with this line of code
$('#fuAttachment').attr('size', 50);
It seems that the size attribute is much more supported in modern browsers than change the css width property.
You cann see a working example here: http://jsfiddle.net/CY3jG/1/ (Tested in IE 8 and FF 9)

You have control over various elements of the FileUpload control's style. For design purposes you may want to temporarily add a solid border, it will give you a better perspective to see how the width is actually adjusted. In FireFox and Chrome there is no border around the textbox of the FileUpload control, there is for IE. Without the border it appears that width doesn't change in FF, Chrome. For example, the script below changes font size, background color and the width (which will be clear with a border added).
<script>
$(document).ready(function() {
$("#FileUpload1").css('font-size', '25');
$("#FileUpload1").css('background-color', 'red');
$("#FileUpload1").css('border', 'solid');
$("#FileUpload1").css('width', '800');
});
</script>
Hope this helps.

Related

C# -> Detetcting Browser Width

I have a web application in C#. I need to be able to detect the user's browser width. How is this possible? I know that you can detect the browsers width using javascript/jquery....but how can I make this available serve-side (from within my C# code).
I would make a hiddenfield and fill it by using jQuery http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
So you can choose window or document and fill a hiddenfield
<asp:HiddenField ID="hf" runat="Server" Value="" ClientIDMode="static" />
Please note that clientidmode is only for asp.net 4 and above
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
$("#<%= hf.ClientID %>").val($(window).width()); //asp.net 3.5 or lower
$("#hf").val($(window).width()); //asp.net 4 or higher
edit another option is to use jquery and do an ajax post to an *.ashx or *.asmx
That's impossible unless you combine client script functionality with server side code.
You could probably use JQuery to get browser width and set it to a hidden field.
http://api.jquery.com/width/
The thing is that you would not have that value on pageLoad, but only after page is rendered, JQuery initialized and postBack created.
Does that help?
The possible solution could be get screen size from javascript and call a method on server (using Jquery) that will save the details in the session.
Can you explain, for what purpose do you want use this value in the Server side code?
If you want to control placement of elements on the page etc. you could use Media Query that will resize your control according to the browser width.
On server side try these three properties
Request.Browser.ScreenCharactersHeight;
Request.Browser.ScreenCharactersWidth;
Request.Browser.ScreenPixelsWidth;

How to add style to a image when you hover over it, in asp.net website

I have a image in my website, How can I add style to it so that it looks like a real button. now when I click it or move the mouse over it there is no changes to the image. when click or the mouse it over it how can I add style to it. Thanks
<asp:ImageButton ID="Img_ComposeMessage" PostBackUrl="~/SendMessage.aspx" ImageUrl="Styles/Images/ComposeMessage.png"
runat="server" />
Sounds like something you can easily accomplish with JavaScript / jQuery; just hook into the mouseover event and change the image then.
If you're worried about flash of unstyled content, you could switch to using css background/spriting for your image along with an asp:linkbutton instead of an asp:imagebutton
Here's a quick tutorial to get you started - http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything
You have to use Javascript and/or CSS styling to change the ImageButtons properties.
Client Side javascript method calls can be added to the ImageButton's OnClientClick Property.
To ensure you have a static ID property on the control when rendered, for use with CSS effect or JQuery, use the ClientIDMode Property, set it to Static, the ID property you define with be rendered.

How do you use AJAX AlwaysVisibleExtender to Keep the Original size of a control on a website?

I am currently making a asp.net form that will have a Copyright bar at the bottom of the page. I have a panel, which has a width of 100%, at the bottom of the page. I want that to be always visible while people are scroll through the website, but as soon as I add the AJAX ALwaysVisibleExtender control to the panel, it resizes the panel to a small box.
How can I modify the AJAX AlwaysVisibleExtender to keep the original format and at the same time stay on top of my content. I tried adding stuff like style="width:100%" and all sorts of HTML coding, but it doesn't seem to help. It errors out all the time.
Thank you
I'd suggest possibly using some javascript to keep the box the full width of the page (ideally using something like jQuery)
Without seeing what your code looks like, it's hard to know completely, but perhaps add something like this as a script
$(document).ready(function () {
$(window).resize(function() {
$('#<%= pnlCopyrightBar.ClientID %>').width($(document).width()));
});
$('#<%= pnlCopyrightBar.ClientID %>').width($(document).width());
});

A Simulation to Disable Page Elements and Display UpdateProgress Control

Am trying to disable page elements & display update progress control in my application. To make it work, I have applied style sheet with the property
filter:alpha(opacity=85);
but its showing an error "filter is not a known CSS property name".
Can anyone suggest me what can be done for this?
Also give me an idea of disabling page elements when displaying update progress control?
Filter is IE specific, use Opacity for other browsers.
http://www.quirksmode.org/css/opacity.html
Try this
<!--[if IE ]>
.youeElemet{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; // first!
filter: alpha(opacity=85);
}
<![endif]-->

How to use webbrowser control to turn the div visibility into visible?

I'm currently using System.Windows.Forms webbrowser control to automate a webpage. Everything works fine to manipulate the htmlelement through webbrowser.document. However unfortunately i have to click a button which is embedded in a hidden div. so my question is, how should i turn this div 's visibility to visible and click on the button in it?
This is the div which is visible after it has been turned into visible:
<div class="box" style="visibility:visible">
<button />
</div>
Ps: the div doesn't have id but only class name (so i think it is dealing with css style)
Since i'm not able to detect with webbrowser.document , how can i retrieve it ? or how can i change the css of class = box using webbrowser.document?
Try:
yourWebBrowserControl.Document.All["YourButton"].InvokeMember("click");
If I can ask for a bit of clarification: what are you trying to accomplish?
The webbrowser control essentially encapsulates the IE rendering engine and allows you to navigate to a document or URI. When you click this button, are you navigating somewhere? Or is this a form to be submitted?

Categories