$('#element').pseudoCss(':before', 'background-color', 'red');

Check out the code from GitHub. The index.html contains documentation, which you should be able to see online via this link.

Please do read the caveat section before you use it. It should work for most situations but it is inherently limited compared to $.css().[...]]]> Further to what I wrote yesterday about this, I've written a jQuery plugin to provide a nice interface to pseudo-element CSS changes. Basically it *kind of* allows you to target pseudo-elements for the sake of CSS manipulation. It looks something like this:

$('#element').pseudoCss(':before', 'background-color', 'red');

Check out the code from GitHub. The index.html contains documentation, which you should be able to see online via this link.

Please do read the caveat section before you use it. It should work for most situations but it is inherently limited compared to $.css().]]> https://blog.asgaard.co.uk/2012/09/07/on-targeting-pseudo-elements-with-javascript-jquery Fri, 07 Sep 12 17:18:47 +0000 https://blog.asgaard.co.uk/2012/09/07/on-targeting-pseudo-elements-with-javascript-jquery Edit: I've written a jQuery plugin to automate some of this for you. If you need this on a bigger than trivial scale, it might be worth checking out! See: Docs/demo | code.

Pseudo-elements are pretty nice things you can inject into HTML elements via CSS.

#container { 
    position: relative;
}
#container::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "I am a block element in the top-left corner of #container and I don't exist in the markup";
}

They are very useful for adding presentational output to your DOM tree without needing to pollute the markup. But they are a bit of a pain because they don't really exist in the DOM, so accessing them programmatically with JavaScript is hard, or I think, impossible in the general case.

But depending on what you want to do, you might be able to achieve the result you want by being a bit clever...

Usually you want to target this element because you intend to manipulate its CSS. You can still manipula[...]]]> Edit: I've written a jQuery plugin to automate some of this for you. If you need this on a bigger than trivial scale, it might be worth checking out! See: Docs/demo | code.

Pseudo-elements are pretty nice things you can inject into HTML elements via CSS.

#container { 
    position: relative;
}
#container::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "I am a block element in the top-left corner of #container and I don't exist in the markup";
}

They are very useful for adding presentational output to your DOM tree without needing to pollute the markup. But they are a bit of a pain because they don't really exist in the DOM, so accessing them programmatically with JavaScript is hard, or I think, impossible in the general case.

But depending on what you want to do, you might be able to achieve the result you want by being a bit clever...

Usually you want to target this element because you intend to manipulate its CSS. You can still manipulate its CSS! You just have to take the indirect and less commonly trodden route of using JS to create a stylesheet and writing raw rules into it. Example:

$('head').append(document.createElement('style'));
var myStyleSheet = document.styleSheets[document.styleSheets.length-1];

var myRule = "#container::before { content: \"Let's change my text\"; }";
if (myStyleSheet.insertRule) {
    myStyleSheet.insertRule(myRule, myStyleSheet.cssRules.length);
}

What we've done in the code above is to create a dedicated stylesheet for this and then injected a rule which should override the previous rule (assuming selector specifity is equal, but let's not get into that). This is obviously not as neat as simply using jQuery.css(), but we don't have too many options, so let's focus on managing the situation we've inherited.

Cool story bro, but how do I scale this?

Exactly what strategy you use to lay your code out depends on your exact problem. If you only need to consider changes to one element, just keep it simple.

But if you need to handle multiple elements individually you have to manage problems selecting them and targeting them individually. If they don't already have an ID set, you'll have to create IDs on them and use that in the rule's selector. The second parameter of insertRule is an index. We can use this to help us out; we can iterate over each of our elements initially and assign it an index (use $.data()), insert a no-op rule at that index to force it to exist, and then make sure that element may only write to that index. After doing so, we'll still have to remove the old rule which will now be in index+1, which we can do with myStyleSheet.deleteRule(index+1).

I've made a fiddle to show roughly how it works. It by no means handles all feasible cases but should give you an idea how to lay things out.]]> https://blog.asgaard.co.uk/2012/04/23/figure-out-which-element-is-scrolled-to-in-the-viewport-with-jquery Mon, 23 Apr 12 20:39:46 +0000 https://blog.asgaard.co.uk/2012/04/23/figure-out-which-element-is-scrolled-to-in-the-viewport-with-jquery Does what it says on the tin. It takes a set of elements and tries to determine which one is featured most predominantly on the page. Change the $sections selector (line 3) to target the element-set of your choice, or rewrite as a plugin :)

Towards the bottom, the element which is deemed to be in view will be given a 'highlight' class.

Note that we are binding directly to the scroll event which is generally a bad idea. Whether it is a bad idea for you depends upon various factors. If you find it negative impacts performance on your page, factor out the scroll event and call it after a short timer (and cancel the timer on the next scroll).

(function() {
  "use strict";
  var $sections = $('.panel'),
      $sectionsReversed = $($sections.get().reverse()),
      $last = $({});
  
  $(window).scroll(function(ev) {
    var pos = $(document).scrollTop(), 
        $nearest = $sections.eq(0),
        amount = 0; // amount of the screen occupied
        
    // scrolled to extremes - take th