I have 2 types of divs
<div class="target_div" id="t1"> </div>
<div class="target_div" id="t2"> </div>
<div class="target_div" id="t3"> </div>
<div class="target_div" id="t4"> </div>
<div class="child_div" id="c1"> </div>
<div class="child_div" id="c2"> </div>
<div class="child_div" id="c3"> </div>
<div class="child_div" id="c4"> </div>
Using Jquery , say I want to position c1 over t1 , so that their top left corners match always , how do I go about doing this ? I want c1 to stick to t1 no matter what ... page resizing , scrolling.. in all cases .
I am creating a card game , and I want to drag drop and place the cards from the footer and place in the divs numbered 1-13 . Hence the question.
In the picture , t1,t2... etc are the divs with numbers 1-13 . c1,c2 etc are the cards lying on the footer.
Just set your card to position absolute with CSS and then use this script :
var offset = $('#t1').offset() //example
$('#c1').css({
'top' : offset.top,
'left' : offset.left
})
add position:relative; to the target_div class.
when you'r droping a child_div in target_div, move the child_div element to be a direct child of target_div (DOM manipulation is very easy using JavaScript & JQuery like this), then add position:absolute; top:0; left:0; to the specific child_div being moved.
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
I want to have the ability to place a fixed span div ( span1..span12) inside a .row-fluid container.
<div class="row-fluid">
<div class="span5 red">
<div class="row">
<div class="span3 gray">
I need this to span exactly 300px, not 31% of its parent
</div>
</div>
</div>
<div class="span5 blue">
</div>
here is the working jsbin ( sadly you need to enlarge the output pane )--> http://jsbin.com/uwecuv/1/edit
The idea is that the css selector (.row-fluid span3) would take precedence in this case.
Do you guys have any ideas how I can make the 'div.span3.gray' span 300px?
The reason is that in the real scenarion it will be an absolutely positioned div, and I don't want it to inherit the parent's size ( which btw will be just a div with an input box ).
Thanks!
Bootstrap grid system is designed so that span3 means that element has width=3/12 of the container width (row or row-fluid). So if you need div with fixed width=300px(not 3/12 of container width) you need to use your own css class with width=300px. Or you can use fixed layout without responsive css.
How can I do this with css and jquery ?
As shown on jsfiddle there is a button in the left column. Clicking on this button slide toggles a div in the right column and 2 other pictures appear (picture number 2, picture number 3)
There are 2 things I would like to do :
1st : Position the button exactly at the bottom left of picture number 1. I can't actually do it because I don't know how much text I have in the left column and I don't know the height of the picture 1.
2nd : When the div is displayed or hidden, I would like the button to move with the div. At the end, the button should be at the bottom left of the picture number 3
Can you help me do that?
The html structure is basic :
<div id="col_1">
<p>Lorem ipsum<br />...<br /></p>
<p><span id="button">see more pic</span></p>
</div>
<div id="col_2">
<div id="pic_1">picture number 1</div>
<div id="pic" class="hidden">
<div id="pic_2">picture number 2</div>
<div id="pic_3">picture number 3</div>
</div>
</div>
The jquery is basic :
$("#button").click(function () {
$("#pic").slideToggle("slow");
});
The css is also really simple. You can see it on jsfiddle.
You can do position relative. Here is the demo: jsfiddle.net/ar9UB/5/
Added this CSS:
#button { position:relative; left: -90px; top:-20px; }
and moved the button in col 2.
Hope this helps.
So I've got a side menu with various levels of drop down. Each level's container is set to display:none; and javascript then slides these containers up or down when clicking the parent box.
When I'm opening each block, it does not expand the parent div, and the menu slides down over the footer. Now I know what you're thinking, but I have tried the fix of expanding the parent element by the same height, which i have successfully used in other areas of my site.
The problem is, when I'm calculating the height of the parent div, it is coming back with the height of every single div inside added together even though they are display:none; meaning when I expand a section in the side menu, the footer drops to over 10,000px! (using parent height = parent height + expanded section height)
I've tried getting the offset.top of the footer menu and this still comes back with over 10,000px. Alerting in other browsers just returns what I would expect it to be, and I'm not massively clever with javascript to know exactly why this is happening. Any thoughts?
Example Code -
<div class="content">
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4">
SOME PRODUCTS....
</div>
</div>
<div class="level3">
SOME PRODUCTS....
</div>
</div>
<div class="level2">
<div class="level3">
SOME PRODUCTS....
</div>
<div class="level3">
SOME PRODUCTS....
</div>
</div>
</div>
</div>
There are about 850 products in the real list however. Clicking each div expands it's contents, all the way down to the product level. Some are 3 deep, while some are 5 or 6 deep. All divs are set to display:none; originally, unless a product is currently being viewed, in which case the parent divs are automatically open. It seems that IE8 reads the height of each div even though they are set to display:none;?
I have a main container <div> which holds 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to position the sub divs so that they are arranged in a top->down then left->right manner?
I've tried floating the sub divs but that just gives me a left->right then top->down order.
Basically I want this
[ sub div 1][sub div 3][sub div 4]
[ sub div 2][ ][sub div 5]
When I mark up the code like this:
<div id="container">
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
<div class="subdiv">sub div 5...</div>
</div>
Notice that the sub divs can have variable heights but fixed widths.
Thank you,
To my knowledge, there's no way to do it.
There is some CSS3 that works only on some browsers to support multi-column layout (-moz-column-width, etc...) but I don't know whether it would work with DIVs in the content. And I'm fairly certain it it's not supported in IE7
The way I'd do it would be to break up the content into 3 columns containers
<div id="container">
<div class='column'>
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 5...</div>
</div>
</div>
Use this CSS on the DIVs:
display: inline-block
The only way to do this natively is to use CSS3 columns (as Damp mentioned) but there are some articles on how to achieve a similar effect with JavaScript as seen in this question. That case is actually more complicated than yours.
I'm thinking the best way to do it with JS would be to first split it evenly into column containers as Damp suggested with a best guess. This should help for those with JS disabled. Then us JS to measure heights of the subdivs and move them if the initial guess was off. Assuming you're using a server side language to generate the page, you should be able to split the columns evenly. You can probably even make a good estimation on the split by checking the length of content (assuming its text) as a heuristic for the likely height of the subdiv.