Develop Reference

how to scroll to a position in a page by clicking on link

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

download image that generated from html2canvas on button click

so I have image generated from table using html2canvas.
The output will be placed in canvas.
My problem is what to do when user click "Download Image" button so the image can be downloaded to their computer ?
I already google some way to do it but it all of it are not make sense. There is no code that show how to retrieve the data image and then download it to the computer.
there will be two ways to do this :
still use html2canvas to convert the table to image and then use jquery to download the image
use another solution to convert the table to image and then use c# (code behind) to download it
so which should I do ? or maybe you have any other solution ?
EDIT : I've already got the data url, but I can only send the image to new tab using window.open(image_data_url), not download it. But a minute ago I found the solution. You can just use "a" tag and then add attribute "download=[file_name.jpg]" and fill the "href" value with the data url. But still it's not what I want. If I use this I will need two buttons, button for converting table to image and button for download the image. Is there any possible solution with single click you got the data url and then download it as image ?
EDIT : the solution above can't be used in IE. So maybe there is another solution ?

You can use html2canvas to convert the html element, then save as image on your local using jQuery. Take a look at my sample code :
$("#btnSave").click(function() {
html2canvas($("#map"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
here's the real live : http://www.nanonimos.com/drag-pin-ID-convert/

Use toDataURL or toBlob on the canvas and link to the generated url.
When using toBlob you need to use URL.createObjectURL(blob) on it).
Im wondering what version of google you're using since when i google "canvas get image"
I get plenty results with ready to use codesnippets.
Like:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Example.3A_Getting_the_data-url_for_a_canvas
or
Can I get image from canvas element and use it in img src tag?

Selenium to click on a javascript button corresponding to a text

I have a lot of buttons in my web page and that too are javascript buttons. All those buttons have same TagName, but different id. But I cant use ID since I cant predict which button has to be clicked.
Selenium will search for a content (Question here) and if could find the content, then it must click on the respective button. How can it be achieved?
Any comments would be really helpful and appreciated..

This will find a button based on the displayed text on the button and click it.
var loggout = driver.FindElement(By.LinkText("Logg ut"));
loggout.Click();
Or you can change it to;
By.Id()
By.CssSelector()
By.Name()
...

How to slide Update Panel content after updating

I have an Update Panel that contains an image and a button. Image control displays one image at a time when clicked on "Next Image" Button and previous image on clicking "Previous Image" button. Code sample is something like this
protected void btnNext_Click(..)
{
Image1.ImageUrl=getNextImageFromDatabase();
UpdatePanel1.Update();
}
protected void btnPrevious_Click(..)
{
Image1.ImageUrl=getPreviousImageFromDatabase();
UpdatePanel1.Update();
}
Now what I want to know is that is there any way I can slide image or whatever content in update panel to left when clicked on "Next Image" and similarly to right when clicked on "Previous Image"? Is there any way using AjaxToolKit or JQuery?

You can you use the jquery fadeIn fadeOut methods which will look like a slide effect
See example here http://api.jquery.com/promise/#example-1

With Jquery you can simply animate margin-left to negative values, so Image would disapear. I personaly use this solution:
User clicks on next/prev button
Show loading image (a gif)
Create image (var img = new Image()) in javascript
set onload action for that image to move old one to left/right and append new image etc.
get next/prev image url
assign src of the created image, so when it's loaded the onload action is executed.
AjaxToolkit might not be the cleanest solution in this case. You will probably need to make some simple service that returns nex/prev image url, but that's only few lines of code...

How to scroll the browser window

I am using C# code and displayed the Page and when i click on the link button on the top of the page then the page should scroll to the bottom of the page because the related content will be on the bottom of the page.
How can i achieve this
can u give me the solution for this scenario either programatically in c# or in jquery
Thanks in advance
Vara Prasad.M

Here's a nice plugin that allows you to easily scroll to any part of the document.