I'm coding a website and trying to work out best practise for displaying a progress cursor. As my site is using an Ajax request to do the main heavy lifting, I've simply selected the "progress cursor" in CSS and apply it via jQuery at the start of my Ajax request and set it back to cursor:auto by applying another class with jQuery when I get the response back. Now this works well on my PC and laptops, but does not seem to work on my iPad. Everything works fine but the cursor on the iPad does not change when the Ajax request fires. Has anyone had a similar 'problem' or am I missing something that needs to be done on iPad / Mac, or perhaps not doing this right?!
My CSS code to set cursor :
body.wait { cursor: progress !important; }
My jQuery to apply cursor at start of Ajax request
$('html, body, button').css("cursor", "wait");
..and to set it back on completion of request:
$('html, body, button').css("cursor", "auto");
Many thanks for any ideas of how to get it working on iPad!
Related
i have an webapp and i need to onclick change css style, but i need to save this change in the webapp instaled into the phone of my user, and only in his phone. The javascript for onclick change css style it's working but i don't have no idea to how to save this css changes.
Can somebody help me with this?
Since now thanks
In general CSS styles can't be directly saved on an HTML client.
What you can do is make an Ajax call back to your server and save the information there. The next time the user asks for the page send HTML with the appropriate style class already on the element you wish to style based on the saved information.
There are several hackish client side possibilities involving JavaScript & cookies or local storage but I would avoid that sort of solution if at all possible since it's very likely to lead to an annoying flicker as the page loads and renders styled one way and then the JavaScript finally runs and corrects the style.
To elaborate on my comment:
el1.addEventListener('click', function() {
el2.style.color = 'red';
localStorage['color'] = el2.style.color;
})
And then on startup:
window.addEventListener('load', function() {
if (localStorage['color']) {
el2.style.color = localStorage['color'];
}
}
Of course, you may want to add error checking and fallbacks as appropriate.
I have a JavaScript class that displays a partially-opaque div over top of the content of another div when an Ajax request is sent to the server.
When the request returns, the JavaScript class hides the partially-opaque div....it works great...sort of.
Right now, in IE9, when the Ajax request is complete, the partial-opacity is only hidden if the user moves their mouse.
So, my question is, how do I force the browser to do what it's supposed to do?
This is my extremely simple function that is called after the request returns to the browser:
_hideBlockingDiv: function() {
if (this.get_blockingDivClientID()) {
var blockingElement = $get(this.get_blockingDivClientID());
if (blockingElement != null) {
blockingElement.style.display = 'none';
//I know that this method is executing correctly because I "hi" showed
//up properly...but the element remained visible:
blockingElement.innerHTML = 'hi';
}
//if I add the alert then everything works fine in IE9
//if I don't then the page will remain the same until the user moves their mose
//alert("done");
}
}
Please note that I am not using JQuery.
I am using the AJAX.NET library since I am a .NET developer (and JQuery didn't become popular until years after I implemented my Ajax-enabled server controls)
Thanks
-Frinny
How and where do you call the _hideBlockingDiv function from? Since you are using MS Ajax library, you might want to have a page loaded handler on client side and call this function from within that handler. So basically
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
_hideBlockingDiv();
});
Hope this helps!
It turns out that the problem only exists in the beta version of IE9 that I was using at the time. This problem went away once the full version of IE9 was released.
I've inherited some code that I need to debug. It isn't working at present. My task is to get it to work. No other requirements have been given to me. No, this isn't homework, this is a maintenance nightmare job.
ASP.Net (Framework 3.5), C#, jQuery 1.4.2. This project makes heavy use of jQuery and AJAX. There is a drop down on a page that, when an item is chosen, is supposed to add that item (it's a user) to an object in the database.
To accomplish this, the previous programmer first, on page load, dynamically loads the entire page through AJAX. To do this, he's got 5 div's, and each one is loaded from a jQuery call to a different full page in the website.
Somehow, the HTML and BODY and all the other stuff is stripped out and the contents of the div are loaded with the content of the aspx page. Which seems incredibly wrong to me since it relies on the browser to magically strip out html, head, body, form tags and merge with the existing html head body form tags.
Also, as the "content" page is returned as a string, the previous programmer has this code running on it before it is appended to the div:
function CleanupResponseText(responseText, uniqueName) {
responseText = responseText.replace("theForm.submit();", "SubmitSubForm(theForm, $(theForm).parent());");
responseText = responseText.replace(new RegExp("theForm", "g"), uniqueName);
responseText = responseText.replace(new RegExp("doPostBack", "g"), "doPostBack" + uniqueName);
return responseText;
}
When the dropdown itself fires it's onchange event, here is the code that gets fired:
function SubmitSubForm(form, container) {
//ShowLoading(container);
$(form).ajaxSubmit( {
url: $(form).attr("action"),
success: function(responseText) {
$(container).html(CleanupResponseText(responseText, form.id));
$("form", container).css("margin-top", "0").css("padding-top", "0");
//HideLoading(container);
}
}
);
}
This blows up in IE, with the message that "Microsoft JScript runtime error: Object doesn't support this property or method" -- which, I think, has to be that $(form).ajaxSubmit method doesn't exist.
What is this code really trying to do? I am so turned around right now that I think my only option is to scrap everything and start over. But I'd rather not do that unless necessary.
Is this code good? Is it working against .Net, and is that why we are having issues?
A google search for
jquery ajax submit
reveals the jQuery Form Plugin. Given that, is that file included on your page where the other code will have access to the method? Does this code work in Firefox and not IE?
Seems like there was too much jQuery fun going on. I completely reworked the entire code block since it was poorly designed in the first place.
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.
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.