2012-04-06 10 views
3

私はmy personal/development websiteを再設計し、できるだけユーザーフレンドリーにしようとしています。ページレイアウトが少し変わり、スタイルが変更されない

AJAXで新しいページを読み込んでスライドしたいと思っていましたが、それは現在起こっていることです。 すべては現在のすべてのブラウザでで動作します(ただし、IEは例外ですが、今後は対応します)。

しかし、の最初の(そして最初のページのみ)のページに、奇妙な間隔のジャンプがナビゲーションメニューにあります。ページが一度変更されると、ナビゲーションの間隔は変わりません。リンクをクリックするとリンクが

をクリックすると、ページの読み込み
Layout differences

    • した後、新しいページからのナビゲーションセクションは、現在のナビゲーションを交換するように設定されている各リンク理由データオフセット属性があります。これは、サーバーのバックエンドによって計算されるため、クリックしたときに要素をどの方向にスライドさせるかをjavascriptが認識できるようになります。 [コンテンツの幅] -

      私は現在、それをやっている方法、それはどちらか[コンテンツの幅]またはです。

      ただし、メニューの構造は決してに変更され、スタイルシートは完全に静的です。私はFirebugのこれらの要素をすべて検査しており、ページの読み込みには何も変わりません。

      私は上記のthe site, http://next.randolphwebdevelopment.comをリンクしましたが、ここに関連するJavaScriptの一部をコピーして、何が起こっているのかを知ることができます。


      リンクは(指定がない限り、将来のすべてのコードブロックは、このコールバックの内側でもある)にリダイレクトすることをページ全体を引き下げ:

      $.get(loc, function(data){ 
          //delete the doctype declaration 
          data = data.split("\n").slice(1).join("\n"); 
          next_page = $(data.replace(/(\r\n|\n|\r)/gm,"").replace(/>\s*</gm,'><')); 
      

      は、ターゲットからの新しいナビゲーションとナビゲーションを置き換え

      //insert the new navigation 
      $('#header-content nav').html(next_page.find('#header-content nav').html()); 
      $('#header-content nav a').click(navigation_clickHandler); 
      

      :ページが(本当に変わることすべては、各リンク上のデータ・オフセット属性です)

      それは本当にそれです。新しいコンテンツを挿入したり、スライドしたり、ページのタイトルや履歴の状態などを変更するコードはたくさんありますが、これはナビゲーションメニューに触れる唯一のコードであり、スタイルシートに触れるコードはありません。

      問題を修正したり、コードデザインを改善する提案はありません。

  • +0

    あなたのナビの幅が変化しているようです:最初の367px、次に355px ... –

    +0

    @RobertSmithしかし、ナビゲーションに割り当てられている幅はありません。内側にあるものだけに伸びているので、それは最終的に問題は、しかし、私は変更を見ていないか、またはそのような変更がどこから来るのだろう。 – rockerest

    答えて

    0

    最初のロード時にnavは、サーバーの有無にかかわらず、PHPを使用しています。私はあなたがこのhtmlを意図的に手作業で書いたと確信しています。

    クリック後、jsはnavを再作成しますが、空のテキストノードは使用しません。ただ<a>link1</a><a>link2</a>

    ソースhtmlから空白を追加するか、ソースhtmlから削除してください。

    +0

    実際には、 'nav'は常にPHPを通して実行され、最初は無限の負荷をロードします。しかし、空白が削除されているということは間違いありませんでした。 '.replace(/> \ s *<')'が問題のコードでした。私は単純に新しいオフセットを解析し、 'nav'を完全に置き換える代わりに更新しました。あなたのお手伝いをありがとう! – rockerest

    関連する問題