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

フロントエンドにさまざまなボタンを備えたページがあり、すべてのボタンはそれ自体で完全に機能しますが、Chrome Webストアで拡張機能を開くボタンをクリックし、その後別のボタンをクリックすると、ページが開きません。 これが私が話していることの例です。開いているタブを閉じずにボタンをクリックした場合、Chrome Webストアが開いた後にクリックしたボタンは効果がありません。なぜそれがあり、それを回避する方法を誰かが知っていますか？ https://html-ichr7r.stackblitz.io 以下がそのコードです。 <button id="button1" onclick="window.open('https://www.facebook.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button2" onclick="window.open('https://www.google.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> <button id="button3" onclick="window.open('https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj?hl=de','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button4" onclick="window.open('https://www.9gag.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> どんな助けでもありがたいです！ 編集：私はそれがFirefoxで動作することを理解しましたが、それでもなぜそれがChromeで動作しないのか分かりません。

11 javascript  html  google-chrome 

私はこのように次のようなプロットを作成しました： import plotly labels = ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'] values = [4500, 2500, 1053, 500] trace = plotly.graph_objs.Pie(labels=labels, values=values) plotly.offline.plot([trace], filename='basic-pie-chart') それから私はそのようなhtmlを作成しました： print(plotly.offline.plot([trace], include_plotlyjs=False, output_type='div')) 上記のコードを実行すると、ブラウザで表示できる.htmlファイルが生成されます。 GitHubページのマークダウンファイルの中央に.htmlファイルを表示する方法はありますか？それで、plotlyのインタラクティブ機能を使用できますか？ ここに私が尋ねた同様の質問があります

10 python  html  markdown  plotly  github-pages 

私は他のモバイルチャットアプリを模倣しようとしています。send-messageテキストボックスを選択して仮想キーボードを開くと、一番下のメッセージがまだ表示されています。CSSでこれを驚くほど実行する方法はないようです。そのため、JavaScript resize（明らかにキーボードが開いているときと閉じているときを確認する唯一の方法）イベントと手動でスクロールして救助します。 誰かが提供するこのソリューションを、私は見つけたこのソリューションの両方が動作するように見えます。 1つの場合を除いて。以下のためにいくつかのあなたが以内であれば理由、MOBILE_KEYBOARD_HEIGHT（私の場合は250個のピクセル）メッセージのdivの下のピクセルモバイルキーボードを閉じると、奇妙な何かが起こります。前者のソリューションでは、一番下までスクロールします。後者のソリューションでは、代わりにMOBILE_KEYBOARD_HEIGHTピクセルを下から上にスクロールします。 この高さより上にスクロールすると、上に提供された両方のソリューションが問題なく機能します。彼らがこの小さな問題を抱えているのは、あなたが底辺りにいるときだけです。 多分それは私のプログラムがこれを引き起こしているいくつかの奇妙な迷子のコードだと思っていましたが、いいえ、私はフィドルを再現しさえしており、それはまさにこの問題を抱えています。これをデバッグするのが非常に困難になったことをお詫びしますが、電話でhttps://jsfiddle.net/t596hy8d/6/show（ショーのサフィックスは全画面モードを提供します）にアクセスすると、同じ動作。 その動作は、十分に上にスクロールすると、キーボードの開閉によって位置が維持されます。ただし、下部のピクセル内でキーボードを閉じると、MOBILE_KEYBOARD_HEIGHT代わりに下部にスクロールすることがわかります。 これは何が原因ですか？ ここでのコードの再現： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

私はこのようなものを使用して、単純なランディングページから重量のある単一ページアプリをクリックするときのパフォーマンスを向上させようと試みてきました。 <link rel="prefetch" href="https://example.com" as="document" /> <link rel="prefetch" href="https://example.com/app.js" as="script" /> <link rel="prefetch" href="https://example.com/app.css" as="style" /> ランディングページがサブドメイン上にある場合、パフォーマンスはそれほど向上しないようです。と言いhttps://subdomain.example.comます。 リンクをクリックしてにアクセスhttps://example.comしても、Chromeネットワークタブに長い遅延が表示されapp.js、app.cssロードされます。 以下は、プリフェッチを無効にした同じリソースです。 合計でほぼ同じ時間がかかります。 プリフェッチキャッシュで読み込まれたアセットの1つのリクエストヘッダー： 一般： Request URL: https://example.com/css/app.bffe365a.css Request Method: GET Status Code: 200 (from prefetch cache) Remote Address: 13.226.219.19:443 Referrer Policy: no-referrer-when-downgrade 応答： accept-ranges: bytes cache-control: max-age=31536000 content-encoding: gzip content-length: 39682 content-type: …

10 html  link-prefetch 

私は昨日、同様の質問をしましたが、説明が不十分であり、純粋なCSSソリューションへの私の希望を明記していませんでした。 基本的に、スクロール可能なメッセージのdivとその下に入力フィールドがあるという問題があります。ボタンをクリックしたときに、メッセージのdivもスクロールせずに、入力フィールドを100ピクセル増やしたいと思います。 ここに問題全体を示すフィドルがあります ご覧のように、「マージンを追加」ボタンをクリックすると、メッセージのdivも上にスクロールします。そのままにしてもらいたいです。同様に、少し上にスクロールして最後から2番目のメッセージしか表示できない場合、ボタンをクリックしても、クリックしたときにその位置が維持されるはずです。 興味深いのは、この動作が「ときどき」維持されることです。たとえば、状況によっては（かなり推測することはできません）、スクロール位置が保持されます。私はそれが一貫してそのように振る舞うことを望みます。 window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; display: flex; flex-direction: column; } .messages { overflow-y: auto; height: 100%; } .send-message { width: 100%; display: flex; flex-direction: column; } .some-margin …

10 javascript  html  css  scroll  scrollbar 

私は1ページのWebアプリに取り組んでいます。これは、モバイルデバイスで最も一般的に使用されます。その機能の1つはマップモードで、ブラウザウィンドウ全体を一時的に引き継ぎます。距離スケールといくつかのコントロールは、マップの四隅に接続されています。これが地図の小さなスクリーンショットですので、私が何を話しているのかわかります。 マップはAとして実装される<div>とposition: fixed、すべての4点の座標ゼロ。また、マップが表示され<body>ているoverflow: hidden間に一時的にをに設定して、基になるアプリの表示が原点から離れるようにスクロールされる場合を処理します。これで、マップをデスクトップブラウザで正確に機能させることができます。モバイルブラウザーでも"width=device-width,user-scalable=no"、ウィンドウの表示領域をビューポートに正確に対応させるために、メタビューポートタグにのようなものを指定する必要がありました。 私が最初にこのアプリを書いたとき、これはすべて美しく機能しましたが、iOS Safariは、スケーリングに関連するメタビューポートオプションのいずれかを尊重しなくなりました。まだズームできません。現在、このブラウザーでマップを有効にすると、わずかに拡大されたビューが表示され、右側と下部のボタンが切り取られ、何もできなくなります。、すべてのタッチが、ブラウザのスクロールではなく、マップのズーム/パンジェスチャとして解釈されるためです。これらのボタンからアクセスできる機能がないと、マップはそれほど役に立ちません。右上のボタンがないと、マップを閉じることさえできません。唯一の方法は、ページをリロードすることです。これにより、保存されていないデータが失われる可能性があります。 history.pushState/ の使用を確実に追加しonpopstateて、マップオーバーレイが別のページのように動作するようにします。ブラウザの[戻る]ボタンを使用してマップモードを終了することはできますが、ボタンがないために機能が失われることによる残りの問題には対処できません。 を使用.requestFullscreen()してマップオーバーレイを実装することを検討しましたが、それ以外の場合にアプリが使用できるすべての場所でサポートされるわけではありません。特に、それは明らかにiPhoneでは機能しません。iPadでは、ステータスバーとコンテンツに重なる巨大な「X」ボタンが表示されます。私の距離の目盛りはもう読めないでしょう。とにかく、意味的に私が本当に望んでいるものではありません- 全画面ではなく、全ウィンドウが必要です。 最新のブラウザでフルウィンドウ表示を機能させるにはどうすればよいですか？この件名で見つけることができるすべての情報は、メタビューポートタグの使用について語っていますが、前述のとおり、これは機能しません。

10 html  css  mobile-safari  fullscreen 

ページの高さ全体を埋めるために、私height: 100%;はhtmlタグとbodyタグに使用し、ブラウザーを閉じて再度開くまで正常に機能します。（モバイルデバイスの問題のため、100vhは使用しませんhttps://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html） 再現する手順： iPhoneのGoogle Chromeでhttps://angelika94.github.io/rick/を開きます（ナビゲーション（モーティとビール）がページの下部に配置されていることがわかります）ナビゲーション付きのCSS Rickのスクリーンショット ブラウザを閉じて、マルチタスクナビゲーションから削除します。https： //support.apple.com/en-us/HT201330 ブラウザーを再度開きます（下部のナビゲーションが「最初の画面」から移動したことがわかります。今、それを表示するにはスクロールする必要があります） ナビゲーションのないcss Rickのスクリーンショット これらの場合、ページは自動的に修正されます。 更新ページ デバイスを横向きに回転させます タブによるブラウザのナビゲーションの開閉 マルチタスクナビゲーションでブラウザを閉じずに閉じて再度開く なぜそれが起こるのですか？この動作を修正するにはどうすればよいですか？ 前もって感謝します！

10 html  css  height  google-chrome-app 

Chrome v78.0.3904.70のリリース以降、 CSSプロパティの使用に関する問題が発生していますwhite-space: nowrap;。改行しないスペースは改行を引き起こすようです。を使用するtext-overflow: ellipsis場合、実際のテキストはコンテナの外側で壊れているため表示されません。テキストが長すぎて表示できない場合にのみ発生するようです。 .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } <div class="mar-rgt box-inline text-sm"><span class="label" style="background: rgb(176, 223, 246);"></span> Not meeting expecations</div> コードスニペットを実行する結果を非表示スニペットを展開 アプリケーションでいくつかの表示の問題が発生しています。これはバグですか、それともコードに問題がありますか？ このコードは、React 16でレンダリングされています。

10 html  css  google-chrome  whitespace 

私のコードの一部をフォローしています。「iphone」セルがiphoneからのみ点滅している理由を知りたくてたまらない。PS。構造にテーブルやリストを使用できません。私も使ってみましたtransform: translate3d(0,0,0);。 基本的に、iPhoneとiPadの左と上に、最初のセルをスティッキーにする必要があります。HTMLとCSSのみを使用してそれを実行したいと思います。 重要 固定の解答で答えないでください。テーブルが本体のどこに配置されるのかわかりません。ヘッダー、一部のコンテンツなどがあります。 コードスニペットを表示 .table { width: 2000px; position: relative; } .tr { overflow: visible; display: block; white-space: nowrap; font-size: 0; } .tc { border: 1px solid #DDD; display: inline-block; width: 100px; height: 100px; text-align: center; font-size: 12px; } .trh { background: #000; color: #FFF; position: -webkit-sticky; position: …

10 html  css 

ファイルダイアログからファイルを選択して[OK]をクリックした後、このコードを改善して無応答性/ページラグを削除するにはどうすればよいですか？ サイズが50〜100 KBのファイルをテストしています function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, …

9 javascript  html 

私は、HTMLとCSSのみ（JavaScriptなし）で視覚的に動的でインタラクティブなエクスペリエンスを作成するように挑戦しました。これまでのところ、純粋なCSSやHTMLでは実行できなかった必要な機能に出会ったことはありません。これはおそらくもう少し難しいです。 私は、ダブルクリックからユーザーを防ぐために必要がある<a>、<input type="submit">と<button>タグ。これは、フォームを二重に送信したり、誤って2つのGETリクエストをURLに送信したりするのを防ぐためです。これは純粋なCSSでどのように実行できますか？disabledJSなしでは設定できない場合でも、2020年には、それを処理できるマスキングテクニックまたはスタイルの組み合わせが必要です。 これが試みの簡単な例です。 .clicky:focus{ display: none; pointer-events: none; } <a href="#down" class="clicky">test</a> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p id="down">target</p> コードスニペットを実行する結果を非表示スニペットを展開 残念ながら、これは実際のクリックイベントが何らかの理由で発生する前に無効にします。おそらくアンカーはテストする最良の方法ではありませんか？これからも挑戦していきます。

9 html  css 

私はAirpods Proページで Appleと同じ効果をアニメーション化したラッパーを作成しました。基本的にはビデオです。ビデオをスクロールすると、少しずつ再生されます。ビデオの位置は固定されているので、テキストはうまくスクロールします。ただし、テキストは、特定の分割のオフセット間（テキスト表示）にある場合にのみ表示されます。 その部分は正常に動作します。ここで、ユーザーがビデオの最後までスクロールしてアニメーションが終了したときに、video-effect-wrapperが固定位置から相対位置に移動するようにします。そのため、そのWebサイトは、通常、ビデオアニメーションの後にコンテンツをスクロールします。 JSFIDDLEコード+デモ これは私がすでに試したことの例です： //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } この種の作品...しかし、スムーズ以外はすべてです。また、Webページを逆方向に逆スクロールできるようにする必要もあります。 この問題を修正しようとしたときに発生した問題： スクロール、および固定から相対への移行は、自然でスムーズな感じがする必要があります ラッパー自体は固定されておらず、.text要素が含まれています。ビデオは固定されているため、.text要素はビデオ要素を通過できます（エフェクトを作成します）。これらの.text要素は、解決策を見つけようとして問題を引き起こします

9 javascript  jquery  html  css 

依存するドロップダウンのあるフォームがあります。このセカンダリドロップダウンは、選択されたプライマリオプションにセカンダリオプションがない場合、およびページが最初に読み込まれたときに非表示になります。フォームが送信されると、最初のフィールドのみがクリアされます。これは、ほとんどの場合ドロップダウンが同じであるためです。ただし、スクリプトはプライマリドロップダウンに変更があった場合は常に機能します。変更を構成するのではなく、選択/送信されたオプションをプライマリドロップダウンに保持し、選択されたプライマリオプションにセカンダリオプションがある場合でも、空のセカンダリドロップダウンを表示します。私はJSのほとんどを、チュートリアルのドロップダウンからよく知りません。より視覚的に理解するために： これは、ページが最初にロードされたときのフォームです セカンダリオプションがあるオプションを選択すると、もう1つのドロップダウンが表示されます ステーションを選択して送信すると、従業員番号はクリアされますが、他の2つは残っているはずですが、送信時にページがリロードされると、次のようになり、ステーションがないため、ステーションはステーションによってクリアされました技術的に。駅の整理についてはあまり気にしていませんが、空にしてはいけない空のドロップダウンがないことのほうが重要です。 フォームに残ったデータを見ると、ドロップダウンから別のオプションを選択するまで依存ドロップダウンが読み込まれず、ボックスアセンブリオプションを再び表示できるようにしたい場合は、作業領域のみが残りました。 、別のオプションをクリックしてから、（たとえば）ボックスアセンブリに戻る必要があります。 この問題を解決するにはどうすればよいですか？残されたオプションがトリガーされているかどうかに関係なく、セカンダリオプションがあるかどうかをチェックするように、JavaScriptが最初にロードするように強制する方法はありますか？ forms.py class WarehouseForm(AppsModelForm): class Meta: model = EmployeeWorkAreaLog widgets = { 'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}), } fields = ('employee_number', 'work_area', 'station_number') def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['station_number'].queryset = Station.objects.none() if 'work_area' in self.data: try: work_area_id = int(self.data.get('work_area')) self.fields['station_number'].queryset = Station.objects.filter(work_area_id=work_area_id).order_by('name') except (ValueError, …

9 javascript  python  html  django 

現在ソートされている列のヘッダーにアイコンが表示される「ソート可能な」テーブルがあります。 ソートアイコンはテキストの最後に表示されます（つまり、LTR / RTLをサポートしています）。現在を使用していdisplay:flexます。ただし、テーブルの幅が小さくなり、列ヘッダーのテキストが折り返され始めると、並べ替えられている列が明確でないあいまいな状態になります。 代わりに、次の要件を満たしたいと思います。 アイコンは常に、テキストの最長の行の「端」に「ぴったり」と位置合わせされます（ラッピングセル/ボタンが広い場合でも）。 アイコンは、テキストの最後の行と下揃えにする必要もあります。 アイコンはそれ自体の行に折り返してはなりません。 ボタンが存在し、セルの幅全体に及ぶ必要があります。（内部のスタイル設定であり、マークアップは必要に応じて変更できます。） CSSとHTMLは、可能な場合のみ。 既知の/設定された列幅やヘッダーテキストに依存することはできません。 例えば： 私はの異なる組み合わせの束を試してきましたdisplay: inline/inline-block/flex/grid、position、::before/::after、とさえfloat（！）が、所望の動作を得ることができません。これが問題を示す私の現在のコードです： .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …

9 html  css  layout  html-table  alignment 

マーカーに問題があります。プログレスバーの任意の場所をマークできるようにマーカーを伸縮可能にしたい 下のGIFに示すように 質問：プログレスバーの任意のポイントを選択し、マーカーをストレッチできるようにしたいのですが、マーカーを複数のポイントにすることができます。 以下のコードでそれを行う方法がわかりません： var player = videojs('demo'); player.markers({ markerStyle: { 'width':'9px', 'border-radius': '40%', 'background-color': 'orange' }, markerTip:{ display: true, text: function(marker) { return "I am a marker tip: "+ marker.text; } }, breakOverlay:{ display: true, displayTime: 4, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: …

9 javascript  jquery  html  video.js