BG issue



  • I have modified the login/registration pages of my nodebb instance running persona theme. The tpl files have been modified so that a unique image bg is loaded every time the login/registration page is opened or refreshed.

    All seems to be working fine but there is this strange issue - any page (recent/poplar/categories etc) that is accessed from the login/registration page also gets the same bg as of the login/registration page.. The other pages get the normal bg only after they are refreshed.

    Please help me out with this issue.

    My Site: http://diskuz.com



  • I'm thinking that by defining a background in that template it's showing fine (and looks great), however in the others (categories, recent, etc) it's not been told not to display it.

    Would defining no background image specifically on those templates - or a template which all use - not eliminate it?

    There might be an easier route, but that's how i'd assume it's staying there.



  • Tried that too, did not help.


  • Community Rep

    Put something like this in your header.tpl or custom header, to clear the background when a new page is about to load.

    $(window).on('action:ajaxify.start', function (ev, data) {
      if (data.url !== 'login' && data.url !== 'register') document.body.background = "";
    });
    

    Actually, I suggest you put your whole script in the header. It makes it only load once, and easier to add on to later.

    <script>
    $(function(){
      function changeIt(){ ... }
    
      //  Initial load.
      if (app.template === 'login' || app.template === 'register') changeIt();
    
      // New page loading.
      $(window).on('action:ajaxify.start', function (ev, data) {
        if (data.url === 'login' || data.url === 'register') {
          changeIt();
        } else {
          document.body.background = "";
        }
      });
    });
    </script>
    


  • @yariplus I am a noob and I am confused. What goes in the header and what part is to be called ?

    Putting the entire following thing does not work.

    <script>
    $(function(){
    function ChangeIt(){
    var num = Math.ceil( Math.random() * totalCount );
    document.body.background = '/images/bgimages/'+num+'.jpg';
    document.body.style.backgroundSize = '50 0%%';
    document.body.style.backgroundRepeat = 'fixed';
    document.body.style.backgroundAttachment='fixed';
    document.body.style.MozBackgroundSize = 'cover';
    document.body.style.backgroundSize = 'cover';
    }

    // Initial load.
    if (app.template === 'login' || app.template === 'register') ChangeIt();

    // New page loading.
    $(window).on('action:ajaxify.start', function (ev, data) {
    if (data.url === 'login' || data.url === 'register') {
    ChangeIt();
    } else {
    document.body.background = "#f0f0f0";
    }
    });
    });
    </script>


  • Community Rep

    @Gaurav-Grv-Robinson

    document.body.background is actually a url. If you want a color, try changing it to document.body.style.background



  • @yariplus said in BG issue:

    document.body.style.background

    Duly noted. Btw the entire above mentioned code has to go in the header, right ?


  • Community Rep

    I put it in the Custom Header section in the acp.

    It should work the same if you put it in header.tpl, near the useCustomJS tag



  • @yariplus put the entire code in the custom header section, still does not work.

    <script>
    $(function(){
    function ChangeIt(){
    var num = Math.ceil( Math.random() * totalCount );
    document.body.background = '/images/bgimages/'+num+'.jpg';
    document.body.style.backgroundSize = '50 0%%';
    document.body.style.backgroundRepeat = 'fixed';
    document.body.style.backgroundAttachment='fixed';
    document.body.style.MozBackgroundSize = 'cover';
    document.body.style.backgroundSize = 'cover';
    }

    // Initial load.
    if (app.template === 'login' || app.template === 'register') ChangeIt();

    // New page loading.
    $(window).on('action:ajaxify.start', function (ev, data) {
    if (data.url === 'login' || data.url === 'register') {
    ChangeIt();
    } else {
    document.body.style.background = "#f0f0f0";
    }
    });
    });
    </script>



  • @yariplus corrected a stupid mistake and it seems to work now. But there is yet another issue, if any other page is opened first except the login/register page and if from that page the login/register pages are accessed, they get the same bg i.e the one without an image.


  • Community Rep

    @Gaurav-Grv-Robinson

    Try not using document.body.background

    use
    document.body.style.background = "url(http://theurl/image.png)"



  • @yariplus said in BG issue:

    document.body.style.background = "url(http://theurl/image.png)"

    document.body.style.background = "url('/images/bgimages/'+num+'.jpg');
    does not work.

    but
    document.body.background = '/images/bgimages/'+num+'.jpg';
    works


  • Community Rep

    @Gaurav-Grv-Robinson

    document.body.style.background = 'url(/images/bgimages/'+num+'.jpg)';



  • @yariplus WOW! You're the man. It seems to be working fine.


 

Suggested Topics

| |