Controls Not Clickable After Using Position:absolute?
Aug 23, 2010
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...]
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";
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).
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 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 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.
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.
I 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?
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]...
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
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?
i,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 ?
#navigation li is the parent element, which is positioned relative.The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).
How do I put "cont" div on the right of "leftmenu" without using "absolute"?? The screenshot was little bit cropped out and there is no problem on width.
Floating, "perpetual" calendar, displaying one month at a time, in a standard calendar grid. Click a date and a form field is populated with mm/dd/yyyy. Populate one or multiple form fields with a single click. May specify up to 7 form fields to populate. Customizations for jumping a number of months/years ahead or behind. Floats to the left hand side or the right hand side. Tested in IE6 & FF1.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript">
/* Copyright 2007, Michael J. Hill. Used with permission. www.javascript-demos.com */ /* Free use of the code, so long as BOTH copyright notices are kept intact */
// Customizations var defaultMonth = 0; // 1 displays next month onload, -6 displays six months ago var hopMonths = 6; // number of months to "jump" for Fast Forward and Rewind buttons var hopYears = 5; // number of years to "jump" var hiLiteToday = true; // if and when current month is displayed var floatTo = "right"; // right or left var clickField = [];//Do not delete this line, the following lines are optional and you may have up to 7 fields clickField[0] = "contractDate,Order Received"; // fieldName,Description clickField[1] = "startAssembly,Started Assembly"; clickField[2] = "endAssembly,Finished Assembly"; clickField[3] = "dateShipped,Order Shipped"; // End Customizations
// Do not edit below this line
var IE = false; if (navigator.appName == "Microsoft Internet Explorer"){IE = true} var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var refDate = ""; var today = ""; var usedToday = ""; var prevField = ""; var leftStr = ""; if (floatTo == "right"){leftStr = (screen.width)-235+"px"} if (floatTo == "left"){leftStr = "0px"} if (clickField.length > 0){for (t = 0; t < clickField.length; t++) {clickField[t] = clickField[t].split(",")}}
I have created a table to organize data, and upon clicking a row, the user is taken to that data to manage related information to that data. Everything works fine, but something came up where I would like to give them the ability to delete items from that listing. I would like to add an additional column for each row, that will store an image, when clicked on, deletes that item in the database.
My question is: how do you cancel an action based upon a column that is clicked? I'm sure there is, and I don't mind adding a class to the image column for detection... I am unsure how to look further into the DOM event to see what particular td was clicked, if I could, I could then use $(this.attr("class"); to look to check if that specific column was clicked, and to cancel the action accordingly.
This works fine in IE: the div is positioned relative to the td of menu1. However, in Mozilla it doesn't work. The div becomes relative to the top of the page.
I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed?
I have an image on which when user click I submit my form after doing basic javascript validation.I want user not to be able to click once they clicked on the image so that they don't submit it twice. Right now I disable the image once they click it.I was wondering is there any other way I can do that, is there any way to make image click able only once?
