How to get jQuery elements from an array of selectors



To use an array of strings as jQuery selectors I have found the need to append an empty string.
My bad example works because it coerces the ‘this’ object to a string.

Bad Example:

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this+"").children() );
});

Much Better Example:

array = ["h1","p","div"];
$K(array).each(function(index, value) {
    console.warn( $K(value).children() );
});

I had previously tried the following with out success

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this).children() );
});

The problem of what I was originally trying was that each item in the array wasn’t being treated as a string, I think.The problem of what I was originally trying was that ‘this’ is an object and not a string like I need for the jQuery selector.

A big thanks goes out to my friends,Alex Olson & Sam Curren, for helping me understand my mistake while being tired.

If I didn’t need to do something different for each time through the loop I could do something like this stack overflow answer:

array = ["h1","p","div"];
console.warn( $K( array.join(", ") ).children() );

IE content not scrolling in overflow container

IE content not scrolling bug

IE content not scrolling bug

If you have some content in a container and the content isn’t scrolling, there is probably an easy fix. If any of the content inside the container that is position relative, the container must also be position relative.

Doesn’t work in IE

<div id="scroller" style="overflow-y:scroll">
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
</div>

Works in IE

<div id="scroller" style="overflow-y:scroll;position:relative">
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
</div>

Photo by Anderson Mancini

ie error expected identifier string or number

ie error expected identifier string or number

ie error expected identifier string or number

IE 7 was throwing an error while working on some JavaScript

ie error expected identifier string or number

The problem was that I had an extra comma in a hash

this.css({
      "position":"fixed",
      "top": ( $K(window).height() - this.height() ) / 2 + "px",
      "left": ( $K(window).width() - this.width() ) / 2 + "px",
    });

It should have been

this.css({
      "position":"fixed",
      "top": ( $K(window).height() - this.height() ) / 2 + "px",
      "left": ( $K(window).width() - this.width() ) / 2 + "px"
    });

Photo: By stealingsand

Placehold.it TextMate Snippet

Placehold.it

Placehold.it

After finding the sweet http://placehold.it/ web service, I knew I wanted to use it but wanted to be lazy.

I created a TextMate snippet to make using placehold.it even easier.

Now I just type ‘placehold’, press tab, and BAM!

Download the placehold.it TextMate snippet

Enjoy!

Sweet scissor photo by transp