[URL]
I think it's popping back and forth between "position: fixed" and "position: static" every other scroll.
This happened before I added the else statement.
A live example is at: [URL]
I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome
<script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
[Code]...
Before you immediately give me an answer, let me describe fully what I'm trying to do, as it's not as simple as the title suggests.
I need to get the absolute position of a DIV (top and left properties) relative to the viewport/screen.
I've tried using .offsetTop and .offsetLeft, but these return the top and left properties relative to the DIV's immediate parent element, not the viewport (unless of course the DIV is top-level and not contained in any other DIVs).
So, is there any way to retrieve the absolute position of a DIV relative to the viewport, even if that DIV is nested in other DIVs?
Its said that placing the absolute div within a relative div is a best option to correctly achieve the margins within that relative div. However, I'm changing the marginTop and marginLeft via javascript and after some of the changes it shows the absolute divs in incorrect positions in IE.
What i want to do is calculate the vertical-middle right-sided position of text fields in x, y meaning in top and left margins. How can I do that?
I'm having some trouble with absolute positioning:
I have a main div, with some nested divs inside, one of which is "position:absolute". When a user hits a button, a message will appear at the top of the div (by using "myDiv.style.visibility = 'block'"), which pushes all other sections, relative or absolute, down appropriately. This is what i want.
However when the message div is clear (using "myDiv.style.visibility = 'none'"), all the relative divs go back to their original position, but the absolute div stays at its pushed down position.
ive tried several complicated schemes to correct this, including setting the absolute sections top to certain values, and it doesn't want to move back.
Does anyone know a solution to this problem, or of a way to "refresh" a divs position?
I got a script from brothercake which gets the absolute position for an element. Its pretty neat - recursively adding up offsets. I got it from the image transition scripts on his site.
However, this script uses offsetTop, offsetLeft and offsetParent, which dont seem to be supported by FireFox (or maybe I'm doing something wrong).
Here's brothercake's script:
getRealPosition = function()
{
this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft : arguments[0].offsetTop;
this.tmp = arguments[0].offsetParent;
while(this.tmp != null)
{
this.pos += (arguments[1] == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop;
this.tmp = this.tmp.offsetParent;
}
return this.pos;
}
It seems to work for Opera and IE - but not FF. Cant say for other browsers. I've come to rely on it for a part of my 'cross-browser' page. Any thoughts on what I can do?
What I can't figure out is why it seems to work fine on brothercake's site - even in FireFox. I'm supposing that the positioning script must be working because the images appear in the right spot.
" how to write a JavaScript function to pop up an alert() if a user scrolls down the webpage faster than a certain speed"
View 1 Replies View Relatedhow can I get the absolute position of a relative element?
We dynamically create a page with multiple segments which are relatively
ordered among each other. In these segments we have input fields.
When such an input field is focused I need it's absolute position.
Is there a way to do so with IE > 6?
I'm using the code below to display a menu that opens when the mouse
goes over the main menu item (try it in your browser to understand the
behaviour).
It uses "position:absolute" and a switch between "display='none'" and
"display=''".
However the problem is that
- in Internet Explorer 6 the dropdown (<select>...) always hides the
menu
- in Mozilla the menu is hidden initially but after clicking on the
text "Select" it isn't hidden.
How does that come and how can I overcome it?
I want the menu to be above the other stuff when it comes up. Code:
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...
And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float
[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]
<script language="javascript" type="text/javascript">
var floating_header = function() {
this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];
[Code].....
I have following problem: I get screen coordinates something (which might not be a mouse) and have to convert them relative to an element on a page.
Inside a page it's simple: use the offsets to the parent elements.
On the other side the start are the window.screenX and window.screenY coordinates.
The only problem now is how to find out the offset from the page to the window, i.e. the size of the toolbars and stuff? What might be interesting are the mozInnerScreenX/Y attributes of an window. But these are only present in firefox, obviously, which is not sufficient.
A hack would be a calibration page which uses a mouse event to calculate the missing offset using evt.pageX/Y and evt.screenX/Y. But this might not work, since a mouse might not be present.
I have an image that I'd like to animate to the top right of its containing div (which has position relative).I've used this:
$(".trigger").click(function(){
$("#image").css({'position' : 'absolute'}).animate({
"top": "10px"
[code]....
How to make a footer for a web that has an absolute position and automatic detect lower part of the screen. Whenever the visitor scroll the page, the footer still there and remain to it's position. Just like a header that has {position: absolute} in css.
View 3 Replies View RelatedI have this code for a floating menu - but it starts on an absolute position and then starts to move as you scroll once it reaches a certain distance from the top of the browser, I have seen floating menus that will also stop in a certain spot on the page, even if you continue to scroll the page, can I alter this code to make this menu stop at a certain point on the page?
Code:
I'm trying to apply the "absolute" position to the DOM object for non-IE browsers but Mozilla (or Firefox) does not recognize it. But the top and left position works for the "div" tag though. The IE browser works fine though.[code]...
View 9 Replies View RelatedI am looking for a javascript way to make a table header visible as the user scrolls down my web page. The table header is produced by php from a mysql db. The table is populated by results based on the user filter inputs.
see: [URL]
The table cells can be any width depending on the search results. I think a copy of the table header needs to be made and this would then float at the top of the page staying at the top no matter how far the user scrolls down, so that it's position would depend on the scroll bar position.
i would like to know the absolute position of an element (e.g. <LI>) in the browser. i nned to know it in order to place juste beside another element (e.g. submenu).
for example: i have a <li> tag which is at 400px from my browser left border (because it is inside a div which is screen centered). this <li> has a width of 180 px so if i want to know the most left position for my submenu, i should get 400 + 180 = 580 px (from the browser left border).
i tried offset but without success. in fact it returns me 0.
I had askedthis question on another forum but unfortunately I was unable to find a fix. I have a select and drag code that works well until in selection is added a position relative div. Here is the code and you can see a working demo at [URL] To see the problem just mouse select span 1, span 2 and the nested span 4 You can see the code and demo at http://jsbin.com/azeli/2
[Code]....
I managed to get my hover over text pop up to work but now I would like the text box to pop up in the same location relative to the text As you can see here, when you hover over any text not within the first row, it is a bit all over the place. Is there any way making the text pop up the same way it does for the first row for the other rows?
View 6 Replies View RelatedI want to change the position of my div when the user scroll the page.
Example:
<div style="position:absolute;bottom:10px;>
Scrolling text
</div>
I want to change the position to fixed when the user scroll the page using javascript.
I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The script looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. Any idea of a fix?The script is below. I have it sitting in its own js file within my Wordpress theme.
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
[code].....
I've been looking for an "Ajax CMS" but decided to learn jQuery to learn how to code it myself in order to earn some geek-girl cred among my male colleagues. I've learn a lot about jQuery in a week but as you can imagine I still have a lot to learn.
I have successfully animated an image (move to the left and increase opacity) when the mouse hovers a div and reset the image (move it back to its original position and reset the opacity) when the mouse move outside the div. So far so good...
Here comes the question: What I need to do -and don't know how to - is when the user clicks on the div the image should stay in the hover position while still being able to hover any other divs and activate the animation normally.
When a different div is clicked the previous "Clicked" div should return (animate) to its original position and the new "Clicked" div should stay in the hover position. Content will be loaded when the divs are clicked but there won't be page refresh since I'm loading the content by using the load funtion of jQuery.
I'm including the code:
I am running a client side javascript timer to periodically refresh the
contents of some tables in the HTML page. The table values are
dynmically binded from XML DOM object using the <XML tag in HTML>. The
data is getting updated properly. but whenever the value is refreshed,
the HTML page flickers. How do i avoid this flickering.. Code:
I am dynamically removing the row from the table.
But my screen flickers after deleting.
is that normal case or some coding has to be done so that it don't flickers
I haven't been able to pinpoint why my Flickr badge (a javascript tool) causes my page to "flicker" when it's loaded (I've tested Opera and IE, as well - and neither of them have the same problem). It's definitely related to the way I've got my css and JavaScript set up on the page, but I can't pinpoint the problem. This is the second Flickr badge problem that I've run up against.
View 7 Replies View Relatedi,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
[Code]....