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]....
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]...
Because of the nature of my page, I would like to animate a div from a fixed postion when someone first visits the site to an absolutely position location using after clicking a menu item using .animate and the easing effects. This part seems to work fine, however, when I click on the "home" button again, the div will not move back to the original fixed position. The div just sticks to the top of the page. My assumption is that the .animate scriptdoesn't' know how to interpret/find the fixed position location. Is there a way to make this work?
[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
[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 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.
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:
[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 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'm using jquery.animate() to scroll a certain DIV out of my screen at the top. Now I want that same DIV to fade out when it reaches a position which is 150px from the top (so before actually sliding off the screen). How do I achieve this? The code I have for the animation itself is as follows:
$('#slideAway').animate({
marginTop:'0px',
top:'-50%',
}, 1000);
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 make 3 panel that functionally like we browse files in mac. I already suceed made 2 panel, the problem is, at the first load, the second panel already shown. I want it keep hide, until people clicked the button.
[URL]
This the complete script
<html>
<head>
<style type="text/css" media="screen">
[Code]....
I want to do a simple animation where an image fades and expands at the same time. Works beautifully in chrome/safari etc but because of the IE opacity thing not IE. Can I use fadeIn() and get this to work at the same time as the animate()? or is there another solution?
[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'm just figuring out how to use absolute inside a relative element to shift an image without changing the flow of the rest of the html. It's working for Firefox 4, but not IE 9.
In firefox the div element doesn't cause a hole in the flow. The div and the image inside is simply moved over to where they should be. But in IE, the image is sitting there as part of the flow bumping down the next things (the text and span tags) and the image isn't moving over to the right at all.
I've tried wrapping the div in an another div but that made no difference. Am I crazy to think this is supposed to work? I'm inserting the div and image tags dynamically in the client in javacript.
[Code]...
I have a big problem, here is the sample of code:
<ul>
<li>
<a href="#"> <img src="#" /> </a>
<div class="info">
[Code]....
So, normaly the div.info element is with css: display:none; And there is displaying only "a" element. But i have a little code of jquery who makes the div.info element showup when the mouse over on the "li" element. And code is working as i expecting, but not in the IE.
var pic = $('ul li');
pic.hover(function(){
$('div.info', this).stop().animate({opacity:'0'}, 600, function(){
[Code]...
This sure has me puzzled since it's usually the other way around. The script below, straight from a book, works in IE, but not in FF, Chrome, or Safari. Can anyone tell me what I'm not doing that would work in the Good browsers
[Code]...
[url]
If you click the link in FF you will see that when you press "PLAY" the arrow image animates from the top like it is supposed to... but does not show up in IE.
This could be a jQuery or CSS issue...
JQ:
HTML:
CSS: