Tuesday, December 10, 2013

Broken Image handling in jsp/html

Instead of showing a blank image, the best thing is to hide the img element itself from html page. 
This can be done using following script:-

<script>
// Hide img tag
$("img").error(function(){ $(this).hide(); });
</script>

In case you want to show a blank image jpg, this can be achieved using following script:

<script>
// Replace missing image $('img').error(function(){ $(this).attr('src', 'missing.jpg'); });
</script>






Wednesday, December 4, 2013

Chrome's Developer Tool - Handy when debugging your web application for CSS issues.

Wanted to share the benefits of using Chrome's developer tool. I know most of you would be using it for lot of debugging and profiling. We can also use Chrome to see all our incorrectly defined CSS properties on our website. Just go to the following icon on your Chrome and select Developers Tools under Tools.


Once you open your developers tool console, it appears at the bottom of your browser.

Now you can view all your invalid CSS on a web page when you open that webpage on the browser and view "Resource" section of the developers Tool. This will list all invalid CSS properties defined on the page and you can go to your code and remove / Change them.