Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: Change a webpage's background!

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    @Snookerman & bruglione

    Watch it please. Both of your last posts in this thread were off topic. I didn't even issue either of you a warning, let alone an infraction, but please keep those kinds of discussions to the lounge area.

    @Twey

    I noticed you checking out this thread and was wondering when and if you would comment with your own version. I haven't gone over it or tested it (though I will have a look soon), but then I didn't even test my version. I was fully aware that the code I wrote wasn't anywhere as tight as it could be, but I figured it would work out well (if it worked at all) for the purpose at hand. Some of these things I spend hours on. Others, like this one, took only a few minutes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Sorry jscheuer, just an innocent joke, won't happen again.

  3. #13
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Well, that's obviously overkill in this particular case, but it's made up of several handy reusable parts that may come in useful in the future.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    Well, that's obviously overkill in this particular case, but it's made up of several handy reusable parts that may come in useful in the future.
    Yes, quite a clinic. I know you balked at this the last time I brought it up, but I still think, now even more so, that you should put out an official library of routines. The reason I'm even more inclined to urge you to do this is that in the interim I have worked with a number of the existing libraries a lot more and see how inadequate and overreaching they can be (this is not to say that they are no good, just nowhere near as good as they could be). I'd even go so far as to offer my services as a co-author of sorts, but more in the vein of helping out with how things might play out in IE, and/or Opera, particularly on the PC, and offering general suggestions. As far as sophistication in coding and a knowledge of best practices goes you are probably more up on that than I.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Both thanks

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Hey Twey, I was copying your code to have an even closer look at it and noticed:

    Code:
    onload = Background.restoreImage;
    Two things about that I don't like, but feel free to assuage me:

    • For a number of reasons, isn't it best practice to use window.onload, or better yet addEventListener/attachEvent?
    • Waiting for the load event to set background will (depending upon the default bg, load time, etc.) quite possibly make the page look bad while loading. And if this is to be used site wide, would result in some bumpy visual transitions between pages.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #17
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    To the former: no, that is entirely redundant (quite literally: you can refer to it as window.window.window.window.window.onload if you want). We're in global scope here, so there is nothing that could possibly be shadowing onload in a higher scope: we can only be referring to the global onload (as you probably know, all globals are properties of the global [window] object, and vice versa). Certainly there's no harm in using addEventListener/attachEvent, and I've a chunk of code for that, too:
    Code:
    var Event = (function() {
    
      function addEventW3C(el, ev, f) {
        return el.addEventListener(ev, f, false);
      }
    
      function removeEventW3C(el, ev, f) {
        el.removeEventListener(ev, f, false);
      }
    
      function addEventIE(el, ev, f) {
        ((el._evts = el._evts || [])[el._evts.length]
            = function(e) { return f.call(el, e); })._w = f;
    
        return el.attachEvent("on" + ev,
            el._evts[el._evts.length - 1]);
      }
    
      function removeEventIE(el, ev, f) {
        for (var evts = el._evts || [], i = evts.length; i--; )
          if (evts[i]._w === f)
            el.detachEvent("on" + ev, evts.splice(i, 1)[0]);
      }
    
      function addEventLegacyHandler(e) {
        var evts = this._evts[e.type];
        for (var i = 0; i < evts.length; ++i)
          if (!evts[i].call(this, e || event))
            return false;
      }
    
      function addEventLegacy(el, ev, f) {
        if (!el._evts)
          el._evts = {};
    
        if (!el._evts[ev])
          el._evts[ev] = [];
    
        el._evts[ev].push(f);
    
        return true;
      }
    
      function removeEventLegacy(el, ev, f) {
        for (var evts = el._evts[ev] || [], i = evts.length; i--; )
          if (evts[i] === f)
            evts.splice(i, 1);
      }
    
      return window.addEventListener
          ? {add: addEventW3C, remove: removeEventW3C}
          : window.attachEvent
              ? {add: addEventIE, remove: removeEventIE}
              : {add: addEventLegacy, remove: removeEventLegacy};
    })();
    Code:
    Event.add(window, "load", Background.restoreImage);
    I usually don't go the whole nine yards with this one, since, as you say, it's really preferable to insert a <script> element just inside the <body>.

    As it happens, we can actually remove the necessity for this line altogether, at least in standards-compliant browsers, by simply changing:
    Code:
        document.body.style.backgroundImage = 'url(' + path + ')';
    to:
    Code:
        document.documentElement.style.backgroundImage = 'url(' + path + ')';
    However, I'm leery of doing so since it seems like the sort of thing IE might not support under some bizarre combination of circumstances. Perhaps you could give this a test?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #18
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, it's a strict warning in FF's console to skip the parent object, but I get your point. That sort of thing is important in boolean(ish) testing of globals that aren't universally supported.

    Quote Originally Posted by Twey View Post
    Code:
        document.documentElement.style.backgroundImage = 'url(' + path + ')';
    However, I'm leery of doing so since it seems like the sort of thing IE might not support under some bizarre combination of circumstances. Perhaps you could give this a test?
    Nice idea. It's my impression that would add the style to the opening html tag. That's fine of course, it would engender some practical considerations as far as other styles for the page go. For instance, if the body had a different background (anything other than transparent), it would obscure it. Without testing, I would think this would be fine in IE. There might be a problem in quirksmode in IE, so a valid URL DOCTYPE of 4.01 Transitional could be a minimum requirement. However, testing filters against the document.documentElement works in quirks in IE. What tends to get problematic with document.documentElement vs. document.body in IE in quirks are dimensions (clientHeight, scrollTop - those sorts of things). If the documentElement's height were 0 (which is implied, though not necessarily the case in quirksmode in IE), then the background image, though applied, would not show up.

    Just tested it, it's fine on a blank page with or without DOCTYPE in IE 6 and 7.

    What happens in IE 7 - according to the developer toolbar for that browser is that in quirks, the style is applied to the body and the html elements. In compliance mode, only to the html element.
    Last edited by jscheuer1; 11-26-2008 at 06:39 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #19
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Sounds like that's the way to go, then. Of course we should always assume standards-compliance anyway, and users should assume that code will break on non-compliant pages. Maybe a caveat is in order about defining a background on the body.

    As for the functions, I actually have rather a lot of them sitting about in various text files on my hard drive. Unfortunately, I'm having something of a technical crisis at the moment, with the key to my server residing on a drive in a broken machine — I need to shell out some £200 for the parts necessary to fix it so that I might upload my site and store things on it.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •