Hide outline border on A tag focus

Thursday, October 15, 2009

Filed under: HTML and CSS, jQuery, javascript, web-development — Tags: , , , , — Dmitri @ 09:01

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar toyota

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});

Notify bar

Wednesday, May 27, 2009

Filed under: PHP, jQuery, javascript, web-development — Tags: , , , — Dmitri @ 12:11

‘Notify Bar’ plugin

Simple plugin (basically it’s not a plugin, but widget) to show notify bar
(like on Twitter’s webpage).
It’s very simple to use:

      
$(function () {
  $.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  });
});
      
    

and to your html page stylesheet:

<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  />

$.notifyBar can pass next parameters:

Parameter Description Type Default
html What text will be inside bar, can be HTML String [optional] “Your message here”
delay How long bar will be delayed, doesn’t count animation time. Integer [optional] 2000
animationSpeed How long this bar will be slided up and down String | Integer [optional] “normal”
jqObject Own jquery object for notify bar jQuery object [optional] null
cls You can set own CSS class for ‘Notify bar’. There is too premade clasess “error” and “success” String

See demonstration or download source.

Navigation with arrows (jQuery)

Wednesday, November 5, 2008

Filed under: jQuery, javascript, web-development — Tags: , , , — Dmitri @ 12:25

I really like when gallery or application with pagination uses navigation with arrow keys. Like here.

Nice and fast navigation I think. So you can read the main article about this navigation on Lebedev’s site (or in Russian). This features is at least 3 years old and is used so rarely, but it’s so useful and makes users happy.

So I have written a tiny plugin for jQuery (based on the Andrey’s code) for this navigation. You can see my demo and price how useful it is.

Here is the stuff and how to use it

Horizontal arcade shooter in JavaScript

Wednesday, October 22, 2008

Filed under: web-development — Tags: , , — Dmitri @ 12:30

I am always interested in games with JavaScript. I made an experiment — wrote the arcade shooter in JavaScript.

I’m not a game programmer, but anyway JavaScript seems to be quite slow for games. So you can check this space arcade shooter. It still contains a lot of bugs (especially in IE7) and can hang up your browser, so beware.

Space shooter in JavaScript
Space shooter screenshot

I do not support IE6 or earlier in my projects anymore.

The power of jQuery

Friday, October 17, 2008

Filed under: web-development, work — Tags: — Dmitri @ 10:01

Recently we have updated Mosaic’s site and we used for catalog nice jQuery magnify plugin.

Check this amazing magnify stuff.

When jQuery was released became possible to do amazing stuff without usign Flash.
As for me I’m not a big fan of the Flash and I do as much as possible on JavaScript with jQuery library.

Read and learn at jquery.com.

© 2008 Dmitri Smirnov