after several days of researching and trying I want to see if you can help me.
I have a graph (coord) and students should mark the extrema of the graph. I have to use JavaScript for this and work in XHTML 1.0 Strict//EN. The idea was that the student clicks on the position on the graph where he/she thinks an extremum lies, this triggers a JavaScript function (addPoint) which adds an img into the same div in which the graph lies (coordDiv) and gives it the position where the student clicked. For an example visit http://ourresidence.net/JavaScript/ where you should be able to view both the site code and the JavaScript code.
As far as I understood, the positioning has to be absolute. static and fixed are incompatible with the desired behaviour and relative would be very difficult because 1. I don't know where the next "ordinary" positioning would be and 2. it would get more complicated with a student deleting a point. So, absolute it is.
Then the positioning should be absolute relative to the div coordDiv and after some time I even figured out how to give the div a concrete dimension (through it's a bit static, the approach with adjustCoordDiv() in klausur.js hasn't work out). However, if I resize the bounderies of the browser, the div and the graph wanders (since they are centered) but the point does not. That needs to be fixed.
And reading how mixed up the acknowledgement of zooming is in different browsers by now I've already completely given up handling zooming in the exercise, but if you come with a solution for that too, my praise would know no end.
Positioning is relative to some containing element in HTML that is positioned itself. If there isn't any such element, positioning is relative to document's body (as in your case). Positioning basically means to have applied some other position in CSS than static.
So you basically need to subordinate your click points to the DIV containing the whole coordinate system (as you do now ). That div should have
position:relative
without any repositioning to position it and to start a new "local coordinate system" for using
position:absolute
on any subordinated element.
On clicking, coordinates of that click need to be converted from global coordinate space to local one. This might be achieved iterating from clicked element to document element using properties offsetParent, offsetTop and offsetLeft of each passed element.
Related
I am trying to find the top and left coordinates of a background-image that by applying some CSS rules has been shifted off the viewport. Difficult to explain in words, here is a visual example:
Black box: Viewport
Red box: <div> with a background-image
Blue box: <div> containing an <a>
When I do getBoundingClientRect of the <div> with the background-image, I get 0px 0px. It makes sense, because the container is within the viewport, and it starts at the very top and left.
However, the background-image of that <div> has been shifted to the left (and it could have been shifted to the top too), and therefore the coordinates should differ from the ones from the <div>. So my question is:
How would I READ (I don't want to change) How can I find the coordinates of the green point in any page that is facing this situation? I mean, the browser must have known how many pixels it needs to cut the background-image, right?
I am currently using Javascript to access the Web/Dom API. I am willing to use anything (undocumented maybe?) to achieve this.
Here is a solution to your problem that works on modern browsers.
var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');
As you can see from the following page not all web browsers support this method.
http://caniuse.com/getcomputedstyle
There is no answer to the "Cross-browser (IE8-) getComputedStyle with Javascript?" question yet and I don't know another solution to this problem.
Without getComputedStyle() there is no reasonable way of getting the current style settings for an element since that requires going through all of the included CSS. It is possible but involves CPU intensive code. If you were to go that direction you will be able to create a temporary div inside the existing div with relative positioning, possibly setting top and left, or margins, to the values from the background position and then calculate where the div's clientTop and clientLeft ends up which may work in some cases.
There is a css property for that: the background-position. Try the following code to retrieve the information asked for:
$('#divId').css('backgroundPosition');
I've tried Googling this question, as well as searching for it here but I can't seem to find anything relevant (which suggests that it is not possible).
I've also tried playing around with combination of using "relative" positioning with different "display" properties (like inline, inline-block, etc.), but not at all to my surprise I have found that it still affects the flow of the page. That's pretty much what I understood anyway, but then it got me to thinking, "Is there any other way, using CSS, to get an element to NOT influence the flow of the page, besides using the positions absolute or fixed?"
I would also be interested in any way to achieve the same effect using JavaScript/jQuery, if it's even possible.
I'm not sure what is the use case here, but here is a short explanation that i hope would clear things for you:
Every HTML has a 'Normal Flow' which is usually from left to right. Block level elements (div,p,li) would always take the whole line, while inline elements (span, a) would appear one next to each other.
There are several ways you can control the flow of the page:
Changing an element's display property (inline,inline-block,table-cell etc.)
Setting position absolute - that would take the element out of the 'Normal Flow' thus making room for other element to occupy that space.
Setting position relative - that way you can move the element from it original position, but unlike absolute positioning the element will still occupy it's original space so no other element can get in there.
Using floats - similar to absolute, that will take the element out of the normal page flow and will enable other elements to occupy that place.
These are the main ways, each affects the flow differently.
Hope it helped.
You could float the element, but that usually causes the element and its in-flow siblings to move away from where it would otherwise be were it in the normal flow. It also transforms the element into a block box. If either of these effects are undesirable, then floating is not an option.
If you want the element to remain as it is but act as if it weren't in the normal flow, then simply specifying position: absolute alone should suffice. If you don't specify any of top, right, bottom or left, then the element won't be offset anywhere from its normal flow position, except in special circumstances (e.g. absposing an element will block margin collapse on that element, because when it's out of flow it no longer has any other margins to interact with — compare this example with this one).
I need to detect when an image is moved. The point is that my page has a related HTML element (another image) to the first one that depends on its position. I though that a plugin like Watch can help, but the only properties I know involved with position (top and left) are not changed never to this plugin (keep its original value to 'auto').
How can I get an event triggered when there is a page element move?
UPDATE: In order to avoid missunderstandigs, I'll explain what really happens. I have an image (call it AUX, position absolute) that is situated in function of another image position (image BASE). BASE and AUX don't share anything in the HTML except the BODY element, so it's not possible to use position relative or similar. So, I have a function that gets BASE position and computes AUX position. The problem is when the page is loaded: function is called when document is loaded and BASE has a position different from the final position (when other elements are loaded, like other images, javascript functions, etc, BASE changes its position). This makes AUX have an invalid position (it was valid, but not yet).
Instead of using javascript to set the position, I would use javascript to make them both a child of a minimal common element so that relative positioning schemes could be used. Because otherwise, you would need to poll for the position and update, and at best you can only do that every 10-15 ms or so.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.
After googling around and finding a lot of ie bugs I still did not find a description of the problem I have.
The initial situation is a standard one. We have a tooltip which is actually a hidden div that will be displayed on mouseover at a given location. The div is hidden with display:none and contains a table with the content. We tried different libraries for showing the div (scriptaculous and jQuery Cluetip) but the effect is the same.
The problem:
Everything is fine as long as the contents fits the width of my window. But when I resize it until the horizontal scrollbar is activated the content of the hidden div will be shown at the end of the page when the tooltip is activated.
This is really strange as it happens only under these premises. When more than one tooltip is involved the browser might even crash (and under Vista takes the whole system with him duh).
I know it's a bit complicated to explain but I hope that someone at least had heard of that bug and can point me into the right direction.
Setting the width css property to "auto" (defined in the W3C standard) in IE will cause the <div> element to take up the entire space allotted to it. If the <body> element does not have a width applied, then this can result in a page miles and miles wide. This often crashes the browser, depending on the operating system. The best option is to just set it to null instead.
(This is based on actual experience coding for IE6 and may not necessarily apply to IE7+).
Another thing to keep in mind is that most browsers do what's called "lazy rendering" which means that if an element is hidden on the page, it won't render it. It won't even acknowledge its existence as a potentially visible object until it is unhidden. This means having no idea how big that object is going to be until you reveal it. This can cause problems if you're trying to figure out how big something will be once you make it visible. Basically the only way around it is to unhide it, read its size, re-hide it, then proceed.
The way that I did my tool tip is to use visibility hidden and visible. Once the mouse is off, I set the x and y to 0 to move the tooltip out of the viewing space.
This only works if the position is set to absolute.
Edit: How did you position the tooltip when showing it:
I positioned the tooltip by changing the css values of "top" and "left".
box.css("left, e.pageX+1);
box.css("top", e.pageY+1);
Where 'e' is my event variable from:
mousemove(function(e){});