I know that I cannot specify the zIndex of a relatively positioned div BUT it does have a zindex computed by the browser. That's why another div can appear below or above it. So, how do I figure out what it's zindex is so I can dynamically put something above it?
Using .currentStyle/getcomputedstyle doesn't work as it returns "auto".
I have a div that is float: left and has a bunch of divs inside it. Those divs inside are all position: relative. They also have z-index values. I want to know the actual height of the outer div's content when I add a div.
Here's the problem:
Code:
<div class="outer">
<div class="something_With_Z_Index_Of_Zero">Something</div>
<div class="something_With_Z_Index_Of_One">Something</div>
</div>
(NOTE: Both inner divs have a height of 20px)
When I ask for either: outerDiv.offsetHeight or outerDiv's computedStyle.height, both give me 40 (or 40px). This is actually not right as the two inner divs are placed one over the other. How would I figure out the proper height?
I need to find the position of an element on the page relative to the browser window. Its part of a popup calendar script (and no, they don't want to change it so please don't suggest jQuery date-picker etc) The script uses these functions [url]... to find the position of the anchor to pop up the calendar next to it.
Now the client wants to make the calendar fixed when the user scrolls so that it always stays on screen. The most graceful solution is using css position:fixed (I'm aware it doesn't work in IE6 - that's not a problem)
I've been using the getAnchorWindowPosition function to get the coordinates but the numbers its giving are wrong (to different degrees depending on the browser) It was only 200px out in the Y axis in Firefox but in IE7&8 its off the screen.
I have two image objects. They both have a zindex of 2. What determines which one appears on top?
I have some code that checks to see zindex to see what image is on top, but it is sometimes wrong when both images have the same zindex. How can I truly figure out what image is on top?
i have 2 nested divs like this:
<div id="outer" style="display:block;">
<id ="inner">
<input type ="text" id="txt"/>
</div>
</div>
in my javascript, when i alert the value of (document.getelementbyId('inner')).style.display, I get blank value. when i do the same for outer div, then i get value block. however inner div is inheriting style from its parent. i need to add some specific handling in case style of inner div is block, whether explicit style or computed style. i cannot do the check on its parent's style as it might not always be immediate parent.
now my question: I have designed a layout that has a menu in a left div layer (#left-area). When clicking on a link, it creates and opens a new div layer in the right div area (#right-area).
Each of the layers is draggable, sizable etc, but my problem is that the order they are created, is the order the z-index is set as. Explained: if i open "link 1", then "link 2", the "link 2" div will always be on top of the "link 1" div. I want the ability to change the order (z-index??), of the layer just by clicking on the layer, so that if i click on the "link 1" layer, it will bring that to the front, and the "link 2" layer will appear below it.
There must be a way to do this... i have seen examples at pupunzi.com . Is there a way to do it with jQuery. I have searched everywhere, but i cannot see the function/command.
Animate doesnt seem to work with zindex. I dont see anywhere this is mentioned on the animate() page.
$("#myelement").animate({zIndex: 10})
.animate({opacity: 1), 1000);
Opacity is affected but not zIndex. I can change zIndex the normal way though:
$("#myelement").css('zIndex', '10');
I have 4 Div-Boxes next to each other , which, when I move my mouse over them, get bigger.
Looks basically like this: [box1] [box2] [box3] [box4]
The problem is, that when I move over box 1 or 2, they grow BEHIND the other boxes... So, something with the zindex isnt working properly..I am using the animate function, but I can't seem to use zIndex with animate, because Internet Explorer goes nuts when I do it ...This was my original code, which didnt work, as IE seems to fuck it up, when using zindex in animate
$('.infobox').mouseenter(function() {
$(this).animate( {width: 450, height: 300, zIndex:50},{duration: 'slow', easing: 'easeOutBack'})
[code]....
So I thought, I would use addClass() and removeClass(), to change the zIndex.
CSS classes:
.indexontop{
z-index:50;
border: 1px solid #ff0000; /* for testing purpose!! */
}
[code]....
The problem is, that it does not seem to add that class!!For testing purpose I added a red border to the .indexontop - Class, but no border appears..
I have made a layout which includes some coloured tabs which make ajax calls to get content.These tabs are partially hidden and onmouseover the tab should move to the front. this works perfectly in Firefox, Chrome, Opera, and Safari, but not in IE. I get no javascript errors and the page validates on W3C Validator without error.Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
[code].....
Is there a way to pass a variable computed in handlerIn to handlerOut? jQuery("#some_id").hover( function() { var mega_menu_id = "#" + jQuery(this).attr('id') + "-mega-menu";
}, function () {
// want to use that computed value here
}); //end hover
I don't think I want globals since these functions might be called in rapid succession as a users hovers into and out of navigation elements.
I have some fields on my form that are auto-populating with a difference from 2 input fields using onChange, easy stuff. The correct value is stored in the DB, to 3 decimal places (correct, since data type is a float with 3 decimals).The challenge I am having is to get the number that is auto-displaying on the form to format to 3 decimals. For example, when I enter the first number at 44.8, and a second number of 44.666, the onChange command displays '0.13400000000000034'. This is saved in the db correctly as, '0.134' and once the form is submitted the correct value of 0.134 displays since it is pulling directly from the db. I would like to format the onChange display with the toFixed command so the extra decimals don't show onChange.
View 1 Replies View RelatedI am using Ben Alman's JQuery resize plugin in order to obtain the varying computed width of an element when the window is resized (the element in question is a page wrapper that exhibits the expand-to-fit behavior of a block box, and it's computed width is obviously influenced by the resizing of the window. Essentially, what I need to be able to do, is to reference a variable that is defined in a .resize() function ('width_page') in a seperate .each() function.
[Code]...
I now understand that variables can't cross boundaries like in the example above, which leaves me a little stuck. I also understand that this is specific to the context of the .resize() function, and that it can't be taken out of it without using an element selector. Is there some way I can call the .resize() function in my .each() function?
My understanding had been that $.css("width") would return the original user selected style, eg "100%" or "10em", and $.width() returned the computed width, always in "px". Not so, following the code through for .css(), it calls something called getComputedStyle and the only difference between the two functions turns out to be a post-fix of "px" on the .css() result - not very useful. I need to know whether my user has called me with a proportional dimension, or a fixed one. How to tell with jQuery?
View 1 Replies View Related<div>
Is it possible find a node backwards instead of forwards.
I would like to do (remember find_reverse does not exist)
I am trying to create a menu system.
The mainmenu is a table
<table><tr><td>menu1</td><td>menu2</td></tr></table>
No I try insert the submenu so that it becomes relative to the main menu
item. For menu1 the relevant code then becomes:
<td style="position:relative;">menu1<div style="position:absolute; top:20;
left:0;">
<a href=x.htm>option1</a><br>
<a href=y.htm>option2</a>
</div></td>
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.
What am I doing wrong?
I would like to display any item that has ID associated with it on the top-left corner of its physical location (20px up and 20px right) with yellow background and red foreground.
View 3 Replies View RelatedIf you follow the evolution of software development on Internet, you
may have the impression that every new development is Web based and
that the main areas of concern are whether you should develop new
application with Ruby on Rail or if you should choose Flash rather
than Ajax for the interface. However, if you ask developers, you may
find that the Web is not as ubiquitous in their work as you may think.
Even if 66% of the participants develop the majority of their new
applications with a browser as the interface, there is still a large
portion of developers that are working today for operating contexts
that are outside the Web world, like embedded software or Windows
applications. Code:
I discover a strange bug in Konqueror 3.1.1.
I design a javascript application which acts in one file called
example.html. At the beggining of this js i write:
if (document.images)
{
folderopen= new Image(16,16);
folderopen.src="http://www.sergioamo.8m.com/buttons/folder_open.png";
folderclose= new Image(16,16);
folderclose.src="http://www.sergioamo.8m.com/buttons/folder_close.png";
}
functions....
....
...
..
and my javascript works perfect.
If i write:
if (document.images)
{
folderopen= new Image(16,16);
folderopen.src="./buttons/folder_open.png";
folderclose= new Image(16,16);
folderclose.src="./buttons/folder_close.png";
}
functions...
....
...
..
my javascript does not work properly. Does anyone knows if is imposible
to use relative references with konqueror 3.1.1 or which is the problem?
Does anyone know where I can get a script for a pop-up where I can control fixed positioning of a popup based on browser resolution?
two res's: 800 x 600 and 1024 x 768 ....
I'm having an issue using .get and a callback. Basically, unlessI use a fully quantified path when I deploy my site the call doesn't work. When I'm developing on localhost, the site works fine. It's an ASP.NET MVC site. I'm fairly new to jQuery. If I replace the code with an absolute path, all seems fine. Obviously I'd rather use relative paths. I'd be grateful for any insight you could offer.
[Code]...
1. I have some links that open with Javascript. The HTTP links work just fine, but I have one link that is supposed to open a picture in a new window. The picture is stored in the root/images folder. So it's supposed to be a relative path, but no matter what I do, I get an error page. (images/snailmail.jpg)
2. I have added a mouserollover funtion to change a small picture on the page. I am trying to add a second function to that function, to stop the scrollbar in the lower left corner as long as the mouse hovers over the picture. For the first picture, it works fine, but with the 2nd picture which allready has a mouseover function, I am not sure what to do.
I've wondering if anyone knows of a script where I can scroll a div down the page as the user scrolls down the page. You know, like those annoying ads do sometimes
I've googled for some, but the ones I've tried only work to varying degrees when I want the div positioned relatively. The reason I want it relatively positioned is that my site is centred, and fixed-width.
Basically, I need it to scroll up and down in a 'side bar' area, and the main problem I seem to be having: not scroll below my footer area.
The two pages for preloading below seemed to preload images IF I used an absolute path but they don't preload the images if I just used relative paths like the ones below.
Give it a try. The two pages below using relative paths won't work. Then try changing the paths of the images in both pages to use absolute path(with http://) which will work.
But I want to use relative paths. What can be done? Other than inserting 1x1 size of the images I want to preload. Code:
In short, is there any way to have a js file know the location on the server where it is stored.. I can only find the domain/location of the current web page URI.
Explanation:
I have a bunch of javascript and php files that are in one location and are shared across a whole bunch of subdomains (each on their own folder on the root). I call the script through a "scripts" subdomain (this is so all the subdomains can access them in one shot).
A couple of the js files are ajax incorporated and I want to call a php script. Obviously, I can't call to the "scripts" subdomain, nor can I use the root webserver (as it is detected as the calling subdomains root). The only thing I can think of is if I can call the php file RELATIVE to the JS file... but all I can seem to get is RELATIVE to the calling script, which won't work since the js file won't know where it's being called from.
I'm having a problem with css positions !! i want the position of an image to be fixed when the user scrolls till some point and the position should be set to relative after that
View 9 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?