I search a Script / Expansion / Way to have a tooltip like this:
http://s3.imgimg.de/uploads/Untitled37105acbpng.png
That means:
- it must be easy to handle within GridViews (specially in RowBound-Events, so every Row will have a own Tooltip for a coloum).
- Must be have the option for delay when hover over the item (I don't like the default ASP.ToolTip because you can't set the delay down!)
Hoe you have an idea :)
You could use f.e. this jQuery plugin.
Here are some links to get started:
Using jQuery To Create Stunning Tooltips in your ASP.NET Applications
Displaying-Row-Details-Tooltip-on-GridView-using-JQuery
Related
I am new to ASP.NET. I made a simple application which performs some of the mathematical operation like addition, subtraction and so on. Now I have many Labels for each output(add, sub, multiply) . Now I want to display label(add output) first and then after 5 second I want to display next label and so on......
Can anyone help me out. Thanks.
First hide all the labels except 'ADD' using
$("#labelId").hide(); \\do this for all the labels except Add label
then
$("#labelAdd").delay(800).show(); \\give the delay as you like in milliseconds
$("#labelSub").delay(800).show();
$("#labelMul").delay(800).show();
Give a reference to jQuery library in head section then,
Put these scripts inside <script> tag inside
$(document).ready(function(){
//above code here.
});
You should definetly read some javascript or I would totally recommend jQuery, jQuery delay and jQuery show. Those are the 3 things you need.
You hide your label with some css visibility:hidden or display:none and then you can show it delayed with .show() from jQuery.
Have you done anything with javascript/jquery so far? need more help?
I am using master page where i need to move value of one listbox to the other with the help of jQuery I tried many ways but wasn't able to hit the nail.
The methods I tried are as follows:
$("[id$='ModuleMasterListBox option:[#selected]']").appendTo($("[id$='ModuleSelectListBox']"));
$("[id$='ModuleMasterListBox option:#selected]'").appendTo($("[id$='ModuleSelectListBox']"));
var module = $("[id$='ModuleMasterListBox']").val();
module.appendTo($("[id$='ModuleSelectListBox']"));
These are the methods I tried which failed - please help me out....
You should be able to do it like this:
$("[id$='ModuleMasterListBox'] :selected").appendTo("[id$='ModuleSelectListBox']");
From your markup and the # sign it looks like you're using an outdated version of jQuery, you may want to consider upgrading. In the above we're using the attribute-ends-with selector to get the <select> the using :selected to grab the selected <option> before moving it.
Keep in mind since it looks like you're using ASP.Net this will by default throw validation errors on the server-side, you'll have to disable page validation for it to allow items it didn't bind.
I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
style> .ms-long{width:100px;} </style>
but that changes every SharePoint:FormField size, not just one.
Any help would be great! Thanks!
I've done this before using jQuery. With jQuery you can query dom elements (ie. fields) by an attribute of your choice (e.g. the attribute title) and the manipulate it. See Jan Tielens Series about integrating SharePoint and jQuery. http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx
Or just google sharepoint + jquery.
I'm using the PagingBulletedListExtender with an IndexSize="1". This displays alphanumerics relevant to the list items.
Is there a way of having all items in the collection be displayed?
Never mind - this has now been accomplished using JQuery.
I have rather a complex UI. However, for the purpose of this question, let's say that there is a HTML table that renders UILayout1 by default (say default mode). There is a button that a user can use to toggle between the default mode and a preview mode (UILayout2)
When in preview mode, there are some columns in the table that are invisible and there are reordering of rows. I am using JS (jquery) on load to check the mode and change it accordingly.
The table and the toggle button are in UpdatePanels.
Functionally, everything works as expected. However, when a user toggles between default and preview mode or vice versa, there is this short time interval in which the the table renders in default and then JS runs to make changes.
This results in degraded UI experience. Are there any creative ways to avoid this "flicker"?
you can use DIVs or don't use update panel in your UI generation use any concept else
The problem is likely to be that your code is running on load. I'm assuming that you're doing this using the standard jQuery method of running code on load, and not using the window's onload event. In any case, even using jQuerys $(document).ready(...) will be too slow if you have a lot of other javascript files to load, as the .ready event isn't fired on the document until all javascript includes have loaded.
You should be able to work around the issue by including your code that modifies the table just after the html for the table in your page and not running it on load i.e. make sure you don't wrap it in $(document).ready(...);
For this approach to work, you will need to have all javascript required by the code which is modifying the table included earlier in the page.
If you have other non-essential javascript files included, you should try to include them later in the page.
I'm not 100% sure how being inside an update panel will affect it - you will need to make sure that your code is being re-triggered when the updatepanel updates, but I believe this should all happen automatically.
Presumably your UI is controlled by CSS? You might be able to get rid of the flickering by adding something like this at the start of your JavaScript or in the <head> of your HTML:
if (previewMode) {
document.documentElement.className = 'preview';
}
Then if you modify your CSS rules that apply to your preview mode to reflect the HTML element having the class="preview" to something like:
.preview table .defaultMode {
display:none;
}
hopefully your table should render correctly first time and will not need to be re-drawn.