show progress image while loading asp.net page - c#

I have an asp.net page, with couple of Divs, some of these div's get the image path from database and show the image in a smaller version (thumbnail). and as soon as user click on thumbnail, I use ajax Modal popup to show the full size image, what I need to have is to have a progree image(gif), on every thumbnail image while loading the asp.net page for the first time, I konw that it is possible to use UpadePanel, but I need the actual working code,or any other way to achieve this,
Thanks in advance

Well, if you are posting back, udpate panel can work; but you can programmably in JS do this yourself, or also consider using a JS plugin like lightbox: http://www.huddletogether.com/projects/lightbox2/
Which has that feature and looks very cool.

Related

WebPage Render Position Controller

First question but I really am in a jam.
I have a webpage render which is working perfectly. However, I need to be able to control the initial display position (almost like a href #anchors in HTML) but without any access to the site content.
From as far as i can see i have no access to the scrollBars other than the bool to enable / disable..
Is there anything i can do to even force a scroll down of 20% for example, and then I can create a form to adjust later on.
Any assistance would be HUGELY appreciated although from what I have researched it seems unlikely.
I have the regular windows WebBrowser Render
private System.Windows.Forms.WebBrowser m_webBrowser;
Thanks !
--This is for c# standalone application.. Not WebBased.
Have you tried using jquery?
I personally use the animate method from jquery to scroll to certain elemnts in my webpage.
Example:
$('html, body').animate({scrollTop: $('#the-element-you-want-to-scroll-to).offset().top}, 1000);
PS: For the last parameter you can control the time it will use to scroll to destination, that offering you a nice effect.(in milliseconds)
I managed to resolve it using a strange method..
I basically injected some javascript into the rendered HTML manually.. Then the rest was easy.
i used something like this :
string updatedSource = WebBrowser.DocumentText.Replace("Google", "Foogle");
string extraSource =
"<html><body>Script goes here <br/>" +
"<div><p>BLA BLA BLA</p></div></body></html>";
WebBrowser.DocumentText = extraSource + updatedSource;
WebBrowser.Update();
Maybe it will help someone.

Set an image in UI

Im using .net c# MVC3 Model. I need to show a gif called loading when I click save on the page. I used <img src="sourcepath" alt="loading" style="display:none"/> and trying to display it whenever user clicks save button using jquery. I have stored the image temporarily in views folder. Unfortunately, i could not see image on the screen. I can see its division with a small red cross cancel button.
Pls Help
If you're seeing the broken image icon, it means your src "sourcepath" is wrong. You would normally put static content in the Content folder of your site, and access it using /Content/imagename.jpg or /Content/Images/imagename.jpg or similar.
Try to use the search, here you can find an solution the show an spinner when doing ajax requests:
How to show loading spinner in jQuery?

Displaying a content page as popup in asp.net,using

I have a content page(Say.. invoice.aspx) in asp.net application with master pages.
The content page(invoice.aspx) is using a gridview, which displays records from database.
Currently i am navigating to this page using - Response.redirect("invoice.aspx") and this is working fine.
But i need to display this page as pop-up from calling page, so that this popup invoice can be seen on the top of other pages.
Please help me if this can be done using javascript or some other way.
Thanks in advance..
A page popup can be implemented using a div as a container with a different style (opacity, window position, size etc) and has a higher z-index than the rest of the page.
thus basically you need a structure like
<div class="overlayOuter">
<div class="overlayInner">
<!-- external content to be loaded here -->
</div>
</div>
and now using AJAX you load the invoice.aspx page to the inner container and show the container and reduce the opacity of the outer container.
There should be libraries out there that let you do this. you need to explore that on your own.
You can use modal popups for the above scenario:
one example can be found here: http://sandbox.scriptiny.com/tinybox2/
its easy and not much code you need to write and also can load popup as an iframe so postbacks can be handled without posting back parent page or you can use ajax
function OpenWindow(strChildPageUrl) {
var testwindow = window.open(strChildPageUrl, "Child", "width=700px,height=650px,top=0,left=0,scrollbars=1");
testwindow.moveTo(100, 0);
}
</script>

ASP.net Passing Links from Page to Page

I am trying to display a page into an IFrame.
The IFrame is displayed into a fancyBox overlay popup.
I have a list with the http links (gets compiled at runtime and it constantly changes).
Using a global variable I can access the list with the links.
But the http link in the list must match the link I have clicked.
If I can even get the link which I have clicked it will also be enough (the link brings up a fancyBox popup so it doesn't actually bring up a new page so to speak)
How to do that?
You have to write some tricky code to achieve this, main goal is to edit the dynamically added page content by adding wrapper tag (with onclick event) around all the links, writing javascript to be called using that wrapper to findout which link has been clicked,
You can try this by doing following steps
1) Get the content of IFrame , using the following JQuery code you can get the content of IFrame
var $currentIFrame = $('#myIFrame');
var content = $currentIFrame.contents();
2) Now manupulate these content by finding all the links inside that page and wrapping them with a tag that should have onclick event e.g. span , you have to write some javascript function to fire on a link if user clicks it.
see the following link for how to manipulate content
Get all links inside iframe and add blank target attribute

Popups with complex functionality using jQuery

I am using jQuery to simulate a popup, where the user will select a series of filters, which I hope to use to rebind a ListView in the original window.
The "popup" is opened via an ajax request and the content is actually a diferent aspx file (the rendered output is injected into a div that acts as the popup).
I have another ListView in this popup, and it has pagination.
My problem is that since the popup is in reality html content inside a div in the same page, when I try to paginate, the whole page postbacks and is replaced with the aspx that has the filters.
How can I fix this?
I tried using an update panel to contain the ListView but it didn't work.
$("div.yourthingie").hide();
Will hide the part you want to show :) Instead of generating the popup on the fly, leave a small part already made, and hide it in the begining, when you need to show, unhide and add the information you need to.
Hope it helps
Either get rid of the HTML "crust" and just produce the <div> with its contents, or use an IFRAME.
First, let's think through what is happening. When you submit the original page, you are taking a "normal" Request/Response trip to get the code. On the page is a JQuery AJAX bit that fires off what is essentially a modal dialog. The desired effect is the user plays with the new page until they have figured out their filters and submits back. The problem is this "modal page" loses information when someone paginates.
The solution to this is fairly simple, in theory. You have to store the "filters" in the popped up page so they can be resent, along with pagination information. OR you have to cache the result set while the user paginates.
What I would do to solve this is create a static page that has the "filters" in place and work out the AJAX kinks separate from having the page post back to a parent page. Once you have all of the AJAX bits working properly, I would then link it into the popup routine and make sure the pagination is still non-problematic. THe final problem is creating a JavaScript routine that sends back to the parent page and allows the parent page to send its JQuery bits back to the server.
I am not sure about the HTML DIV part of the equation and I think you can solve the problem without this solution. In fact, I believe you can make the "modal popup" page without invoking AJAX, if it is possible to either a) submit the filters to apply via the querystring or b) fake a form submit to the second page. The query string is an easier option, but it exposes some info. Faking a form submit is not that difficult, overall, but could be problematic with a popup.
I am just firing off some ideas, but I hope it spurs something for you.

Categories