Jun 04
Quick Tip #2: 1's and 0's
Hey guys! Long time no see. I'm here to give you a quick technique that I've started to use more and more with simple codes that have some sort of rotation.
Suppose you have an array of two values. You need to keep switching between those values. One good example is my inbox flasher script:
- Code:
<script type="text/javascript">
//////////////////////////
// Inbox Flasher 1.0 //
//By Choco of ZB Support//
// June 4th, 2008 //
//////////////////////////
interval = 300; //Flash rate in milliseconds
color = [];
color[0] = "white"; //Color one
color[1] = "red"; //Color two -- script flashes between these two
//Don't edit
l=0;
function flash() {
z=$("#menu_pm a")[0];
$(z).css("color",color[l]);
l=(0-l)+1;
}
$(function(){$("#menu_pm a").each(function() {x=$(this).html();if(x.match(/small\>(\d+)</gi)) {y=RegExp.$1;if(y>0){q=setInterval("flash()",interval);$(this).attr("id","flash");}}});});
</script>
As you can see, I have to keep changing the color of the link every 300 milliseconds. Now, my original flash() function, the one that actually changes the color, looked like this:
- Code:
function flash() {
z=$("#menu_pm a")[0];
if(l==0) {
l=1;
$(z).css("color",color[0]);
} else {
l=0;
$(z).css("color",color[1]);
}
}
Look -- I managed to cut the function down by 50% - from 10 to 5 - using simple math. Here's how it works.
Take a peek at the original flash function, the second one I posted. It's quite simple:
1. Fetch the link
2. Check which color we're supposed to flash (l is either 0 or 1)
3. If 0, change l to 1 and change the color to color[0]
4. If 1, do the opposite of #3
5. End function
However, what we can do is what I did in the new flash function:
1. Fetch the link
2. Set the color to color[l] (which is either color[0] or color[1])
3. Change l from 1 to 0 or 0 to 1
4. End function
The bold is where the easiest of mathematical functions, subtraction and addition, can cut code down substantially.
While taking a math final a couple of years ago, I found a problem that I thought of was hard to solve -- how do we convert 0 to 1 and 1 to 0 if you only have one equation?
After spending most of the final working on that alone, I realized the correct way.
If n is either 0 or 1, then:
f(n) = -n+1
So:
f(0) = -0+1 = 1
f(1) = -1+1 = 0
You may scoff that I actually bothered to write a blog entry on that, but you have no idea how much I use this formula. It's extremely handy!
Hope that helps someone.
-Choco
Jan 12
3 Piece H2 Code
Haha, I've released the code!
Enjoy.
http://support.zetaboards.com/topic/39865/
Jan 01
JQuery Tip #1 : $(function() { });
Hey! A quick tip about JQuery that I don't feel like writing a giant tutorial about (besides, you're probably still making your way through the last two).
Suppose you want to execute a function only when the DOM is loaded, but not the actual document. You could use an onload= handler, which is very glitchy and only works when the document is COMPLETELY done loading, not just the structure. That's not good! Why don't we use some jquery goodies to help out instead?
- Code:
$(function() {
And that's all you need. Anything after that and before a }); will be executed as soon as the DOM is created and stabilized.
This is an important function and is both useful and versatile. Don't forget it!
I recently wrote a code, zEdit; I'm sure most of you know this, as I bet more than half of my posts are in that topic, and that's where you probably got the link to this blog. Well, IE was not happy with zEdit. It kept erroring out Operation Aborted. Generation Studio pointed out that I was modifying the DOM before it was fully created, which as most of us know, IE has a problem with (along with too many semicolons and the odd mood swing). Thanks to the $(function(){ function, I was able to execute the code only when IE was done chewing up HTML. Yay!
Dec 30
JQuery Tutorial #2 :: Modifying Elements
Tutorial #2: Modifying Elements
-------------------------------------------------
Thanks for joining me again for another session of JQuery Tutorials with Choco. Today, we'll be learning how to use the matched elements we procured by reading Tutorial #1; if you haven't read that yet, you better!
There are a couple of ways to change elements on a page using JQuery; in fact, there are LOADS of ways. First, you have to understand a few commonly used functions and how they work. By reading this tutorial you'll actually learn a bit more about how JQuery was written to be very, very useful!
Wait, what functions?
What functions you ask? Well, there are many, many functions. I'll only be covering a couple. For a complete list, try taking a peek at Visual JQuery, an awesome reference to all things JQuery.
How To Use The Following Functions:
Remember the last tutorial? Well, today, I'll be dealing with this JQuery call:
- Code:
$("p.text")
What does that return? Yes, all P elements with a class of 'text'. Good. You did read the previous tutorial. Now, what you were probably wondering is what to do with that; it's like being handed a box of chocolates and then sitting down and staring at them. No, today, we're going to teach you how to eat--wait, what? No, we're teaching you how to use the functions.
First you need to have a definition:
Chainability: The ability of an object to sustain multiple function calls, all pertaining to the original object unless specified in the call itself.
Now, you're probably completely confused. Understandable. I was too when I wrote that sentence oh, 5 seconds ago. See, chainability basically means that each time you call a function:
- Code:
$("p.text").html("This is my innerHTML!")
(By the way, you'll be learning about thehtml function later)
You can keep using it. Yes, that's right. No more multi-line javascript codes!
This is both the reason JQuery is an awesome library AND JQuery is the most confusing library to new users. When they see something like this:
- Code:
$("p.text").children("[@name~=zoop]").attr("opacity",".5").remove();
They don't understand...it actually means this:
- Code:
pcol = document.getElementsByTagName("p"); //Find all P elements.
for( var i in pcol ) { //Search through P's
if(pcol[i].className == "text") { //We've found a P.text!
y=pcol[i].getElementsByTagName("*"); // Find all children of this P element.
for(var q in y) { //Search through the children... *yawn*
if(y[q].name&&y[q].name.match(/zoop/i)) { //We've found a child with a name that matches 'zoop'.
y[q].style.opacity=".5"; //Set the opacity of the child.
y[q].parentNode.removeChild(y[q]); //Remove the child.
}
}
}
}
Yes, you read correctly. All of the above code can be simplified to one line. This, my friends, is the power of JQuery. </melodromatic>
Anyway, what I was saying was that this:
- Code:
$("p.text").html("This is my innerHTML!")
Can be expanded on, as you saw in the above example. Suppose I not only want to change the HTML of all p.text elements to "This is my innerHTML!", but I ALSO want to set their text color to red. You would think that I would have to do this:
- Code:
$("p.text").html("This is my innerHTML!");
$("p.text").attr("color","red");
But no. This is where the term 'chainability' comes in. I can do this:
- Code:
$("p.text").html("This is my innerHTML!").attr("color,red");
You see? Any time you modify the element, the function returns the same element! This means you can chain all commands for the same element together...on one line!
This greatly reduces the code required to perform a few simple commands.
Warning: Above I noted, in the definition of chainability, this:
- "Chainability"
What does this mean? It means that you can navigate around the element...on the same line.You'll learn about this a bit down.
A few functions of interest:
1. $("p.text").remove() : Removes all of those elements from the DOM. All P elements with a class name of Text are gone.
2. $("p.text").html("hello") : (italic text optional): Without the italic text, meaning just html(), this function returns the innerHTML of the element. Make sure you're only referencing one element though. WITH the italic text, it sets the HTML to the argument you provide, so now all P elements with a classname of Text have the innerHTML of "hello".
3. $("p.text").attr("attribute","value") : Sets an attribute to the value you provide. So <p class="text"> now becomes <p class="text" attribute="value">.
4. $("p.text").css("property","value") : Changes a CSS value of the element in question. So <p class="text"> now becomes <p class="text" style="property:value;">.
5. $("p.text").slideUp("fast") : Slides the element up with a cool transition. The argument determines the speed of the animaton; fast, slow and medium are supported. Use slideDown("fast") the same way.
6. $("p.text").fadeIn("fast") : Fades the element in. See above for argument. Use fadeOut("fast") the same way.
Other 'functions' of interest:
The reason the word functions is in quotes is because the following do not actually affect the element; they only use the element as a reference. For example, the parent() function.
1. $("p.text").parent() : Returns the immediate parentNode of the element. Returns whatever element is around each <p class="text">.
2. $("p.text").parents("argument 1") : This one is a bit different than parent(), because it returns multiple parents if the argument calls for it. The argument is optional, and it's just a matching expression like those of which we learned in Tutorial #1. $("p.text").parents(".parent") would return all parents of p.text that have a class of "text".
3. $("p.text").prev() OR $("p.text").next() : Finds the previous sibling or next sibling of each p.text element, respectively. Can take an argument for matching, see above and tutorial #1 for instructions.
4. $("p.text").siblings("argument") : Finds all siblings that match given argument of each p.text. Simple enough.
One Last Function
Well, there's one last function I want you to know about. Don't worry, it's quite simple. The end() function.
Here is an example:
Suppose I want to get all P elements with a classname of text. I want to set all of the elements' opacities to .5. Then, I also want to find all children of those elements with a class name of "child". Oh, I forgot. I want to set those children's opacities to .6. Crap, I also forgot -- now I want the P elements again to be removed. How silly of me? :p
Now, you've obviously seen the problem. The last step requires you to write another line calling $("p.text") again, because you've already tried to find the children.
But no! Here's where the .end() function comes in.
- Quote:
As should be obvious, the end function brings into focus the first returned element; in this case, $("p.text"). This comes in handy when you're writing complex, multi-statement JQuery codes, which you'll be familiar with soon.
Questions
1. Suppose I want to find all children(class name zoop) of all p elements(class name text). I want to remove all of these children and then fade out the P elements. What's the code?
2. I want to find all span elements with a colspan of 3. Then I want to set their text colors to blue, after which it is required that all parents with a class name of "par" are removed. How do I do it?
As always, PM me the answers, or if you don't understand the question, PM me for elaboration.
Enjoy the tutorial, I hope it helps.
-Choco
Dec 28
zEdit V. 1.2 Coming Soon
Hey guys!
Just thought I'd fill you in as to what you can expect from the new version of zEdit.
Bugs Fixed
1. You can now edit the first post of a topic with zEdit. I am currently debating whether or not to allow topic title/description editing as well..thoughts?
2. The edit button is no longer removed when editing a post. I have no idea why I wrote this in, but I have removed it, so no problems.
Features Added
1. Smooth sliding action to bring in/bring out post (TENTATIVE)
2. Admin-set option to use just double click, just quickedit button or both; user-set option coming soon.
Not too many things added/fixed, but these were inhibiting the interface so I thought I'd release it anyway.
Coming soon!
Dec 27
JQuery Tutorial #1 :: Matching Elements
Tutorial #1: Matching Elements
----------------------------------------------------
Welcome to the tutorial! Today, we'll be learning about the wonders of JQuery and its ability to return a precisely-matched set of elements that match the requirements you easily pass through a function.
You may have seen the JQuery function before; if not, it looks like this: $().
The function is used for many, many different things, but today we'll be covering the art of using it to find elements.
The first thing to know is that JQuery requires a knowledge of the page you'll be modifying with javascript, as you'll be navigating the DOM (Document Object Model, basically the structure of HTML elements on a page). I suggest you either view source (ctrl+u in Firefox, page -> view source in IE) or download Firebug, a plugin for those with enough common sense to use a Mozilla product.
Firebug allows you to navigate the DOM with ease by either opening the interface and clicking around, or right clicking anywhere on the page and selecting "Inspect Element". You can also test javascript by pasting it in the console, or check on any AJAX requests that may be happening. Also part of the console are all generated errors just ready to be debugged.
WARNING: Do not read the above. You could just read this, which pretty much summarizes the three long sentences:
"If you haven't had firebugs babies yet, you really should get going."
Oops, too late. Let's move on then.
On to the JQuery!
Like I mentioned earlier, the JQuery function is $, the dollar sign. You call it like any javascript function:
$("argument 1")
There are also special circumstances involving an argument 2...which we will not get into, as after trudging through this junk I call a post, you'll need incentive to learn more later; the promise of an argument 2 should do well. =D
Argument 1, hereafter known as A1, is what we will be focusing on.
There are a couple of different ways to match elements in JQuery, I will be focusing on the main ones today.
#1, Tag Names
Tag names are good when you're trying to match ALL of a specific type of element in the <body>.
In the case that you're working with this:
- Code: HTML
<p>Hello</p>
<p>Zoop</p>
<div>This is a DIV</div>
And running this:
- Code:
$("p")
The code will return the first two elements. Can you tell me why? Yes, that IS why. Good job!
#2, Class Names/IDs
Class names are a great way to match multiple elements.
If you have this:
- Code: HTML
<p>We Apologize</p>
<p class="hello">For The</p>
<p class="hello">Inconvenience</p>
Running the following code:
- Code:
$(".hello")
Will return the last two <p> elements. Why? Because of the little dot in A1. This dot tells JQuery the following text is a class name.
This code works almost exactly the same way for ID matching, except that you use a # instead of a .
If you had:
- Code: HTML
<p id="zoop">Zoop</p>
<p>Zoop</p>
And ran:
- Code:
$("#zoop")
The first <p> element would have been returned. Get it? Got it? Good.
Now, in front of the # or the ., we can put a tag name. So if you only want span elements with the class 'holy', you'd use this:
- Code:
$("span.holy")
And if you only want table elements with the ID of 'hello', you'd use this:
- Code:
$("table#hello")
EXTRA CREDIT #3, Attribute Selectors
Here comes the tricky part. Suppose I have the following HTML document.
- Code: HTML
<p id="hello" title="first">
<span id="arrg" title="first">
</p>
<span id="zack" title="second">
<p id="zoop" alt="second">
<span id="blah" title="third">
</p>
Bear with me. Now, let's break up the following code.
- Code:
$("*[@title=first]")
$(" : We know what this does, it invokes JQuery.
* : Match all element tag names. This can be replaced with any element tag name, like P or Span or Div. By using P, you restrict the results to only P elements.
[@ : This tells JQuery that we're ATTRIBUTE MATCHING. An attribute is an option set by you pertaining to an element. The attribute name is the type of attribute it is (e.g. alt, title) and the attribute value is...the value of the attribute, like "third" or "first" or "second". The [@ means we're looking for a specific value of a specific attribute.
title=first]") : This tells JQuery we want to find all elements (because of the * from #2) that have an attribute named "title" set to the value of "first". Then it ends the function.
In its entirety, this code returns the first <p> element and the <span> within it, as those are the only elements on the page that have a title of "first". Now, had we changed the * to a P, it would have only returned the <p> element; similarly, had we changed it to a SPAN, it would have only returned the <span> element.
As for what you can do with these returned elements I speak of...well, you'll just have to wait.
Questions
Okay, at the end of each tutorial I post here, I'll write a small question or two that you can PM the answer[s] of to me. I will tell you if you're correct.
1. How do I fetch all P elements that have the attribute "colspan" set to 6?
2. How do I get all TD elements that have a class name of "fetch"?
Thanks for reading this lengthy tutorial. If you just skipped down to see how the story ended, you suck. =D
-Choco
5:24 PM Nov 7
