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

HTML(HyperText Markup Language)は、Webブラウザーに表示されるWebページやその他の情報を作成するための主要なマークアップ言語です。HTMLに関する質問には、最小限の再現可能な例と、何を達成しようとしているのかについての考えを含める必要があります。このタグが単独で使用されることはほとんどなく、[CSS]や[javascript]と組み合わせられることがよくあります。

25
ブートストラップナビゲーションバーのアクティブ状態が機能しない
私はブートストラップv3を持っています。 を使用しclass="active"ていますが、navbarメニュー項目を押しても切り替わりません。これを実行jQueryしてクリック関数を作成する方法を知っていますが、この機能をブートストラップに含める必要があると思いますか?それで、多分それはJavaScriptの問題ですか? これが私が含めたjs / css / bootstrapファイルのヘッダーです: <!-- Bootstrap CSS --> <link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href= "/stylesheets/styles.css" /> <!--jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <!-- Bootstrap JS --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap-collapse.js"></script> <script src="/bootstrap/js/bootstrap-transition.js"></script> これが私のnavbarコードです: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div …


5
最新のWebサイトのSVGアイコンとPNGアイコン
なぜ現代のWebサイトでアイコンにPNGのみを使用しているのか疑問に思っています(ただし、この仮定は私の観察に基づいています)。これまでのところ、SVGではなくPNGを使用する主な理由はIE8であり、SVGはより多くのCPUパワーを使用します(ただし、これが単純な1Kアイコンの問題であるとは思わない)。スプライト、画像、またはインラインSVGとして使用する場合、SVGを使用することには多くの利点があります(現在は使用しています)。 (調査を探している質問:PNGスプライトvs SVGスプライトvsアイコンフォントはパフォーマンスに焦点を当てており、関連する答えはありません。アイコンフォントvs. SVGキャッシングとネットワークの懸念はネットワークトラフィックに焦点を当てていますが、テンプレートなどで簡単に解決できます。) 新しいWebサイトが最新のブラウザーのみをサポートしている場合、SVGを使用しない理由はありますか(または-アイコンにPNGを使用する理由はありますか)?IE8を気にせず、SVGの使用がテンプレート化やキャッシュによってバックアップされている場合、SVGのみに依存するキャッチはありますか?
90 html  svg  icons 

8
javascriptキャンバスで画像のサイズを変更します(スムーズに)
キャンバスでいくつかの画像のサイズを変更しようとしていますが、画像を滑らかにする方法がわかりません。フォトショップやブラウザなどでは、使用するアルゴリズムがいくつかあります(たとえば、バイキュービック、バイリニア)が、これらがキャンバスに組み込まれているかどうかはわかりません。 これが私のフィドルです:http://jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 1つ目は通常のサイズ変更された画像タグで、2つ目はキャンバスです。キャンバスがそれほど滑らかではないことに注意してください。どうすれば「滑らかさ」を実現できますか?

6
ES2015のインポートはFirefoxでは(トップレベルでも)機能しません
これらは私のサンプルファイルです: <!DOCTYPE html> <html> <head> <title>Test</title> <script src="t1.js"></script> </head> <body></body> </html> t1.js: import Test from 't2.js'; t2.js: export const Test = console.log("Hello world"); Firefox 46でページをロードすると、「SyntaxError:インポート宣言はモジュールのトップレベルにのみ表示される可能性があります」と返されますが、インポートステートメントがここでどれだけトップレベルを取得できるかはわかりません。このエラーは赤いニシンですか、インポート/エクスポートはまだサポートされていませんか?

18
「ファイルが選択されていません」を変更します。
次のように「ファイルを選択」ボタンがあります(Jadeを使用していますが、Html5と同じである必要があります)。 input(type='file', name='videoFile') ブラウザでは、「ファイルが選択されていません」というテキストが横に付いたボタンが表示されます。「ファイルが選択されていません」というテキストを「ビデオが選択されていません」や「ビデオを選択してください」などの別のテキストに変更したいと思います。私はここで最初の提案に従いました: ファイル入力フィールドに「ファイルが選択されていません」と表示したくない しかし、これを行ってもテキストは変わりませんでした。 input(type='file', name='videoFile', title = "Choose a video please") 誰かが私が問題がどこにあるのかを理解するのを手伝ってくれる?
90 html  button  file-upload  pug 

9
ブートストラップcssを使用して、2つのdivをページの中央に水平に並べて配置します
私が試したことを以下のコードで参照してください <div class="row"> <div class="center-block">First Div</div> <div class="center-block">Second DIV </div> </div> 出力: First Div SecondDiv 期待される出力: First Div Second Div ブートストラップcssを使用して、2つのdivを水平方向に中央からページに揃えたい。これどうやってするの ?私はこれを行うために単純なCSSとフローティングコンセプトを使用したくありません。メディアクエリを使用する代わりに、ブートストラップcssを使用してすべての種類のレイアウト(つまり、すべてのウィンドウサイズと解像度)で動作する必要があるためです。

3
javascriptで<ul> onclickに新しい<li>を追加する方法
onclickの関数を使用して、既存のulにリスト要素を追加するにはどうすればよいですか?このタイプのリストに追加する必要があります... &lt;ul id="list"&gt; &lt;li id="element1"&gt;One&lt;/li&gt; &lt;li id="element2"&gt;Two&lt;/li&gt; &lt;li id="element3"&gt;Three&lt;/li&gt; &lt;/ul&gt; ... IDが「element4」でテキストが「Four」の別のリストアイテム。この機能を試しましたが、機能しません... function function1() { var ul = document.getElementById("list"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Element 4")); } 私はJQueryを知らないので、Javascriptだけをお願いします。ありがとうございました!!
90 javascript  html  list 

12
画像を引き伸ばさずに画像の幅と高さを設定するにはどうすればよいですか?
私が持っている場合: #logo { width: 400px; height: 200px; } その後 &lt;img id="logo" src="logo.jpg"/&gt; そのスペースを埋めるために伸びます。画像のサイズを同じに保ちたいのですが、DOM内でそれだけのスペースを占めるようにします。カプセル化&lt;div&gt;またはを追加する必要があり&lt;span&gt;ますか?スタイリングにマークアップを追加するのは嫌いです。
90 html  css 

6
<入力ファイル>から<img>に画像をロードする
要素を介してユーザーが選択した画像を読み込もうとしています。 次のように、onchangeイベントハンドラーを入力要素に追加しました。 &lt;input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/&gt; そしてpreview_2関数は次のとおりです。 var outImage ="imagenFondo"; function preview_2(what){ globalPic = new Image(); globalPic.onload = function() { document.getElementById(outImage).src = globalPic.src; } globalPic.src=what.value; } ここで、outImageには、新しい画像をロードするタグのid値があります。 ただし、onloadは発生せず、htmlには何もロードされないようです。 私は何をすべきか?
90 javascript  html 

10
Bootstrap 3.0:テキストと入力を同じ行にするにはどうすればよいですか?
現在、ウェブサイトをBootstrap 3.0に切り替えています。フォームの入力とテキストのフォーマットに問題があります。Bootstrap 2で機能したものはBootstrap 3では機能しません。 フォーム入力の前後に同じ行のテキストを取得するにはどうすればよいですか?これを、Bootstrap 3バージョンの例の「form-control」クラスの問題に絞り込みました。 すべてのテキストと入力を1行で取得するにはどうすればよいですか?ブートストラップ3の例をjsfiddleのブートストラップ2の例のようにしたいと思います。 JSフィドルの例 &lt;div class="container "&gt; &lt;form&gt; &lt;h3&gt; Format used to look like this in Bootstrap 2 &lt;/h3&gt; &lt;div class="row "&gt; &lt;label for="return1"&gt;&lt;b&gt;Return:&lt;/b&gt;&lt;/label&gt; &lt;input id="return1" name='return1' class=" input input-sm" style="width:150px" type="text" value='8/28/2013'&gt; &lt;span id='return1' style='color:blue'&gt; +/- 14 Days&lt;/span&gt; &lt;/div&gt; &lt;br&gt; &lt;br&gt; &lt;h3&gt; BootStrap 3 Version …

14
HTMLページ全体の上にカーソルを置く
カーソルをHTMLページ全体で簡単に「待機」するように設定することはできますか?アイデアは、ajax呼び出しが完了している間に何かが起こっていることをユーザーに示すことです。以下のコードは、私が試したものの簡単なバージョンを示しており、私が遭遇した問題も示しています: 要素(#id1)にカーソルスタイルが設定されている場合、ボディに設定されているものは無視されます(明らかに) 一部の要素にはデフォルトのカーソルスタイル(a)があり、ホバー時に待機カーソルが表示されません body要素はコンテンツに応じて特定の高さを持ち、ページが短い場合、カーソルはフッターの下に表示されません テスト: &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="id1"&gt;cursor: pointer&lt;/div&gt; &lt;div id="id2"&gt;no cursor&lt;/div&gt; &lt;a href="#" onclick="document.body.style.cursor = 'wait'; return false"&gt;Do something&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; 後で編集... それはFirefoxとIEで動作しました: div#mask { display: none; cursor: wait; z-index: 9999; …

8
モバイルデバイスでのHTMLドラッグアンドドロップ
JavaScriptを使用してWebページにドラッグアンドドロップを追加する場合(jQuery UIドラッグ可能およびドロップ可能など)、これをモバイルデバイスのブラウザー経由で表示したときにどのように機能させるか-ドラッグ用のタッチスクリーンアクションがインターセプトされるページをスクロールするための電話など? すべてのソリューションを歓迎します...私の最初の考えは次のとおりです: ドラッグするアイテムを「持ち上げ」て、アイテムをドロップしたいゾーンをクリックするようにするモバイルデバイス用のボタンがあります。 モバイルデバイスでこれを行うアプリを作成して、Webページを動作させることはしないでください! あなたの提案やコメントをお願いします。


3
バブルEditTextに連絡する
私はMultiAutoCompleteTextViewそれがGoogle+アプリでどのように実装されるかと同じように連絡先バブルを作成しようとしています。以下はスクリーンショットです。 。 DynamicDrawableSpanテキストのスパンのバックグラウンドでスパン可能なドローアブルを取得するために、クラスを拡張しようとしました public class BubbleSpan extends DynamicDrawableSpan { private Context c; public BubbleSpan(Context context) { super(); c = context; } @Override public Drawable getDrawable() { Resources res = c.getResources(); Drawable d = res.getDrawable(R.drawable.oval); d.setBounds(0, 0, 100, 20); return d; } } 私のoval.xmlドローアブルは次のように定義されています: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"&gt; &lt;solid …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.