FANDOM


  • Hi, since now the right rail is lazyloaded, I have to update some codes, for example how can get to work a simple code like

    $('#WikiaRail').append( stuff );

    (as it is now it basically prepends objects to the right rail, since the content is loaded after)

      Loading editor
    • You can make a loop or something like this:

      $(function whenRailReady() {
      	if ($('#WikiaRail section').length > 0) {
      		$('#WikiaRail').append( stuff );
      	} else {
      		setTimeout(function() {
      			whenRailReady();
      		},1000);
      	}
      });

      Which will check every 1000 milliseconds (1 second) if the rail has loaded.

        Loading editor
    • Oh fantastic. Can't ever keep things simple, can we? Wikia could at least provide events for this rather than forcing us to work with timers, which I don't like.

        Loading editor
    • Yeah i agree, though a script for waiting until it's loaded doesn't take too much place.

        Loading editor
    • Penguin-Pal wrote: Which will check every 1000 milliseconds (1 second) if the rail has loaded.

      Shouldn't the function check if the right rail is even present before checking if it's loaded to avoid an infinite loop? Or set a limit of check-times?

        Loading editor
    • Leviathan 89 wrote:

      Penguin-Pal wrote: Which will check every 1000 milliseconds (1 second) if the rail has loaded.

      Shouldn't the function check if the right rail is even present before checking if it's loaded to avoid an infinite loop? Or set a limit of check-times?

      Good point. Here's a version that would stop the loop if it's been a minute since the page has loaded:

      whenRailReadyStop = 1;
      $(function whenRailReady() {
      	if ($('#WikiaRail section').length > 0) {
      		$('#WikiaRail').append( stuff );
      	} else {
      		if (whenRailReadyStop < 60) {
      			setTimeout(function() {
      				whenRailReady();
      			},1000);
      		}
      		whenRailReadyStop++;
      	}
      });
        Loading editor
    • As Bobogoobo and Penguin-Pal stated, timers are not the best solution here.

      Disclaimer: these modules are allowed only if they are not excessive or breaks any other functionality. If we find that the new modules overly push down or break ads and/or ad placement within the rail, they will have to be changed/removed. If they do become excessive, they will also need to be removed. We prefer (but don't insist) that custom modules go below the default modules. No module can ever be placed above the top ad.

      Also, keep in mind that these modules are discouraged as this area is technically an official area of the skin. These modules can break at any time and that is the risk that you take by using any custom code on your site.

      Now that that's out of the way, let me introduce DOMNodeInserted. DOMNodeInserted is a bind function that triggers when a node is inserted into the DOM. This is a way to tell when the rail loads without the need for a timer.

      $('#WikiaRail').bind('DOMNodeInserted', function(event) {
         // your code here
      });

      The above code will only fire when a node is inserted into the WikiaRail ID. In essence, this adds a listener and fires when the rail loads and runs the code specified.

      Please note that unless you add a test to see if your node is added before you add one or unbind the listener after you have. Since this is code that triggers when a node is added, adding your node will trigger it again and end in an infinite loop.

      For example:

      $('#WikiaRail').bind('DOMNodeInserted', function(event) {
         if (!$('#awesome').length) {
            $('#WikiaRail').append('<div id="awesome">This works!</div>');
         }
      });
        Loading editor
    • Thanks, I'll try that.

        Loading editor
    • That looks useful, thanks!

      However, I did some Googling, and the MDN recommends using mutation observers instead, saying the DOM events are deprecated. However, mutation events look less easy to use and don't seem to have great browser support (IE support only starts at version 11). Wouldn't it be much easier, and, unless I'm mistaken (not very experienced with this kind of thing), simpler for Wikia's code to fire an event when things like comments or the rail are loaded?

        Loading editor
    • Cqm

      Easier for us, yes, but events fired when Wikia does things are:

      1. Largely undocumented. The only example I know of is when the Visual editor loads which was gained by asking staff.
      2. Extra code that Wikia aren't necessarily going to use themselves. Wikia don't support custom scripts and very rarely cater for them being used. There are some exceptions, such as when AjaxRC produced a memory leak, but even then it was a long time before it was confirmed it was a bug with jQuery.collapsible rather than AjaxRC itself. Very little of my code is designed to be used outside of what I use it for, I wouldn't be surprised if that was the case with lots of others too.

      It's still much better than using a timer, and if we really wanted we could add a polyfill for when mutation observers aren't supported.

        Loading editor
    • Point 1 is easily fixed. We could at the least keep a list of stuff like that on the dev wiki. (Maybe tips on using mw.util and other objects as well, since there's a lot of cool stuff in there that I only learned about by seeing others use it.)

      As for point 2, wouldn't it be nice of them to support that stuff a little more since this is all about community and working together and all?

      True, though, I'm glad there's an alternative to timers.

        Loading editor
    • Update: I'm currently using this code:

      $('#WikiaRail').bind('DOMNodeInserted', function(event) {
         if (!$('#RailImg').length) {
            $('#WikiaRail').append(WikiaRailImageArray[chosenWikiaRailImage]);
         }
      });

      But the image is added after just the first module instead of at the bottom. How can I fix that?

        Loading editor
    • Try using $(window).load(function() { ... }); instead of DOMNodeInserted, I've been advised that it works better. If not, maybe we could find a way to tell when the last module has been loaded (I'm pretty sure different numbers of modules are loaded for different namespaces and special pages, so hopefully there's a way to tell for any given page).

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.