I have a codebehind file, in which it does a:
Response.Redirect(Request.RawUrl);
after i have updated something in the database.
(when a comment for the topic is stored)
I wish to make the page autoscroll, to the bottom at the page, when the response is triggered.
Can someone please tell me how?
Scrolling to the bottom of the page can be done by using javascript. Below is the javascript code to do the same. Please place the below code at the end of the page before body tag ending.
<script>
window.scrollTo(0, document.body.clientHeight);
</script>
What about adding an anchor to the new comment.
<a name="NewComment">The comment</a>
Then let your redirect point to that anchor
Response.Redirect(Request.RawUrl + "#NewComment");
That should make your browser scroll to that anchor
Scrolling to the bottom of the page is client side not server side. C# is server side. In order to scroll you will have to add some javascript to the page to do it for you.
Typically, this is implemented as follows, a javascript routine is written that looks at the URL. If there is some specific information in the url (eg &scroll2bottom=true) then the javascript performs that action. This will also let you scroll to a specific page element.
I use this function, maybe it is useful for you. It works with coordinates
and delay seconds for scroll. Trying with different coordinates will make the scroll
stop where you want.
Declare this function in your js
function WindowsScrollTopAnimado(coordinate,miliseconds) {
$('html, body').animate({scrollTop:coordinate}, miliseconds);
}
Call it from server side when needed:
Private Sub ScrollToElement()
Dim Cadena = "<script type='text/javascript'>"
Cadena += "WindowsScrollTopAnimado( " & 1350 & "," & 1800 & ");"
Cadena += " </script>"
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType, "ScrollToControl", Cadena, False)
End Sub
I would insert an anchor into the HTML at the point you want to scroll to (this can be permanently in the code at the bottom, or inserted dynamically at the target point), and then redirect to yoururl.html#anchor
Unfortunately that's not very HTML5/Web2.0, the new modern way appears to be here: http://dev.w3.org/html5/spec/single-page.html#scroll-to-fragid
I've had some fun with this. A simple code-behind way I use is to put focus on the last element on the screen such as an empty label.
E.g.
lblMyEmptyLabel.Focus();
Of course, this doesn't smoothly scroll the window, it pretty much "teleports" you there.
Sometimes the above doesn't work (when using bootstrap modals for example) in which case the following javascript works for me:
<script type="text/javascript">
function openModal() {
document.getElementById('myElement').scrollIntoView(true);
$('#myModal').modal('show');
}
</script>
If you're using an asp element (eg a textbox) to scroll to, don't forget to add the clientidmode="static" part to the tag so the ID isn't altered on the client.
Related
I have visited the Telerik's website and viewed their demos etc...
But I am having problems trying to load content (html) in the RadEditor.
I have a Button_Click event where I get my html string and then set it to the RadEditor. The RadEditor is inside a RadWindow and only becomes visible when the button is clicked.
protected void btnSubmitHtml_Click(object sender, EventArgs e)
{
RadEditor1.Content = "<p>hello there</p>";
RadWindow1.Visible = true;
}
This doesn't show the html inside the RadEditor for some odd reason. I suspect it is the page life cycle that is involved with this problem.
Are there any suggestions to solve this?
I have encountered this problem multiple times and never found a "Proper" resolution.
However, a great work around is to simply set the content from the clientside via injected script. The end result is the same, and if you can tolerate the 10 millisecond delay, worthy of consideration.
EDIT after comment requested reference
Basically all you need to get an instance of the editor using ASP.NET WebForms $find function. That takes the html ID of the root of the rendered object and returns the client side viewModel if one exists.
The $(setEditorInitialContent) call at the end assumes that jQuery is present and delays the execution of the function till page load.
<telerik:radeditor runat="server" ID="RadEditor1">
<Content>
Here is sample content!
</Content>
</telerik:radeditor>
<script type="text/javascript">
function setEditorInitialContent() {
var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.set_html("HEY THIS IS SOME CONTENT INTO YOUR EDITOR!!!!");
}
$(setEditorInitialContent);
</script>
Take a look here to see how to get a RadEditor to work in a RadWindow: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-radeditor-in-radwindow.html.
Said shortly, here is what you need to have in the OnClientShow event of the RadWindow:
function OnClientShow()
{
$find("<%=RadEditor1.ClientID %>").onParentNodeChanged();
}
To edit Html code only you can add -
EnableTextareaMode="true"
Add this property to the RadEditor.
I suspect that the way the control tries to interpret the html might be one of the problems. The other thing that may be causing this problem is the page life cycle.
I have a webkit-sharp WebView which I am using to display HTMLvia the
LoadString method.
The webview is placed in a ScrolledWindow the ScrolledWindow is placed
in a Gtk Window.
I want to be able to tell the WebView to scroll to a specific part
of the HTML. Normally one would do this using an anchor.
I have defined an anchor and some JavaScript to jump to that anchor, I
call the JavaScript via the ExecuteScript method. This does nothing at
all.
I have also tried adding a button to the HTML that calls the
JavaScript. This also does nothing.
Is there something I can do to make this work, to make it so I can
scroll to a known location in the page?
Update: I can make this work by saving the HTML to a file and then loading from there using a URL which tells it to scroll. However I would like to avoid doing that because of the performance hit of writing the page to disk before displaying it.
How are you adding to ScrolledWindow? I am not GTK expert, but have discovered that it works if you call "add" method and does not work if you call add_with_viewport
Also you may not need to execute the javascript. It looks like you control the html page and can easily access the dom element and call click method on the element.Following sample python code looks for anchor with id "one" and scrolls to desired location without calling javascript.
from gi.repository import WebKit
from gi.repository import Gtk
from gi.repository import GLib, GObject
class WebkitApp:
def exit(self, arg, a1):
Gtk.main_quit()
def onLoad(self, view, frame):
doc = view .get_dom_document()
a = doc.get_element_by_id("one")
a.click()
def __init__(self):
win = Gtk.Window()
self.view = WebKit.WebView()
# Signal Connections
self.view.connect("onload-event", self.onLoad)
file = open("/tmp/epl-v10.html")
html = file.read()
self.view.load_string(html, "text/html", "UTF-8", "file:///tmp")
sw = Gtk.ScrolledWindow()
# sw.add_with_viewport(self.view)
sw.add(self.view);
win.add(sw)
win.maximize()
win.connect("delete-event", self.exit)
win.show_all()
app = WebkitApp()
Gtk.main()
The JavaScript to jump to that anchor, doesn't work while the page is still loading, By waiting for the page load to finish (there is an event for it) then running the script I made it work.
Given an element:
<a id='myElement'>I want to scroll to this line</a>
This can be scrolled to with this JavaScript:
document.getElementById('myElement').scrollIntoView();
Which can be executed in a WebView with the ExecuteScript method, e.g.:
_webView.ExecuteScript("document.getElementById('myElement').scrollIntoView();");
How can I detect the end of a webpage to put a div bar that contains the 'about' and 'contact us' links? I want to detect the end of the page so the bar can automatically put itself at the end of the page regardless the resolution. Thanks
If you want implementation in pure JavaScript try:
var node = document.createElement("div");
node.innerHTML = "put html here";
document.body.appendChild(node);
Here is the jsbin snippet.
Another possible solution is:
document.body.innerHTML += "put html here";
You could do this with a master page, or I guess since you tagged this with javascript you could use jquery as well. Use a selector to select the body or html tag and then use append:
http://api.jquery.com/append/
$("body").append("Your links");
Well, you can find the </body> tag, and add your code immediately before it, being sure it will be rendered at the very end of the web page.
window.pageYOffstet + window.screen.height == document.height
i have made a page in asp.net, i have a costing calculator which has more than 50 fields, dependent on each other, one is the result of previous two and like that, i want my page to be printed in a well manner, and the header of the page which is in master page should not be in print, also the color schemes i want to adjust, let me know the best solution for this which .net provides
Put the content inside <div id="divid">YOUR CONTENT NEEDS TO BE PRINTED</div>
Then call the javascript function on button click which will print the selected area or only html of div. pass the id of div on calling javascript function.
function CallPrint(var strid)
{
var prtContent = document.getElementById(strid);
var WinPrint = window.open('','','letf=10,top=10,width="450",height="250",toolbar=1,scrollbars=1,status=0');
WinPrint.document.write("<html><head><LINK rel=\"stylesheet\" type\"text/css\" href=\"css/print.css\" media=\"print\"><LINK rel=\"stylesheet\" type\"text/css\" href=\"css/print.css\" media=\"screen\"></head><body>");
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write("</body></html>");
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
return false;
}
Call CallPrint('DivGrid');" on onclick() of button or use below: but.Attributes.Add("OnClick", "return CallPrint('DivGrid');");
Nothing to do with .Net and everything to do with a print stylesheet. You can create a stylesheet which will only work for when the page is printed. And you can change everything from what displays to postion to colours.
Use:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
Note media="print" means it'll be used for printed pages.
I know that question has been asked a long time ago, however there is no accepted suggestion. So here my approach for friendly print version when using Master page.
Create an empty master page (PrintVersion.Master) to serv as print version. Add what ever you need to be print (like logos) if anything to that master page.
from your content page, add a print link with target blank. Make the href to load the current page. From the href add a querystring so you can capture it from your content page preinit event.
From your content page preinit event detect if the querystring to print exists, then specify the blank master page like: MasterPageFile = "~/Ful/Path/of/your/PrintVersion.Master"
Optional, on the PrintVersion.Master on document.ready call: window.print(); The browser print dialog will automatically open.
You can make a new printable page version, which doesn't include a header. This version can also have the layout you need.
How to set in ASP.NET for ImageButton to change picture on mouse hover?
<asp:ImageButton onmouseover="changePic(this);" ...
JavaScript:
function changePic(obj)
{
obj.src = "<picture path>";
}
You will have to do this in the client side - that is, using javascript.
You can add a client side onMouseOver="this.src = 'pathToOtherimage'" attribute and a similar one for onMouseOut to revert back.
It can't be done from the server-side (in the C# code), but rather must be done on the client-side (in JavaScript). Starting with that fact, there are various approaches to the subject.