2012-02-09 51 views
1

を使用して注意してください:私のサイトのホスト会社、jQueryの(非常に残念なことに)で私のためのオプションではなく、私が外部 JSやCSSファイルにリンクすることはできません。私のポップアップdivには、回避策としてWebページの「head」セクションにCSSとJSコードが含まれています。ポップアップ本部HTML5のみCSS、純粋な/基本的なJavaScriptの

私の問題はうまくいけば、私の既存のJSの単純な更新/調整が必要です。ちょうど1週間前に私のサイトのポップアップ部門(Contact Form用)が100%正確に機能していた。私のホスティング会社はHTML5に切り替えました( "DTD 4.01 Transitional"から)私のポップアップ部門は、他のブラウザより悪いブラウザ(IE9、FF、Chrome、Safari)では正しく機能しなくなりました。

されている修正する問題(アクションでそれを見るために私のウェブサイトhttp://solitairethahalo.comをご覧ください):

  • FIXED(すべて4つのブラウザ)私はフォーマットに使用「行の高さ」htmlタグは、コンタクトフォームの指示/情報はもう機能しません。結果として、「フォーム」DIVクラスは、現在のdivコンテナ高
  • 75%(Firefoxの& IE) FIXED位置決めが不正確であるより大きい。ポップアップのヘッダーのごく一部だけが見えるようにポップアップが画面の下部に表示されます
  • 50%が(すべての4つのブラウザ) FIXED私の既存のポップアップは、それ用のコードを持っていなかったが、私は、ポップアップのために希望します

可能な場合は、ブラウザウィンドウのサイズが変更されたとき、私はきちんと私の既存のコードを貼り付けることはできませんので、私は私のウェブサイトスルーそれがアクセスできるように、固定/中央に維持するDIV:http://solitairethahalo.com/popupdiv.txt

(あなたを提供してください。必要に応じて私に電子メールを送ることができます)改訂版HTML5可能であれば、私の既存コードの準拠バージョン。

ありがとうございます!


UPDATES:

  • 行の高さ:それを見て、アイデアを取得した後、私は単純に変更することで問題を修正しました。喜んでそれは簡単だった。
  • ポップアップの位置付け&サイズ変更:位置の誤差は、既存のコードをわずかに調整して固定します。以下のコメントからjsコードを使用すると、ウィンドウのサイズ変更時にポップアップの再配置を行うことができました。しかし、私はそのコードでモーダルウィンドウ関数を作ることができませんでした。今のところ、私は自分の改訂コードに戻っていますが、現在はサイズ変更の再配置機能が不足していますが、まだ取り組んでいます。
+2

ホストを変更できませんか?いいえJSは私に意味するオプションではありません:これは非常にホスティング会社ではなく、私にはオプションです。 – HerrSerker

+0

あなたのページには、スタイルシート、javascript、jqueryへのリンクが含まれていますが、そうすることはできません。理解しないでください。 – Rob

+0

@Rob、それらの素敵なリンクはすべて、私のホスト会社のテンプレート内に提供されています。しかし、ユーザ側では、非テンプレート要素に対してそのようなリンクやjqueryを利用することはできません。 *(それらはポップアップコンタクトフォームテンプレートを持っていても、それらを編集する必要がなければ素晴らしいです)*。正当な理由があります。私のホスト会社は、「簡単、経験のないユーザーフレンドリーな」デザインを専門としています。そのため、ホストのサイトビルダーを使用した設計は非常に簡単で、コーディングの知識は必要ありませんが、カスタム/複雑な編集をしたい人は、ビルダーの制限によって妨げられます。 – Shawn

答えて

1

JSを使用できない場合は、1つの方法でしか使用できません。

ポップアップのいずれかを行うことができますが、スライドパネルで置き換えてください。 ポップアップdivを「連絡先」divに追加します。そして、あなたの「連絡先」divのマウスオーバー時のCSS3から、css3トランジションを使用し、その位置をポップアップを表示するように設定します。

これはすべてのブラウザで機能します。アニメーションはIE8以下で動作しません。

+0

IE 9は変換済みですが、遷移はありません。 – HerrSerker

+0

はい。要するに、純粋なCSSでjavascriptを使わずに、あなただけが提供できるのです。 –

+0

@ParagGajjar ....明確化:私は** JSを使用することができますが、**外部** JSファイルにリンクすることはできません。私の現在のコードは、私が最初の質問票の最後にリンクしている "popupdiv.txt"ファイルを見ると、私が使ったポップアップdivテンプレートに入っていたかなりの量のJSが入っています。 ** HTML5ルールに準拠するように既存のJSを調整するにはどうすればいいですか?** – Shawn