Force text in the child div fit into parent - javascript

I have two div tags in my HTML code like this
<div id="parent">
<div id="child">
<p class="child-text"> ..... </p>
<a class="child-link"> ..... </a>
<p class="child-text"> ..... </p>
</div>
</div>
#parent{ height: 400px; width:100px}
How can force the content of #child div vertically fit into the parent div ?
I am looking for some thing that can take child div ID and resize its content dynamically. I have worked with jQuery.fittext. However, it get the child-text class id instead of child div id. In other words, it is not intelligent enough to identify what is in the child div and then rescale them.
Is there any other alternative for this ?

You could do something like:
var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
fontsize = fontsize +1;
$('#child').css('font-size',fontsize+'px');
}
#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
<div id="child">
<p class="child-text"> Once upon a time </p>
<a class="child-link"> there lived a monkey</a>
<p class="child-text"> who loved to eat oranges </p>
</div>
</div>
While #child height is less then #parent then it adds 1px until it is not. In the css, I gave #child a padding bottom of 5px, so it would not overflow
JSFiddle

Add a display property value of table to #parent and display property value of table-cell to the elements you want to measure the height of #parent
#parent, #child {
width: 100%;
height: 100%;
position: relative;
display: table;
}
.child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */
display: inline-block;
height: 100%;
width: 150px;
vertical-align: top;
background-color: green;
bottom: 0;
display: table-cell;
border-left: solid 5px white; /* Just for Division sake */
}
<div id="parent">
<div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
<a class="child-link"> Lorem </a>
<p class="child-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p>
</div>
</div>
To make it dependent on the screen size, do something like below:
#media screen and (max-width: 768px) { /* Adjust as needed */
enter code here
}

Related

Accessing updated CSS values from previously animated elements in a Greensock timeline

I have a TimelineLite() which performs a series of .to() tweens in sequential order. I'd like to be able to use the value that results from one of the early tweens in the construction of one of the later tweens.
Is there anyway to access the values of elements that have previously completed their animation in a timeline?
UPDATED:
The example that I provided originally was quite crude. I've updated it to more accurately reflect what I'm running into.
The size of the colored div are dependent on the viewport, and the content within them flows based on that size. Clicking on one of them begins an animation which expands the clicked div to fill the viewport and removes the non-clicked divs. This resizing causes the text to reflow to adjust for the new space.
Then div.status (that was previously absolutely positioned off the bottom of the page) animates up to be below the selected colored div. Unfortunately, the height that is used to calculate its new top value is what the selected colored div's height was prior to the animation and subsequent reflow of it's content.
var timeline = new TimelineLite();
$('.clickable').click(function(){
var $selected = $(this);
var $notSelected = $('.clickable').not($(this));
$selected.addClass('selected');
$notSelected.addClass('not-selected');
timeline
.add("optionSelected")
.to(
$selected,
0.5,
{ "width":"96%" },
"optionSelected"
)
.to(
$notSelected,
0.5,
{
"width":"0%",
"padding":"0"
},
"optionSelected"
)
.to(
$(".status"),
0.5,
{
"top":$('.selected').height()
}
)
})
body{
position:relative;
height:100vh;
overflow:hidden;
background-color:cornsilk;
}
section{
background-color:#ddd;
display:flex;
align-items: flex-start;
}
div{
width: 30%;
padding:2%;
color: #FFF;
display:inline-block;
}
.clickable{cursor:pointer;}
.status{
width:96%;
position:absolute;
top:100%;
left:0;
background-color:#FFF;
color:black;
border:1px solid black;
}
.blue{background-color:blue;}
.green{background-color:green;}
.purple{background-color:purple;}
.not-selected{
white-space: nowrap;
overflow:hidden;
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
<div class="blue clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.
</div>
<div class="green clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet. Mauris lorem tellus, convallis ac tincidunt eu, efficitur consequat turpis.</div>
<div class="purple clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.</div>
<div class="status">Status</div>
</section>
</body>
Try returning the desired height from a function as a callback. I think then it won't be executed until after the animation of the .selected element has reached that to() in the chain.
Also height() does not include padding or margins, so you end up with the .status overlapping, try .outerHeight() instead.
Working example:
http://codepen.io/jonwheeler/pen/jAvRZZ?editors=0110

jQuery change css on a specified element

I need something that will change the style of a div when you scroll to a specific element
Example:
In my header i have the texts:
1) Home
2) Text2
3) Text3
4) Text4
When on top i want the "Home" to be white and all the others blue
When on paragraph 1 i want the "Text2" white and all the other blue
When on paragraph 2 i want the "Text3" white and all the other blue
When on paragraph 3 i want the "Text4" white and all the other blue
When below "Text4" i want the "Home" to be white and all the others blue
PS: "Text2","Text3" and "Text4" will have nothing else in betwheen
I'd go with waypoints or with skrollr. There are plenty of tutorials about skrollr so dont worry.
You can do something like this
Use scroll() to listen scroll event
Get the scroll top value by using scrollTop()
DEMO :
$(window).scroll(function() {
$('#div2').css('color', $(this).scrollTop() > 390 ? 'red' : 'blue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=main style="height:1000px">
<div id=div2 style="margin-top:500px">element</div>
</div>
This toggles the color of any header text at the point a matching element comes into view (or leaves) :
Demo
$(function() {
var gate = $(window),
bar = $('header'),
title = bar.find('span'),
element = $('.element'),
viewin, viewout;
gate.on('load resize', function() {
viewin = []; viewout = [];
element.each(function() {
var placement = $(this).offset().top-gate.height(),
dimension = $(this).outerHeight();
viewin.push(placement);
viewout.push(placement+dimension);
});
})
.scroll(function() {
var location = gate.scrollTop();
element.each(function(i) {
var option = title.eq(i), white = option.hasClass('white');
if (location > viewin[i] && location <= viewout[i]) {
if (!white) option.addClass('white');
}
else if (white) option.removeClass('white');
});
});
});
Comments below are no longer very relevant because they are discussing an earlier stage.
Animating colors does not work unless you include a library for animating colors.
jQuery does not animate colors by default.
So for color-animation you must include library like JQuery UI, but it is large for just using color-animation.
Instead i would suggest you to use Bitstorm:ColorLibrary, it's just 2.7kb in size.
JSFiddle : DEMO
$(document).ready(function(){
var top = document.getElementById("css_text").scrollHeight; // top position of '#css_text'
alert("Top position of #CSS_TEXT : " + top);
var calcu = top - 20;
$(window).scroll( function(){
var pos = $(window).scrollTop();
if(pos >= calcu)
{
$("#css_text").animate({"color":"red","opacity":"1"},2000);
}
});
});
#css_text
{
opacity:0;
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre id="css_text"><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
Check the following jquery functions
scroll
scrollTop
offset
each
attr
Your code could look something like that:
( function( $ ) {
$(window).scroll(function(e){
var home = $('#home');
var switchPosition = $(window).scrollTop() + parseInt(home.css("top"))+30;
$('.text').each(function(){
if ( switchPosition > $(this).offset().top &&
$(this).attr('data-color') !== home.attr('data-color') ) {
home.css({color: $(this).attr('data-color')});
home.attr('data-color', $(this).attr('data-color') );
}
});
});
} )( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home" style="font-weight: bold; color: blue; position: fixed; top: 20px; left: 20px;">HOME</div>
<div style="color: white; position: fixed; top: 170px; left: 20px;">scroll down...</div>
<div class="text" data-color="blue" style="background: #999; height: 500px"> </div>
<div class="text" data-color="red" style="background: #666; height: 500px"> </div>
<div class="text" data-color="white" style="background: #333; height: 1000px"> </div>

Showing a div only when a certain div's height is > than set height?

I have a tabbing module I created that has scrollable content areas. I made a quick blinking arrow style to let the users know that this box is scrollable. I would like to make it so this div is only visible if my content (scrollable text box area) is above a certain height.
For example, my scrollable area is always set to height:450px. So I need a way to figure out how to get the height of the content area, then if is less than 450px height, to not show my div more-info.
Here is a jsfiddle with a working demo.
HTML Structure
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
</div>
<div class="tab-pane" id="b">
</div>
<div class="tab-pane" id="c">
</div>
<div class="tab-pane" id="d">
</div>
<div class="tab-pane" id="e">
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
From some searching and piecing together, I found something like this, so assume this is the starting point.
$(document).ready(function () {
if ($(".tab-pane").height() > 450 {
jQuery(".more-info").fadeIn(200);
} else {
jQuery(".more-info").hide(100);
});
Just make use of the shown.bs.tab event, to show and hide your arrow div.
Togglable tabs Events
shown.bs.tab
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('.more-info').css('display', 'none');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeContentElem = $($(e.target).attr('href'));
if (activeContentElem[0].scrollHeight > activeContentElem.height()) {
$('.more-info').css('display', 'block');
} else {
$('.more-info').css('display', 'none');
}
})
.nav-tabs {
float: left;
border-bottom: 0;
}
.nav-tabs li {
float: none;
margin: 0;
width: 106px;
height: 106.5px;
left: -30px;
top: -20px;
position: relative;
display: block;
background-color: #F2F2F0;
margin-top: 0;
border-bottom: #FFF 2px solid;
text-align: center;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.nav-tabs li:last-child{
border:none;
}
.nav-tabs li a{
display: block;
height: 75px;
position: relative;
padding-top: 31px;
font-size: 14px;
color:rgb(51, 51, 51);
text-decoration: none;
}
.nav-tabs li:hover {
background-color: #DBDBDA;
cursor:pointer;
}
.nav-tabs > li.active, .nav-tabs > li.active a, .nav-tabs > li a:active, .nav-tabs > li.active > li:focus, .nav-tabs >li a:focus {
background:rgba(51, 181, 229, 0.45);
color:#FFF;
text-decoration: none;
}
.tab-content {
margin-left: 45px;
}
.tab-content .tab-pane {
display: none;
background-color: #fff;
padding: 0;
overflow-y: auto;
}
.tab-pane p{
margin: 0 0 16px 0;
}
.tab-pane p:first-child{
margin:5px 0 16px;
}
.tab-pane h1{
padding-bottom: 5px;
border-bottom: 1px solid #DBDBDA;
margin-bottom: 16px;
}
.tab-pane img{
max-width: 70%;
}
.tab-content .active {
display: block;
overflow: scroll;
height: 450px !important;
padding: 0px 15px 0 0px;
}
.list-group {
width: 100%;
}
.list-group .list-group-item {
height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
line-height: 11px;
}
#-webkit-keyframes circleBounce {
0% {-webkit-transform: scale(0.9); opacity: 0;}
20% {opacity: 0.5;}
50% {opacity: 1;}
80% {opacity: 0.5;}
100% {-webkit-transform: scale(1.1); opacity:0;}
}
.more-info {
position: absolute;
bottom: 30px;
left: calc(50% - 3px);
width: 6px;
height: 6px;
border: 2px solid rgb(51, 181, 229);
border-top: none;
border-left: none;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
}
.more-info:after {
content: "";
display: block;
position: absolute;
top: calc(50% - 17px);
left: calc(50% - 17px);
width: 35px;
height: 35px;
border: 1px solid rgba(255,255,255,.8);
border: 1px solid rgb(51, 181, 229);
border-radius: 50%;
-webkit-animation: circleBounce 2.5s linear infinite;
}
.more-info:hover:after {
background-color: rgba(51, 181, 229, .15);
cursor:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h1>Donor Acquisition</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="b">
<h1>Donor Cultivation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="c">
<h1>Donor Retention</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="d">
<h1>Nonprofit Blogging</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="e">
<h1>Nonprofit Engagement</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
First, start your .more-info class as hidden in css.
Then, you could check the height of the content of your tab every time the visible tab changes, and if it is greater than 450px, swap visibility of your more info button.
This is the jQuery snippet:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var div = $($(e.target).attr('href'));
$('.more-info').hide();
if (div.get(0).scrollHeight > 450)
$('.more-info').show();
});
I'm not sure here, but I looked around some more and came up with this.
var clientHeight = document.getElementById('myDiv').clientHeight;
and some combination of this..
[DIV].style.visibility='visible'
[DIV].style.visibility='hidden'
then use an if statement?
Kind of new to coding, but maybe this is on the right track.
You could bind an event to your menu anchors that checks the height of your active div against the scroll height of that div and show or hides the blinking arrow.
Using JQuery, something like this so that it triggers after your bootstrap finishes:
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
ToggleMoreInfoArrow();
//Call the toggle every time the content changes.
});
ToggleMoreInfoArrow(); //Call it the first time the page loads.
});
function ToggleMoreInfoArrow()
{
if( $('div.active').prop('scrollHeight') < $('div.active').height())
{
$('.more-info').hide();
}
else
{
$('.more-info').show();
}
}
Edit: I'm not sure how your "active" class gets set, but you'd want to run the height check code after that happens. This could be on page load or wherever, the if statement is the important bit.
Edit: See this working fiddle: http://jsfiddle.net/9hkpzagz/7/
Hello multinumbered user, I didn't like the script there was in example, and I changed the CSS a bit, moving "more" button to the right bottom corner, but I did the following:
1. you should always have .tab-pane to be of the set height on start and not scrolled, so I changed the CSS to be "overflow: hidden"
I wrote a function that checks the height of tab content and either activate or desactivate "more"
If "more" button is clicked, the tab content CSS 'overflow-y' option is changed to 'auto' - this adds vertical scrollbar.
http://jsfiddle.net/9hkpzagz/8/
here is my js code:
function checkHeightAndSetMore(clickedMore){
var activeTabH=$('.tab-content .active').height();
if(activeTabH >450){
$('div.more-info').fadeIn();
}
else{
$('div.more-info').fadeOut();
}
if(clickedMore == 1){
$('.tab-content .active').css('overflow-y', 'auto');
$('div.more-info').fadeOut();
}
}
$(document).ready(function(){
checkHeightAndSetMore(0);
$('.more-info').click(function(){
checkHeightAndSetMore(1);
});
});

How to resize textarea depending on the parent element

So I need to resize the textarea in this form to take the whole available space in the box depending on the parent element (#wrapper). How do I do that?
I will exactly put the negative number calculation more precise when I am sure how much text will go there.
The calculation code I wrote in, calculates height of textarea to 0px.
var boxHeight = ($("#wrapper").height()-200);
$( window ).ready(function(){
$("#Box").height( boxHeight );
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XxX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>
</body>
</html>
You can easily do this with CSS alone:
textarea {
width: 100%;
height: 100%;
}
If you know that #wrapper will have a specified height, the you use CSS to get a reasonable fit for the textarea.
First, specify a value for the height in the #wrapper rule.
Then, set a height for #Form by using absolute positioning and the CSS calc function to set the form to be the height of the parent minus 200px.
You then need to do a similar trick to the p element wrapping the textarea, leaving 50px height for the buttons.
Finally, set height and width to 100% for #Box, and set box-sizing: border-box to take into account the border of the textarea element.
Comment: Although this can be done, the approach depends on two hard-coded values for the height of the text before the form and the height of the buttons. JavaScript/jQuery may be the better approach. Either way, #wrapper needs a height value.
#wrapper {
border: 1px dotted blue;
height: 500px;
position: relative;
}
#Form {
border: 1px dotted blue;
height: calc(100% - 200px);
position: absolute;
width: 100%;
bottom: 0;
}
#Form p {
border: 1px dashed blue;
height: calc(100% - 50px);
margin: 0;
}
#Box {
height: 100%;
width: 100%;
box-sizing: border-box;
}
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>

How can I get these paragraphs to vertically align?

I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.
The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).
Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.
One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?
Here is the html I have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
</div>
</div>
The css:
#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }
The script:
$(function() {
$('#cycle-wrapper').cycle();
});
Thanks
EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!
You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.
If you don't mind use the css display property and add separating elements,
Check my perfect version on http://jsfiddle.net/m29uu/3/
#cycle-wrapper {
width: 340px;
height: 300px;
border: 2px solid red;
display:table;
}
#cycle-wrapper p {
width: 340px;
height: 150px;
display:table-row;
}
#cycle-wrapper span {
text-align: center;
display:table-cell;
vertical-align:middle;
}
PURE CSS WAY
Not sure i understand your req. but i think this achieves what you want, one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!
DEMO : http://jsfiddle.net/logintomyk/YTZYQ/
HTML
<div class="divCent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem
CSS
#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;
margin-top:25% /* this is what i added **/
}
EDIT
After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/
Quick CSS Solution
Add the following css
#cycle-wrapper div > div {
display: table-cell;
vertical-align: middle;
}
and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.
See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
It is possible to vertically center without the jQuery cycle element.
But when the plugin is added the alignment was not proper.
I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.
your Div have id "cycle-wrapper". and all the paragraph within this Div..
use
$("#cycle-wrapper").css("vertical-align:middle");
you can apply any css like the following way
$("element").css("propertyname","value");
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})

Categories

Resources