I am looking for a control which can show me selected image detail view which is actually gonna be bigger image in a modal pop up to show a better view of image to my customers. You know those standard modal pop-up resizeable to selected image original size. Dynamicly resizable modal pop-up is actually what I am looking for and of course it should be for Asp.net (if possible for 3.5)
I've searching for a while but I haven't been able to come up with a acceptable solution yet.
Thanks in advance.
Although not asp.net, but rather javascript based, Lightbox is the granddaddy of displaying a popup with a larger image. http://www.lokeshdhakar.com/projects/lightbox2/
There are many other similar open-source client-side 'controls' that would do what you want.
You may also need to roll your own from jQuery of YUI to build the resizeable requirement that you want.
You might want to have a look at Telerik:
http://www.telerik.com/products/aspnet-ajax.aspx
The have some controls that would probably get the job done.
Otherwise search for Infragistics, they have similar controls.
Related
I want to develop a web app where login form will appear in a RadWindow, which will slide from top and on close will go to top again. I have read many resouces but it's Animation property doesn't work like this. Do you have any experience with. What should I do? Please answer with some online example too. Thanks
Indeed, they do not work like that. So, it would be easiest if you animate the control's popup element yourself.
You can start with the FlyIn animation (it may be suitable for you, so you may not need to animate the appearance)
Then, you can use the OnClientBeforeClose event to animate the popup away yourself (there are many libraries that can do this for you and you can even use CSS animations), then hide it.
A similar approach is shown here http://www.telerik.com/support/kb/aspnet-ajax/window/details/close-radwindow-with-resize-animation-instead-of-fade
How can I make an entire jqGrid disabled/readonly?
I have a page with a logical "edit section" which I show when the user selects something to edit, and hide when the user is done editing (save or cancel). While the edit section is shown, I disable several other elements on the page. I would like to disable their ability to click in the jqGrid, so they can't change selected rows, re-sort, etc. But I cannot find a way to disable/enable the grid as a whole.
Apologies if this has been answered already - other questions seemed to focus on disabling only certain behaviors within the jqGrid.
Edit: Preferably, I'd like an approach that isn't dependent on yet another 3rd-party addon. Nothing wrong with them, of course! But my client has a degree of reluctance with them, so my life would be a little easier with a purely jQuery/jQueryUI/jqGrid solution. :)
You could use blockUI to block the grid.
Try using $("#lui_" + myGridId).show().
The grid has created this overlay internally an uses it as one part of the loader message.
You can just show it or hide it and it will disable/enable the grid for you.
I use fileUpload control in asp.net web page, so how could I control the "browse" button, just like any other button?
etc. I want to change "browse button" back color, border style.
Thank you in advance.
how could I control the "browse" button, just like any other button?
What makes you sure there will be a browse button? That's up to the web browser; some might not have a text-plus-browse arrangment at all. In particular Safari arranges the control quite differently.
For reasons of security, and because there is no standardisation about what a file upload control should look like, CSS gives you almost no control of the style of file upload controls.
Whilst the opacity hack mentioned in phoenix's link does kind of work, I wouldn't recommend it at all. There's no guarantee of getting the ‘clickable’ part of the input control lined up with the part of your ersatz control that looks clickable. Even on a single browser, different fonts and other settings will mess it up. For example on my browser with the quirksmode example only the right half of the textbox is clickable to open the browse dialogue; clicking the faux-button does nothing and clicking the left edge of focuses the faux-textbox. With fake-input you will be offering a shoddy and in the worst case broken experience to many of your visitors.
Live with the default upload styling, or augment it with a Flash uploader in the progressive-enhancement manner.
You can add a div layer on top of the fileupload control and style the div layer. Make the file upload control transparent by setting its opacity.
A good one
Styling an input type="file"
I want to Resize Gridview columns using javascript. Below is an example.
I think this plugin does what you requested http://www.ita.es/jquery/jquery.grid.columnsizing.htm
Though I would suggest checking out this customizable jQuery based grid aswell http://www.trirand.com/blog/
I would recommend using jQuery if you want to do this yourself. You can grab the click event of the header row (or wherever you want), and then you can use the x/y of the mouse to drag a line. Once the mouse is released, you can troll through the table and reset the width of the 's.
Otherwise, there are several JavaScript table controls on the internet that you could use.
You can try open-source project ASP.NET CoolGridView control. It works well with IE 6/7/8, Firefox 3.0 / 3.5, Safari and Chrome. Supports resizable columns and fixed headers.
http://johnsobrepena.blogspot.com/2010/02/coolgridview-february-2010-release.html
The example you are refering to is using ExtJS it looks like. There's also jqGrid (an extension to jQueryUI), and others. If you are looking for an ASP.Net Ajax grid control there are several options from many different component vendors (Component One, Infragistics, DevXPress etc).
I'm only presuming here that you want a server-oriented Grid component because of the term "GridView" in the question. I would suggest searching for: "ASP.Net Ajax" grid control. This will give you results that may best suit your needs.
I'm looking for the best way to implement a modal popup in ASP.NET of another ASP.NET page. I'm coding for Firefox 2.x+ and can use JQuery, but I'm not very familiar with it.
I see a lot of solutions that use "AJAX", but I'm not sure in what context, so I haven't gone down that route.
I'm using the jQuery UI Dialog plugin. Works very well. Documentation for the plugin can be found at http://docs.jquery.com/UI.
I have used both the ajax modal extender as well as the jQuery jqModal, both have worked pretty well. At the end of the day, this decision should come down to what the rest of the code is like, what your comfort is with each, etc.
If I were to pick an option today, I would probably pick the jqModal or simple modal for jQuery. I'm pretty comfortable with these now.
jqModal
SimpleModal
For simple modal displays, I've found BlockUI to be a great solution.
For example, here's a post about using BlockUI as a modal progress indicator, and here's one about using BlockUI to display a modal confirmation dialog.
If you need something more complex, I'd second the jQueryUI Dialog.
i've used AjaxControlToolkit but jQuery option suggested by #tvanfosson seems a lot nicer
You could use radWindow from Telerik, the jQuery UI Dialog plugin like tvanfosson recommended or you could take a look at
http://vision-media.ca/resources/jquery/jquery-popup-plugin-review which review some jQuery plugins for popups.
Having only expericence with radWindow, I can tell you that with radWindow, you might have to use some hacks and quirks to make it work properly, but the result is good if you put enough time into it.
I make my own, using DOM methods. I've found it to be a lot simpler than adapting any of these plugins to our CSS.
A modal is simply an absolutely positioned window with a background.
We make ours using a larger transparent container with floated contents.
I use a function that returns some html with the floated contents. The class used for the modal box should be absolutely positioned with a high z layer.
function create_modal(doc_id,css_class,append_to)
{
if(typeof append_to==='undefined'){append_to='content';}
var container=document.getElementById(append_to);
if(!container){return false;}
var modal_box=document.createElement('div');
container.appendChild(modal_box);
modal_box.id=doc_id;
modal_box.className=css_class;
return modal_box;
}
var modal_window=create_modal('modal_id','a_css_class');
if(!modal_window){return false;}
modal_window.innerHTML=function_or_var_providing_html();
so, it's all nice and simple without some 10 or 15 k plugin!