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

私が持っています @str = "<b>Hi</b>" そして私のerbビューでは： <%= @str %> ページに表示されるのは：<b>Hi</b>私が本当に欲しいのは Hiである場合です。文字列をHTMLマークアップとして「解釈」するルビーの方法は何ですか？ 編集する：場合 @str = "<span class=\"classname\">hello</span>" 私の見解では <%raw @str %> HTMLソースコードは<span class=\"classname\">hello</span>本当に欲しいところです<span class="classname">hello</span>（二重引用符をエスケープするバックスラッシュなし）。これらの二重引用符を「エスケープ解除」するための最良の方法は何ですか？

154 html  ruby-on-rails  ruby  string 

次のようにするには、2つのdivが必要です。 | | ---| LOGO |------------------------ | |_______________| LINKS | | CONTENT | それらをきれいにオーバーラップさせる最も美しい/最もエレガントな方法は何ですか？ロゴの高さと幅は固定され、ページの上端に触れます。

154 css  html  overlap 

<input type=file />テキストフィールドなしで「参照」ボタンのみを表示するように要素（またはスクリプト）のスタイルを設定する方法はありますか？ ありがとう 編集：なぜこれが必要なのかを明確にするためです。http://www.morningz.com/?p=5のマルチファイルアップロードコードを使用していますが、値がないため、テキスト入力フィールドは必要ありません。スクリプトは、新しく選択したファイルをページのコレクションに追加するだけです。可能であれば、テキストフィールドがないと見栄えがよくなります。

154 javascript  html  css 

Webページのソフトハイフンを使用して問題をどのように解決しますか？テキストには、ハイフンで改行したい長い単語がある場合があります。ただし、単語全体が同じ行にある場合は、ハイフンを表示したくない。 このページの コメントによる<wbr>と、非標準の「Netscapeが発明したタグスープ」です。­ 標準準拠にも問題があるようです。ないように思えるすべてのブラウザのための作業溶液を取得する方法。 ソフトハイフンを処理する方法はどれですか。なぜそれを選択したのですか。推奨されるソリューションまたはベストプラクティスはありますか？ ここで 関連するSOディスカッションを参照してください。

154 html  text  soft-hyphen  wbr 

したがって、基本的には、1つの画像をアップロードしてlocalStorageに保存し、次のページに表示する必要があります。 現在、HTMLファイルをアップロードしています。 <input type='file' id="uploadBannerImage" onchange="readURL(this);" /> この関数を使用してページに画像を表示するもの function readURL(input) { document.getElementById("bannerImg").style.display = "block"; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById('bannerImg').src = e.target.result; } reader.readAsDataURL(input.files[0]); } } 画像は、ユーザーが見ることができるようにページに即座に表示されます。次に、残りのフォームに記入するよう求められます。この部分は完全に機能しています。 フォームが完成したら、「保存」ボタンを押します。このボタンを押すと、すべてのフォーム入力をlocalStorage文字列として保存します。画像をlocalStorageアイテムとして保存する方法も必要です。 また、保存ボタンはそれらを新しいページに導きます。この新しいページでは、ユーザーデータが表に表示され、画像が一番上に表示されます。 わかりやすくシンプルなのでlocalStorage、[保存]ボタンを押したら画像を保存し、次のページの画像をから借りる必要がありますlocalStorage。 私は、次のようないくつかの解決策を見つけ、このフィドルと// HACKS：MOZで、この記事。 これがどのように機能するかについてはまだ非常に混乱していますが、本当に必要なのは単純なソリューションだけです。基本的にはgetElementByID、[保存]ボタンを押して画像を検索し、画像を処理して保存するだけです。

154 javascript  jquery  html  local-storage 

リストの長い行が折り返されると、順序付けられていないリストからインデントを削除できないようです。私のリストは次のようになります： Windowsユーザーはputtyを使用できます MacユーザーはTerminal.appを使用できます LinuxユーザーはSSH userid@ourserver.comポート22を使用できます ...........>または、Cyber​​duckのようなSFTPプログラムを使用して、それを........................... ..............> ourserver.com、ポート22 （ドットはインデントを示します） 私はたくさんの解決策を読み、テキストインデント、リストスタイルを使用してマージンとパディングをゼロに設定しようとしましたが、何も機能しません。問題は、リストの上に中央揃えする必要がある見出しがあるため、マージンをautoに設定してから、下のリストをめちゃくちゃにしていることだと思います。しかし、たとえ親div内に2つのdivを配置しても機能しません。 ここにHTML / CSSがあります（他のすべてのソリューションが失敗する原因となっている設定がある場合は、すべてを含めました） <div id="info"> <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> <ul> <li>Windows users can use putty</li> <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li> <li>Linux users can use SSH userid@ourserver.com port 22</li> <li>Or use an SFTP …

154 html  css  html-lists 

簡単なファイルアップロードフォームがあります。ファイルが選択されたときに自動的に送信するにはどうすればよいですか？ユーザーが[送信]ボタンをクリックする必要がないようにします。

154 javascript  html 

のコンテナ<div>がありdisplay: flexます。子供がい<a>ます。 子供を「インライン」に表示するにはどうすればよいですか？ 具体的には、子の幅をその内容によって決定し、親の幅に拡張しないようにするにはどうすればよいですか？ 私が試したこと： 子供をに設定しましたdisplay: inline-flexが、それでも全幅を占有しました。他のすべての表示プロパティも試しましたが、何の効果もありませんでした。 例： .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; } <div class="container"> <a href="#">Test</a> </div> コードスニペットを実行する結果を非表示スニペットを展開 http://codepen.io/donpinkus/pen/YGRxRY

154 html  css  flexbox 

HTML5では、search入力タイプの右側に小さなXが表示され、テキストボックスがクリアされます（少なくともChromeでは、おそらく他のものでも）。このXがJavaScriptまたはjQueryでクリックされたことを検出する方法はありません。たとえば、ボックスがまったくクリックされたことを検出したり、何らかの場所のクリック検出（x位置/ y位置）を実行したりする方法はありますか？

154 javascript  jquery  html  events  dom-events 

フォームで入力したファイルをクリアしたい。 ソースを同じ方法に設定することについて知っています...しかし、その方法では、選択したファイルパスは消去されません。 注：ページを再読み込みしたり、フォームをリセットしたり、AJAX呼び出しを実行したりする必要はありません。 これは可能ですか？

154 javascript  html 

HTMLフォームを含む2つのページがあります。最初のページには送信フォームがあり、2番目のページには確認フォームがあります。最初のフォームでは多くのコントロールを選択できますが、2番目のページには送信フォームのデータが確認メッセージとともに再度表示されます。この2番目のフォームでは、すべてのフィールドが静的でなければなりません。 私が見ることができるものから、一部のフォームコントロールはreadonlyすべてのdisabled場合があり得ますが、読み取り専用フィールドにタブで移動できるという違いがあります。 このフィールドごとに行うのではなく、ユーザーがコントロールを変更できないようにフォーム全体を読み取り専用/無効/静的としてマークする方法はありますか？

154 html 

簡単なTo Doリストですが、各アイテムのリストページに削除ボタンがあります。 関連するテンプレートHTML： <tr ng-repeat="person in persons"> <td>{{person.name}} - # {{person.id}}</td> <td>{{person.description}}</td> <td nowrap=nowrap> <a href="#!/edit"><i class="icon-edit"></i></a> <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button> </td> </tr> 関連するコントローラーメソッド： $scope.delete = function (person) { API.DeletePerson({ id: person.id }, function (success) { // I need some code here to pull the person from my scope. }); }; …

153 javascript  html  angularjs 

<textarea>代わりに要素があるのはなぜ<input type="textarea">ですか？

153 html  input  types  textarea 

XMLパッケージを使用してHTMLテーブルをスクレイピングするにはどうすればよいですか？ たとえば、ブラジルのサッカーチームに関するこのWikipediaのページを見てください。私はそれをRで読み、「ブラジルがFIFA認定チームと対戦したすべての試合のリスト」表をdata.frameとして取得したいと考えています。これどうやってするの？

153 html  r  xml  parsing  web-scraping 

地図 私は、perlinノイズハイトマップを使用してJavascriptでタイルベースのRPGを作成し、ノイズの高さに基づいてタイルタイプを割り当てています。 マップはこのように見えます（ミニマップビューで）。 画像の各ピクセルからカラー値を抽出し、タイル辞書のタイルに対応する（0〜255）の間の位置に応じて整数（0〜5）に変換するかなり単純なアルゴリズムがあります。次に、この200x200の配列がクライアントに渡されます。 次に、エンジンは配列の値からタイルを決定し、それらをキャンバスに描画します。つまり、山、海など、リアルな外観の特徴を持つ興味深い世界ができあがります。 次に、私がしたかったのは、隣人が同じタイプでない場合にタイルを隣人にシームレスに混ぜ合わせるようなある種のブレンドアルゴリズムを適用することでした。上記のサンプルマップは、プレーヤーがミニマップに表示するものです。画面上に、白い長方形でマークされたセクションのレンダリングバージョンが表示されます。タイルは、単色のピクセルとしてではなく、画像とともにレンダリングされます。 これは、ユーザーがマップに表示するものの例ですが、上記のビューポートが示す場所とは異なります！ この見方で、私は移行を起こしたいと思っています。 アルゴリズム 異なるタイプのタイルの隣にある場合、ビューポート内のマップをトラバースし、各タイルの上部に別の画像をレンダリングする単純なアルゴリズムを思いつきました。（マップは変更しません！いくつかの追加画像をレンダリングするだけです。）このアルゴリズムのアイデアは、現在のタイルの近傍をプロファイルすることでした： これは、エンジンがレンダリングする必要のあるシナリオの例です。現在のタイルはXでマークされたタイルです。 3x3配列が作成され、その周りの値が読み込まれます。この例では、配列は次のようになります。 [ [1,2,2] [1,2,2] [1,1,2] ]; 私のアイデアは、可能なタイル構成の一連のケースを考え出すことでした。非常に単純なレベルで： if(profile[0][1] != profile[1][1]){ //draw a tile which is half sand and half transparent //Over the current tile -> profile[1][1] ... } これはこの結果を与えます： そこから遷移として働く[0][1]の[1][1]ではなく、から[1][1]の[2][1]、どこのハードエッジが残ります。したがって、その場合はコーナータイルを使用する必要があると考えました。私は2つの3x3スプライトシートを作成し、必要なタイルのすべての可能な組み合わせを保持すると考えました。次に、ゲーム内にあるすべてのタイルについてこれを複製しました（白い領域は透明です）。これは、タイルのタイプごとに16タイルになります（各スプライトシートの中央のタイルは使用されません）。 理想的な結果 したがって、これらの新しいタイルと正しいアルゴリズムを使用すると、サンプルセクションは次のようになります。 私が行ったすべての試みは失敗しましたが、アルゴリズムには常にいくつかの欠陥があり、パターンは奇妙になってしまいます。私はすべてのケースを正しくすることができないようで、全体的にそれを行うには悪い方法のようです。 解決策？ したがって、この効果をどのように作成できるか、またはプロファイリングアルゴリズムを作成するための方向性に関する代替ソリューションを誰かが提供できるとしたら、私は非常に感謝します！

153 javascript  html  algorithm  canvas