If Have a div say
<div style="position:absolute;top:0%;left:94%;width:40px;height:40px;"/>
when viewed on different screen resolution the 94% starts to slide to the right, is that normal behavior.
The div is relative to the document, so when the window resize's , I want it to move along with the window.
I hope I am making sense. As I have it right now, it stays close to where I placed it, but as the screen gets larger or the doc is viewed on a higher resolution, it starts to shift.
Question: How can I position a div absolutely with percents and keep it in the correct position when the screen size/ resolution changes.
Edit:
Here is what I am trying to do. I am writing an application in which a user can pick some items from a tool box, drag and drop onto a window sort of like Visual Studio, except the result is not a form its an HTML page. I got all this working and it works just fine. My problem started when I started testing on different screens and resolutions the end result is always different from the screen the user used to create the html page. Every thing in the page is absolutely positioned except the main content area which is relative, it contains all the absolutely positioned Items.
What I had tried was the percent left and top values for the items on the screen, and that was what lead to my original question, at the suggestion of calculating my own values I tried this
var currH = $(window).height();
var currW = $(window).width();
var rW = currW / OrgWidth; //Orignal Width of the window when the item was placed
var rH = currH / OrgHeight; //Orginal height of the window when the item was placed
var x =$("#Button_Tools").offset().left * rW;
var y =$("#Button_Tools").offset().top * rH;
$("#Button_Tools").css("left", x.toString() + "px");
$("#Button_Tools").css("top", y.toString() + "px");
I calculate this when the window first loads to and it moves the button to the exact same location the percent value moved it to.
What am I doing wrong? Any Takers.
You can't position a div absolutely with percents and expect it to behave the same in every screen. Since you are using percentage, the value will be proportional to the size of the screen. 94% of 1000 is different than 94% of 1500.
You can set the right attribute instead of the left, something like:
<div style="position:absolute;top:0%;right:20px;width:40px;height:40px;"/>
You could also compute this value in the page load event based on the current width of the page, this way you guarantee that the position will be the same even when the window is resized.
Related
Similar to this unresolved question (jQuery - parallax - update background position correctly)
I am animating the transform property of an element on page scroll to achieve a parallax-like effect. I want this element to only begin animating up when it is in view. The problem now is that if the element appears further down the page, it has already moved up a lot and loses the effect.
Here is my code currently
function parallax() {
var scrolled = $(window).scrollTop();
$('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}
$(window).scroll(function(e){
parallax();
});
In answer to your question how to separate "parallax'ed" divs, so they shift their position independently from each other upon scrolling, one should rely on their unique coordinates - each one has it's own $(elem).offset().top - a general vertical offset from the top of the page (it's stays the same all the time unless you meddle with the TOP property manually).
so all calculation could be based against this property.
$('.parallax').each(function(){
if ($(this).is_on_screen()) {
var firstTop = $(this).offset().top;
var winScrollTop = $(window).scrollTop();
var shiftDistance = (firstTop - winScrollTop)*0.02;
$(this).css("transform":"translateY("+shiftDistance+"px)");
}
});
plus you check if the element is in the viewport. Thus, you assure it moves the same delta distance in its own time no matter where it's on the page - further down or up.
Another thing is that how to put "borders" of visibility of the element on the screen. If you are moving an element when it's in viewport, i would suggest making a wrapping div within which the movement occurs (like a bg moving within a div wrapper).
<div class="parallax-section slide1">
<span class="moving-block"></span>
</div>
div has a bigger height and we check when this div is on the screen, not the moving element.
demo
Also other modifications can be applied if one needs different speed, offset for each element. I found this plugin a good beginner stuff to learn parallax.
P.S. btw, all initial properties should be cached in variables instead of retrieving them each time in a callback, like firstTop for instance
I used this code to hide the bottom 37 pixels on the clients request, it hides the bottom of all blogpost images (it's a copyright mark), but now she wants to add larger images as well, which does't have the copyright mark at the bottom, so it must display in full, the size of the larger images is 1843px, and the small images are 351px in height.
Bascially I have to check "if container image greater than 351px", hide the bottom border, else, display image in full height.
However, If I add the code below in a normal loop, it doesn't work.
$('.image_Container').each(function() {
*var $this = $(this),
w = $this.find('img').width(), // Width of the image inside .box
h = $this.find('img').height() - 37; // Height of the image inside container
$this.width(w).height(h); // Applies the changes to the images
});
Any idea on how to make it work in a loop?
So I'm using the following to show div top left corner relative to mouse click location.
How do I take into account if the click is near bottom of browser?
What happens now is the div appears off screen but lets me scroll down more to see div. It works but I'd rather have it smart enough to show entire div no matter where I click on browser screen.
This is what I've learned so far:
div1.style.top = (event.clientY + self.pageYOffset) + 'px';
div1.style.left = (event.clientX + self.pageXOffset) + 'px';
Have a look at Dan's answer on "How to tell if a DOM element is visible in the current viewport?". He's describing several methods to check if an element is still visible to the user.
For your case this means you could check wether the div to be shown would be visible. Or in case it wouldn't: swop it top/left of the cursor position (and vis-à-vis).
I need to have a simple pop up rectangle, preferably with jQuery or some such, that simply brings up a scaled down canvas (say, 1:2, representing a 1000px x 1600px browser window) that can be clicked on to get the x/y position in the full window.
It's really just a simple, visual way to help a client position content on a page (it has to be completely at their control, not on a grid).
Does anyone have an idea of something out there that already does something like this? (I'm looking for the wordpress admin, but should be able to work anything in pretty much).
Edit to clarify. Here is what I'm thinking might work if there is nothing out there that does this:
If you click a button, jQ an absolute positioned div (lightbox style), of the sized I talked about, then close the div upon clicking it, but somehow get the x/y position in the div where it was clicked and then scale this with some maths...
I think the thing I don't know how to do here is getting the x/y position relative to the size of the specific div.
Sorry, I think this is maybe a bit of a terribly worded question.
$('#popup').css("top", ($(window).height()) / 2 + $(window).scrollTop() + "px");
$('#popup').css("left", ($(window).width()) / 2 + $(window).scrollLeft() + "px");
your canva need to be set to
position: relative
then anything inside this element can be set to
position : absolute
top: [your Y position from top side of the canva]px;
left: [your X position from left side of the canva]px;
Absolute position always refers to the first element that has no default positionning, in this case relative.
I have several boxes (more than 100) that will be created dynamically in different positions on the screen. Upon clicking each box, I want a slide in pop up with the details.
I want its position to slide in near each boxes. I have done that, but, if some boxes are near the browser window end on the right side, half of the pop up gets hidden in the window.
I want those pop-ups to display fully before the window (as like in excel).
my javascript code for postioning;
function centerPopup(comp_id, top, left) {
$("#popupContact").css({
"position": "absolute",
"top": top + 70,
"left": left + 223
});
}
If I'm understanding your question correctly it's not the overlap with other boxes but losing half the box on the edges of the screen? This sounds like you're using the edge of the window to set the position of the box but you aren't accounting for the width of the box itself. Make sure to get the width of the current box divided by two and subtract this from the max window size. This will position the right edge of your box at the right side of the window (if you imagine a box rendered at the far right of the screen).
Hopefully I'm interpreting your question correctly.
If they are appearing underneath another element, try adding a higher z-index to the style of the popup box. that will allow it to appear over something else with a lower z-index.
I'd need more code, or an example (use jsfiddle.net) to really see what's going on