Wednesday, July 9, 2008

Jquery

Jquery Photoshop Like Slider Plugin

Photoshop CS3 has introduced a very intuitive way to let users adjust fine tune required settings by just clicking on labels and dragging. Photoshop Like Slider plugin will bring that functionality to your html forms.

Flock

Browser Backgrounds

Browser Backgrounds is the new Firefox extension that lets you install backgrounds directly on your browser. Think about having your favorite music band or NBA player backgrounds right on your browser window, without leaving the browser and stopping the web experience even for one second.

Screenshots

Feeling Lucky Fixer

If you are the one searching a solution for frustrating OpenDNS problem which redirects your keywords that you type in location bar to an odd OpenDNS search page rather than to desired site, you are on the right track to fix the problem and to bring I'm Feeling Lucky searches back to your Firefox and Flock.

I have created a plug 'n play extension to fix the problem in seconds. No technical detail no dirty code. Just install it, restart your browser and continue your fun.

Google Redesigned

Google Redesigned is the new Firefox extension that completely redesigns popular Google services. The styles are created by Globex Designs company and the extension is released as a plug 'n play solution for the users to load and manage them easily. Google Redesigned is an Open Source project and I am leading development efforts of the extension.

Screenshots

Gmail RedesignedGmail RedesignedGmail RedesignedGmail Redesigned

Firefox

Browser Backgrounds

Browser Backgrounds is the new Firefox extension that lets you install backgrounds directly on your browser. Think about having your favorite music band or NBA player backgrounds right on your browser window, without leaving the browser and stopping the web experience even for one second.

Screenshots

Feeling Lucky Fixer

If you are the one searching a solution for frustrating OpenDNS problem which redirects your keywords that you type in address bar to an odd OpenDNS search page rather than to desired site, you are on the right track to fix the problem and to bring I'm Feeling Lucky searches back to your Firefox and Flock.

I have created a plug 'n play extension to fix the problem in seconds. No technical detail no dirty code. Just install it, restart your browser and continue your fun.

Google Redesigned

Google Redesigned is the new Firefox extension that completely redesigns popular Google services. The styles are created by Globex Designs company and the extension is released as a plug 'n play solution for the users to load and manage them easily. Google Redesigned is an Open Source project and I am leading development efforts of the extension.

Screenshots

Gmail RedesignedGmail RedesignedGmail RedesignedGmail Redesigned

Tuesday, July 8, 2008

Jquery Photoshop Like Slider Plugin

Photoshop CS3 has introduced a very intuitive way to let users adjust fine tune required settings by just clicking on labels and dragging. Photoshop Like Slider plugin will bring that functionality to your html forms.

To try, just click on the label saying Factor on above form and drag towards to right or left to easily adjust factor of pixel ratio.**

Above demonstration shows you one of the photoshop settings window brought to you as an html form and how photoshop users easily fine tune setting values by a handy photoshop slider . Now you can add this functionality to every form area that has to be adjusted numerically. Not just text input areas but also select tags support the usage of this plugin and sliders.

It is customizable, too. You can explicitly specify pixel intervals at which changes will occur, decrement and increment amounts (both integer and float values are valid), down limits and up limits for each form area that you called plugin method from.

To get the plugin click on the download button. See documentation page for more usage information and examples.

**This plugin isn't in final stage but in preview. Currently working on Firefox, Flock and Safari. Although I have struggled to make the plugin work on Opera and Internet Explorer they resisted to work. There should be a library based problem. I am searching on it. Anyway, if you are viewing the page on Opera or Internet Explorer you need to switch to FireFox, Safari or Flock to be able to see how the plugin works. Best viewed on Safari and Flock.

Documentation

Photoshop like slider plugin will implement its functionality on a jquery wrapper object just by calling the pls ( abbreviation of Photoshop Like Slider) method. It doesn't requeire any other plgin but jquery core. An example of plugin implementation is below.

<script type="text/javascript" src="jquery-1.2.5.js" ></script>
<script type="text/javascript" src="pls.js"></script>
<script type="text/javascript">

$(function {

 
$('.ff').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:120,
changetarget:$('.jj')
}
); 

}

);

</script>

Here is the working practical that above code creates. Click on the label saying Age and drag.
Let's detail the special code that adds photoshop slider to that form area.
$('.ff').pls({
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:120,
changetarget:$('.jj'),
}); 

According to above statement a photoshop slider will be added to very dom nodes that jqery wrapper contains itself. In oour case there s only one dom node inside the wrapper. For each 5 pixels' dragging to the right, the value will icnrease by 1 and to the left will decrease by again same amount. Form area value will not be less than 0 or more than 120. The form area that will receive the changes is the one that has class attribute whose value assigned as jj.

The more detailed descriptions for each object map properties are below with special example pages provided.

foreachpixel: This will ensure decrement and increment will occur at specific intervals. 1 px intervals are difficult to fine tune setting values. So specify 5 or 10 to let your users easily adjust the value. You might assign 100 or 200 but that is again makes the adjusting process cumbersome.

changevalue: This will increase or decrease form area value on specific intervals that you specified at foreachpixel property. An integer e.g. 5000 or a float such as 0.0015 or 3.5 can be assigned.

downlimit: will determine down limit of the value range that form area might have. Negative values are also valid. Just make sure that down limit isn't bigger than up limit.

uplimit: will determine the up limit of the value that your slider can create for the form area.

changetarget: the target dom node that you wish to change its value by sliding.

Whenever you call pls method on a jquery wrapper all dependencies will be created from adding css cursors to drag events automatically. Don't forget to upload your cursor images to your server or an image hosting service and update the css file that comes with the plugin package.

In most cases the jquery wrapper that you call pls method from will contain the text input tags. But you can also assign these photoshop sliders to select tags.

Refer to download link to download plugin package. If you have any question to ask don't hesitate to post as commnet.

For Each Pixel



Sign-up form

Click on the labels and drag to adjust values



Code for label 0:
$('#foreachpixellabel0').pls(
{
foreachpixel:1,
changevalue:1,
downlimit:0,
uplimit:5000,
changetarget:$('#foreachpixeltextfield0'),
}
);
Code for label 1:
$('#foreachpixellabel1').pls(
{
foreachpixel:50,
changevalue:1,
downlimit:0,
uplimit:5000,
changetarget:$('#foreachpixeltextfield1'),
}
);
Code for label 2:
$('#foreachpixellabel2').pls(
{
foreachpixel:150,
changevalue:1,
downlimit:0,
uplimit:5000,
changetarget:$('#foreachpixeltextfield2'),
}
);

For each pixel property will specify the update frequency of value change on the very form node that you assigned from changetarget while creating statement. Higher the value lower the frequency will be.

Change Value



Sign-up form

Click on the labels and drag to adjust values



Code for label 0:
$('#valuechangelabel0').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:0,
uplimit:5000,
changetarget:$('#valuechangetextfield0'),
}
);
Code for label 1:
$('#valuechangelabel1').pls(
{
foreachpixel:5,
changevalue:150,
downlimit:2000,
uplimit:50000,
changetarget:$('#valuechangetextfield1'),
}
);
Code for label 2:
$('#valuechangelabel2').pls(
{
foreachpixel:5,
changevalue:50000,
downlimit:250000,
uplimit:10000000,
changetarget:$('#valuechangetextfield2'),
}
);

Value change will add to the value while moving right and will substract while mowing towards left. An integer and float can be assigned but not negative ones.

Down Limit



Sign-up form

Click on the labels and drag to adjust values



Code for label 0:
$('#downlimitlabel0').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:-800,
uplimit:-500,
changetarget:$('#downlimittextfield0'),
}
);
Code for label 1:
$('#downlimitlabel1').pls(
{
foreachpixel:5,
changevalue:100,
downlimit:0,
uplimit:5000,
changetarget:$('#downlimittextfield1'),
}
);
Code for label 2:
$('#downlimitlabel2').pls(
{
foreachpixel:5,
changevalue:100,
downlimit:50000,
uplimit:60000,
changetarget:$('#downlimittextfield2'),
}
);

For down limit you can assign integers and floats in negative or positive range. Just make sure that down limit value isn't bigger than up limit.

Up Limit



Sign-up form

Click on the labels and drag to adjust values



Code for label 0:
$('#uplimitlabel0').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:-800,
uplimit:-500,
changetarget:$('#uplimittextfield0'),
}
);
Code for label 1:
$('#uplimitlabel1').pls(
{
foreachpixel:5,
changevalue:100,
downlimit:0,
uplimit:5000,
changetarget:$('#uplimittextfield1'),
}
);
Code for label 2:
$('#uplimitlabel2').pls(
{
foreachpixel:5,
changevalue:100,
downlimit:50000,
uplimit:60000,
changetarget:$('#uplimittextfield2'),
}
);

Up limit property can accept integer or floats in positive and negative. Just make sure that it isn't less than down limit value when you create the plugin statement.

Change Target



Sign-up form

Click on the labels and drag to adjust values



Code for First Form:
$(".label1").pls(
{
foreachpixel:10,
changevalue:50,
downlimit:100,
uplimit:1000,
changetarget:$(".input1"),
}
);


Sign-up form

This is the basic look of my form without table



Code for First Form:
$(".label2").pls(
{
foreachpixel:10,
changevalue:50,
downlimit:100,
uplimit:1000,
changetarget:$(".input2"),
}
);


$(".label2:eq(2)").pls(
{
foreachpixel:1,
changevalue:500,
downlimit:100,
uplimit:100000,
changetarget:$(".input2:eq(2)"),
}
);
Change target will specify nodes that the sliding process will change their values. You will pass a logical jquery wrapper according to your form and your needs. The most important points to care about are the wrapper length and the changevalue wrapper length must be equal and you shouldn't pass anything rather than a jquery wrapper to changevalue property. As shown in second form example, you may overwrite the property values by specifying another statement for the desired form labels.

Select Tag



Sign-up form

Click on the labels and drag to choose appropriate options



Code for Job Title:
$('#jobtitlelabel').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:1,
changetarget:$('select[name=jobtitleselect]'),
}
);
Code for Month:
$('#monthlabel').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:1,
changetarget:$('select[name=monthlabel]'),
}
);
Code for State:
$('#statelabel').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:1,
changetarget:$('select[name=stateselect]'),
}
);
Code for Country:
$('#countrylabel').pls(
{
foreachpixel:5,
changevalue:1,
downlimit:1,
uplimit:1,
changetarget:$('select[name=countryselect]'),
}
);
As other text input nodes you will pass target select tags in a jquery wrapper to changevalue property. When implemented, the changevalue, downlimit and uplimit property values aren't evaluated by the plugin. Because, for a select tag down limit always is zero, up limit is total option tags length that select tag contains and changevalue equals to 1 to select option tags one by one. These are claculated at run time. So you can pass 1 to downlimit and uplimit properties but it willn't have any effect on the process of plugin.

Thursday, July 3, 2008

I'm Feeling Lucky Problem Fix for OpenDNS users

OpenDNS is great service as providing safer and faster surfing experience for web users. However when it comes, it brings a big headache for Firefox and Flock users. You can't use I'm Feeling Lucky searches in address bar any more after registering OpenDNS. I have created an extension that will fix this problem in seconds for Firefox and Flock.

Install the extension, restart your browser and bring I'm Feeling Lucky searches back to your Firefox and Flock.

Hope it helps. Enjoy!

Related Posts:

Feeling Lucky Fixer

If you are the one searching a solution for frustrating OpenDNS problem which redirects your keywords that you type in location bar to an odd OpenDNS search page rather than to desired site, you are on the right track to fix the problem and to bring I'm Feeling Lucky searches back to your Firefox and Flock.

I have created a plug 'n play extension to fix the problem in seconds. No technical detail no dirty code. Just install it, restart your browser and continue your fun.

You may also want to install the extension from official Firefox addon site Feeling Lucky Fixer page (https://addons.mozilla.org/en-US/firefox/addon/7993).

Compatible with both Firefox and Flock.

Hope it helps. Enjoy!

Related Posts:

Wednesday, July 2, 2008

Congratulations!

You have luckily fixed I'm Feeling Lucky problem of OpenDNS. Now it is time to give a try.

Type facebook in location bar (or address bar) and press enter.

If it helped please send a comment.

Related Posts:

How to Use Guide

Thanks for using Feeling Lucky Fixer. Other than installing the extension, you don't need anything more to fix the address bar problem of OpenDNS. Extension will bring back the default keyword browsing usage to Firefox. All you need to use extension is typing a keyword in location bar that describes your visit site best (e.g. yahoo mail) and pressing Enter.

In case another extension spoilt your settings (this will be actually a rare case) you may have still problems about keyword browsing. If so, you can send your case description as comment to help me provide you extension support.

I am a college student who tries to afford his life and college expenses by coding. I am on the way to collect next year's tuition. If you help me on that I will be really grateful.

Hope the extension helps. Enjoy!

Related Posts: