Hide Inline Offers on Citi Card Activity

  • Posted by Mike Naberezny in Javascript

    Citi® Account Online recently revamped their credit cards website. It’s much nicer than the previous version except for one annoying addition. When viewing your account activity, it now shows yellow offers inline with the transactions:

    My account activity typically shows two or three of these offers and I find them very distracting when trying to read the transactions. I haven’t been able to find an option on the website to hide these inline offers.

    If you are using the Firefox browser, this problem can be solved with the Greasemonkey add-on. I’ve written a short user script for Greasemonkey that hides these offers:

    // ==UserScript==
    // @name         Hide Citi(R) Activity Inline Offers
    // @namespace    http://mikenaberezny.com
    // @description  Hide inline offers that make account activity unreadable.
    // @include      https://www.accountonline.com/cards/svc/AccountActivity*
    // ==/UserScript==
     
    window.addEventListener('load', 
      function() { 
        // find all <tr class="promo-message"> elements
        var elements = document.evaluate(
            "//tr[@class='promo-message']",
            document,
            null,
            XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
            null);
     
        // set style "display: none" on those elements
        for (var i = 0; i < elements.snapshotLength; i++) {
            elements.snapshotItem(i).style.display = 'none';
        }
      },
      true);

    To install it, first install the Greasemonkey add-on and then download the user script that contains the source above: citi-inline-ads.user.js

    Greasemonkey should then automatically prompt you to install it. Please note that this user script is provided to the public domain without warranty. After installation, the inline offers should appear briefly as the page loads and then will be hidden:

    I’ve left the icon with the plus sign that indicates there is an offer. Clicking it or the row will still expand to show the offer. Now, you can still see when an offer is available but in a less obtrusive way that doesn’t hinder the readability of the transaction list.

    Greasemonkey is a great way to customize websites to your liking. To learn more about it, Mark Pilgrim’s Dive Into Greasemonkey is an excellent guide.

6 comments

  • comment by Matthew Brundage 10 Feb 09

    For those without Greasemonkey, an alternative solution would be to use the “Stylish” Firefox extension and add custom CSS. The same effect can be obtained — and with just a few simple lines, too:

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("www.accountonline.com") {
    tr.promo-message {display:none !important;}
    }

    *Note: this code is untested, so the actual implementation may be slightly different from this example.

  • comment by Anonymous 10 Feb 09

    thanks, this is great. hate these ads.

  • comment by P Zimmerman 10 Feb 09

    Here’s another idea: call their 1-800 number telling them its unwelcome spam.

    And when I say call them, I mean repeatedly. If you’ve got a spare half hour, try 20 or so times.

  • comment by Laurence 10 Feb 09

    I had noticed these and tried to ignore them… Pretty cool work around. Thanks :)

  • comment by Dave Thomas 10 Feb 09

    Appreciate the Greasemonkey script. Found them really annoying, then came across a Lifehacker post which linked to you and your solution. Thanks very much!

  • comment by Paul 11 Feb 09

    Many people who use Firefox have the AdBlock Plus add-on installed. Install the Adblock Plus Element Hiding Helper and you can select the frame containing said advertisement.
    There are several elements so it might be tricky, but you want the TD frame.
    Example: accountonline.com#TD(colspan=2)

    And most importantly: CALL AND COMPLAIN!!! Do you want a future where all you see are advertisements everywhere you look? You can give them your soul and your family and it’ll never be enough..

Post a comment


Thanks for commenting. Please remember to be nice to others and keep your comment relevant to the discussion. I reserve the right to remove comments that don't meet these simple guidelines.