Why overwrite the ajax my content div width, if you click an internal links?

Question

I have a function which load the internal links. The function is work fine except one thing. When you click a link, the content width is changed, to be smaller. I don't know why.

{
$(function() {
 $(".home li.home").removeClass("home").addClass("current_page_item");
 $("#column-warp").append("<img src='/images/ajax-loader.gif' id='ajax-loader'>");

  var $mainContent = $("#content"),
  URL ='',
  siteURL = "http://" + top.location.host.toString(),
  $internalLinks = $('a[href^="' + siteURL + '"]'),
  hash = window.location.hash,
  $ajaxSpinner = $("#ajax-loader"),
  $el, $allLinks = $("a");

  if (hash){
  $ajaxSpinner.fadeIn();
  $mainContent.animate({ opacity: "0.1" });
  $(".current_page_item").removeClass("current_page_item");
  $('a[href="' + hash + '"]').addClass("current_link").parent().addClass("current_page_item");
  hash = hash.substring(1);
  URL = hash + ".entry-content";
  $mainContent.load(URL, function(){
  $ajaxSpinner.fadeOut();
  $mainContent.animate({ opacity: "1" });
  });
 }

  $internalLinks.each(function () {
  $(this).attr("href", "#" + this.pathname);
  }).click(function() {
  $ajaxSpinner.fadeIn();
  $mainContent.animate({ opacity: "0.1" });
  $el = $(this);
  $(".current_page_item").removeClass("current_page_item");
  $allLinks.removeClass("current_link");
  URL = $el.attr("href").substring(1);
  URL = URL + " #content";
  $mainContent.load(URL,function(){
  $el.addClass("current_link").parent().addClass("current_page_item");
  $ajaxSpinner.fadeOut();
  $mainContent.animate({ opacity: "1" });
  });
  });



    });
 })(jQuery);

You can test it this in here

What's wrong on my question? Anyone tell me,please? The question is very specifick. — Szántai Ádám, Oct 20 '13 at 20:03

score 1 · Accepted Answer · answered Oct 20 '13 at 19:41

1

Instead of replacing #content, you are returning a new one from your ajax call. Thus, you are nesting #content elements.

Either change PHP side (by removing <div id="comment"> from the result), or Javascript side, by replacing #content instead of changing its content.

answered Oct 20 '13 at 19:41

Guillaume Poussel

9,572
2
33
42

Hmm,I'm very new bie in programing, can you show me how to do this in ajax? – Szántai Ádám Oct 20 '13 at 19:47
For example, you can change `$mainContent` definition to `$('#container')` – Guillaume Poussel Oct 20 '13 at 20:11
Everywhere where i see this "$mainContent" change to "$('#container')"? I good understand you? – Szántai Ádám Oct 20 '13 at 20:22
I get some help, and you anwer is correct work with help,thanks! – Szántai Ádám Oct 20 '13 at 20:59

Why overwrite the ajax my content div width, if you click an internal links?

1 Answers1