I have:
<script language="javascript">
function arata(temp) {
var req = new XMLHttpRequest();
req.open("GET", temp, false);
req.send(null);
var page = req.responseText;
document.getElementById("produs").innerHTML = page;
}
</script>
and:
See details
and:
<div id="produs"></div>
So, when the link is clicked, the page loads in to div.
How can I do to align the top of div to the top of the viewpoint? I mean... something like using an #anchor.
Try:
document.getElementById('produs').scrollIntoView();
See here for more info:
https://developer.mozilla.org/en/DOM/element.scrollIntoView
If you want to do it with an anchor, you can add one <a name="produs"></a> above the div and it should work if you do not return false on the click event.
Related
I have a legacy application running in compatibility mode (IE11) in Edge Chromium. There is a portion of the page using AJAX to auto refresh a table every 10 seconds. When the users are scrolling through the results of the table, it auto refreshes and they loose their place in the table. The frequent refreshing is required due to a very dynamic environment.
The "window.scrollTo(0,yElemnt);" does not work because it tries to scroll the whole window instead of the table housed within TPicks.asp.
function ShowPicks(){
var elmnt = ""
var yElmnt = 0
if (document.getElementById("scrollPicks")) {
elmnt = document.getElementById("scrollPicks");
yElmnt = elmnt.scrollTop;
}
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("AutoPickDiv").innerHTML = this.responseText;
if (document.getElementById("scrollPicks")) {
alert(yElmnt);
document.scrollTo(0,yElmnt);
}
}
}
}
//alert("Picks.asp");
var RandNbr = Math.round(Math.random()*10000000);
xmlhttp.open("POST", "TPicks.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("rand=" + RandNbr);
}
How do I get just the table to scroll? I have the pixel position of where the table is currently scrolled to within "elmnt.scrollTop;". The alert after the AJAX call returns as complete shows where the current scroll position is also - "alert(yElmnt);".
Thank you for your help!
Your code is setting document.scrollTop to the y-axis when you should be targeting something different. You have to wrap your table in a element that can, e.g. a DIV. Then, you must apply a height and overflow-y CSS property to that element. Then, you need a javascript function that can set the scrollTop property of that element to zero.
Check out this jsfiddle for a working example: https://jsfiddle.net/bf4zngy7/
<div id="wrapper">
<div id="tablewrapper" style="max-height:100px; overflow-y:scroll">
<table border=1>
<!-- insert your data rows here -->
</table>
</div>
<div id="buttonwrapper">
<button type="button" onclick="scrollToTop()"">Scroll to top</button>
</div>
</div>
And when the button is clicked, this function fires:
function scrollToTop(){
const tablewrapper = document.getElementById('tablewrapper');
if(tablewrapper){
tablewrapper.scrollTop = 0;
}
}
In my solution, you are not actually scrolling the table, but rather the element that contains the table. Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop for more information on why setting the scrollTop property of the element works.
I dynamically create a link to a. 'mywebsite' is a variable. Everything works but the mywebsite page replaces that of the code. I want to open mywebsite in another page.
May I have a help to solve the problem ?
var mylink = document.createElement("a");
var textForButton = document.createTextNode("More details");
mylink.appendChild(textForButton);
mylink.setAttribute("href", mywebsite);
document.body.appendChild(mylink);
You should set the linke target as this:
mylink.setAttribute("target", '_blank');
Your code my be something like this
<script>
window.onload = function () {
let mywebsite = "http://www.google.com";
var mylink = document.createElement("a");
var textForButton = document.createTextNode("More details");
mylink.appendChild(textForButton);
mylink.setAttribute("href", mywebsite);
mylink.setAttribute("target", '_blank');
document.body.appendChild(mylink);
};
</script>
You can set target=_blank attribute to do this.
mylink.setAttribute("target", "_blank");
So that once you click on the link that you have generated it opens in new tab.
I'm a beginner in Javascript and i'm trying to get an element from an embed tag. This embed tag contains a pdf.
I want to get the button "next page" from the pdf viewer, and simulate a click on it, in order to automaticly scroll to the next page of the pdf.
My HTML code is something like this (really simplified) :
<html>
<body>
<div id="display-zone">
<embed id="myPdf" src="./myPdf.pdf">
#document
<html>
<body>
<!-- The button I want to get in my JavaScript -->
<button id="next" class="toolbarButton pageDown"></button>
</body>
</html>
</embed>
</div>
</body>
</html>
My JS code to print the pdf viewer on the web page :
affichage.innerHTML = "<embed class=\"media\" id=\""+ongletsMedias[i].firstChild.data+"\" src= \""+ongletsMedias[i].firstChild.data+"\" width= \"1000\" height= \"800\">";
// ongletsMedias[i].firstChild.data equals to "myPdf"
t = 5000; // time before starting pdfDefile()
setTimeout(pdfDefile,t,ongletsMedias[i].firstChild.data,i,1); //call the function to scroll pdf pages
And finally my function pdfDefile() that I'm calling in order to scroll the pdf pages :
function pdfDefile(dir,i,page) {
var xhttp = new XMLHttpRequest();
var t = 0;
xhttp.onreadystatechange = function() {
var checkbox = document.getElementById('checkbox');
if (this.readyState == 4 && this.status == 200 && checkbox.checked) {
document.getElementById("span").innerHTML = this.responseText; // display the number of pages of my pdf
var t = 5000;
if (page < parseInt(this.responseText)) { //test for recursive call
/*HERE is where I want to get the "next" button */
setTimeout(pdfDefile,t,dir,i,page+1);// recall this function while there is a next page to display
} else {
setTimeout(jouerMedia,t,i+1);// call the main fuction, no problem here
}
}
};
xhttp.open("GET", "nbPagesPDF.php?pages="+dir, true);
xhttp.send();
}
I already look at an existing topic (Get element in embed tag), but I can't make it work in my JS.
So please, can you help me to make my code great again (may it have been ;-) ) ?
Regards
Try
var embed = document.getElementById('myPdf');
// Wait for document to load inside embed element
embed.on('load', function() {
embed.getElementById('next').click();
});
(I am using jQuery in this example for adding the event listener, not sure if you are using it on your project?)
Without jQuery you could do:
var embed = document.getElementById('myPdf');
embed.onload = function() {
embed.getElementById('next').click();
};
It might be possible you can not trigger a click event on that button since a user action often must have taken place to trigger click's from js.
I have a webpage wherein I want that onclick of a link or buttonn; the content of a particular div of webpage get updated and replaced with the content which I have scripted in other html page. How to do that?
There are several ways to do that .
<script>
function loaddata()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","page.html",true);
xhr.onload = function(){
if(this.readyState === 4)
{
var div = document.getElementById("divid"); // the div where you want to load the data
div.innerHTML = this.responseText;
}
}
xhr.send();
}
</script>
html code
<button onclick="loaddata()">click</button>
<div id="divid"></div>
there are other ways to do that . but i have shown only javascript one
hope this helps you what you are looking for
I have a help link. If a user clicks on it, it opens a new window with fixed width and height. It's working well except that when I right click the link, there is either no options to 'open in a new tab' (in IE) or I can open in a new tab but is directed to an empty page (chrome). Can any one help to make this like a link and also by default open in a new window (not a tab)?
<html>
<head>
<title>
link
</title>
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
</head>
<body>
<a id='PortOrderPageLearnMoreLink' href='javascript:' title='Learn more' onclick='activateHelpView("http://stackoverflow.com/")'>Learn more</a>
</body>
</html>
Use a real link, not the empty javascript: address. The onclick handler can prevent the link from doing anything "normal", but you'll have something for the right-click to work with.
target=_blank is a strong hint that you want the page opened in a new window, but whether that's honored at all -- and whether in a window or a tab -- is out of the page's control.
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
<a id='PortOrderPageLearnMoreLink' href='http://stackoverflow.com/' title='Learn more' onclick='activateHelpView(this.href); return false;' target='_blank'>Learn more</a>
A more modern way of handling all of this -- particularly if there will be more than one help link -- is to add a class to all of them, and run some JavaScript to add the click handler to each in turn. The HTML stays clean (and with real links, still works if JavaScript is disabled or not loaded).
var helplinks = document.querySelectorAll('.helplink');
for (var i = 0; i < helplinks.length; ++i) {
helplinks[i].addEventListener('click', activateHelpView);
}
function activateHelpView(event) {
event.stopPropagation(); // don't let the click run its course
event.preventDefault();
var helpUri = this.href; // "this" will be the link that was clicked
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
helpWindow.focus();
}
}
<a id='PortOrderPageLearnMoreLink'
href='http://stackoverflow.com/' title='Learn more'
class='helplink' target='_blank'>Learn more</a>
StackOverflow snippets aren't allowed to use some of these functions. A working example can be found here.