selected text in iframe
How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.
如何将动态数据变换成新行
原标题：How to break a flex into new row for dynamic data
关闭 。 此问题需要解答细节 。 目前它尚未接受答案 。 编辑问题以包括想要的行为、 特定的问题或错误, 以及复制问题所需的最短代码 。 这将帮助其他人解答问题 。 上个月关闭 。 改进我正在使用 reactjs 的视频呼叫应用程序 。 本地电话组件包含本地用户的视频, 远程用户的视频正在返回所有远程用户的视频 。 我的理想布局对于 3 个用户来说是 : @ aview1 = VAC2 = VAC2 @ view3= VACTA4 = VACTA4 = VACTA4 = VACTA2 = VACTA2 = @ @ @ viclook4= VAClace5 = Vlace5 { < div = < dvolvea5 = < div id = glas- droom typeoplection: lift: 1real, lives, littleglements/ d.
最佳回答
I m not 100% sure how you d implement this in your larger codebase, but this is how I d do it in vanilla JS. After the list of callers is rendered, you can grab the one just past halfway and insert a non-shrinking full-width element before it which will force the wrap to happen.
This little example utility allows n number of users in the input box and will split them as expected
function updateHandler(){
if(input.value === ) return;
//else
const n = parseInt(input.value),
half = Math.ceil(n/2)
output.innerHTML = Array.apply(null, Array(n)).map(() => ``).join( )
const halfwayElem = output.querySelectorAll( .caller )[half],
splitter = document.createElement( hr )
splitter.className = callers-divider
output.insertBefore(splitter, halfwayElem)
}
updateHandler()
input.oninput = updateHandler
#output {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.caller {
flex: 1;
border: 1px solid black;
margin: 8px;
aspect-ratio: 4/3;
}
.callers-divider {
display: block;
width: 100%;
flex-shrink: 0;
}
Alternatively, if you don t want the second row to take up the full width and just center the two callers, it can be done with CSS instead of DOM manipulation. This uses the bitwise operator n ^ 1 to determine if n is odd and if so, bump it up to the next even number
function updateHandler(){
if(input.value === ) return;
//else
let n = parseInt(input.value)
output.innerHTML = Array.apply(null, Array(n)).map(() => ``).join( )
const shiftedN = n ^ 1
if(n !== shiftedN){
++n
}
const callerWidth = (200/n) + %
output.style.setProperty( --caller-width , callerWidth)
}
updateHandler()
input.oninput = updateHandler
#output {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.caller {
border: 1px solid black;
aspect-ratio: 4/3;
box-sizing: border-box;
width: var(--caller-width);
}
问题回答
I m assuming a maximum of 2 rows and a maximum of 5 children.
This is possible by using a combination of nth-child and nth-last-child to target elements based on the number of children.
This requires setting certain widths based on the number of elements but since CSS cannot actually count elements this is not scalable.
.container {
display: flex;
flex-wrap: wrap;
margin-bottom: .5em;
border:2px solid blue;
padding: .25em;
}
.item {
display: grid;
place-items:center;
font-size: 1.25em;
height: 40px;
background: lightblue;
outline:1px solid black;
}
.item {
flex:1;
}
/* 1 & 2 of 3 */
.item:first-child:nth-last-child(3),
.item:nth-child(2):nth-last-child(2)
{
flex: 0 0 50%;
}
/* 1 - 4 of 4 */
.item:nth-child(1):nth-last-child(4),
.item:nth-child(2):nth-last-child(3),
.item:nth-child(3):nth-last-child(2),
.item:nth-child(4):nth-last-child(1)
{
flex: 0 0 50%;
}
/* 1-3 of 5 */
.item:nth-child(1):nth-last-child(5),
.item:nth-child(2):nth-last-child(4),
.item:nth-child(3):nth-last-child(3)
{
flex: 0 0 33.333%;
}
/* 4 & 5 of 5 */
.item:nth-child(4):nth-last-child(2),
.item:nth-child(5):nth-last-child(1)
{
flex: 0 0 50%;
}
Note: If more rows are required, it would be better to have layouts like
2 + 1 for 3 users
2 + 2 for 4 users
2 + 2 + 1 for 5 users etc.
That makes the CSS much simpler and very scalable.
1
2
3
1
2
3
4
1
2
3
4
5
Although it is not very good, but you can do it with css grid. For example, something like this:
body {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.videos {
display: inline-grid;
gap: 4px;
counter-reset: counter;
&:has(.video:nth-last-child(3)) {
grid-template-columns: 1fr 1fr;
.video:last-child {
grid-column: span 2;
margin: 0 auto;
}
}
&:has(.video:nth-last-child(4)) {
grid-template-columns: 1fr 1fr;
.video:last-child {
grid-column: unset;
}
}
&:has(.video:nth-last-child(5)) {
grid-template-columns: repeat(6, 1fr);
.video {
grid-column: span 2;
&:last-child {
grid-column: span 3;
margin: 0 auto 0 0;
}
&:nth-last-child(2) {
grid-column: span 3;
margin: 0 0 0 auto;
}
}
}
}
.video {
background: orange;
&:before {
content: video counter(counter);
counter-increment: counter;
}
}
Try setting a min-width: in (vw or %) unit + flex-wrap: wrap;
min-width: in vw unit relative to screen width, in % to parent width
flex-wrap: wrap; to allow the remaining el to pass to the next line
Like this:
{
min-width: 18%;
flex-wrap: wrap;
aspect-ratio: 1; // bind the height to the width
}
相关问题
How to fire event handlers on the link using javascript
I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...
How to Add script codes before the </body> tag ASP.NET
Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...
Clipboard access using Javascript - sans Flash?
Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...
javascript debugging question
I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...
Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph? The array is multidimensional, with three elements in each part - and the ...
Is it possible to reload a form after an input type="file" changes?
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
Parsing date like twitter
I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.
热门标签
- winforms
- combobox
- fogbugz
- java
- date
- internationalization
- asp.net
- iis
- url-rewriting
- urlrewriter
- c#
- enums
- ocaml
- haxe
- algorithm
- string
- viewstate
- .net
- c++
- c
- symbol-table
- mysql
- database
- postgresql
- licensing
- migration
- vb.net
- vb6
- declaration
- vb6-migration
- python
- psycopg2
- backup
- vmware
- virtualization
- gnu-screen
- authentication
- desktop
- excel
- xll
- cultureinfo
- regioninfo
- oracle
- client
- session
- download
- html
- virtual
- constructor
- scenarios
- perl
- full-text-search
- javascript
- ajax
- testing
- oop
- inheritance
- vim
- encapsulation
- information-hiding