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

のようなものを作りたい <menu> <lunch> <dish>aaa</dish> <dish>bbb</dish> </lunch> <dinner> <dish>ccc</dish> </dinner> </menu> HTML5でできますか？私はそれでできることを知っています <ul id="menu"> <li> <ul id="lunch"> <li class="dish">aaa</li> <li class="dish">bbb</li> </ul> </li> <li> <ul id="dinner"> <li class="dish">ccc</li> </ul> </li> </ul> しかし、それはとても読みにくいです:(

114 html 

私は、ズーム可能なパン可能なグラフで基本的に何千ものポイントをレンダリングするプロジェクトを更新するために使用する適切なテクノロジーを選択しようとしています。Protovisを使用した現在の実装は、パフォーマンスが低いです。ここでそれをチェックしてください： http://www.planethunters.org/classify 完全に縮小すると約2000ポイントになります。下部のハンドルを使用して少し拡大し、ドラッグして移動します。あなたはそれがかなり途切れ途切れであり、あなたが本当に速いコンピュータを持っていない限り、あなたのCPU使用率はおそらく1つのコアで100％に上がることがわかります。フォーカスエリアへの変更ごとにprotovisへの再描画が呼び出されますが、これはかなり遅く、描画されるポイントが多いほど悪くなります。 インターフェースにいくつかの更新を加え、基礎となる視覚化テクノロジーを変更して、アニメーションとインタラクションの応答性を高めたいと思います。次の記事から、別のSVGベースのライブラリか、キャンバスベースのライブラリを選択するように見えます。 http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ Protovisから生まれたd3.jsはSVGベースであり、アニメーションのレンダリングに優れているはずです。ただし、パフォーマンスの上限がどれほど優れているかについては疑問です。そのため、KineticJSのようなキャンバスベースのライブラリを使用して、より完全なオーバーホールも検討しています。ただし、1つのアプローチを使い始める前に、これだけ多くのデータを使用して同様のWebアプリケーションを実行した人からの意見を聞き、意見を聞きたいと思います。 最も重要なのはパフォーマンスです。2番目の焦点は、他の対話機能の追加とアニメーションのプログラミングの容易さにあります。おそらく、一度に2000ポイントを超えることはなく、それぞれに小さなエラーバーがあります。ズームイン、ズームアウト、パンニングはスムーズである必要があります。最新のSVGライブラリがこれで適切な場合、おそらくd3の使いやすさはKineticJSなどの設定の増加よりも優先されます。ただし、キャンバスを使用することで、特に低速のコンピューターを使用する人にとって、パフォーマンスに大きな利点がある場合は、間違いなくその方法を好むでしょう。 NYTimesが作成した、SVGを使用しているが、順調にスムーズにアニメーション化するアプリの例：http : //www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。そのパフォーマンスが得られ、独自のキャンバス描画コードを記述する必要がない場合は、おそらくSVGを使用します。 一部のユーザーは、キャンバスレンダリングと組み合わせたd3.js操作のハイブリッドを使用していることに気付きました。しかし、私はこれについてオンラインで多くのドキュメントを見つけることができないか、その投稿のOPに連絡することができません。このようなDOM-to-Canvas（デモ、コード）の実装を経験したことがある方は、ぜひご連絡ください。データを操作できることと、データのレンダリング方法（したがってパフォーマンス）をカスタム制御できることの良いハイブリッドのようですが、すべてをDOMにロードしなければならない場合でも、処理が遅くなるのではないかと思います。 これに似た既存の質問がいくつかあることは知っていますが、まったく同じことを尋ねる質問はありません。ご協力いただきありがとうございます。 フォローアップ：私が最終的に使用した実装はhttps://github.com/zooniverse/LightCurvesにあります

114 html  canvas  svg  d3.js  kineticjs 

このアプリケーションでは、無限スクロールを使用して、異種のアイテムの大きなリストをナビゲートします。いくつかのしわがあります。 ユーザーが10,000アイテムのリストを持ち、3k以上をスクロールする必要があるのはよくあることです。 これらは豊富なアイテムであるため、ブラウザのパフォーマンスが受け入れられなくなるまでに、DOMに数百しか存在できません。 アイテムの高さはさまざまです。 アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは、ビューポートの上に画像をロードする必要があるリストのポイントにユーザーがジャンプできるため、ロードするとコンテンツが押し下げられるため、これはトリッキーです。これを処理できない場合、ユーザーは日付にジャンプしても、以前の日付にシフトする可能性があります。 既知の不完全なソリューション： （react-infinite-scroll）-これは、単純な「下にヒットしたときにさらにロードする」コンポーネントです。DOMを排除することはないため、何千ものアイテムで死んでしまいます。 （Reactを使用したスクロール位置）- 両方ではなく、上部に挿入するか下部に挿入するときに、スクロール位置を保存および復元する方法を示します。 完全なソリューションのコードを探しているのではありません（それはすばらしいでしょう）。代わりに、この状況をモデル化するための「Reactの方法」を探しています。スクロール位置の状態ですか？リストで自分の位置を保持するには、どの状態を追跡する必要がありますか？レンダリングされたものの下部または上部の近くでスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか？

114 javascript  html  infinite-scroll  reactjs 

HTML imgタグでいくつかの大きな画像を表示しようとしています。現時点では、画面の端から消えています。ブラウザウィンドウ内に収まるようにスケーリングするにはどうすればよいですか？ または、これが不可能である可能性が高い場合、少なくとも「この画像を通常の幅と高さの50％で表示する」と言うことはできますか？ 幅と高さの属性は画像をゆがめます-私が知る限りでは、これはそれらがコンテナが最終的に使用する可能性のあるすべての属性を参照するためです。これは画像とは無関係です。ピクセルサイズの異なる画像の大規模なコレクションを処理する必要があるため、ピクセルを指定できません。最大幅は機能しません。

114 html  image-scaling 

範囲スライダーを使用したいWebサイトを作成しています（Webkitブラウザーのみをサポートしていることがわかっています）。 私はそれを完全に統合し、うまく動作します。しかし、私はtextbox現在のスライド値を表示するために使用したいと思います。 つまり、最初のスライダーの値が5である場合、テキストボックスでは5と表示されるはずです。テキストボックスの値をスライドすると、変化するはずです。 私は使用してこれを行うことができますCSSかhtml。避けたいJQuery。出来ますか？

114 html  css  range 

もうしばらく前から考えていたので、今から皆さんの意見や考えられる解決策などを知りたいです。 テキストの色を変更したり、親のbackground-imageまたは-colorの覆われたピクセルの平均輝度に応じて、定義済みの画像/アイコンを切り替えたりするプラグインまたはテクニックを探しています。 背景の覆われた領域がかなり暗い場合は、テキストを白にするか、アイコンを切り替えます。 さらに、親がbackground-colorまたは-imageを定義していないかどうかをスクリプトが認識し、最も近いもの（親要素からその親要素まで）を検索し続けるとすばらしいでしょう。 この考えについてどう思いますか？すでに似たようなものはありますか？スクリプト例？ 乾杯、J。

114 javascript  jquery  html  css  sass 

ウェブサイトのフォームにいくつかの入力フィールドを挿入するjavascript（greasemonkey / userscript）を書いています。 問題は、これらの入力フィールドがフォームに影響を与えたくない、フォームが送信されたときに送信されたくない、JavaScriptがそれらの値にアクセスできるようにすることだけです。 フォームの途中にいくつかの入力フィールドを追加し、フォームが送信されたときにそれらを送信させない方法はありますか？ 入力フィールドがフォーム要素にないことが理想的であることは明らかですが、結果のページのレイアウトで、挿入された入力フィールドが元のフォームの要素の間に表示されるようにしたいと思います。

114 javascript  html  forms  userscripts 

これはささいなことのように見えますが、結局のところ、調査とコーディングを行っても機能しません。条件は次のとおりです。 ブラウザのウィンドウサイズは不明です。したがって、絶対的なピクセルサイズを含むソリューションを提案しないでください。 画像の元の寸法は不明であり、ブラウザのウィンドウに適合しない場合があります。 画像は垂直方向と水平方向の中央に配置されます。 画像の比率を維持する必要があります。 画像はウィンドウ内に完全に表示される必要があります（トリミングしないでください）。 スクロールバーを表示したくない（画像が収まる場合は表示しない）。 ウィンドウのサイズが変更されると、画像は自動的にサイズ変更され、元のサイズより大きくなることなく、利用可能なすべてのスペースを占有します。 基本的に私が欲しいのはこれです： .fit { max-width: 99%; max-height: 99%; } <img class="fit" src="pic.png"> 上記のコードの問題は、機能しないことです。垂直スクロールバーを追加することで、必要な垂直スペースをすべて取ります。 私が自由に使えるのはPHP、Javascript、JQueryですが、CSSのみのソリューションでは殺してしまいます。IEで動かなくてもかまいません。

114 html  css 

isReplyFormOpentrueの場合にのみ表示するメッセージに返信するためのフォームがあり、返信ボタンをクリックするたびに、フォームを表示するかどうかを切り替えます。これどうやってするの？

113 javascript  html  angularjs  ng-show 

人々はまだ古いHTML画像マップを使用していますか？以下のもの： <map name="test" id="test"> <area shape="poly" alt="" title="" coords=... または、より新しく、より良い代替手段はありますか？

113 html  imagemap 

私は最初のHTML5サイトの構築を検討しており、IEとの連携を検討しています。 html5shiv、Dean Edwards ie7-js、Modernizrがあります。これらはすべて同じですか？どのルートに行くか迷っています。

113 html  modernizr 

XMLの処理中にhref、次の行を使用して、属性から参照されているSVGファイルを出力HTMLに直接コピーしようとしています。 <xsl:copy-of copy-namespaces="yes" select="document(@href)"/> copy-namespacesデフォルト値はとにかく「はい」であるので、必要はありませんが、私はそれを試してみたかどうかについての質問を防止することを追加しました。 ファイルはHTMLにコピーされますが、名前空間要素はすべてホースされます。たとえば、コピーされる前は次のようなファイルです。 <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title/> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-519.21143,-667.79077)" id="layer1"> <image xlink:href="data:image/png;base64 その後は次のようになります。 <_0:RDF xmlns:_0="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <_0:Work xmlns:_0="http://creativecommons.org/ns#" about=""> <_0:format xmlns:_0="http://purl.org/dc/elements/1.1/">image/svg+xml</_0:format> <_0:type xmlns:_0="http://purl.org/dc/elements/1.1/" resource="http://purl.org/dc/dcmitype/StillImage"/> <_0:title xmlns:_0="http://purl.org/dc/elements/1.1/"/> </_0:Work> </_0:RDF> </metadata> <g id="layer1" transform="translate(-519.21143,-667.79077)"> <image href="data:image/png;base64 href画像要素の値に欠落しているxlink名前空間は特に問題です。 解釈なしでSVGファイルを読み取るためにこれをどのように異なる方法で実行できるかについての考えはありますか？ 「機能する」ソリューションが1つ見つかりましたが、これはハックであり、よりエレガントなものを希望します。 <xsl:template name="topic-image-svg"> <!-- Generate tags …

113 html  xml  svg  xslt-1.0  xslt-2.0 

Stringbuilderを使用して以下を実行するよりも、C＃でHTMLメールを生成する方法（System.Net.Mailを介して送信するため）があります。 string userName = "John Doe"; StringBuilder mailBody = new StringBuilder(); mailBody.AppendFormat("<h1>Heading Here</h1>"); mailBody.AppendFormat("Dear {0}," userName); mailBody.AppendFormat("<br />"); mailBody.AppendFormat("<p>First part of the email body goes here</p>"); などなど？

113 c#  html  email 

必須フィールドのカスタム検証 多くの入力フィールドを持つ1つのフォームがあります。私はhtml5検証を入れました <input type="text" name="topicName" id="topicName" required /> このテキストボックスに入力せずにフォームを送信すると、次のようなデフォルトのメッセージが表示されます "Please fill out this field" 誰かがこのメッセージを編集するのを手伝ってくれませんか？ 編集するJavaScriptコードがありますが、機能しません $(document).ready(function() { var elements = document.getElementsByName("topicName"); for (var i = 0; i < elements.length; i++) { elements[i].oninvalid = function(e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity("Please enter Room Topic Title"); } }; elements[i].oninput = function(e) …

113 javascript  jquery  html 

埋め込まれたgif画像を含むmultipart / related htmlメールを送信しようとしています。この電子メールは、Oracle PL / SQLを使用して生成されます。画像が赤いXとして表示されて、私の試みは失敗しました（Outlook 2007およびyahooメールの場合） 私はしばらくの間HTMLメールを送信してきましたが、私の要件は今、メールでいくつかのgif画像を使用することです。これらをWebサーバーの1つに保存してリンクすることはできますが、多くのユーザーの電子メールクライアントでは自動的に表示されず、設定を変更するか、電子メールごとに手動でダウンロードする必要があります。 だから、私の考えは、画像を埋め込むことです。私の質問は： ここで何が悪いのですか？ 埋め込みアプローチは正しいものですか？ より多くの画像を使用する必要がある場合、他のオプションはありますか？画像は通常、メッセージのコンテキストでは意味をなさないロゴやアイコンであるため、添付ファイルは機能しません。また、メールの一部の要素はオンラインシステムへのリンクであるため、静的PDFを生成して添付することはできません（私の知る限り）。 スニペット： MIME-Version: 1.0 To: me@gmail.com BCC: me@yahoo.com From: email@yahoo.com Subject: Test Reply-To: email@yahoo.com Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1" --a1b2c3d4e3f2g1 content-type: text/html; <html> <head><title>My title</title></head> <body> <div style="font-size:11pt;font-family:Calibri;"> <p><IMG SRC="cid:my_logo" alt="Logo"></p> ... more html here ... </div></body></html> --a1b2c3d4e3f2g1 Content-Type: image/gif; …

113 html  image  oracle  email  mime