Im writing a web site which has a page that must show an image. This image is created by an HttpHandler using querystring commands, how can I make this works without any kind of flickering?
Thanks in advance, if you need some code Im happy to share it!
You could use 2 UpdatePanels and switch them after each "reload":
Load Frame1 into Panel1 and hide Panel2 at Postback/Pageload
Load Frame2 into Panel2 per AJAX and after the Image is loaded show Panel2 and hide Panel1
Load Frame3 into Panel1 per AJAX and after the Image is loaded show Panel1 and hide Panel2
aso....
You then could even make a smooth fading from Panel1->Panel2 using JS (see HERE or easier with jQuery fadeIn() and fadeOut()).
I used the following code for a project, where I had a similar problem. Maybe this can help solve your issue.
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
After preloading the images, the transition was very smooth.
p.s. I don't remember where I got this, so I can't give credit. Sorry.
Related
Hi coder i am new to jquery. i serach alot but fail to find this what i am looking is not a customize application, i just want process or method how we can achieve this.
Suppose i have a menu or link like below
Home
About
Contact
As a link or menu and when i click on that any of the link or menu i srcoll down to position of the page where details for it present..
Just like This link where click on the above menu scroll to the
position of it on the page
This should be a single page application.
Any idea's or tutorial for this i want to do it jquery.
I can use scrollup(), scroll(), animate() but how to proceed this that is the main concren any help would be appreciated.
Are you by any chance talking about HTML anchors?
http://www.echoecho.com/htmllinks08.htm
This is the best link for your solution
Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation
In this link you get how to stick your menu using this
$(window).scroll(function () {
var window_top = $(window).scrollTop()+12; // the "12" should equal the margin-top value for nav.stick
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top) {
$('nav').addClass('stick');
} else {
$('nav').removeClass('stick');
}
});
use scrollto.js file to scroll through the page and call it in that function for smooth scrolling
$("nav a").click(function (evn) {
evn.preventDefault();
$('html,body').scrollTo(this.hash, this.hash);
});
I hope this will help you
$('html,body').animate({scrollTop: $('#scrollToId').offset().top});
Check this solution jQuery scroll to element
I am trying to make T-shirt design website. User customize its t-shirt by putting diffrent div and image over t-shirt div which has t-shirt in background using jquery now after final customization I want to save the picture of t-shirt/div so I can save customization.
How can i save customization div into image?
You can use the html2canvas library that can render to "canvas" your div and then make it image send it back to you.
You can get the code, and see examples here.
http://html2canvas.hertzen.com/
Here is the conversion from canvas to image for get it back:
http://www.nihilogic.dk/labs/canvas2image/
My Concerns.
What if a javascript error appears and the user lose whats make of ?
What if user not use a new modern browser that can handle the "canvas" so that can render to image whats inside the div.
The other way is to use flash and some programming on flash.
Ideally, you'll want to use server side processing to generate your images- rather than a DOM-based approached. You may want to consider using GDI+. Something along these lines should get you started (assuming the context of an ASP.NET page):
tshirt.aspx
var imagePath1 = #"C:\path\to\tshirt.jpg";
var imagePath2 = #"C:\path\to\graphic.jpg";
var bg = new Bitmap(imagePath1);
var overlay = new Bitmap(imagePath2);
var gfx = Graphics.FromImage(bg);
gfx.DrawImage(overlay, new Point(50, 50));
Response.ContentType="image/jpeg"
bg.Save(Response.OutputStream, ImageFormat.Jpeg);
Then on the page where the image is needed:
<img src="tshirt.aspx" />
Using the same code above for "tshirt.aspx", you can replace the call to bg.Save(Stream, ImageFormat) with bg.Save(filePath, ImageFormat) to write the generated image to disk.
I'm working on a screen reader and till now I was successful to get the whole text of a page in IE. But I have no idea how to get the current visible part of page or to get the current paragraph that is under the cursor in IE.
I don't mean to give me the code, but just to recommend me if there is a way to do it using APIs or similar things.
from what I found I think it’s not doable using Accessibility APIs.
I GREATLY appreciate any ideas and helps.
If you're application is a WinForms app, you might want to look into using the Browser control. I'm still a bit unclear about what you're looking for, but I think the browser control is what you'll need.
Here's a similar question that may point you in the right direction:
C# WebBrowser control -- Get Document Elements After AJAX?
To access the contents of a paragraph when the cursor moves over it you could use javascript:
var oP = document.body.getElementsByTagName('p');
for (var i = 0; i < oP.length; i++) {
oP[i].onmouseover = function() {
var content = oP[i].innerHTML;
// Do whatever you want with content.
};
}
This will fire the onMouseOver event when cursor moves over a paragraph and you will then be able to read it's content.
I have a situation that I am stuck with, and hoping someone can help. I am building a .NET/C# web application in which I have a tabbed panel layout, and when the user clicks on each of the tabs the display panel is updated using javascript to hide and show some divs. None of these clicks cause postback, it is all client-side, so I can't use viewstate or session.
What I want to do is somehow remember which panel was last visible when the page is refreshed, yet without posting back to the server I am unsure how to do this. I have tried a hidden field but obviously its value is reset every time because the form is never submitted. I do know that I can achieve this using cookies but its a little annoying to implement for such a (seemingly) trivial operation ... but maybe this is the only way?
Does anyone have any more elegant solution to this problem?
Using a function like this to show and hide tabs):
function makeCurrent(tab) {
if (tab.title == 'Manage orders') {
document.getElementById('panelOrders').style.display = "block";
// Hide others
document.getElementById('panelAccounts').style.display = "none";
document.getElementById('panelProducts').style.display = "none";
document.getElementById('panelSettings').style.display = "none";
// Remember last viewed panel
document.getElementById('hdnCurrentlyViewing').value = "orders";
}
The panels are just divs with style.display controlling their visibility. Not sure if its useful to post HTML code because its fairly self explanatory ...?
You can make this happen without a postback is to make an AJAX call from Javascript where you tell your server what the current panel is as you switch it.
I prefer using a framework like JQuery or Prototype to help make these AJAX calls myself.
I think Hidden field will be the best option. have you tried ASP:HiddenField? It can be accessed across postbacks.
But if you still have some reservations with postbacks and hiddenfield you can also use cookies from JS http://techpatterns.com/downloads/javascript_cookies.php this is helper lib for cookies manipulation within JS.
Regards.
I have a C# webbrowser that holds an html page that has several iframes. Each iframe holds an arbitrary html file, often with images. The img tags often don't have any width or height attributes (ie, it's often just <img src="someimage.jpg">).
I've read about how to size iframes based on their content, and have gotten it to work using jquery. The following jquery snippet is present in the iframe's html:
$(document).ready(function() {
$('img').each(function(){
$(this)
.bind('load readystatechange', function(e) {
var iframes = window.top.document.getElementsByName(window.name);
if (iframes.length == 1) {
window.top.DoResizeFrame(iframes[0]);
}
})
});
DoResizeFrame is defined in the parent html file (the one that the webbrowser is showing):
function DoResizeFrame(fr) {
if (fr && fr.Document && fr.Document.body) {
fr.style.height = fr.Document.body.scrollHeight + 'px';
fr.style.width = fr.Document.body.scrollWidth + 'px';
}
}
I also call DoResizeFrame from the parent document's $(document).ready event. This works great - if there are no images, the document's ready event triggers a resize. If there are images, each time an image is finished loading, the iframe is properly resized.
However, loading a large image causes the iframe to be improperly sized until the image is completely loaded. Since I rarely have the width and height attributes in the image tag to work with, I figured I could use jquery to listen to the readystatechange event of the image, and when it's "loading", pick up the size of the image and properly size the iframe even while the image is still loading. Unfortunately, at least in IE7, readystatechange=loading only happens after the image is done being downloaded.
Does anyone have any ideas how I can detect the size of an image referenced in my html simply by "<img src="someimage.jpg">" without waiting for the entire download to happen? I'm trying to provide the best user experience by sizing everything correctly, so that the user can read the rest of the iframe even if a large image is taking a while to download.
thanks!
jean
One dependable way to be sure is to ask the server the size of the image before downloading it. I've done this using .net, it's quite easy.