/* Trint Styles */ #hypertranscript .strikethrough { text-decoration: line-through; } #hypertranscript .annotation, #hypertranscript .parannotation { opacity: 0.7; } #hypertranscript span.highlight-true { background-color: rgba(255, 207, 1, 0.36) !important; } #hypertranscript span.highlight-blue { background-color: rgba(96, 160, 255, 0.36) !important; } #hypertranscript span.highlight-green { background-color: rgba(90, 171, 0, 0.36) !important; } #hypertranscript span.highlight-red { background-color: rgba(255, 0, 89, 0.36) !important; } #hypertranscript span.highlight-purple { background-color: rgba(221, 86, 249, 0.36) !important; } #hypertranscript header { font-size: 200%; } #hypertranscript a { cursor: pointer; color: #000; } #hypertranscript .active ~ span { color: #666; } #hypertranscript p.active ~ p span { color: #666; } #hypertranscript span.search-match { background-color: rgb(156, 172, 199) !important; } #hypertranscript sub:before { content: '\231C'; } #hypertranscript sub.highlight-duration:before { content: '\231D'; } /* drop.js / trint-player-share.js Twitter Styles */ a.sharelink { color: #dddddd; } a.sharelink:hover { color: #ffffff; } function msToTime(duration) { console.log("HEY ACE trint player HERE from toolbox!!!"); var milliseconds = parseInt((duration % 1000) / 100), seconds = parseInt((duration / 1000) % 60), minutes = parseInt((duration / (1000 * 60)) % 60), hours = parseInt((duration / (1000 * 60 * 60)) % 24); hours = hours < 10 ? '0' + hours : hours; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; return hours + ':' + minutes + ':' + seconds; } function escapeHtml(unsafe) { return unsafe .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } var searchForm = document.getElementById('searchForm'); if (searchForm) { if (searchForm.addEventListener) { //Modern browsers searchForm.addEventListener( 'submit', function(event) { searchPhrase(document.getElementById('search').value); event.preventDefault(); }, false, ); } else if (searchForm.attachEvent) { //Old IE searchForm.attachEvent('onsubmit', function(event) { searchPhrase(document.getElementById('search').value); event.preventDefault(); }); } } var words, wordsLen; //JSON var htmlWords, htmlWordsLen; //HTML htmlWords = document.querySelectorAll('[data-m]'); htmlWordsLen = htmlWords.length; // Replace htmlWords and htmlWordsLen with words and wordsLen below if you want // to take word data directly from JSON. // // When we export the player the transcript should probably be already inline // as HTML so as to search engine indexable, which is why the default // behaviour here is to use the HTML for the data as it will work in both cases. var searchPhrase = function(phrase) { var phraseWords = phrase.split(' '); var phraseWordsLen = phraseWords.length; var matchedTimes = []; // clear matched times var searchMatched = document.querySelectorAll('.search-match'); var searchMatchedLen = searchMatched.length; for (var l = 0; l < searchMatchedLen; l++) { searchMatched[l].classList.remove('search-match'); } //for (var i = 0; i < wordsLen; i++) { for (var i = 0; i < htmlWordsLen; i++) { var numWordsMatched = 0; var potentiallyMatched = []; for (var j = 0; j < phraseWordsLen; j++) { var wordIndex = i + numWordsMatched; //if (wordIndex >= wordsLen) { if (wordIndex >= htmlWordsLen) { break; } // regex removes punctuation - NB for htmlWords case we also remove the space //if (phraseWords[j].toLowerCase() == Words[wordIndex].name.toLowerCase().replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g,"")) { if ( phraseWords[j].toLowerCase() == htmlWords[wordIndex].innerHTML .toLowerCase() .replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~() ]/g, '') ) { //potentiallyMatched.push(words[wordIndex].time); potentiallyMatched.push(htmlWords[wordIndex].getAttribute('data-m')); numWordsMatched++; } else { break; } // if the num of words matched equal the search phrase we have a winner! if (numWordsMatched >= phraseWordsLen) { matchedTimes = matchedTimes.concat(potentiallyMatched); } } } // display var matchedTimesLen = matchedTimes.length; // only match the first word with that time (assuming times are unique) for (var k = 0; k < matchedTimesLen; k++) { document .querySelectorAll("[data-m='" + matchedTimes[k] + "']")[0] .classList.add('search-match'); } }; window.onload = function() { hyperaudiolite.init('hypertranscript', 'hyperplayer'); // playbackRate listener var v = document.getElementById('hyperplayer'); if (v.src && /\.m3u8$/.test(v.src)) { if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(v.src); hls.attachMedia(v); } else { console.log('Unable to load HLS video stream'); } } var p = document.getElementById('pbr'); var cp = document.getElementById('currentPbr'); var timecodeOffset = document.getElementById('timecodeOffset'); p.addEventListener( 'input', function() { cp.innerHTML = p.value; hyperplayer.playbackRate = p.value; }, false, ); var updateTimecode = function() { var currentTimeMs = v.currentTime * 1000; var time = currentTimeMs + window.offsetMs; timecodeOffset.innerHTML = msToTime(time); }; updateTimecode(); v.addEventListener('timeupdate', updateTimecode); }; var selection = ''; var params = ''; var drop; twttr.widgets.load(); console.log("HEY ACE trint player share is HERE from toolbox!!!"); function addShareTool() { if (window.getSelection) { selection = window.getSelection(); } else if (document.selection) { selection = document.selection.createRange(); } if (selection.toString() !== '') { if (drop) { drop.close(); drop.remove(); drop = null; } anchorNode = selection.anchorNode.parentNode; focusNode = selection.focusNode.parentNode; var anchorNodeTime = parseInt(anchorNode.getAttribute('data-m'), 10); var anchorNodeDuration = parseInt(anchorNode.getAttribute('data-d'), 10); var focusNodeTime = parseInt(focusNode.getAttribute('data-m'), 10); var focusNodeDuration = parseInt(focusNode.getAttribute('data-d'), 10); // 1/10 of a second accuracy is fine for our needs anchorNodeTime = Math.floor(anchorNodeTime / 100); anchorNodeDuration = Math.floor(anchorNodeDuration / 100); focusNodeTime = Math.floor(focusNodeTime / 100); focusNodeDuration = Math.floor(focusNodeDuration / 100); if (anchorNodeTime < focusNodeTime) { params = '?s=' + anchorNodeTime + '&d=' + (focusNodeTime + focusNodeDuration - anchorNodeTime); } else { params = '?s=' + focusNodeTime + '&d=' + (anchorNodeTime + anchorNodeDuration - focusNodeTime); } drop = new Drop({ target: anchorNode, classes: 'drop-theme-arrows-bounce-dark', position: 'top center', constrainToWindow: true, constrainToScrollParent: false, openOn: 'always', content: '
', }); drop.on('open', fillShare, false); /*Share this text + video on Twitter*/ } } function fillShare() { var url = window.location.href; var lastCharPos = url.length - 1; if (url.charAt(lastCharPos) == '/') { // URL ends with a '/' url = url.substr(0, lastCharPos); } //use intents http://stackoverflow.com/questions/6320007/how-do-i-add-a-hashtag-to-a-custom-tweet-button var shareText = selection + ' ' + url + params; var overspill = shareText.length - 140; selection += ''; if (selection.charAt(0) == ' ') { // trim leading whitespace selection = selection.substring(1, selection.length); } if (overspill > 0) { selection = selection.substr(0, selection.length - overspill - 5) + '...'; //3 dots + 2 quotes make 5 chars (subtract 5) } selection = '"' + selection + '"'; document.getElementById('tweet-box').innerHTML = '

text+video
'; drop.position(); twttr.widgets.load(); } function closeDrop() { if (drop) { drop.close(); } } var transcript = document.getElementById('hypertranscript'); transcript.addEventListener('mouseup', addShareTool, false); transcript.addEventListener('touchend', addShareTool, false); transcript.addEventListener('click', closeDrop, true);

Flex-grow

flex-grow property

Playback Rate 1

Timecode: 00:00:00

flex-grow property

Speaker [00:00:00] Susan, welcome to this new chapter in this chapter. We're going to learn how to control the size of our flex elements. You see, when we set the display property of the container to Flex, we noticed that each flex item's width will depend on its contents. Meaning if one of the elements has more content than the others, then this elements width will be more than the other elements width because they have less content and the remaining space of the container will be empty. In the last chapter, we learned how to distribute this remaining space around elements. In other words, how to separate the elements with this space. But in this one, we will learn how to add this space to the elements width and make the elements width increase and extend to take up this space. So let's get started. So in this lesson, we will take a look at the Flex Grow property, flex grow is expressed using a number like one or two and so on. And it's used to determine how much the Flex item will grow relative to the rest of the Flex items inside the container. In other words, how much space the elements with will take from the remaining space relative to the other elements? Well, all the elements to become equal space will one of them take more than the others now enough Typekit. Let's see this in action here in our code editor. The Four divs sitting beside each other and the width of each one of them depends on the content. You can see that the second div is bigger than the others. Now, I have remaining space right here and I want my elements to fill up the container and take up this remaining space. Okay, so let's flex grow these flex items to one.

Speaker [00:02:13] So before I reload my browser, what would happen here is this free space will be distributed equally among the four device. For example, if this remaining space right here is 100 pixels and each element will take 25 pixels and add them to its width, which is really awesome to be able to do with just one line of code. So let's reload, and you can see that the width of each element increased by the same value. For example, if the width of the first element was 50 pixels, according to its content, and its width now is 75 pixels. And if the width of the second element was 100 pixels, that is with now that's one hundred twenty five pixels. But that's not all. What if I want the third element to take twice as much of the left over space as the other elements will take? Let's set Flex Grow for the third element to two. You can see that it's width increased now, and the remaining space is now distributed in a way that this third element will take twice as much as the other three divs. Now the default value for Flex Grow is zero. And that just means that the width of the elements will depend on the content. So if I go ahead and remove this line right here, go to my Flex item selector and Flex Grow Zero. You can see that the elements width is dependent on the content, which is the default setting. Another interesting thing we can do with the Flex Grow property is you can make just one element extend and take up the free space while the other elements will not change. We can do this easily by setting the flex grow of our element to any value and not setting it for the other elements or just setting it to zero like we're doing here.

Speaker [00:04:15] So for example, if I want to make only the third element expand and take up this free space, I can go right here and set its Flex grow to one, for example, or two or any other value. I'll set it to one. And now you can see it extends and takes up the whole space. Now we can also use Flex Grow to control the sizing of the elements vertically. I think you already know how we can do that. Yup. We just need to change the Flex flow from row two column. So if I go right here inside the selector of our container and set flex flow to column. You can see it's working vertically now and affecting the height. So to wrap things up, the Flex Grow property is used to control the sizing of the Flex elements relative to each other. It's a flex flow is row. It will control the width, and if its column, then it will control the height. The default value for it is zero, which basically means that the size of each element will depend on its content. But if we change it to one for all of the flex elements, then the free space will be added equally to each element size. On the other hand, if we set the flex grow of just one of our elements to any value but leave all the other elements at a value of zero, then that one element will take all the free space for itself. And if we want to make the elements change and grow relative to each other, we can always set the flex growth for all of them to any value we want. For example, if I want one element to think of twice as much space as all the other elements, then I can set its Flex Grow property to two and set it to one for all the other elements.

Speaker [00:06:06] And if I want it to take four times that of the others, I can set its flex grow to four and the others to one and so on. So I challenge you to play around with the flex grow values and see what you get. I mean, if you have any questions, just leave it in the Q&A section and I'll be glad to help. So this is it for this section, everybody, and I'll see you in the next one.