タグ付けされた質問 「css」

Ionicアプリの全画面ビデオの背景を取得しようとしていますが、Androidとブラウザーでは問題なく機能しますが、XcodeシミュレーターのiPhoneでアプリを実行すると、背景が白くなり、ビデオが読み込まれません。 。 HTMLコード： <div class="fullscreen-bg"> <video autoplay loop muted playsinline webkit-playsinline> <source src="/assets/videos/background.mp4" type="video/mp4"> </video> </div> CSSコード： .fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; height: 100vh; } これもconfig.xmlファイルに追加しました <preference name="AllowInlineMediaPlayback" value="true"/> 何か不足していますか？

8 html  css  ios  cordova  ionic-framework 

ユーザーがタップアンドホールドジェスチャを実行して単語を選択し、指を画面の上端または下端のいずれかにドラッグすると、選択に対応するためにページが自動的にスクロールします。 ここにそれを示す短いクリップがあります 内でこの動作を防止したいと思いWKWebViewます。 これが私がこれまでに試したことです： 内bridge.jsのWebViewにアクセス可能なファイル： var shouldAllowScrolling = true; document.addEventListener('selectionchange', e => { shouldAllowScrolling = getSelectedText().length === 0; window.webkit.messageHandlers.selectionChangeHandler.postMessage( { shouldAllowScrolling: shouldAllowScrolling }); console.log('allow scrolling = ', shouldAllowScrolling); }); そしてWKScriptMessageHandler実装では： public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { switch message.name { case "selectionChangeHandler": let params = paramsDictionary(fromMessageBody: message.body) let …

8 javascript  html  css  swift  wkwebview 

私はそのようなコードを持っています： .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg> <!-- clipped image--> <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div> コードスニペットを実行するHide resultsスニペットを展開 クリッピングシェイプのサイズを増やして、緑色の領域の幅になるようにします。これを達成する方法はありますか？

8 css  svg  clip-path 

私の問題を説明するビデオ：https : //i.imgur.com/L3laZLc.mp4 カードを2つの異なる行に追加できるシンプルなアプリがあります。カードが行に追加されるとreact-transition-group、「エンター」アニメーションをトリガーするために使用しています。 ただし、react-beautiful-dnd行間でカードをドラッグできるようにインストールし、行自体を並べ替えることもできます。ただし、カードが新しい行に移動されたとき、または行が並べ替えられたときに、一部のカードには「エンター」アニメーションが発生します。 ドラッグすると、次の場合に不要なアニメーションが起動します カードは別の行にドラッグされます。 行が再注文され、2つの行のカードの数が異なります。 奇妙なことに、不要なアニメーションは発生しません カードは、元の行内の新しい位置にドラッグされます。 行は並べ替えられ、行には同じ数のカードがあります。 を使用してを変更したreact-transition-groupときにアニメーションが起動しないようにする方法を知りたいのstateですがreact-beautiful-dnd。 私の問題のサンドボックス（App.jsファイル内のコメントの詳細）： https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

8 css  reactjs  animation  react-transition-group  react-beautiful-dnd 

2番目の画像、3番目の画像などにズームアウトして画像を切り替えたいと思っています。背景画像とスケールを使用して、いくつかのキーフレームを使って自分で作成してみましたが、2つの問題があったことを除いて、ちゃんと機能しました。1.テキストとボタンもスケーリングされました。2.画像の持続時間が短すぎました。含めますが、探していたものではなかったので削除しました。これが純粋なCSSで実行できる方法があるかどうかは、少なくとも簡単にはわかりません。だから私はJSを使用する必要があるだろうことに傾いていますか？これが私の現在のコードです。 .jumbo { display: flex; flex-direction: column; justify-content: Center; margin: 0; width: 100vw; height: 100vh; min-height:100vh; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)), url("images/j-img1.png"); background-repeat:no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .jumbo-text { text-align: center; color: white; font-weight: 600; } /* Jumbo …

8 html  css 

これは、Bismonプロジェクト（H2020ヨーロッパのプロジェクトが資金を提供するGPLv3 +ソフトウェア）、git commit内にあり0e9a8eccc2976fます。このドラフトレポートでは、ソフトウェアについて説明します。この質問は、より多くの背景と動機を与えます。これは、（手書きの）webroot / jscript / bismon-hwroot.jsファイルに関するもので、Bismon（libonionの上の特殊なWebサーバー）によってコードが生成されるHTMLページで使用されます。 たとえば、スパンのCSSクラスを追加しましたspan.bmcl_evalprompt（たとえば、ファイルfirst-theme.cssに） JavaScriptをコーディングして、同じスタイル（同じフォント、色など...）を持つキャンバスに（できればjqueryでjcanvasを使用して）テキスト部分を追加するにはどうすればよいspan.bmcl_evalpromptですか？DOMにそのようなスパン要素を作成する必要がありますか？それは単に可能ですか？ 私はLinux上の最近のFirefox（少なくとも68）のみに関心があります。jQueryは3.4です。私はJquery UI 1.12.1 も使用しています 私は私の心の中に持っていたアイデア1つの作成することでした<span class='bmcl_evalprompt'>遠くのブラウザビューポート（またはX11ウィンドウ）からの座標を持つ要素を、例えば時x= -10000とy= -10000 （ピクセル単位）、そしてその後、伝統を使用し、ドキュメントのDOMにその単一ひどく位置付け要素を追加フォントファミリー、フォントサイズ、要素サイズを取得するためのjqueryテクニック。しかし、もっと良い方法はありますか？またはそれを行ういくつかのjquery互換ライブラリ？

8 jquery  html  css  linux  html5-canvas 

次の例では、円はグリッドの幅に適応し、アスペクト比を維持しています。コンテナの幅が縮小すると、円もそれに伴って縮小します... ただし、高さが幅よりも小さい場合（2番目のボックス）、円はグリッドの外側のオーバーラップを縮小しません。代わりに、アスペクト比を維持しながら高さにも適応させる方法はありますか？ .container { display: grid; background-color: greenyellow; margin: 5px; min-height: 10px; min-width: 10px; } .portrait { max-height: 100px; max-width: 200px; } .landscape { max-height: 200px; max-width: 100px; } .aspect-ratio { grid-column: 1; grid-row: 1; background-color: deeppink; border-radius: 50%; align-self: center; justify-self: center; } <div class="container landscape"> <svg class="aspect-ratio" viewBox="0 …

8 html  css  svg  css-grid  aspect-ratio 

「フォーカス可能」であるページ上の要素（ボタン、tabindexを含む要素など）があり、スクリーンリーダーがコンテンツを正しく読み上げます。 ただし、フォーカスできない要素がいくつかあるため（ドロップダウンリストの結果など、多くの要素があるため）、ユーザーがタブを無数にクリックしたくないのですが、左/右/アップ/ダウンキー、およびCSSクラスが「選択」されます（ただし、他の要素（その親）が実際にフォーカスされています） クラスを「選択」して、これらの特定の要素を読者に読み取らせたい。どうすればいいのですか？ （属性aria-label = "read this"を適用しようとしましたが、機能しませんでした。要素が実際にフォーカスされている場合にのみ機能します） 以下は、私が達成したいことを理解するのに役立つ詳細です。 <div tabindex="0" > <span>title1</span> <ul> <li class="selected">item1</li> <li>item2</li> <li>item3</li> </ul> </div> <div tabindex="0"> <span>title2</span> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> これがフィドルです：https : //jsfiddle.net/d5gbjst1/1/ これらの2つのdiv間をタブで移動すると、任意のスクリーンリーダー（Windowsナレーター、NVDA、JAWSで試してみました）は「title1」と最初の項目のすべての項目、「title2」と2番目の項目のすべての項目を読み取ります。焦点がどこにあるかに応じて。 最初のulの最初の項目で「選択された」クラスに注意してください。今、私は自分のulリストを上下矢印で参照し、それに応じて「選択された」クラスが項目間を移動します。（これは独立したJSコードであり、簡単にするためにこの例には含まれていません） 「選択された」クラスが要素に適用されると、読者にそれを強制的に読み取らせたい。まったく可能ですか？ 編集：私はulとliにも属性を追加しようとしましたが、まだうまくいきません： <ul role="list"> <li role="listitem">

8 javascript  html  css  wai-aria 

画像とテキストを含むdivがあります（画像は可変サイズで、テキストは可変長です）。 正確な幅が事前に定義されている場合、すべてのdivコンテンツに適合するために必要な高さを計算する方法はありますか？ UPDを使用すると同じ間違った結果が出る $(document).ready() document.addEventListener("DOMContentLoaded", function () { var div = document.getElementById("Content"); var res = document.getElementById("Result"); res.innerHTML = div.offsetHeight; // incorrect - returns 252 while the real height is 360 (Firefox, Chrome) }); div { width: 400px; } img { float: left; margin: 0.5em; } <div id="Content"> <img src="https://picsum.photos/id/82/200/150" /> …

8 javascript  css 

@keyframeを使用してCSSでアニメーションを使用する方法を学びました。しかし、私のカスタムアニメーションコードを自分のreactプロジェクト（materialUIを使用）に書きたいと思います。私の課題は、MaterialUIのmakeStyle（）を使用して、アニメーションをカスタム化するJavaScriptコードをどのように書くことができるかです。今回は、MaterialUIで遷移プロセスをパーセンテージでカスタマイズできるようにしたいと思います。makeStyle（）でこのようなコードを記述できるようにする必要がありますが、その方法がわかりません。 @keyframes myEffect { 0%{ opacity:0; transform: translateY(-200%); } 100% { opacity:1; transform: translateY(0); } } コードスニペットを実行する結果を非表示スニペットを展開

8 css  reactjs  material-ui  jss 

現在、トグルアニメーションを維持しながら、再生/一時停止アイコンをテキストに置き換える方法に苦労しています。 どのJSコードがアイコンをレンダリングしているかを正確に理解し、次にそれらを削除/非表示にして、テキストで置き換えることができるようにしています 私はまだJSの初心者レベルです。どんな助けでも大歓迎です var tl = new TimelineMax(), $videoContainer = $('.cb-video-container'), $video = $videoContainer.find('.video'), $playPauseClickArea = $videoContainer.find('.play-pause--click-area'), $playPauseContainer = $videoContainer.find('.play-pause--container'), $playIcon = $videoContainer.find('.play-icon'), $pauseIcon = $videoContainer.find('.pause-icon'), iconIsToggled = false, iconEase = Back.easeInOut.config(1.7), iconDuration = 0.3; setupVideo(); // functions function setupVideo() { TweenMax.set($pauseIcon, { autoAlpha: 0, scale: 0 }); TweenMax.set($playPauseClickArea, { …

8 javascript  jquery  css 

ではSafariの13のリリースノートには、バウンススクロール効果を有効にする要素には以下のものを適用する必要がなくなったことを述べていません。 div { overflow-x: scroll; -webkit-overflow-scrolling: touch; /* No longer needed */ } ただし、次のコードでこの効果を無効にすることはできなくなりました。 div { overflow-x: scroll; -webkit-overflow-scrolling: auto; } 作業中のカルーセルにこれが必要です。それを修正する方法について何か考えはありますか？ありがとう！

8 html  ios  css  scroll  webkit 

物事を振る舞うのに苦労しています。 レスポンシブサイトに画像の動的リストがあります。レイアウトは、画像を行/列または列行に配置できる場所に生成されます。 この例は近いですが、ブラウザのサイズが変更されると、ペアになっている画像が下部に配置されません... <div style="width:100%;"> <div style="width:60%; display: flex; margin-left: auto; margin-right: auto;"> <div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; "> <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;"> <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%"> </div> </div> <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;"> <div id="row" …

8 html  css  flexbox  object-fit 

4つの色のセットがあり、それらをネストされたdivに適用したいので、次の子はそれぞれ異なる色になります。ネストの5番目のレベルがある場合は、最初の色からやり直し、ネストのレベルが無限に深くても、これを継続したいと考えています。これはCSSセレクターのみで実行でき、JavaScriptを回避できますか？ 私は現在、次のコードで行き詰まっています-ご覧のとおり、ピンクが4番目以降すべてのネストされたdivに適用され続けます。 div { border: 1px solid black; font-weight: bold; padding: 30px; } div { color: red; } div>div { color: blue; } div>div>div { color: green; } div>div>div>div { color: pink; } <div> 1 <div> 2 <div> 3 <div> 4 <div> 1 <div> 2 <div> 3 <div> 4 </div> …

8 html  css  css-selectors