問題タブ [fluid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 色あせた境界線を持つ動的レイアウト
私はデザインされたウェブページのレイアウトに命を吹き込むことに取り組んでいます。ちょっと変わったデザインかもしれないので、実現できるかどうかはわかりません。基本的に900pxの固定幅のコンテンツボックスを用意します。コンテンツ ボックスは、ページ本文の中央に配置されます。png がフェードするページに 2 つの垂直列を追加したいと考えています。左の png は、左側が黒一色、右側が透明になります。右側の png は、右側の黒一色から左側の透明にフェードします。2 つの png はそれぞれ 250px 幅になります。すべてが配置されると、レイアウトは左端と右端が薄くなっている紙のように見えるはずです。ただし、秘訣はページのサイズを変更することです。画面の幅が 1500px 未満の場合 (両方の列が部分的に画面の外に出ている場合)、列はコンテンツ ボックスの下にスライドせず、単純にゼロに縮小されます。以下の画像をご検討ください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 以下の画像を検討してください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 以下の画像を検討してください。黒枠が画面、青がコンテンツ、赤が列です。画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 画面の幅が 1500px の場合、列とコンテンツは適切に配置されます。イリュージョン (境界線なし) は、色あせたイメージです。![画面幅が 1500px の場合のレイアウト][1] 画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 柱はばらばらになり、色あせた外観は維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3] 柱はばらばらになり、色あせた外観は維持されます。![画面の幅が 1500px を超える場合のレイアウト][2] 最後に、画面の幅が 1500px 未満の場合、列は縮小されますが、各列の背景画像は、色あせた外観を壊さない方法で添付されます (たとえば、 、左の列が縮小し、黒がコンテンツ ボックスの左側に近づくのは正しくありません)。![画面幅1500px未満の場合のレイアウト][3]
** 画像を投稿できませんでした :(
fluid - ランダムページのTypo3 Fluid ViewHelper
私は、typo3 で最初のサイトを作成しており、最初のページにランダムなページのボックスを配置する必要があります。
フロントエンド拡張機能を作成し、その中に HelloWorld テキストを含むボックスを表示する ViewHelper を持っています。
私の質問は、ページに関する情報を取得する方法、ランダムなページとそのコンテンツを取得する方法です。
facebook - 流体の高さで FB.Canvas.scrollTo にアクセスできません
アクセスして情報を読み取ることはできますが、開発者のドキュメントによると、キャンバスの高さが「設定可能 (デフォルト: 800px)」に設定されている場合にのみ有効になるFB.Canvas.getPageInfo
ため、流体の高さの正確な位置にスクロールする方法はないようです。FB.Canvas.scrollTo
理由はありますか?回避策はありますか?
typo3 - Typo3 FluidImageViewHelperとアップロードディレクトリ
typo3ページでページコンテンツ画像を使おうとしています。2つの画像をアップロードしましたが、DBにはファイル名のみが保存されています。
OK-アップロードディレクトリで画像を見つけました!しかし、今、私はどのように画像を表示する必要がありますか?!
アップロードディレクトリのURLをhrdcodeして、dbからファイル名を追加することはできますが、それは本当に醜く、柔軟性がありません。
使用しようとしまし<f:image />
たが、リソースパスを想定しているのでチャンスはありませんか?!OK-リソースディレクトリを見つけましたが、標準のtypo3ページからcmsで画像をアップロードできません。
さまざまなサイズの画像を表示してトリミングする必要があるため、これ<f:image />
は私にとって非常に便利です。これはすべてViewHelperに実装されていますが、アップロードディレクトリで画像を取得するようにViewHelperに指示することはできません。
ページ上の画像の使い方を教えてください。ページコンテンツに画像をアップロードするためのメニューはバックエンドでは本当に便利ですが、フロントエンドで結果を表示することはできません。
css - 固定幅のテンプレートを超えて流体要素を拡張する方法
固定幅のサイトがあるというちょっとした苦境に陥っていますが、画面全体を100%移動するには、2本の流動的な幅のバーが必要です。私は問題のサイトにかなり恐ろしいワードプレステンプレートを使用しています。設定を保存するたびに、設定に従ってコンテンツの幅が保存されます。この場合は900pxです。
サイト全体が900ピクセルであることに満足しています。100%必要なのはヘッダーバーとフッターバーだけです。これらのバー内の要素も900ピクセルにすることができ、画面の両側に色を拡張する必要があります。 。
問題のサイトはhttp://mysterybox.co/です。下の画像から、どのバーを拡張する必要があるかがわかります。誰かが私を正しい方向に向けることができれば、それは素晴らしいことです。
typo3 - TYPO3流体:TYPO34.6以降、独自の流体レンダラーの使用は失敗します
拡張機能で独自の流体レンダラーを使用しました。
後でこれを使用$fluidTemplate
して、テンプレートファイル、変数を割り当て、レンダリングします。
呼び出しを除いて、すべてが機能し->render()
ます。TYPO3 4.6以降、特定の例外なしでエラー500が発生します。TYPO3 4.5 LTSでそれは働いています!
誰かがアイデアを持っていることを願っています。前もって感謝します!
html - レスポンシブ画像リンク
ボタンをレスポンシブにしてブラウザのサイズに合わせて拡大縮小しようとしています。
タグの背景画像として設定しましたが、期待した効果が得られなかったようです。私は今、次のコードでインラインで画像を使用しています。
HTML
CSS
実例 http://www.oatbook.co.uk/preview/
問題は、現在幅に反応していることですが、高さは同じままであるように見えるため、スプライト全体を表示します。
ベストプラクティスの他の提案を受け入れる
button - ブラウザの端に貼り付けるボタン
一部のナビゲーション ボタンがブラウザ ウィンドウの端に貼り付いている状況を作成しようとしています。いくつかの CSS と JavaScript を想定しています。コーディングを行ってから長い時間が経ちました。正しい方向。
css - cssでコンテンツの幅を100%にする方法は?
流動的なレイアウトを取得したいのですが、レイアウトの設計方法でいくつかの問題が発生しました。
私が念頭に置いているのは、ページのコンテンツセクションが常にブラウザ全体の幅を埋めるレイアウトです。コンテンツの左側には、幅が異なる可能性のある2つのメニューがあります。
目的のレイアウトの簡単なスケッチはここにあります: レイアウト
facebook - Fluid iframe Facebookアプリケーションでスムーズスクロールするにはどうすればよいですか?
私はこのボタンを持っています:
Facebookアプリケーションのiframe内で、このjqueryコードのようなことができるかどうか知りたいです:
ありがとう ;)!
EDIT 1(マシュー・ジョンストンの回答に続く):
これは私が意味するものです: http://jsfiddle.net/ajXjg/4/
注: FB.Canvas.scrollToは、流動的なキャンバス設定では機能しません
EDIT 2(必要な人向け[今のところ希望]):
唯一の方法はアンカーリンクを使用することです。スムーズなスクロールができません:(...そしてFirefoxでは機能しません!