The BlinkeyPoo jQuery plugin mimics the effect that the <blink> tag used to provide. Esentially if you need an element to blink, flash, pulse, etc. This is your plugin.
jQuery UI has an effect called pulsate that I think may do the same thing but this plugin is very tiny, easy to modify, and even easier to use.
Options
You can set how many times you want the element to blink per second.
Place the following code into the head of your document.
While working on a project I was googling how firebug achieves its element selection effect. I found some examples but ended up creating my own. I experimented for a long time with different methods before writing my own, and this works the best and is the simplest that I've seen.
The css for the selection highlight class:
.hoverhighlight{
/*outline:1px solid #2381d0;*/ /* You can use either an outline or a box-shadow */
box-shadow:0 0 3px 3px #2381d0;
-moz-shadow:0 0 3px 3px #2381d0;
-webkit-box-shadow:0 0 3px 3px #2381d0;
}
This is a very simplified version of the code, but it works suprisingly well. It requires jquery. If the element you are hovering over has a parent with no overflow the outline/highlight may be obscured. There are ways around this issue, but not Im not covering it in this post.
$("body").on("mouseover", function(event){
$(".hoverhighlight").removeClass("hoverhighlight");
$(event.target).addClass("hoverhighlight");
});Wow much simpler than you'd think! (IE won't work with box shadow.)
The lazyKarl jQuery plugin loads a webpage's images once they are within the user's viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads. jQuery plugins are usually not effective until the Dom is finished loading and only after all the images on the page have already loaded.
The Lazy Karl plugin works around this issue with a less than perfect approach, but none the less a functional one. By leaving the src attribute empty or out of the img tag completely, and placing the path to your image inside the rel attribute, images will never load until they are within the user's viewport at DOM ready and on scroll event. A perfect solution would utilize server side scripts like php, but lazyKarl works great for images.
Place the following code into the head of your document
The following code is an example of how to write the html. Just wrap the list of images you wish to load lazily with the element that you declared lazykarl on in the head.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
Make sure that you place path from standard src tag value in the rel tag. This is important to how LazyKarl v1 works correctly across multiple browsers. You do not have add the src attribute to the image tag at all.