Tag: jquery

Fit Cufon texts to its container

Well, I ran into a situation that my design messed up when the cufon title width passed it’s container width, so I needed to lower the font-size automatically to make it fit into it’s container staying still an one-line title. And I wanted to share here. Here’s the function I wrote:

function Cufon_Fit_Title(element){
    var TotalWidth = 0;
    element.children().each(function(){
        TotalWidth += $(this).width();
    });
    if(TotalWidth > element.width()){
        element.css("font-size",(parseInt(element.css("font-size"))-1)+"px");
        element.css("padding-bottom",(parseInt(element.css("padding-bottom"))+1)+"px");
        Cufon.refresh();
        Cufon_Fit_Title(element);
    }else{
        return true;
    }
}

And here’s the important part of it, because jQuery’s $(document).ready() function won’t work well with Cufon texts (insert it anywhere in your document body – and don’t forget to change the selector):

Cufon.DOM.ready(function(){
      Cufon_Fit_Title($(".title"));
});

jQuery Scrolite Plugin

This plugin appends a vertical scrollbar to any element which you need to limit its dimensions like an image, a div or an ul list etc. This is the initial release of this plugin, so feel free to test it and give me some feedback so I can update this plugin with new improvements or with bug free versions. (horizontal scrollbar will be added later.)

It uses Brandon Aaron’s beautiful mousewheel plugin for mouse wheel scrolling support.

It can be configured with many ways as scrollbar width, color, edge radius, scrollbar bed width, color, edge radius, scroll panel width, scroll panel height, mouse scroll sensitivity.

File sizes are 7.36 kBytes for the development version, 4.08 kBytes for the minified version (as for alpha stage), and 206 bytes for the CSS file. (The zip file is big because of the included jQuery library and png image.)

Demo

You can see a working example here

Download

You can download the package here (Demo page included):

Installation

Include these lines into your script’s <head> declaration:

<script src="lib/jquery.min.js" type="text/javascript"></script><script src="lib/jquery.scrolite.min.js" type="text/javascript"></script><script src="lib/jquery.mousewheel.js" type="text/javascript"></script>

Usage

Then use this script with :

$(".scrollable").scrolite({
width:500,
height:300
});

It will create something like this:

Options

The plugin options are:

'barColor' : The color of the scrollbar handle
'bedColor' : The color of the scrollbar bed
'bedWidth' : Width of the scrollbar bed
'bedCornerRadius' : CSS3 border-radius of scrollbar bed
'barWidth' : Scrollbar handle width
'barCornerRadius' : CSS3 border-radius of scrollbar handle
'width' : scrollable area width
'height' : scrollable area height
'scrollSensitivity' : pixel scrolling value of one tick of the mousewheel
'bedMarginTop' : pixel margin for top of the scroller bed
'bedMarginBottom' : pixel margin for bottom of the scroller bed
'bedMarginLeft' : pixel margin for left of the scroller bed
'bedMarginRight' : pixel margin for right of the scroller bed

CSS Elements

You can change other CSS values by referring to these classes in your styles file:

'.scrolite' : refers to container of all the elements below
'.scrolite-bed' : refers to scrollbar bed element
'.scrolite-bar' : refers to scrollbar handle element
'.scrolite-container' : refers to the scrollable area wrapper

Public Functions

If you are using an AJAX script to load it’s contents from somewhere, you can refresh the scrollbar’s calculations by this function (included in the demo file):

$(".scrollable").data("scrolite").refresh()

The “.scrollable” refers to your initial element which you’ve added the scrollbar.

 

Saving passwords submitted by jQuery $.post function

Today I was struggling with “How can I make Chrome show the remember password form after I use a AJAX submit approach then after a success result redirect to a successful login page?” and it took my one hour to figure it out. I couldn’t find many solutions on the blogs that satisfied me on forums etc. so I wanted to write my own solution here.

First, assume you have a form like this:

<form id="loginform">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <input type="submit" value="Log in" />
</form>

and your AJAX login javascript etc..

And you would like to submit it to “login.php” (or login.aspx – doesn’t matter), after successful login you want to redirect to “main.php”, here’s the trick:

1. point your form’s action to “main.php” (there wouldn’t be any database checking or field validation just opening the post-login page)

2. move the onsubmit=”return Login” part to input type=submit as onclick=”” event.

3. then change your javascript code like this

    function Login(){
        $.post("login.php",$("#loginform").serialize(),function(data){
	    if(data=="OK"){ //I assume you're returning "OK" after login from login.php
		$("#loginform").submit();
	    }else{
		//write your error showing statements here
            }
        }
    }

this way, you’re actually setting a session or cookie in “login.php” to state that your user has been successfully logged on and you just need to check that session or cookie at “main.php” if the user really is logged in. If not, just redirect the user to the login form to prevent misleads to main.php.

pngfix WordPress Plugin

This plugin uses CSS technique to fix the png image transparency issue and jQuery to apply this script to all of png images shown in the page. The CSS code added by the script is :

.png {
background-image: expression(
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + (this.tagName==\'IMG\' ? this[\'src\'] : this.currentStyle[\'backgroundImage\'].split(\'\"\')[1]) + ")",
this.runtimeStyle.backgroundImage = "none",
this.src = "{plugindir}/pixel.gif",
this.width = this.style.width | this.clientWidth,
this.height = this.style.height | this.clientHeight
);
}';

And the jQuery code which applies this css to all of the png images :

$(document).ready(function(){
if(($.browser.msie)&(parseInt($.browser.version)<7)){
$("img[src$='.png']").each(function(){$(this).addClass("png");});
}
});

That’s all. The jQuery library is included in the plugin so you don’t need to modify anything.

Installation is simple. Just follow these steps :

  1. Upload ‘wp-pngfix’ directory to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Thats all. Go to any page which contains some png images with IE and check if there’s any errors.

This should fix them all except backgrounds now.

Download: Official WordPress plugin page : http://wordpress.org/extend/plugins/wp-pngfix/

Note: This type of fixes cause slight color changes to your png images with background color, so you may have to change some css.If you use images without inner backgrounds and only need to show the background transparent, forget that note 🙂

Last.fm RPS

Follow me on Twitter

GiottoPress by Enrique Chavez