jQuery : Error: $(document).ready is not a function — Sure!
October 19, 2008 by methode
Filed under JavaScript
This error message appears only if another framework is in conflict with the almighty jQuery. For example You try to use Prototype/Scriptaculous for Lightbox but you also need Thickbox for something else, which requires jQuery.
Since no framework is compatible with another framework, you have to find a workaround to get things working.
And here comes jQuery in your help. The jQuery team was smart enough to realize that there will be conflicts between frameworks, especially the $ will cause massive headaches since it’s the basic of each framework. $ is the shortcut for the word “jQuery”
So, they invented jQuery.noConflict();. This will let you to replace the $ with the word jQuery, in all your code. So, when you need to call this: $(document).ready(function(){ … You simply replace the $ as I said above: jQuery(document).ready(function(){ …, don’t forget to call jQuery.noConflict(); before this.
So, when you use the noConflict() function, your code should look something like this:
<head> </head>
World saved again, now you can use 2 frameworks together.
Vertical text with Imagick
Creating vertical text over an image is extremely simple with Imagick. The text created with Imagick can be used for example as a watermark over an image or any other thing you can think of.
It’s very important to understand that the created object is just an image and that you can not have any text before the below code block and which will be sent to browser output. This includes white-space, page brake or any type of text.
The vertical text is obtained with annotateImage() since it’s 4th parameter of the function is to set the degree of the text. 0 degrees is horizontal text, 90 degrees is vertical text, that simple.
Let’s see the code:
$image = new Imagick();
$draw = new ImagickDraw();
$pixel = new ImagickPixel( 'white' );
$image->newImage(25, 150, $pixel);
$draw->setFontSize( 20 );
$image->annotateImage($draw, 0, 0, 90, 'Devoracles.com');
$image->setImageFormat('png');
header('Content-type: image/png');
echo $image;
The above’s result is what you see below.
As you see it’s extremely simple to create vertical text with Imagick, either if you’re a novice or a pro.
If you have any related question, feel free to ask.
Managing PDF files with Imagick
Many doesn’t know, but with Imagick anyone can manage PDF files. As far as I know you can’t create one, but this function can be extremely useful to create a screenshot of a PDF file on the server’s side.
First of all, the PDF file you just created has to be loaded in Imagick, either the whole document or only one page from it, then you can output it as any type of image, let’s see how to do it:
$pdf = new imagick( 'your.pdf' ); $pdf->setImageFormat( "gif" ); header( "Content-Type: image/gif" ); echo $pdf;
Be aware that you can not output anything else before this code block neither a whitespace or text. Nothing. Also, you can specify any image format you wish as Imagick can output almost any image format.
Look at the above code block. The first line says:
$pdf = new imagick( 'your.pdf' );
If you would like to select a specific page to output from the PDF, just specify the page number as it follows:
/*This would select the cover page: */ $pdf = new imagick( 'your.pdf[0]' ); /*and this the actual 1st page: */ $pdf = new imagick( 'your.pdf[1]' );
Now you should get the idea, if you don’t, feel free to question me.
The last thing I show you is how to create a thumbnail of a PDF. There is no too much difference, the only one is that before outputting the image we resize it using thumbnailImage():
$pdf = new imagick( 'your.pdf' ); $pdf->setImageFormat( "gif" ); $im->thumbnailImage( 200, NULL ); header( "Content-Type: image/gif" ); echo $pdf;
I used ‘NULL’ to preserve the image’s aspect ratio.
As always, if anything is unclear, feel free to question me.
Conditions in HTML
October 9, 2008 by methode
Filed under Development
If you are a developer, you know that in ANY programming language there are conditions which can be used to decide what action to perform if a given criteria applies. This applies to all programming languages, Javascript, ASP, PHP, C, bash, and even HTML. Not sure though if I can say HTL is a programming language.
Anyway, let’s see what HTML conditions are used for and how to work with them.
First, let’s note that Internet Explorer is the *only* browser which can work with them. Not sure why, but only the guys from Microsoft thought HTML should be a bit more complicated and more useful.
The markup is extremely simple, I could say rudimentary: you know HTML comments. When you place something between the <!– –>, that’s a comment. It will appear in the source but browsers will not output or execute it. But Internet Explorer tries to execute it.
To start a HTML condition, you have to use the same markup, but spice up with a condition, like this:
<!–[if something]>
Foo bar text
<![endif]–>
In the above case if the condition is applicable, the the paragraph from the example will be shown in the source. Why only in the source? Because there are two types of conditional comments: first what you saw above, it’s named hidden conditional comment and the second which is, well, revealed conditional comment. Yeah, Microsoft has unimaginable imagination.
A revealed conditional comment would look like this:
<![if something]>
Foo bar text
<![endif]>
Notice that I didn’t put the hyphens in in front of the if statement, nor to the end of the block.
What can you use this new knowledge for? Well, almost nothing. Since only IE knows what to do with these comments, it can be used for browser detection, to load separate stylesheets for different browsers, or such. More than that, even with IE you hit the wall, since the only valid feature is the “IE” word. I explain this with a code:
<![if IE 7]> <link rel=”stylesheet.css” media=”all” href=’stylesheet.css” /> <![endif]>
The above example will load a stylesheet if the browser is IE 7, or you could use the following code:
<![if IE]> <link rel=”stylesheet.css” media=”all” href=’stylesheet.css” /> <![endif]>
to load a stylesheet if the browser is some kind of Internet Explorer.
As You see I always used only the IE word in my example, and that’s why I said that this code has this only feature. You can’t use anything else, like [if NS] or [if DO] only and only [if IE ...].
Should you learn this? I think you shouldn’t. We have much better things to do than to learn something which is absolutely not crossbrowser.
Then why did I write this post? Because next time you’ll see an if statement in a HTML comment, at least you will know what it is.
XHTML Strict incompatible with target attribute: FALSE
September 21, 2008 by methode
Filed under Development, JavaScript
Clients… I had to create a website… XHTML Strict… AND opening all links in a new tab/window.
No probs, there’s the target attribute of the anchor elements! But not in XHTML Strict!
W3 states clearly that target attributes should be forgotten and avoided. Why, I have no idea, but if you want to create XHTML Strict pages, you can forget about the target attribute.
So let’s hack with Javascript this rule! Rules are set to have something to brake, that’s what we’ll do now. This is very simple code, basically a single function which loops through the document and adds to all the anchor elements the “target=’_blank’” attribute. As it’s created with Javascript, the XHTML validators should not observe. I think they won’t observe, so first check it out somewhere.
So, the Javascript code to open links in new window/tab while maintaining the XHTML Strict compliance is:
function open_in_new_tab() {
if (!document.getElementsByTagName){
return;
/*If the browser doesn't support DOM, do nothing*/
}
var anchors = document.getElementsByTagName("a");
/*Select all the 'a' tags, anchors*/
for (var i=0; i<anchors.length; i++) {
var links = anchors[i];
if (links.getAttribute("href")){
/*every anchor with 'href' attribute will get a new attribute,
only those with 'href' attribute set because we don't want
to mess with the section anchors, for example*/
links.target = "_blank";
}
}
}
window.onload = open_in_new_tab;
/*finally load the function on page load*/
And the word is saved again.
