jQuery if div is in x position, then reveal another div - javascript

I have a div that is moveable in all directions with the keyboard arrows.
I'm trying to make it so that when the moveable div 'walks' down the page and reaches a certain point, another div with text in it appears.
How do I make it so that when the character reaches a certain point on the page, a div dialogue shows?
if($('#'+character).position().top > -500) {
if(character == 'character1') {
$('#page2 .dialogue').fadeIn(4000);
}
}

So position() is relative to the containing element while offset() is relative to the document. With that said, you are asking when an element is 500 above the containing div. You may not be able to see it. Try removing the negative sign.
If you provide a jsfiddle then we can confirm and provide better help.

In CSS, you can set element.style.top but you cannot read it. You need to use element.offsetTop instead, which will give you the position of your div. I'll assume character is a variable which has been defined in advance and is the ID of the div layer.
if(document.getElementById(character).offsetTop > 500) {
if(character == 'character1') {
$('#page2 .dialogue').fadeIn(4000);
}
}
Oughta do the trick. Call it occasionally to keep checking.
Or even better yet, don't bother with any of that. Keep the character's position in a variable, then set their position that way, and when you need to read the coordinates of the character just read the variable. That's how I'd approach it.

Related

How to trigger an image to move when users scroll the page?

Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.
$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!
Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.

Convert Absolute Positioning Into Relative Positioning

Sorry if this is already out there somewhere, but I've been looking for a while and haven't found anything. I'd like to know if there's any way to, given the x and y coordinates/offset for an absolutely positioned element on a page, change that element into a relatively positioned element, but have it stay in the same visual spot, changing its location in the DOM. For example, given this html
<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>
if divOne were positioned absolutely and its position happened to visually fall between divTwo and divThree, is there a way for me to convert its x,y position so I would be able to tell jQuery to place it after divOne and before divTwo in the DOM? I'm well versed in Javascript and jQuery, I'm just looking for a method I may not know about or for an answer from someone who may have come across this before.
by removing the absolute positioning of the dragged div you must place its tag to a different place in the dom in order to get it repositioned.
For example if you drag #divOne so that it visually moves between #divTwo and #divThree what you should do is remove the absolute positioning of #divOne and move its tag between the two other divs:
<div id="divTwo"></div>
<div id="divOne"></div>
<div id="divThree"></div>
If you have a well-defined grid this will work.
If I were you what I would do is to give a standard class to any div in my grid that I want be re-arrangeable. E.g., the class "arrangeable". When the drag-end fires I would calculate where my dragged div must be placed in the dom using this formula:
The dragged div should be moved to another place on the dom. What it will happen is that the dragged div will take the place of an existing one and "push" the existing just after it. For example by dragging #divOne between #divTwo and #divThree, #divOne takes the place of #divThree and pushes it after it. Supposing that the user stops the drag and releases left click when the dragged div is over the existing div whose place is going to be taken (let's name it "pushedDiv") by the dragged one then all you have to do is to recognize the pushedDiv, remove the dragged one from the dom, place right before the recognized one and make its position relative.
In order to realize which is the pushedDiv you can use this routine:
//on drag end, where mouse has x and y coords:
var pushedDiv;
$(".arrangeable").each(function(index,value){
var theoffset = $(this).offset();
if(x >= theoffset .left && x <= theoffset .left + $(this).width() && y >= theoffset .top && y <= theoffset .top + $(this).height()){
pushedDiv = $(this);
}
});
// if pushedDiv is still null then the user didn't release the left click over a div of class "arrangeable". Else, the pushedDiv will be the one we are looking for

Create span around text based on offset

We are trying to fit the content in div inside main div. But half of the line is being cut. How should we avoid this. How should we identify that line and create span around those words and move it slightly up or down.
We were trying with offsetheight, offsetTop etc as we do not want to use scroll bar. Any idea in jquery to handle this.
Code here: jsfiddle
I am playing around with your code... I'm not 100% sure of what you are trying to accomplish.. but check out the revisions I made and let me know if it gets you any closer to what you are trying to do.
I added in the functionality for the next and previous and also modified your surrounding box so there is no padding. You can tweak all this, but maybe this will prevent the need to try to move stuff around via jquery?
DEMO: http://jsfiddle.net/r5eZ7/3/
$(".next").click(function() {
var visiblep = $(".content p:visible");
if (visiblep.next().length == 0)
{
$(".content p:first").show();
}
else
{
visiblep.next().show();
}
visiblep.hide();
});

jQuery offset() is returning null for elements below the fold

I suspect I'm misunderstanding something here, but I want to make sure that I'm not crazy. I have some JS that lazy loads some images. Here is a truncated version of what I'm doing:
jQuery(window).scroll(function() {
self.image_holders = jQuery('.image-holder');
jQuery.each(self.image_holders, function(i, placeholder){
if ( jQuery(placeholder).offset() ){
//compare offsets and load image if appropriate
}
});
});
The matched elements that are below the fold or even just partially below the fold are returning null for offset(). What I am trying to accomplish is to load images that are within a certain threshold below the folder before the user scrolls to it. Is this expected behavior for jQuery? How can I get the value of the offsets before they appear above the fold?
Edit: To clarify these elements i need the offset for are NOT hidden or invisible, they are only 'below the fold'.
Right from the Docs:
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on
the body element.
While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.

How to keep an absolutely positioned element directly over the position of inline one?

This is a follow up question to How can I stop an IFrame reloading when I change it's position in the DOM? if you want the background.
I have an inline div <div id="leaderboard-slot"></div> (with a fixed width and height) and another div ("leaderboard-loader") further down the page with the actual content for that div.
For various reasons (see previous thread), I am unable to simply do an appendChild or similar.
Instead, I'm hoping to position leaderboard-loader such that it takes up the space "reserved" by leaderboard slot. I've used some jQuery methods to do this:
var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');
which I fire on document load and resize. However, if other elements within the page cause a reflow, then the target div moves, but the loader doesn't.
Is there a safe way of doing this - it needs to work when I know nothing else about the page (ie I can't just make this call on any other methods that might cause a reflow, because I don't know what those are).
Any help would be much appreciated - thank you :)
If I understand your question correctly, there is no need for Javascript. Just put leaderboard-loader in front of the leaderboard-slot tag, give it position: absolute and identical width and height. If slot is a normal element, loader will float above it and cover it perfectly.
<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>
I'm starting to regret my answer now. Hopefully you can find something better than the absolute positioning workaround. But, in the spirit of kludgey solutions, you could call the repositioning script on a timer. sigh.
You could put them both in the same relative positioned, 0 margin div, with the temporary div z-indexed on top of the slow loader.
Make them both absoluely positioned in the parent, not the window, at 0:0 and the same size.
You can use opacity and fade one in as you fade the other one out, or just swap visibility:hidden and visible for the two elements when you are ready..

Categories

Resources