Place a div at center of another with JQuery - javascript

I've a personal project to learn more about HTML/CSS/JS.
But I got a problem with it.
I have two divs in my <body>, each one with 2 circular concentric div. One is placed on the center of the area, the other one not.
<div id="sphaea_bloc">
<div id="actor" class="actor_locked">
<div class="actor_extern_locked"> </div>
<div class="actor_intern_locked"> </div>
</div>
<div id="lock" class="lock_locked">
<div class="lock_extern_locked"> </div>
<div class="lock_intern_locked"> </div>
</div>
</div>
The base placement is good.
The second step is to add drag'n'drop with JQuery, and it works fine. The aim is to drop the little div into the bigger div.
When it fails, it correctly returns at a base position.
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric).
I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why.
Here is the fiddlejs link :
FiddleJS link
Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ?
Thanks in advance !
AeldredOni

i have did like below, and its working, it will be centered even if you change with and height of divs:
.actor_locked {
position:absolute;
left:-9999px;
right:-9999px;
top:-9999px;
bottom:-9999px;
display: block;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50px;
}
http://jsfiddle.net/xga3dzfm/1/

Related

Problem trying to use position absolute in CSS

Sorry for my english.
I made a web component, kind of List View, and there is a button at its right. It shows only a item, when you click it, it grows and shows all the items:
The problem is, with display: inline-block when I click in the List View, it grows and pushes down the items below.
I tried to use display: absolute and bigger z-index when I click, but obviously this happens:
The button on the right moves left below the List View. While it is what i want:
Maybe it can be done putting a fixed location with JS, but, there is a easier way to do this with css?
Edit:
The buttons are inside a div, in this example called a-div.
This is the simplified code:
<div class="a-div">
<list-view style="display: inline-block;"class="wButton">
</list-view>
<button class="arrow-button" type="button">
<img src="images/arrow-right.svg" alt="">
</button>
</div>
CSS:
.a-div{
width: 50%;
display: flex;
}
.a-div > *{
margin-right: 1rem;
}
I could use a flex-end on the arrow button, but it will look like this:
a-divand b-div both are inside of another div.
And something important, the with of the List View is dynamic.
Hope you can help me, thanks on advance!
When you apply position: absolute to your list it goes outsite the flow so the button with the arrow is placed right under it. Add a margin-left to the button equal to the width of list (plus a little bit more)

JQuery two images slider css issue

I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html
I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-
.js-slider-last-container:after {
background-color: #fff;
content: url(../play.png);
height: 100%;
position: absolute;
width: 5px;
z-index: 1;
}
Has anyone got any ideas?
Thanks!
Scott
Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.
I will show algorithm
HTML
<div class="wrap">
<div class="js-slider-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
<div class="before">Before</div>
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
<div class="js-slider-last-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
</div>
<div class="after">After</div>
</div>
</div>
In html I have added only image
JS
container.mousemove( function(e) {
let widthVal=container.width() - (e.pageX - container.offset().left)
$( lastImgContainer ).css({
"width" :widthVal // container's width - mouse's position from left in the container
});
$('#arrow').css({"right":widthVal});
});
In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.

Make the contents of a div behave like a fixed background

I am trying to create an effect similar to that of:
background-attachment:fixed;
However I want to apply this affect to all elements contained within a div not just the background.
When you scroll down the div will move up the screen but it's contents some of which will be hidden in the overflow will come into view.
<div class="parent"> <!--- will move on scroll. Overflow hidden. --->
<div class="child"></div><!--- won't move on scroll --->
<div class="child"></div><!--- won't move on scroll --->
</div>
Ideally this will be a HTML and CSS solution, but I can stretch to some jQuery or DOM calls with JavaScript. Bear in mind that I would like to use this effect multiple times on one page, so it will need to be relatively succinct.
Apologies if this question has already been asked but I found it difficult to describe so perhaps I am using incorrect keywords in my searches. Any suggestions on how to better phrase this question will be appreciated.
Did you try to fix the position of a DIV:
<style type="text/css">
#mydiv{
position: fixed;
left: 10px;
top: 50px;
}
</style>
<div id="mydiv">
Some content here
</div>
It could be you needed.

Setting Div position up on another content

I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.

Inner side by side Divs resizing

I am new to html5, javaScript and jquery and stuck in a problem related to resizing and need help from the experts.
Problem is that I have a div inside which I have three divs.
1st is the title div on the top,and the other two are side by by side under the title div.The two side by side divs are placed such that one of them take 25% the space of outer div.and other one take 75% of width.
Now I want that when I resize my outer divs the inner divs should adjust them selves such that there width ratio remains the same.
But I am unable to achieve this.
So far I have done this
Resizing Div
Can any one please guide me.What I am doing wrong.
I would appreciate any help.
Crude answer is to just use percentages for your widths: http://jsfiddle.net/xV28s/1/
You should move all those style elements into the css though.
Try this:
CSS:
#parent { overflow: auto; }
#inner-left { float: left; width: 25%; }
#inner-right{ float: right; width: 75%; }
HTML:
<div id="parent">
<div id="title">Title</div>
<div id="inner-left"> </div>
<div id="inner-right"> </div>
</div>

Categories