Question

I inserted one little jQuery code into my site, to fix the navigation icons left and right. The problem is that it only works when is resize the bowser window but it should put the icons right after the document is loaded… Here you can see this in action (hungarian language): utravalo.com

This code works on my other site and there is no problem. I’m a little bit confused… 🙂

This is the jquery code:

if (jQuery) {
  /* obtain jQuery instance */
  $sdv = jQuery.noConflict();

  /* ensure the links look & feel consistent */
  var formatLink = function (strEl) {
          var pEl = $sdv(strEl);
          if (pEl.length > 0) {
              pEl.children().children().css('color', '#3D536C');
              pEl.children().children().hover(

              function () {
                  $sdv(this).css('color', '#444444');
              }, function () {
                  $sdv(this).css('color', '#3D536C');
              });
          }
      }
  formatLink("#divPrev");
  formatLink("#divNext");

  var fnModifyNavigation = function () {
          /* obtain window's width */
          var w = $sdv(window).width();
          var hw = (w - 1020) / 2;
          if (hw > 100) {
              /* we have enough space for the fixed postion links */
              jQFPL($sdv("#divPrev"), 'left', 0, hw);
              jQFPL($sdv("#divNext"), 'right', 0, hw);
              $sdv("#divPostNav").hide();
          } else {
              /* not enough space for the fixed postion links */
              var divNav = $sdv("#divPostNav");
              if (divNav.length > 0) {
                  if (divNav.css('display') == 'none') {
                      divNav.show();
                      divNav.prepend(jQSPL("#divNext", "right"));
                      divNav.prepend(jQSPL("#divPrev", "left"));
                  }
              }
          }
      }

      /* jQuery Fixed Position Link */
  var jQFPL = function (el, remClass, absPosPX, width) {
          var pEl = el.detach();
          if (pEl) {
              pEl.removeClass(remClass);
              eval("var objStyle = { 'position':'fixed', 'top':'250px', 'width': '" + width + "px', '" + remClass + "':'" + absPosPX + "px', 'text-align':'" + remClass + "'};");
              pEl.css(objStyle);
              pEl.appendTo("body");
          }
      }

      /* jQuery Static Position Link*/
  var jQSPL = function (strEl, strFloat) {
          var el = $sdv(strEl).detach();
          el.css('position', 'static');
          el.css('width', '50%');
          el.css('float', strFloat);
          return el;
      }

      /* run position modification routine after the document is loaded */
      $sdv(fnModifyNavigation);

     /* handle the window's resize event and run position modification routine again */
     $sdv(window).resize(fnModifyNavigation);
}

Thanks for the help!!

Answer 1

You want to run the modify nav, and formatLink function in the jQuery ready method (this waits for the html to load):

$sdv(document).ready(
    function(){

        formatLink("#divPrev");
        formatLink("#divNext");

        /* run position modification routine
        after the document is loaded */
        $sdv(fnModifyNavigation);  

        /* handle the window's resize event
        and run position modification routine again */
        $sdv(window).resize(fnModifyNavigation);
    }
);