There is cool JavaScript trick that helps you catch broken images. You know that when the image doesn’t exist, the http path to the image returns 404 or the path is wrong, the browser doesn’t display nothing in the most cases. As MSIE is always different it displays an ugly icon saying that there is not an image to load
and that is really bad!
Simply add an onerror handler on the IMG tag
<img src="http://..../broken_url.jpg" onerror="this.src='path_to_default_image'" /> |
So far we were used to expect something like this from our mobile phones with built-in GPS support. Every image or video clip then was automatically “tagged” with latitude & longitude geo data. With HTML5 coming features we discover new cool things we can do with our browsers. Such cool thing is the geolocation.
As you may guess not every browser is supporting these HTML5 features, but out in the web there is quite good collection of tables comparing different browsers and their support level.
This – as expected is a browser that supports this geo tagging. First of all you’ve to allow your browser to use your geo coordinates, as this can be private information.
Once you do it you can access the geo coordinates, which by the way are quite accurate, with JavaScript.
What happens if you don’t want to share your position? Actually I ran in this situation and as my application waited the coordinates – it was completely blocked.
The examples doesn’t show you something special. They simply describe how to get the coordinates, but doesn’t tell you what if the user doesn’t click on the “share” button.
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(getPos); } ... function getPos(position) { position.coords.latitude; position.coords.longitude; } |
Of course getPos() can be simply an anonymous function:
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { position.coords.latitude; position.coords.longitude; }); } |
Only the Firefox documentation tells you how to handle errors, simply add one more parameter – callback, for getCurrentPosition() method:
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(getPos, onError); } ... function getPos(position) { position.coords.latitude; position.coords.longitude; } function onError() { // handle error } |
Now you know where you don’t want to be.
Yes! It’s really really fast, and it’s far quicker than the quicksort algorithm, which is considered as the fastest sorting algorithm in practice. However how it’s possible to be faster than the quicksort, which is the fastest algorithm?! Is that true? Actually it’s true, but only in few cases. It works with integers, you’ve to know the first and the last element from that set and you’ve to be sure that every element is unique
Imagine you’ve a set of numbers all of them greater than 1 and lesser than 1000. Of course you’re not suppose to have all of the integers between 1 and 1000, but only few of them – think of 500 numbers between 1 and 1000! Here’s important to note – that this is only an example, you can have far more than only few numbers between 1 and 1000 – what about the numbers between 1 and 1,000,000 – this is a big set, isn’t it.
The question is – if there are so many constraints, why should I use that algorithm instead of quicksort, or another sorting algorithm, that works with everything. The answer is clear – yes, you’d prefer quicksort if you’ve to sort some arbitrary data, but when it comes to integers, and you’ve, let’s say, 1,000,000 integers, my advice is – use this algorithm!
First we have an unsorted array, but we know the minimum and maximum of the set.
On the first pass initialize an empty array with as many elements, as they are between the first and the last element of the set – for a set between 1 and 1000 – that will be an array with 1000 elements – each of which will be a zero in the beginning.
Than loop trough the set and for every element in the set – you should put a 1 on it’s place
Now we have an array of 0 and 1.
After the first pass, you’d guess what you’ve to do – loop trough the second array and print the keys of the elements different from 0 – those that are 1.
Now the array is sorted!
var a = [34, 203, 3, 746, 200, 984, 198, 764]; function setSort(arr) { var t = [], len = arr.length; for (var i = 0; i < 1000; i++) { t[i] = 0; } for (i = 0; i < len; i++) { t[arr[i]] = 1; } for (i = 0; i < 1000; i++) { if (1 == t[i]) { console.log(i); } } } setSort(a); |
Now that you’ve seen that algorithm, perhaps you’d guess that it’s no so difficult to change from integers to any other set, and once again I should say that in many cases this is the best algorithm for sorting! Very often quicksort is preferred, but not always there isn’t something faster!
There is a view helper that can inject a head or inline script into your code.
Simply by putting some JavaScript code into the view script wont do the job, because the .phtml file is grabbed and parsed by the Zend Framework and thus the code there wont be parsed as JavaScript and it wont be executed as well by the browser.
is to put some place holder into the layout .phtml file and than from the controller’s action you can assign some JS code:
// layout.phtml <?php ... echo $this->layout()->scriptTags; ... |
<?php class IndexController extends Zend_Controller_Action { public function indexAction() { $this->view->layout()->scriptTags = '<script src="my.js"></script>'; } } |
Although the first solution is correct it’s not the most clearest way, because you put the JavaScript code into the PHP, and this sooner or later becomes a mess.
<?php class IndexController extends Zend_Controller_Action { public function indexAction() { $this->view->layout()->scriptTags = '<script src="my.js"></script>'; . '<script>alert("here\'s my" + "test")</script>'; } } |
The IDE is not highlighting the code, and you’ve to deal with too many quotes, which is bad! There is a better solution however – the inline script:
// script tags /* @var $scripts Zend_View_Helper_InlineScript */ $scripts = $this->view->inlineScript(); $scripts->appendFile('my.js'); |
Yeah, the best solution is something even better than the second one. Although the solution I’ve just mentioned is fine for including JS files, when you’ve to add some JS code you’ll have to put it again into the PHP.
$msg = 'some dynamically generated message'; // script tags /* @var $scripts Zend_View_Helper_InlineScript */ $scripts = $this->view->inlineScript(); $scripts->appendFile('my.js'); $scripts->appendScript('alert("' . $msg . '")'); |
If there’s no relation between JavaScript and PHP you can simply put all this code into a separate .js file and load it from there. This is by the way the best solution because the file is cached by the browser, if the cache is enabled. But most of the time you perhaps have to send some variables from PHP to the JavaScript code.
It would be perfect if you had some kind of a variable placeholders – exactly as you have it in the Zend Framework’s view scripts!
This is completely possible – just forget about the default view – it renders the view script and it’s bind to the /views/scripts folder. You can make another, completely new, view instead! Here’s some source:
$view = new Zend_View(); $view->setBasePath('path_to_the_js_folder'); $view->msg = 'Some dynamically generated message'; // script tags /* @var $scripts Zend_View_Helper_InlineScript */ $scripts = $this->view->inlineScript(); $scripts->appendFile('my.js'); $scripts->appendScript($view->render('inline.js')); |
Thus now in the JS file you can have some placeholders!
// inline.js // some js code // ... alert('<?php echo $this->msg ?>'); |
First of all let me explain what is the task. If there’s a select menu with several options, each of which are with a given value attribute, the task is to get the text into the option tag, and not that of the value attribute.
In that scenario let’s assume that we have the following HTML:
<select id="my-select"> <option value="1">value 1</option> <option value="2">value 2</option> </select> |
Note that in the official jQuery doc page, the selector is described in the same context, but with a different markup:
<select id="my-select"> <option>value 1</option> <option>value 2</option> </select> |
than the jQuery snippet looks like that:
$(document).ready(function() { $("#my-select").change(function() { alert($(this).val()); }); }); |
Here’s interesting to note that there’s no value attribute set to the options, thus the selection of an element is correct and the returned value is correct. The problem is that this code doesn’t work correctly once you’ve a different value attribute, from the value enclosed into the option tag. In our case we’ve the markup shown on the first code snippet and we’d like to get the “value 2” string instead of “2”.
<select id="my-select"> <option value="1">value 1</option> <option value="2">value 2</option> </select> |
$(document).ready(function() { $("#my-select").change(function() { alert($(this).val()); }); }); |
Finally the solution, is pretty simple and clear, but this time is not to so “native” and it’s definitely something you couldn’t expect! The only thing you’ve to do is to change the selector!
$(document).ready(function() { $("#my-select).change(function() { alert($('#my-select option:selected').html()); }); }); |