Inner side by side Divs resizing - javascript

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>

Related

Place a div at center of another with JQuery

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/

How to check if 2 elements displayed on the same row?

Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you
"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.
You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.
There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/
Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.

Using JQuery to animate size of div

I am an amateur in Jquery but am so close to getting what I am looking for. I am trying to have a containing div animate to a larger height when an object is clicked. I am using the following code:
<div id="sliderone">
<div id="nav">
<div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="ourteam">
<div id="title"></div>
</div>
</div>
<script type="text/javascript">
$('#navone').click(function(){
$('#title').html("<img src='http://placehold.it/350x550' alt='' />");
$('.post-8 .content-container').animate({height: '950'});
});
</script>
#navone {
padding:20px 20px;
cursor:pointer;
}
#title {
width:350px;
margin:0 auto;
}
#sliderone {
height:50px;
background-color:#777777;
position: absolute;
margin-top: -500px;
left: 50%;
margin-left: -175px;
}
#sliderone has to be absolutely positioned and so when I try to animate .post-8 .content-container it makes the top longer in comparison instead of making the bottom longer to contain the new content. Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container?
Thank you for any help. I have worked hard on this and just can't quite figure out this last problem.
Here is the actual page to see.
http://s416809079.onlinehome.us/wp-login
login:stackoverflow
password:stackoverflow
You might want to try using some of jQuery's slideDown, slideUp or slideToggle methods. Since you are specifically looking to slide the container I imagine this might be more specific to your needs.
See this example based on what you have above: http://jsfiddle.net/82kHV/13/
Also links to jQuery methods:
http://api.jquery.com/category/effects/sliding/
You will set the element's height you want in your CSS. jQuery will interpolate and animated from 0 to this defined value in slideDown and the reverse in slideUp. slideToggle will take initial state of the element and do the opposite or toggle.
I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . If that is the case you need to animate too the height for #sliderone:
$('#sliderone').animate({height: '225px'});/*The value you calculate*/
Check this demo http://jsfiddle.net/z7M2Y/26/

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on

How can I prevent one div from overlapping another on resize?

Here's an example: http://la.truxmap.com/truckpage?id=coolhaus
When I make the browser window narrower from the right hand side, the recent tweets div will go underneath the container div. i want to make it so that the recent tweets div can go no further left than the right hand border of the container div. Ive been trying to figure out if it can be done with css, but i cant seem to get it. is there a simple javascript solution that fits the bill?
Thanks!
You can either choose to work with a liquid layout or use the css property position.
Liquid layout:
You got 3 DIV's in your wrapper divand you want them to resize on a smaller browser window, you can do this with percentages that become variable widths :
css:
.wrapper {
width:100%
}
.divleft {
float:left;
width:20%
}
.divmiddle {
float:left;
width:60%
}
.divright {
float:left;
width:20%
}
html:
<div class="wrapper">
<div class="divleft">left</div>
<div class="divmiddle">middle</div>
<div class="divright">right</div>
</div>
As i said, the other possibility is the assigning the css property position to your different DIV's.
Try it yourself, its fairly easy:
http://www.w3schools.com/Css/pr_class_position.asp
You can also keep them from overlapping vertically:
.noOverlap{
float:left;
width:100%;
}

Categories