問題タブ [liquid-layout]

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.

0 投票する
4 に答える
126 参照

css - CSS による柔軟なレイアウト

2 行 5 列で表示される大きなボタンとして機能する 10 個の div を持つページがありますが、ページのサイズが変更された場合、または画面が小さいデバイスでページが開かれた場合に、ボタンのレイアウトが自動的に変更されるようにしたいと考えています。しかし、どうすればいいのかわかりません。

どこから始めるべきですか、またはこれを達成するのに役立つ優れたチュートリアルを知っている人はいますか?

ありがとう

0 投票する
2 に答える
149 参照

html - 垂直に積み重ねられたdivを、それぞれがブラウザウィンドウを埋めるページとして使用するにはどうすればよいですか?

私はいくつかのウェブサイトで、それぞれがブラウザウィンドウを埋める本質的に垂直な「ページ」を提供する効果を見てきました。例:

http://www.bleed.no/

http://www.weworkonsunday.com/

1つ目は、かなりクリーンで洗練されたものです。

私はこの効果を達成する方法を困惑させてきました。高さが問題にならないのであれば、ページアンカーなどを使用するのは簡単ですが、ウィンドウの垂直方向(および幅)を埋めることが私を失望させます。

私が見逃している簡単な方法はありますか?それとも、すべて複雑なJavaの不正行為ですか?

助けてくれてありがとう

0 投票する
2 に答える
1202 参照

javascript - JekyllとLiquidLayoutsで生成されたサイト内でmustache.jsをすべて一緒に使用する方法

私が取り組んでいるJavaScriptプロジェクトのラピッドプロトタイピング用にJekyllに構築されたサイトがあります:Choropleth

今、私はプロジェクトにmustache.jsを導入することに決めました、そして明らかに私は口ひげの構文と矛盾する液体レイアウト{{}}構文の問題に遭遇しました。

口ひげの区切り文字の設定機能を使用して、プロジェクトでの口ひげの動作を変更する方法を知っている人はいますか?Jekyll / Liquidによって生成されたJSに書き込み構文を組み込むにはどうすればよいですか?

0 投票する
1 に答える
2035 参照

shopify - Shopify:アプリケーションプロキシコンテンツがすべてのテンプレートで機能することを確認するにはどうすればよいですか?

Shopifyのアプリケーションプロキシを構築しています。

ドキュメント(http://api.shopify.com/app_proxy.html)には...

プロキシURLからのHTTP応答のヘッダーにContent-Type:application / liquidが設定されている場合、Shopifyは、ショップのテーマを使用して、ショップのコンテキストでリクエストの本文にあるLiquidコードを評価してレンダリングします。これは素晴らしいです。正しい方法で使用すると、手動の介入なしで、アプリがショップの一部として属しているように自動的に見せることができます。Shopifyの商人はそのようなものが大好きです。

これはこれまでのところ私の最善の試みです。デフォルトのテンプレート(http://plnkr.co/edit/iXbWWiMlEsi6NsA6uPtG?p=preview。)で問題ないように見えますが、すべてのテンプレートで機能するとは限りません。

コンテンツがすべてのテンプレートで機能することを確認するにはどうすればよいですか?コンテンツに入れる必要のある特定のクラスはありますか?私が従うべき慣習?例は素晴らしいでしょう。

マイケル

0 投票する
4 に答える
127 参照

javascript - JavaScript / Jqueryでフルウィンドウの実際のサイズを取得する方法はありますか?

サイトの流動的なレイアウトを作成しようとしていますが、問題は、ページが読み込まれる前にウィンドウのサイズが変更され、ウィンドウが最大化された場合、ページのサイズが小さいことです。私の質問はどのようにページが小さい場合でも、ウィンドウの幅と高さをフル サイズで取得できますか。

これにより、ウィンドウの高さと幅が得られます。ウィンドウが小さくても最大サイズが必要です。

0 投票する
1 に答える
5265 参照

css - Shopifyユーザー登録フォームのカスタムフィールド

ユーザー登録フォーラムのカスタムフィールドを追加する方法に関するドキュメントが見つからないため、何かを試しましたが、機能しませんでした。

追加したフィールドは、テキスト入力(ペット名、Cat / Dogのラジオボックス)です。テストアカウントを使用しましたが、何も保存されないという出力が返されました。{{customer.pet_name}}を使用して保存された値を取得しようとしましたが、何も返されませんでした。助言がありますか?ありがとう!

0 投票する
1 に答える
2036 参照

html - レスポンシブ テーブルが値のない列を非表示にしています

私のページの 1 つで、ブラウザが小さくなるとレイアウトが変わるレスポンシブ テーブルがあります。この fiddleに示すように、テーブルの列に値がある場合、すべてが正しく機能します。

ただし、列に値がない場合、この fiddleに示すように、テーブルのレイアウトの小さなバージョンに表示されないものがあります。

私は何が欠けていますか?

また、以下の動作しないバージョンから必要なコードをコピーしました。

0 投票する
1 に答える
385 参照

html - コンテンツ コンテナーを親ではなく本体の 100% に設定する

左側にメニュー、右側にサイト コンテンツがある 2 列のリキッド レイアウトを作成しようとしています。

メニューは右の列 ( div.liquid-right) に入り、サイトのコンテンツは左の列 ( div.liquid-left) に入ります。

div.liquid-rightコンテンツ コンテナーは、左のコンテナー ( ) である親ではなく、本体 (つまり ) と同じサイズである必要がありdiv.liquid-leftます。

レイアウトは次の図で表すことができます。

HTML マークアップ

CSS スタイル

現在、.contentコンテナは左側のコンテナのサイズのみです(これは予想されます)が、本体コンテナのサイズに拡張する方法がわかりません。

アップデート

http://jsfiddle.net/Ex4tK/

0 投票する
1 に答える
66 参照

html - 流動的な書式設定の作成に問題がある。

コンテンツがオーバーフローし、div がうまく再生されない理由を理解するのにひどく苦労しています。(すべてあるべき場所に座っています。)これは、私が現在持っているものへのリンクです。いろいろ試していきます。しかし、どんな助けもいただければ幸いです。

http://jsfiddle.net/X53vD/

ありがとう、サム。

0 投票する
1 に答える
1019 参照

android - Android 用の単一のエラスティック/リキッド レイアウト画面の作成

すべての画面サイズに合わせてサイズを変更するliquid/elastic画面レイアウトを作成することは可能ですか?Android

現在、小、中、大、特大などのさまざまなレイアウトで遊んでいますが、本当に必要なのは、収まるようにスケーリングする単一のレイアウトだけです。

例えば。割合ベースのレイアウト。

私が作成しているアプリは、スペースをより有効に活用するという点で、特に大きな画面を利用する必要はありません。

ホーム画面は 2 つの画像、ボタンの束、および下部の広告だけです。私は単純に、広告が下部に残り、他のすべてが画面サイズに応じて拡大されることを望んでいます。

非常に単純化されたインターフェイスのために 4 つの異なるレイアウトを作成する必要があるのは、非常に複雑に思えます。

アドバイス大歓迎です!