Make child div's width grow at the same rate as parent - javascript

I have a div with several nested divs. All the child div's are float:left so they are all on the same line. The parent div "newDistractor" has a width of 100% so as it's parent grows it does as well. All of the child nodes have fixed widths of 20px. I want the div "distractorText" to grow at the same rate as it's parent so it occupies all empty space. Any ideas how to do it.
<div class="newDistractor">
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>

This could work. It doesn't actually resize the distractorText div, but it might be what you need:
<div class="newDistractor">
<div class="left"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="right"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
The CSS for it is basically:
.left { float: left; }
.right { float: right; }
Look at it in action here
edit I cleaned the jsfiddle a little: look now

You could use jQuery's .resize() and then each time count the number of children <div>s, divide it into the current width, and set accordingly.

For this example specifically, you could use margins instead of floating div elements.
<div class="newDistractor">
<div class="distractorText" style="margin:0px 40px;">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>

I haven't tried this right-off, but if you set the width of class "distractorText" to 100%, it should take care of the issue... or to some other "acceptable" percentage (maybe 50).

All religious crusades put aside, the following HTML will do what you need ^L^ :
<table class="newDistractor" style="width:100%">
<td style="width:20px">a</td>
<td style="width:20px">b</td>
<td class="distractorText" style="width:100%">Enter text to add option.</td>
<td style="width:20px">c</td>
<td style="width:20px">d</td>
<td style="clear:left;margin-bottom:-43px;">e</td>
</table>

Related

How to add a scrollbar only from a div to another div

Let me first present my code sample:
<div id="StartScroll"></div>
Many divs and content here !
<div id="EndScroll"></div>
My question is that how can i make a scroll bar which starts to scroll from div with id StartScroll and end scroling at div with id EndScroll .
Note that there is content before StartScroll and after EndScroll but i want the scroll bar should not be allow to go outside StartScroll and EndScroll .
How can i make this? Maybe with jQuery ?
Thanks in advance!
overflow-y: scroll could be the solution
http://jsfiddle.net/ds3nqbkz/2/
<div id="StartScroll" style="overflow-y: scroll">
Many divs and content here !<br />
Many divs and content here !<br />
Many divs and content here !<br />
</div>
Wrap the content within the startScroll and endScroll division blocks within a div and assign the following style:
overflow-y: auto;
height: 200px; (or any specific height you wish to)
Try this:
Check here
.makescroll {
height:150px
overflow-y:scroll;
}
<div class="makescroll">
<div id="StartScroll"></div>
<div id="EndScroll"></div>
</div>
You then to wrap your content in single div and give it fixed height and make overflow-y : auto or scroll.
overflow-auto :- Will show scroll only if your content is more than height. Else it will be remove.
overflow-scroll :- Will always show scroll, in case content is less it will show disabled scroll.
You can use any of below approach to apply it. Examples have scroll you can change to auto if needed.
#fixed{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
#
<div id="StartScroll" inlineStyle="height:150px;overflow-y:scroll;"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##############################################################################################
fixedStyle{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll" class="fixedStyle"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##################################################################################
documentById("fixed").style = "height:150px;overflow-y:scroll;";
<div id= "StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>

Keep a div as last child of its parent even after any new div is appended to its parent

Hello i am quite struggling with a problem. The structure is like :-
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
After insertion of new child
<div class="parent" >
<div class="child1" >
</div>
<div class="child2" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
Thus I always want to keep my child with class "childToBeKeptLast" as last child no matter how many insertion take place in the parent div.How to achieve this by css or jquery ??
Any help will be appreciated ... Thank you ...
Try to use .insertBefore() at this context,
$('.child2').insertBefore('.parent .childToBeKeptLast');
So the above code would insert the new children before of the element which is having the class childToBeKeptLast and which is the descendant of the element with the class parent
For Info, in CSS with young browser, the flex model can help you to keep one last .. seen at screen:DEMO
BASIC CSS needed :
.parent {
display:flex;
flex-direction:column;
}
.childToBeKeptLast {
order:1;
}
/* for demo, make some content*/
div:before {
content:attr(class);
}
The :not() selector works too if you want somehow filter some browsers
:not(.childToBeKeptLast) {
order:-1;/* puts anything that has not this class up in front */
}
HTML of demo:
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
<div class="child1" >
</div>
<div class="whatever clss wich is not meant to be last seen" >
</div>
<div class="child1" >
</div>
<div class="child1" >
</div>
</div>
You also use:
$('.childToBeKeptLast').before('<div class="child2"></div>');

How I get the safe specification of left position from a movable div in a centered div?

I am trying to get a safe position specification for my moveable div in several window solutions and sizes. I want to have one 0 position at the left side of the droppable area (#drop1). The jQuery-function position() is not enough for this task.It is understandable what I mean? I do there an alert with several position specifications and differences between, but I don't get an steady result for the position of my moveable div. jsFiddle
alert('e.pageY-this.offset().top:'+(e.pageY - $(this).offset().top)+"\n"
+'e.pageX-this.offset().left: '+(e.pageX - $(this).offset().left)+"\n"
+'e.pageX/e.pageY: '+e.pageX+'/'+e.pageY+"\n"
+'offset(left/top): '+$(this).offset().left+'/'+$(this).offset().top+"\n"
+'posLeft/pos.top: '+pos.left+'/'+pos.top+"\n"
+'draggable.position(left/top): '+ui.draggable.position().left+'/'+ui.draggable.position().top+"\n"
+'draggable.offset(left/top): '+ui.draggable.offset().left+'/'+ui.draggable.offset().top+"\n"
+'dropPositionX-dragItemOffsetX: '+dropPositionX+' - '+dragItemOffsetX+"\n"
+'innerWidth: '+window.innerWidth+"\n"
+'Main centered area width: '+$('#main').css('width')+'- bar left width: '+$('.col').css('width')+"\n"
+'position calculated: '+((window.outerWidth/2-parseInt($('#main').css('width'))/2+100)));
Html:
<div align="center" width="100%">
<div id="drag1" class="ui-widget-content" rel="a"><p>drag 1</p></div>
<div id="drag2" class="ui-widget-content" rel="b"><p>drag 2</p></div>
<div id="main">
<div class="col"> </div>
<div id="drop1" class="bg1">
<div id="drop-inner1" class="widget1"><p>AREA 1</p></div>
<div id="drop-inner2" class="widget1"><p>AREA 2</p></div>
</div>
<div class="col"> </div>
</div>
</div>
<div style="clear: both;"> </div>
I found a solution by myself.
THIS was what I am searching for:
var diffDragX = (ui.draggable.offset().left - $('#drop1').offset().left);
var diffDragY = (ui.draggable.offset().top - $('#drop1').offset().top);

jQuery Progress animate to predefined width - Multiple Div

How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo

setting the height of the parent according to the highest child element, jquery

I have a layout, which basically contains a
<div class="line" id="#">
<div class="summary">
Some Text
</div>
<div class="summary">
Some
</div>
<div class="summary">
Some long text
</div>
</div>
I want, using jQuery, to expand the height of the <div class="line"> according to the highest child element, I tried fiddling with:
$(".line").attr("id", function()
while ($(this).next().length > 0)
{
ac = $(this).children(".summary").outerHeight();
a = $(this).children(".summary").next().outerHeight();
if (a > ac)
{
a = ac;
}
}
$(this).css("height", a + "px");
});
and no success, what selectors I need to use, and how would I go about achieving this?
if indeed the summary divs are columns in a 3 column layout by applying a float:left on them, you could wrap the container nicely around all three by just adding an extra div and style it with clear:both
So your html would look like this:
<div class="line" id="#">
<div class="summary">
Some Text
</div>
<div class="summary">
Some
</div>
<div class="summary">
Some long text
</div>
<div style="clear:both"></div>
</div>

Categories