is element in browser windows or not?

J

Jan Eliasen

Hi

This problem is a little but difficult for me to explain, but I hope
you will get the idea.

I have some javascript code, where I:
document.getElementById(el).style.display="";
document.getElementById(el).scrollIntoView(true);

so basically, the element was hidden, but I am setting it to
not-hidden, and I want the browser to scroll so the element is visible
by the user. BUT, if the element is allready in the current
browserwindows, then I don't want to scrollIntoView, since this will
move the element - in that case, I'd rather do nothing.

But how do I check for that?

I hope I made myself understandable. The word "hidden" has two menings
in this post - one is that the element is hidden and therefor is not
displayed in the broser no matter how much you scroll. The other is
that the element isn't hidden - you just need to scroll in order to
see it.

--
eliasen, representing himself and not the company he works for.

Private blog: http://blog.eliasen.dk

Private email: (e-mail address removed)
 
O

OmegaJunior

Hi

This problem is a little but difficult for me to explain, but I hope
you will get the idea.

I have some javascript code, where I:
document.getElementById(el).style.display="";
document.getElementById(el).scrollIntoView(true);

so basically, the element was hidden, but I am setting it to
not-hidden, and I want the browser to scroll so the element is visible
by the user. BUT, if the element is allready in the current
browserwindows, then I don't want to scrollIntoView, since this will
move the element - in that case, I'd rather do nothing.

But how do I check for that?

I hope I made myself understandable. The word "hidden" has two menings
in this post - one is that the element is hidden and therefor is not
displayed in the broser no matter how much you scroll. The other is
that the element isn't hidden - you just need to scroll in order to
see it.
Click to expand...

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/scrollintoview.asp

"Standards Information:
There is no public standard that applies to this method."

Unless you code for MSIE users only, try to find another method.
 
J

Jan Eliasen

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/scrollintoview.asp

"Standards Information:
There is no public standard that applies to this method."

Unless you code for MSIE users only, try to find another method.
Click to expand...
FireFox 2.0 uses it as well... anyway, I would be happy to hear about
any other solutions/suggestions?

And also solutions to my question? :)

--
eliasen, representing himself and not the company he works for.

Private blog: http://blog.eliasen.dk

Private email: (e-mail address removed)
 
A

ASM

Jan Eliasen a écrit :
FireFox 2.0 uses it as well... anyway, I would be happy to hear about
any other solutions/suggestions?

And also solutions to my question? :)
Click to expand...

If your question is element to show has to not move if it is alredy seen
.... I don't know how to do.

If the question is to get element on top of the window as
scrollIntoView() seems to do, you can also do :

function go(e) {
location = '#'+e;
}

I understood anything about your conception of 'hidden'.
If an element is hidden it is present and not shown
(it occupies its space all time, hidden ot not)

<html>
<style type="text/css">
div { border: 1px solid; height: 250px; margin: 15px }
#div_4 { visibility: hidden }
</style>
<script type="text/javascript">
function go(e) {
location='#'+e;
/*
or :
document.getElementById(e).scrollIntoView(true);
and, eventually :
document.getElementById(e).style.visibilty = 'visible';
*/
}
</script>
<div id="div_1">1
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_2">2
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_3">3
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_4">4
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_5">5
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_6">6
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_7">7
<a href="#" onclick="go('div_4');return false;">go</a></div>
<div id="div_8">8
<a href="#" onclick="go('div_4');return false;">go</a></div>
</html>
 
S

scripts.contact

If your question is element to show has to not move if it is alredy seen
... I don't know how to do.
Click to expand...

function checkElm(){
var Elm=document.getElementById("someElm")
var relTop= Elm.offsetTop-(window.scrollY||
document.body.scrollTop)
var docHg=window.innerHeight ||
document.documentElement.offsetHeight
if(relTop<-20 || (+relTop+Elm.offsetHeight/4)>docHg){
// Element not completly visible so use scrollIntoView //
}
}

if the page is wide then you (OP) have to check for width also.
 
J

Jan Eliasen

function checkElm(){
var Elm=document.getElementById("someElm")
var relTop= Elm.offsetTop-(window.scrollY||
document.body.scrollTop)
var docHg=window.innerHeight ||
document.documentElement.offsetHeight
if(relTop<-20 || (+relTop+Elm.offsetHeight/4)>docHg){
// Element not completly visible so use scrollIntoView //
}
}
Click to expand...
This doesn't seem to work for me, using IE7...

--
eliasen, representing himself and not the company he works for.

Private blog: http://blog.eliasen.dk

Private email: (e-mail address removed)
 
V

VK

the element isn't hidden - you just need to scroll in order to
see it.
Click to expand...

How do you define "already in the current browser windows"?
How do you define "scroll in order to see it"

Does "element is visible" mean that it is completely on the screen or
that any part of it is on the screen?

Do you want to scroll until the element is at the top of the page
(anchor navigation equivalent) or do you only want to make the minimum
scrolling in either direction to bring the element into view?
 
S

scripts.contact

On 11 Mar 2007 18:19:49 -0700, (e-mail address removed) wrote:
Click to expand...
This doesn't seem to work for me, using IE7...
Click to expand...

no IE7 here but this code(look for linewraps)-

<html>
<head>
<script type="text/javascript">

function checkElm(){
var d=document,w=window
var Elm=d.getElementById("someElm")
var relTop=Elm.offsetTop-(w.scrollY||d.body.scrollTop)
var docHg=w.innerHeight||d.documentElement.offsetHeight
if(relTop<-20||(+relTop+Elm.offsetHeight/4)>docHg)
alert("Element is not on screen")
}
</script>
</head>
<body onkeypress="checkElm()">

<div style="height:150%;">Space</div>
<div
style="height:20%;width:60%;border:1px solid red"
id="someElm">Element</div>
<div style="height:150%">Space p2</div>
</body>
</html>


works on Opera 9.1, IE6 and FF2
 
J

Jan Eliasen

no IE7 here but this code(look for linewraps)-

function checkElm(){
var d=document,w=window
var Elm=d.getElementById("someElm")
var relTop=Elm.offsetTop-(w.scrollY||d.body.scrollTop)
var docHg=w.innerHeight||d.documentElement.offsetHeight
if(relTop<-20||(+relTop+Elm.offsetHeight/4)>docHg)
alert("Element is not on screen")
}
works on Opera 9.1, IE6 and FF2
Click to expand...
I have tried it on FF2, and I can't get it to work.

I have deployed a new version of the homepage at
http://www.eliasen.dk/oio/Classes/en/Invoice.html - with the
javascript at http://www.eliasen.dk/oio/functions.js

If you click on "UBLVersionID" in the image map, you are told that the
element is on the screen, but actually, the element is way down in a
table.

I modified your code to this:
function showRow(row){
var d=document,w=window
var Elm=d.getElementById("upper"+row)
var relTop=Elm.offsetTop-(w.scrollY||d.body.scrollTop)
var docHg=w.innerHeight||d.documentElement.offsetHeight
if(relTop<-20||(+relTop+Elm.offsetHeight/4)>docHg)
alert("Element is not on screen")
else
alert("element is on screen")
}
The changes are:
1. a new function name, because that is the function name I am calling
:)
2. a parameter that specifies the element
3. the Elm variable is "upper"+row, because that is the id of the
element I need to know if it is on screen
4. an else clause to your if-statement.

Any thoughts? Thanks!

--
eliasen, representing himself and not the company he works for.

Private blog: http://blog.eliasen.dk

Private email: (e-mail address removed)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Qr code is not showing in browser. 0
Image upload not working in browser 4
Extern keyword and "error: initializer element is not constant" after definition. 1
Centering picture element for larger screen sizes 2
Duplicate animated SVG with Symbol Element not working 1
How to properly insert a landing page within same container beneath an image element? 1
Function is not worked in C 2
Update element value ViewWeb2 .net Control 1

Members online

No members online now.
Total: 121 (members: 0, guests: 121)
Robots: 380

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top