Code Monkey Adventures: 2010

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!!

Wednesday, September 29, 2010

Introduction to jQuery

jQuery is a JavaScript Library that will help you change the way we manipulate html objects, javascript events, and much more. In my experience, any given JavaScript can be taken, and simplified via jQuery; One of the main advantages is the use of selectors, which act a little like CSS, we will get to that later.

jQuery Homepage has many examples that can get you started, additionally, i have found this data sheet quite useful too. I will create an initial example of jQuery, although, on the next entries i will mainly focus on a little more complicated issues, which i once found myself looking for a solution, so maybe it will help someone in the future.

The first thing we are going to do will be to add the jQuery Script, for which we got two ways, one is adding it directly from google with the following code. Just add the Following lines on the <head> </head> portion of your file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

"src" may be replaced for any other source for the jQuery library.

Let's now create some basic example; lets say we have the following really simplified code.

<input id="event" type="button" value="Click Me" />
<div id="output"></div>
<script type="text/javascript">
$("#event").click(function() {
$("#output").html("Hello World!");
});
</script>

Let's take a close look at the Entry we just wrote.
the "$" means it is a jQuery input, the following part, ("#event"), will be our "Selector" what is inside it may look familiar to you if you have used CSS, the "#" means we are looking for an element with the id "event".
after that, we will add a ".", and an action, in this case, it will be "click" which will execute the code in it when the element or elements added on the selector are clicked.

As you may see, a whole function is crammed in this event, which is what will be executed when the click is made. html method will change the html that is inside an element, so, in this case we are changing the inner contents of the div we created for the message we are writing.

The code up there will add a button with the id "event". which will trigger and event when clicked. changing the internal html of the div "output". Try it Out!

Thanks for Reading, Promise i will improve next time!

Quick Intro

In my First and Following entries, I'm going to post mainly concerning about jQuery, if you have not heard of it but use JavaScript, I recommend you give it a look.

After that, who knows, I'll probably be posting about little problems and solutions i get to try in my everyday, computer science grad school life.