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
Related
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.
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).
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.
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 the following script:
http://jsfiddle.net/rYFEY/12/
Which works well, except I need to remove right and bottom-right handles, only leaving the bottom handle for resizing purposes. At the moment, if I click on the right handle, the box changes size.
That should not happen, it should always stay 100% wide, and be resizeable in height only.
How can this be done?
Use the handles-option:
handles:'s'
's' stands for 'south', which means "bottom" in resizable().
The default is 's,e,se' which means south, east,south-east (bottom, right,bottom-right)
http://docs.jquery.com/UI/Resizable#option-handles