Wednesday, October 6, 2010

Using this together with other selectors on jQuery.



I'm not sure if anyone else has stumbled upon this proble, but it took me a while to find about this, even thought it was in front of me the whole time.

While doing Events for many tags at a time, or performing a $().each, sometimes, i wanted to act on children from from the specific selector i was on, i was looking for a way to use "this" along with other selectors, but recently i found out the easiest way to do it. 

Lets say we have the following code used for the Following Situation.

<div class="outer" id="first"> Click me <div class="inner"> Div 1 </div></div>
<div class="outer" id="second"> Or me <div class="inner"> Div 2 </div></div>
<div class="outer" id="third"> Or me <div class="inner"> Div 3 </div></div>

<script type="text/javascript">
$(".outer").live("click", function() {
$(".inner", this).css("background-color", "#aaaaaa");
});
</script>

What was done above, was using the context parameter for jQuery to select an element inside the element we refer to with "this". When adding  "this" as the context, it will only look for the elements with class "inner" that are inside the element that triggered the action.


Context may also contain other selector, for example, if we use $(".inner", "#second").hide();
we will only be hiding the element with the "inner" class that is a child of the element with the id "second".


Now Let's try it!...

Click me
Div 1
Or me
Div 2
Or me
Div 3

I hope this was Helpful. Any doubts, questions, suggestions or curses, please let me now!!.

Saturday, October 2, 2010

GreaseMonkey, Part 1 - 4chan



If you are a regular at 4chan, then you know that /b/ has those annoying XXX covering the post numbers, it may now be a big deal, but it gets me everytime. so if you hate those masked post ids, keep reading.

Needed before:
a) if you are using Chrome, you do not need anything.
b) if you use firefox, you need to install Greasemonkey addon beforehand.
c) if you use internet explorer, shame on you =(


I made a small jQuery/Greasemonkey script to unmask topic and post id. Explained below

jQuery("a[class=quotejs]").each(function() {
    if(jQuery(this).html() == "No.") {
        jQuery(this).next().html(jQuery(this).attr("href").split('#')[1]);
    }
});
Basically, it will look for all the instances where the numbers are masked, then, it will look on the actual link, which does contain the complete number, and replace the masked number with the complete one. it is a little crude, but it gets the job done.
If you do read the code, you may notice it also contains a function called addJQuery(), what this function does is adding the jquery library to the script, this used to be just imported on the header of the script, but since chrome does not support most of greasemonkey headers, it has to be added this way.

Everything needed, is to download Greasemonkey addon for Firefox before pressing the install button., Chrome does NOT need any addon to use this script, simply pressing this install button will do. Thanks for reading!!