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?
Related
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
I have an HtmlEditor from asp controltoolkit.
That creates an iframe with a couple things i need (bold letter, etc).
I need to add text to that iframe with jquery.
so long i have this.
$('#<%= tbDescripcionInsert.ClientID %>').contents().text(textoMercancia.substring(15, textoMercancia.length));
My problem is that the things im using from the editor (bold letter etc) disappear when i add the text from jquery.
What can it be?
What is the best way to add text into an iframe with jquery?
Thank you very much.
If you want to handle markup, not just text, use html() instead of text().
the problem is that
.text('blahblah')
replaces the text so you must use
.append('blahblah')
or some similar command
EDIT
seeing your post this might be more effective
$('#<%= tbDescripcionInsert.ClientID %>').contents().find('body').append('blahblah')
Try something like:
var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
d.open(); d.close(); // must open and
close document object to start using
it!
// now start doing normal jQuery:
$("body", d).append("ABC");
Thank you all for your help.
I found a way to solve this:
$('#<%= tbDescripcionInsert.ClientID %>_ctl02_ctl00').contents().children().children('body').html(textoMercancia.substring(15, textoMercancia.length));
this way i can access the exact part of the iframe where the information is supossed to be loaded.
hope this help someone in the future.
I am new to javascript and jquery.
I have written some javascript code for some client validation.
document.getElementById(spnError).style.display = 'block';
This is how I am showing a span if there is some validation issues in the form. I want to use Jquery to show this span. I would like to slide it down slowly.
Since you're using a variable for the ID, you need the #ID selector and .slideDown(), like this:
$('#' + spnError).slideDown('slow');
without the # if spnError is say "mySpanElement", it's looking for that tag name, <mySpanElement>...to search by ID prepend a # to it :)
You can read more about jQuery selectors here and view a complete list here.
Replace milliseconds with how long you want it to take
$("#spnError").slideDown(milliseconds);
There are also three built in values
$("#spnError").slideDown("slow");
$("#spnError").slideDown(); //default speed
$("#spnError").slideDown("fast");
I have a table with some data. All data is contained in dropdownboxes and textbox. But it isn't easy to see, what is newly written input and what is data from the database.
So I want to create a (edit) after these boxes, and replace the boxes with a literal where the contained value in the dropdownbox stands. When the edit-button is pushed the literal goes away and the dropdownbox appears instead, so it is possible to edit the data. This is all, the jQuery don't have to save the data to database, I have functionality to that in a save-button.
I don't want to use any extra plugin to jQuery, because it seems to be a fairly simpel task.
Any good ideas?
Thw whole code i cant write here, change as your wish.I didn't clear your question.
try this
when click edit
$(document).ready(function(){
$(".edit").click(){
$(".dropdown").show("slow");
$(".edit").hide("slow");
});
stylesheet.css
.dropdown
{
display:none;
}
after edit just reverse the code;
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.