JQuery resizeable and dragable divs positioning problems - javascript

I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.

At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview

Related

Make div stick to non-child div with JQuery

So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.

Positioning all class elements to align from the same point

I'm trying to position my div with the class .content-window so that they all align from the same point, which is the top left corner of the first section element.
This is the first time I've encountered this problem and I've tried everything, from pure CSS to JQUERY.
Here's the JSFiddle for the project : http://jsfiddle.net/smpte11/SahM8/
Bootstrap is setting your <section>s to position: relative. You'll need to manually override that and position the rest of your elements accordingly.
Here's one way to do it: http://jsfiddle.net/SahM8/1/

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

How to implement a vertical slide controller in a height limited div with many objects

I'm nearly 2 months old in studying HTML, JavaScript and jQuery. I've done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!
Is there some magical panel in jQuery created for that purpose?
TIA
Dennis
If you have a containing div such as <div id="container">, you can add the following properties to it to get it's content to scroll vertically:
div#container {
overflow-y: auto;
height: 100px;
}
This CSS will show a vertical scroll bar if the div's content exceeds it's height. The only caveat with this solution is you must set a height on the div.
Here's an example.

Static positioned div box problem

I need to have a div box in a static position meaning that when someone scrolls down the page, the div stays in the same position.
I have googled a lot and I found some solutions, but they were all using defined positions like top left, top right etc.. and I need a solution that will work regardless of the place the div is in. So basically the script needs to either take the current position and set that to the fixed position, or not work with fixed X/Y position..
Any ideas?
Thanks,
You need to use position:fixed for your element.
Example:
#dv{
position:fixed; /* this is important for you */
width:200px;
height:200px;
background:blue;
}
Check out the example
Notice that div remains there even if you scroll :)
http://jsfiddle.net/Shaz/Fqr4t/
I'm not entirely sure what you mean by 'regardless of the place the div is in', however, if you can't use position: fixed, there is an onscroll event in Javascript that you can hook into. You can update the position of the div there. Do note that this is usually isn't fast enough to look fluent.

Categories