The CSS-JS


  • Winner of the 2016 Presidential Election

    My coworker asked me to help him with the CSS on this page; it seemed like some Javascript was interfering (but only when viewed on OSX). So, I did a quick solution search, and found... this:

    <html><body style='color:#000000; background:#ffffff; '>
    (function ($) {
        $(function () {
            if (navigator.userAgent.search("Macintosh") != -1) {
                if ((navigator.userAgent.search("10.7") != -1) || (navigator.userAgent.search("10.8") != -1)) {
                    $(".redacted-container").css("left", "125px");                
                    $('#page-header').css({ "height": "550px",
                        "margin-bottom": "-10px",
                        "background-image": "url(/App_Themes/Default/Images/redacted/dp-hdr-bg-mac.jpg)"
                    });
                    $('#spanHeading').css("margin-top", "-15px");
                    $('#SubPoints').css("margin-top", "-40px");
                    $(".msg_list").css("display", "block");
                    $("#ButtonMiddle").css("height", "40px");
                    $("#ButtonLeft").css("height", "40px");
    
                    $("#TextDivider").css("font-weight", "100");
                    var currentUrl = $(location).attr('href').toLowerCase();
                    
                    if ((currentUrl.search("/deutschland/") != -1) || (currentUrl.search("/oesterreich/") != -1) || (currentUrl.search("/schweiz/") != -1)) // Germany
                    {
                        $('#page-header').css("height", "600px");
                        $(".redacted-container").css("left", "80px");
                    } else if ((currentUrl.search("/france/") != -1) || (currentUrl.search("/belgique/") != -1) || (currentUrl.search("/suisse/") != -1)) {                    
                        $('#page-header').css("height", "560px");
                        $('.redacted-container').css("height", "125px");
                    } else if (currentUrl.search("/portugal/") != -1) {
                        $('#page-header').css("height", "560px");
                    } else if (currentUrl.search("/china/") != -1) {
                        $('#page-header').css("height", "515px");
                        $("#MacLink").hide();
                    }
                    $(".msg_head").click(function () {
                        $(this).next(".msg_body").slideToggle(600);
                        var animate = $("#Arrow_Mac").css("transform");
                        if (animate.search("0, 0, 0") != -1) {
                            $("#Arrow_Mac").css({
                                "transform": "rotate(0deg)",
                                "-webkit-transform": "rotate(0deg)",
                                "-o-transform": "rotate(0deg)",
                                "top": "0px",
                                "left": "10px"
                            });
                        }
                        else {
                            $("#Arrow_Mac").css({
                                "transform": "rotate(90deg)",
                                "-webkit-transform": "rotate(90deg)",
                                "-o-transform": "rotate(90deg)",
                                "top": "12px",
                                "left": "4px"
                            });
                        }
                    });
                }
                else {
                    // All other OS
                }
            } else {
                var currentUrl = $(location).attr('href');
                var redirectUrl;
                if (currentUrl.indexOf("sc_mac=1") != -1) {
                    var url = currentUrl.split('?');
                    redirectUrl = url[0];
                } else {
                    redirectUrl = currentUrl;
                }
                window.location.replace(redirectUrl);
            }
        });
    } (jQuery));


  • That has to be the worst way of doing that.



  •  How do you get your post formatted so nicely? I've tried copypasta from Visual Studio to Word, but then I have to spend a good hour or so scraping up all the crap that Word craps all over my crap.


  • Winner of the 2016 Presidential Election

    tohtml.com

    (Thanks, Morbs)



  • @joe.edwards said:

    tohtml.com

    (Thanks, Morbs)

     

    Sweet. Bookmarked. Now my CodeSODs will suck slightly less!

     



  • Oh dear.

    And it's not just the browser-specific differences. What can he have possibly done that requires country-specific-browser-specific layout? (That presumably cannot be achieved by regular flow)

    I don't know jQuery, so this little fragment of eye cancer seems iffy, too:

    (function ($) {
        $(function () {
            ...

    A hack which is short, but sour.



  • @Daniel Beardsmore said:

    Oh dear.

    And it's not just the browser-specific differences. What can he have possibly done that requires country-specific-browser-specific layout? (That presumably cannot be achieved by regular flow)

    I don't know jQuery, so this little fragment of eye cancer seems iffy, too:

    (function ($) {
        $(function () {
            ...

    A hack which is short, but sour.

    If it ends with })(jQuery) then it's standard. The first function aliases $ => jQuery and the second function is deferred to DOMContentLoaded.



  • @Ben L. said:

    If it ends with })(jQuery) then it's standard.

    I don't doubt it, but defining a function such that it merely executes its only argument as a function, with another no-arg function as a parameter? (Apparently not, as that wouldn't do what you described it as doing: it would not bind anything to the identifier "$".) You couldn't make up anything that retarded if you tried. I am sure it's valid, it's just awful.



  • @Daniel Beardsmore said:

    @Ben L. said:
    If it ends with })(jQuery) then it's standard.

    I don't doubt it, but defining a function such that it merely executes its only argument as a function, with another no-arg function as a parameter? (Apparently not, as that wouldn't do what you described it as doing: it would not bind anything to the identifier "$".) You couldn't make up anything that retarded if you tried. I am sure it's valid, it's just awful.

    It's a good thing then, that that is indeed not what it is doing…

    Look up the term Immediately Invoked Function Expression (IIFE). It's a means to separate code in JavaScript without polluting global scope. Using function arguments to alias names is an added benefit.



  • @Daniel Beardsmore said:

    @Ben L. said:
    If it ends with })(jQuery) then it's standard.

    I don't doubt it, but defining a function such that it merely executes its only argument as a function, with another no-arg function as a parameter? (Apparently not, as that wouldn't do what you described it as doing: it would not bind anything to the identifier "$".) You couldn't make up anything that retarded if you tried. I am sure it's valid, it's just awful.

    It's called a closure. Standard JavaScript practice.



  • @Daniel Beardsmore said:

    it would not bind anything to the identifier "$"

    Within the scope of the outer function only, that's exactly what it will do. I believe jQuery makes $() an alias for jQuery() anyway, so the only reason you'd need to do this is if you were also using some other script library (mooTools?) that wanted $() for its own purposes.

    It does seem to me that (function () { var $ = jQuery; $(this); $(that); $(the_other); })(); would achieve the same end with less fucking about. Ben, can you think of any reason why the construction in the OP is standard?



  • @flabdablet said:

    It does seem to me that (function () { var $ = jQuery; $(this); $(that); $(the_other); })(); would achieve the same end with less fucking about. Ben, can you think of any reason why the construction in the OP is standard?

    It takes less bytes to do it as a parameter.



  • A whole six bytes savings. Amazing improvement!



  • @Ben L. said:

    If it ends with })(jQuery) then it's standard.

    Lol, look at the OP. The brackets are all wrong. Would }(jQuery)) even work?


  • Discourse touched me in a no-no place

    @Ragnax said:

    IIFE
    How apt.



  • @Zemm: Yes it would, the syntax that you suggested is the correct (according to Douglas Crockford's Linter). Both versions mean the same thing.



  • $(function(){ ... }) is shorthand for $(document).ready(function() { ... }).

    [code] (function($) {

    ///snip

    }(jQuery))

    [/code]

    This is because I suspect that the used another JavaScript library in the past that also defines the $ (e.g. prototype library).

    EDIT: Fixed Poor Formatting



  • @blakeyrat said:

    That has to be the worst way of doing that.

    You poor. Luckily the guy didn't think: "wait a minute, maybe we can put the styles in a central database and load it up via AJAX"



  • @Lorne Kates said:

    I've tried copypasta from Visual Studio to Word.

    Wow, a WTF post with a WTF in the comments. This is going to be an special day.



  • @flabdablet said:

    I believe jQuery makes $() an alias for jQuery() anyway, so the only reason you'd need to do this is if you were also using some other script library (mooTools?) that wanted $() for its own purposes.


    It's defensive programming, so it's a good habit to get into even if you're not using another library.


  • Winner of the 2016 Presidential Election

    You guys aren't seeing the WTF for the trees. This one is full of fail.


    @joe.edwards said:
                } else {
    redirectUrl = currentUrl;
    }
    window.location.replace(redirectUrl);

    URL didn't contain sc_mac=1? Reload the page, I'm sure it will work next time.


    @joe.edwards said:
    animate.search("0, 0, 0")

    I love how this part depends on the transform CSS property being normalized.


    @joe.edwards said:
    $(location).attr('href');

    location.href was too straightforward.


    @joe.edwards said:
                else {
                    // All other OS
                }

    You mean any user agent that contains Macintosh but doesn't contain 10.7 or 10.8. This one is just throwing his hands up.



  • @flabdablet said:

    It does seem to me that (function () { var $ = jQuery; $(this); $(that); $(the_other); })(); would achieve the same end with less fucking about. Ben, can you think of any reason why the construction in the OP is standard?

    I can! Your construct isn't functional enough.



  • Wow, OS-based browser sniffing, it's like I'm back in 1999 already. For all I know the file uses CR newlines.

     

    On the other hand, a couple years ago I was tempted to write a library for specifying stylesheets in JavaScript, so that

    $c(".coolborders").borderRadius("2px");

    became

    .coolborders {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -khtml-border-radius: 2px;
    -ms-border-radius: 2px;
    }

    But three factors make it so I don't need it anymore:

    1. More of CSS3 is standardized now so the browser prefixes are being dropped.
    2. Google and Mozilla have conspired to eliminate browser prefixes on new features entirely.
    3. I stopped giving a shit and am now just writing and testing sites in Chrome.


  • @flabdablet said:

    Ben, can you think of any reason why the construction in the OP is standard?

    Not Ben, but chiming in anyway:

    • It's inherently shorter than the alternative; even when minified it will be a consistent number of bytes shorter. That may just be a few bytes, but those are bytes per module and per download. Those things tend to add up fast.
    • It makes explicit which variables are passed in aliases for variables further up the closure scope stack and which are really local variables. This means the intent of your code is unambiguously clear.
    • It makes it easier to make the jump to the AMD pattern, should your code reach a level of complexity that demands it.*
    • If you develop library code that will be consumed by third parties, but don't offer a build that is AMD compliant, then it makes it easier for those third parties to convert the code as well.
    • There was something about it delivering better optimized code from optimizing compilers, but I'm not sure if that is still to be taken seriously.

    *) Enforcing a code style where 'imports' into the closure are passed as arguments to the IIFE should at best prevent and at worst deter developers from accessing variables outside the scope of the IIFE directly. This means that everything an AMD compliant module would have to import as part of its `define` clause, should be fully listed as parameters of the IIFE. It makes the conversion process much more straightforward.


  • Winner of the 2016 Presidential Election

    @MiffTheFox said:

    On the other hand, a couple years ago I was tempted to write a library for specifying stylesheets in JavaScript, so that

    $c(".coolborders").borderRadius("2px");

    became

    .coolborders {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -khtml-border-radius: 2px;
    -ms-border-radius: 2px;
    }

    I just write .coolborders { @include border-radius( 2px ); } and let SASS take care of the vendor prefixes.



  • @MiffTheFox said:

    I stopped giving a shit and am now just writing and testing sites in Chrome.

    Yeah, me too. At one point I had Chrome, FF, IE, Opera, and Safari for Windows and I would check all of my sites in every browser. Sometimes, if I really felt like it, I'd borrow my girlfriend's Mac and test it there, too. It didn't take me very long to say "fuck that noise, I'm testing in my browser and that's it, bitches."



  • @flabdablet said:

    if you were also using some other script library (mooTools?) that wanted $() for its own purposes.
     

    Prototype used $(x) for getElementById(x), and some other libraries (Overlib, etc) relied on Prototype at one time.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.