If you’re coding a widget which is not included in the page via an iframe you have to cope with a lot of different styles that are given by the css of the page. Using a lot of inline styles for your elements is most of the time not an option, because you need some easy injectable html-code for the users. So styling your widget with JavaScript is the best option. And therefore you will maybe like to reset the css for your elements. And that’s exactly what the beResetCSS-JQuery-Plugin does.

Download

Download BeResetCSS v0.1 as zip

Usage

$(document).ready(function(){
	$("YourElement").beResetCSS();
});

The reset-CSS is based on the suggestion from meyerweb.

Update / Changelog

09.07.29 v0.11

• fixed overlow:hidden bug in IE6 & 7 when container has position:absolute;
• changed method to calculate relative mouse position to work in IE
• chaining of mouseenter, mouseleave and mousemove didn’t work in IE
• Plugin now works in Opera >= 9, Firefox >= 2, IE >= 7 & Chrome

Demo

To view this script in action simply hover of the following image:

Download

Download BeZoom v0.11 as zip

Usage

$(document).ready(function(){
	$(".zoom").bezoom();
});

HTML

The plugins works best with images with the same proportions.

<a href="img_big.jpg" class="zoom" title="Your Title">
    <img src="img_small.jpg">
</a>

Options

It’s not neccessary to link directly to the big image. You can also you the rel-Attribute for the preview-image or any other attribute.

$(document).ready(function(){
	var options = {imgSource = 'rel'};
	$(".zoom").bezoom();
});

<a href="some_page.html" rel="img_big.jpg" class="zoom" title="Your Title">
    <img src="img_small.jpg">
</a>

Options Overview

• Option
  Default Value
  Description
• marginLeft
  10
  left side margin
• identifier
  bezoom
  id that is used internally for the bezoom plugin; should not need to be changed as long as you don’t use an “bezoom”-id on your own page
• height
  200
  height of preview-container; height of title-container doesn’t count
• width
  200
  width of preview-container
• titleSource
  title
  Attribute that contains the title
• imgSource
  href
  Attribute that contains the url of the preview-image
• bgColor
  #5398EE
  background-color of title
• color
  #ffffff
  font-color of title
• size
  0.8em
  font-size of title; you can also use px instead of em

Alternatives

With jqzoom there is a well known alternative to BeZoom, I used some time. But jqzoom in my opinion is much to complicated and confusing. Changing something in this 1000 liner isn’t fun at all. After all jqzoom seems to be a mashup of prototip and lightview.

So I created BeZoom to suit my personal needs. It’s light and it’s easy to use.

If you are using BeZoom let me know it and I’m going to develop some more features for it. If you find any bugs I’d appreciate a short comment so I can fix it.

The plugin is based on the idea of Dynamic SEO.

What does the Dynamic SEO Title Wordpress Plugin plugin do?

The plugin automatically optimizes your site over time based on actual values and without guessing. It helps you to get your site as close to perfectly optimized as possible without knowing and having a final result. It adjusts your pages if required.

If there is one on-page important ranking factor that every SEO expert accepts as true, it’s the title-tag of your pages. And it’s not only a ranking factor, it’s even a factor for your click through rates in the serps, because it also appears in the listing.

When you start optimizing your page you start with keyword research. Let’s take a golfing site as the example: golfing-equipment.net What’s the best title for your page about golf clubs? Is it golf clubs, golf club, golfing clubs, golfing club or even golfing equipment? You can use a keyword tool like google.com/insights/search to find out which qould bring in most traffic. But a) this values are estimated and even more important b) you don’t know if you can rank for this phrase and where you currently would get most visitors from.
This is where the Dynamic SEO Title Wordpress Plugin comes into play: You create the page with the “best” title and the plugin adjusts it over time based on the visitors and their search queries.

Installation

1. 1. Download the plugin
2. 2. Extract and copy the dynamicseotitle.php file into your wp-content/plugins/ folder
3. 3. Activate the plugin in your Admin area
4. 4. You need something like the following code in your header:

   <title><?php wp_title(''); ?><?php if(wp_title('', false)) { ?> |
   <?php } ?><?php bloginfo('name'); ?></title>

   The important part is the wp_title, which is used as hook for the plugin.

5. 5. DONE!

Download

Current version: 0.1
Download v0.1 as zip
Download v0.1 as rar

Even the customization of the plugin is still missing you can already use the Dynamic SEO Title Wordpress Plugin for your wordpress blog.

TODO

Customization of separator, title length, keywords to use, complete title replacement

Having some wishes for this or another Wordpress-Plugin? Please let me know in the comments!

Custom Wordpress Plugin

Need a custom Wordpress Plugin? Contact me with the form on the left!