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

サイドバー/ナビゲーションコンテンツ（Bootstrapを使用）をデフォルトでデスクトップに表示（展開）し、デフォルトでモバイルで閉じ、アイコンをモバイルでのみ表示しようとすると、実際に問題が発生します。これを機能させることができないようです。 <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a href="#">Events</a> <a href="#">Speaking</a> <a href="#">Music</a> </ul> <ul id="social-icons"> …

9 javascript  html  css  bootstrap-4  responsive-design 

非推奨にcustom elements spec v0なった両方の仕様と最新の安定バージョンで動作する必要があるコンポーネントを構築する必要があります。custom elements spec v1 custom elements v0スペックを使用してコンポーネントをビルドすると、一部のアプリはスペックpolymer 2をpolymer 1使用していないアプリケーションで同様の問題が発生しますcustom elements v1。 私は、ポリフィルを変更するアプリケーションを制御できません。一部のアプリケーションは、ポリフィルを使用する必要があり、古い仕様をサポートしているものもあれば、新しいポリフィルを使用しているものもあります。 ポリフィルのバージョンに関係なく、両方の仕様を組み合わせてすべてのアプリケーションでカスタム要素を実行するための確実なソリューションを探しています。私はコンポーネントに任意のポリフィルまたはスニペットを追加して、どこでも実行できるようにすることができます。私の研究では、両方の仕様をサポートするライブラリやポリフィルは見つかりませんでした。 添付のコールバックについて、以下で説明するマッピングのような両方の仕様を組み合わせることができるアダプターを作成することを計画しています。この考えに関する入力は大歓迎です。 connectedCallback(){ this.attachedCallback(); } 私はstenciljsを使用しようとしましたが、それはカスタム要素仕様の最新バージョンでのみ機能します。以前の仕様で動作するように調整する方法はまだ見つかりません。 上記の状況に対するいくつかの実行可能な代替案と実行可能な解決策を提案してください。

9 javascript  html  web-component  polyfills  custom-element 

私はコンソールを見て、これらの警告に気づきました http://google.com/のクロスサイトリソースに関連付けられたCookie が、SameSite属性なしで設定されました。Chromeの今後のリリースでは、SameSite = NoneおよびSecureに設定されている場合にのみ、クロスサイトリクエストでCookieを配信します。開発者ツールのApplication> Storage> CookiesでCookieを確認し、https：//www.chromestatus.com/feature/5088147346030592およびhttps://www.chromestatus.com/feature/5633521622188032で詳細を確認できます。 それを解決するには？

9 php  html 

スレートまたはProseMirrorを使用してエディターを作成し、インライン要素を使用しているときに、キャレットの位置と選択領域の周りでChromeの奇妙な動作を確認しています。問題1は、下の最初の図に示されています。テキストカーソルの位置が「f」の後ろにある場合、キャレットは画像の上部に表示されます。問題2は2番目の画像にあります。テキストを選択すると、インライン要素と同じ高さの強調表示された領域が表示されます。この動作を制御して、代わりにテキストの位置にキャレットを表示し、テキストの周囲のスペースのみを強調表示する方法はありますか（インライン画像によって行の高さが大きくなっている場合でも） ここで、Firefoxからの動作を模倣したいと思います。 ここでProseMirrorデモを使用してサンプル画像を作成しました：https ://prosemirror.net/examples/basic/ 最小例（おかげで@Kaiido）とJSBin。 <div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div> これが他のオペレーティングシステムでどのように動作するかはわかりませんが、私はmacOS Catalinaを使用しています。

8 html  css  contenteditable  slatejs  prose-mirror 

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 

私はポリマー3とlit-element（2.2.1）を使用しています。mwc-textfieldのバージョンは0.13.0です。このバージョンに関連するドキュメントを読みました。このドキュメントでは、高さにミックスインを追加できることがわかりました。私はいくつかの方法を試しましたが、成功しませんでした。私が使用している構文が間違っている可能性があります。テキストフィールドの高さを低くしたい。これは私のテキストフィールドです <mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield> そして私のCSS #textBox{ text-transform: none; --mdc-theme-primary: transparent; --mdc-text-field-fill-color: #fff; --mdc-text-field-hover-line-color: #f5f5f5; --mwc-text-width: 100%; width:100%; } 適用されるデフォルトのCSSは :host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) { background-color: transparent; } .mdc-text-field:not(.mdc-text-field--disabled) { background-color: rgb(245, 245, 245); } .mdc-text-field { display: flex; width: 100%; } .mdc-text-field { height: 56px; display: inline-flex; position: …

8 html  web-component  lit-element  polymer-3.x  lit-html 

マウスが画像の上にあるとき。これは、ifステートメントによって検出されます。 if ((distance(circles[this.index].x, circles[this.index].y, mouse.x, mouse.y)) < circles[this.index].radius) また、画像の外でマウスを検出したいと思います。その前のifステートメントの後、他に使用できない理由は次のとおりです。 画面上に複数の画像を生成したとき、および1つの画像の上にマウスを置いたときにマウスを使用したとき。それはその画像のホバーを行い、コードはそれを検出しますが、他のすべての画像のホバーも行いません。それが「外円」を4回、「内円」を1回表示する理由です ログに見られるように： Console.logの出力： Mouse inside circle Mouse outside circle 4 Mouse inside circle Mouse outside circle 4 マウスが円を離れるときに検出する方法を探しています。 以下で私が作業しているコードを見つけることができます： PS：マウスがどの（インデックス）サークルで検出され、そこから去るかが重要です。大量の写真を作成したいのですが、以下のコードではデモ用に5を使用しました。 var mouse = { x: innerWidth / 2, y: innerHeight / 2 }; // Mouse Event Listeners addEventListener('mousemove', event => { …

8 javascript  html  canvas 

ネストされたメニューとサブメニューを作成していますが、すべてが今のところ完了しています。指定されたIDに基づいてデフォルトでこの折りたたみ可能なメニューを開くようにする必要があります。 以下の完全に機能するコードスニペットを確認することもできます。 const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five …

8 javascript  html  reactjs  accordion  reactstrap 

Flutter Webアプリケーションを作成して、Seleniumに基づくWeb-UI-Testingフレームワークを活用しようとしています。残念ながら、特定のフラッターウィジェットを表すHTML要素を、そのIDまたは名前属性で識別できません。ウィジェットキーがHTMLドキュメントに存在しません。 テキストウィジェットのコンテンツを使用してウィジェットのテキスト部分を見つけ、テキストを含むウィジェットを表す親要素を見つけることができますが、これは画像やキャンバスなどでは失敗します。 HTMLタグスープにID /名前（またはその他の識別手段）を追加するために使用できるメカニズムはありますか？ JavaScriptを使用して、内部論理ウィジェットツリーをトラバースし、そこから（たとえば、場所とサイズによって）表現するHTML要素を結論付ける方法はありますか？

8 javascript  html  selenium  flutter  flutter-web 

数時間掘り下げた後、次の問題について誰かが助けてくれることを期待して、SOに関する質問をすることに決めました。 Webアプリケーションの1つとして、Reactサポートライブラリと一緒にOnsen UI jsフレームワークを使用しました 開発環境でアプリケーションをレンダリングしようとすると、すべてが正しく機能しているように見えますが、ステージング環境でそれを試みると、一部のコンポーネントの動作が異なります これまでに見つけたもの：ステージング環境では、一部のHTML属性がDOMに別様に設定されているようです： |----------------|---------------|--------------| | HTML attribute | DEV ENV | STAGING ENV | |----------------|---------------|--------------| | fixed-content | fixed-content | fixedcontent | |----------------|---------------|--------------| | active-index | active-index | index | |----------------|---------------|--------------| このため、OnsenフレームワークはHTML要素の属性を見つけることができず、以下に関係なく異なる動作をします。 私たちは同じブラウザーを使用しています（Chrome、Edge、Firefoxで確認） 両方の環境に同じJSコードがロードされています 環境間の違いは何ですか？ JSファイルは、開発マシンとステージング環境のS3にローカルに保存されます。 ステージング環境で暗号化された接続を使用します Accept-Encodingヘッダーはgzip, deflateローカルとgzip, deflate, brステージングにあります たぶん何か他に探す必要がありますか？ ここで何が起こっているのか誰か知っていますか？

8 javascript  html  reactjs  onsen-ui 

WebRTCの学習の練習として、ローカルWebカメラを表示し、Webカメラの遅延再生を並べて表示しようとしています。これを達成するために、記録されたblobをBufferSourceに渡し、対応するMediaSourceをビデオ要素のソースとして使用しようとしています。 // the ondataavailable callback for the MediaRecorder async function handleDataAvailable(event) { // console.log("handleDataAvailable", event); if (event.data && event.data.size > 0) { recordedBlobs.push(event.data); } if (recordedBlobs.length > 5) { if (recordedBlobs.length === 5) console.log("buffered enough for delayed playback"); if (!updatingBuffer) { updatingBuffer = true; const bufferedBlob = recordedBlobs.shift(); const bufferedAsArrayBuffer …

8 javascript  html  webrtc 

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