I am writing in asp.net c# code.
I want to control the page position on a post back. Neither MaintainScrollPositionOnPostback equal true or false, is what I want. True is too low and False is too high. Another problem is that the position should be different depending on which control is press. A third issue is that MaintainScrollPositionOnPostback=true works in I.E. but not in Firefox.
Want I want is similar to the href related tags e.g. <a href="#body2"> except in code.
Thanks for any suggestions.
Assuming you are able to use JQuery, try the following:
http://abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/
Just inject script and pass the ID of the control that fired your postback event.
If you cannot use jquery for some reason, here is a less elegant approach:
http://clifgriffin.com/2008/10/14/using-javascript-to-scroll-to-a-specific-elementobject/
Edit (Samples):
Here is an example of straight html using the jquery method, presuming you have a script file named jquery.js in the same folder as the html page.
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('html,body').animate({
scrollTop: $('#scrollHere').offset().top
}, 0//increase for smooth, visible scroll
);
});
</script>
</head>
<body>
<div style='width:100px; height:1000px; background-color:red;'>
top filler
</div>
<a id='scrollHere' href='#'>Scrolls to this element</a>
<div style="width:100px; height:1000px; background-color:blue;">
bottom filler
</div>
</body>
</html>
Here is an example of a client-side method that you can pass the "ClientID" property of any visible page control and it will register the javascript to scroll to the element on page load (assumes jquery is registered on the page and only registers one call per request):
private void ScrollToControl(string controlId)
{
//scroll to button
string script =
"$(document).ready(function() {" +
"$('html,body').animate({ " +
"scrollTop: $('#" + controlId + "').offset().top " +
"}, 0);" +
"});";
if (!Page.ClientScript.IsStartupScriptRegistered("ScrollToElement"))
Page.ClientScript.RegisterStartupScript(this.GetType(), "ScrollToElement", script, true);
}
If you know specific pixel values where you want your window to be then you can try using window.scrollTo() function in Javascript.
window.scrollTo(0,0);
Maintain page scroll position on button click by:
$("#Next").click(function() { $('html,body').animate(
{ scrollTop: $('.required').offset().top
}, 0//increase for smooth, visible scroll ); });
Related
I have a GridView that displays a small amount of information about multiple users. In this GridView, I have a button that will display all of the information about the selected user inside a DetailsView below the GridView. The problem is, if I don't search for a specific user, I get a list of over 200 people and the GridView is extremely long. This makes the end-user have to scroll to the bottom of the page, which is very annoying. I have been reading about a ScrollIntoView function but I don't think that it is related to a DetailsView. I also read that I can use JavaScript to potentially get the results that I am looking for. I am not sure what the best approach is for this, but any help would be very much appreciated. I have an empty SelectedIndexChanged method that was generated by Visual Studio when I double clicked on the button. If I do end up going with the JavaScript route, where would I insert the code for this? Would it go in the aspx.cs page or just the aspx page?
If all the clicks of the GridView point to the same place on the page, you could do something like this.
<script type="text/javascript">
$('#<%= GridView1.ClientID %>').click(function () {
$('html, body').animate({
scrollTop: $("#targetID").offset().top
}, "medium");
});
</script>
If you load the DetailsView with a PostBack, ypu can do this. Add a scriptmanager to the code behind.
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToElement", "ScrollToElement('targetID')", true);
And then the matching JavaScript function.
<script type="text/javascript">
function ScrollToElement(id) {
$('html, body').animate({
scrollTop: $("#" + id).offset().top
}, "medium");
}
</script>
I was able to create a work around to get this working properly. I created a new button that the user can press that will scroll to the top of the DetailsView. It was quite simple, but it will work for what we do. I created an empty span tag above the DetailsView and used <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> for the button.
So I have a server control that is at the bottom of my page:
<%= addPopup() %>
Here is the code for it:
protected String addPopup()
{
if (usedSearch == false)
{
return "";
}
else
{
return "<body id=\"test\" onload=\"popup.show()\" runat=\"server\">";
}
}
Basically, depending on what the user does, usedSearch will be true or false, resulting in the HTML line being added to the page:
<body onload="popup.show()" runat="server">
What this does is show a popup to the user, I do this so that it shows on postback when needed.
This works in all major modern browsers. It does not work in Internet Explorer 8 even though it is showing up in the code behind for every browser including IE8. How do I get IE8 to show the popup when is part of the page source?
You are rendering duplicated body tag, probably that's the reason why IE does not pick it up. You should rather output javascript snippet at the bottom of your page, before </body> tag:
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', popup.show, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', popup.show );
}
</script>
It would attach your function to onLoad event in all browsers.
P.S. Just make sure that your popup.show function is initialized before this code.
I have a situation. I am using web application of windows(ASP.NET). On page load when my web page appears, it has dynamically generated ImageButtons. I need to fid the X,Y or TOP,LEFT co-ordinates of each ImageButton control on the page WITHOUT CLICKING ON ANY OF THE ImageButtons.. I need to draw a line beetween some ImageButtons on the click of one ImageButton.
Try using some Javascript code or jQuery. Please find below jQuery code
Here i have used position() method which gives you left and top position of the element. You can change the selector based on your need.
Update: Assumed you have HTML like <div id='images-container'> .. all images here </div> and updated selector below for that with each() method
You can also use offset()
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#images-container img').each(funcion(){
var coordinates=$(this).position();
coordinates.left;// gives you x
coordinates.top;// gives you y
//save these values in some hidden field and access it in code behind if needed
});
});
</script>
Please refer this post for more information jQuery x y document coordinates of DOM object
how can we increase or decrese the size of div on btn click in asp.net?
//stylesheet
<style>div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//div content
<body>
<div></div>
</body>
//script which m using for clicking
<script>$("div").one('click', function () {
$(this).height(30);
});</script>
Take a look at animate from jquery
This was discussed here a little while ago and he had a fiddle which is here
You question is mismatch with what you have done in your code.
It mention that you need to increase or decrease the size of div on btn click . But your code is to div click event.
Also I think this is Jquery which you will need to include libraries
Edit your code to something like this
$("#ButtonId").click(function() {
$('#DivID').height(30) ;
});
Update
If you need to change back to the previous size on same click.. you have to use toggle.
well. The problem i'm facing is i have my own custom control and i do a query , get records and dynamically add html controls to the page based on the data.
Now there's the problem of adding some dynamic javascript
I do this with the help of literal controls.
<asp:Literal runat="server" ID="latEventToolTipJqueryScripts"></asp:Literal>
This works like a charm
<script language="javascript" type="text/javascript">
// <![CDATA[
Sys.Application.add_load(WireEvents_<%=this.ID%>); // fix wiring for .NET ajax updatepanel
$(WireEvents_<%=this.ID%>); // handle page load wiring
function WireEvents_<%=this.ID%>() {
<asp:Literal runat="server" ID="latEventToolTipJqueryScripts"></asp:Literal>
}
// ]]>
</script>
I add the literal text dynamically from code behind.
However, when placing the control in an updatepanel, the postbacks don't update the script.
EDIT: The Sys.Application.add_load rewires the necessary functions just fine with the updatepanel. The problem is that the script that needs to be in place of the literal, doesn't update when in an updatepanel.
I've tried the ClientScript.RegisterStartupScript but it has the same effect as with the literal control trick. Any help?
---------------------------SOLVED (tnx to Pranay Rana)----------------------------------
Got rid of the literal in the ascx side. as well as the Sys.Application.add_load
now it's only in the code behind. The thing that was throwing me off was the JQuery thing.
this.strBuilderJS.Append( "<script language='javascript' type='text/javascript'>" +
"$(WireEvents_" + this.ID + ");" +
"function WireEvents_" + this.ID + "(){"+
" alert('stuff');");
this.strBuilderJS.Append( "}</script>");
and then
ScriptManager.RegisterStartupScript(this, this.GetType(), "strBuilderJS", strBuilderJS.ToString(), false);
Make use of ScriptManager.RegisterStartupScript() to register your script...may resolve problem ...
Check this resolve your problem : Add JavaScript programmatically using RegisterStartupScript during an Asynchronous postback
I would recommend on a different approach. To create a dynamic javascript for any language. I would create a reference to a dynamic file. For this example I will use .NET
Create a test.aspx page and add this script:
<script type="text/javscript" src="js/foo.aspx"></script>
Make sure your page response with the right content type. So for this instance I would add this on page load code behind for your foo.aspx:
Response.ContentType = "application/javascript";
On the foo.aspx html view add your javascript code.
alert("<%=DateTime.Now%>");
Browse your test.aspx page and you should see an alert with the current date
You should be able to move forward from here. The goal is to separate the javascript file from the static page.
Happy Coding.
How to change text of ASP Button control on anchor tag click
We have an ASP Button below and we want to change text when WE click on anchor tag
<asp:Button ID="btn_Add" runat="server" CssClass="button2" onclick="btn_Add_Click"/>
We have following two anchor tags
Add New
Add New
Now we add following code in script tag
<script type="text/javascript" language="javascript">
function changeText1() {
document.getElementById("lbl_header").innerText = 'Add New Teacher';
document.getElementById("btn_Add").value = 'Add';
}
</script>
<script type="text/javascript" language="javascript">
function changeText2() {
document.getElementById("lbl_header").innerText = 'Delete Teacher';
document.getElementById("btn_Add").value = 'Delete';
}
</script>