Sunday, July 18, 2010

Jquery on blogspot

Hi,i thing you have implement so many jquery features on your application , but have you try this on your blogger ? nb not yet .. then try this code hope you like it.

click on the below button it will show you the toggle .




And Here is the code , just add this on your blogger and see the magic.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script type="text/javascript"> $(function(){$("#BtnToggle").click(function(){$('#divTogg').toggle(1000);});});</script>

<style type="text/css"> #divTogg{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>

<div id="dvt"> Hi, its working on Blogger too.</div>
<button id="BtnToggle"> Click Me</button>


This is your css part you can design it accordingly.

  • <style type="text/css">

  • #divTogg

  • {

  • width: 200px;

  • height: 100px;

  • border: solid 1px black;

  • background-color:LightGrey;

  • text-align:center;

  • display:none;

  • }

  • </style>



hope you like this ,if you have like this plz comment on it.

Friday, May 7, 2010

New looks on Google

Yesterday i open a Google for searching and i noticed that something get change with the google site, as you can see the look and feel of the search section is bit change , as you can say the font is also get changed , it one kind of visual look getting and also looking for nice as comparing with the previous one.

Wht's get Changed and Wht's New added?
New thing added is contextually relevant, left side Navigation on a Page. It will shows you the most popular and relevant search tools to refine your search query. it contain Google Squarted, Universal Search . that get combine on the left hand side Search Panel.

on Universal Search you can easily find the most relevant search . The top section of left hand side panel that suggest you the most genres result for the search and it will also give you the good way to easily switch to the different types of results . here you can find the opetion " Everythings" which will gives you can result on what exactly your looking for. on Google Squared ( now its on Google Lab) which will help you to compare the entites . it builds on the Google Squared Technology it shows you the related result on your search query. so you can easily explore the result on other related topics also.

As you can see the color palette and logo is also get change which will keep the Goolge page as in modern look you can also see more on how the new design get change on this video.



As talking about Google Logo, you can easily see the Difference on it, new design logo is lighter than previous one and also a simple, the logo design get done on the new icons and hundreds of tiny design, as you can clearly see the previous logo "g" has shadow image and how its clear it get removing the blue color shadowing effect.


One more thing you can see on the Bottom section Search it also get change with the removing of Blue effects also.


there are few more little changes are going on , and its all in process you can see that on Google steps by step.

Friday, April 30, 2010

cache-about-blank

i m using Fx( FireFox) Browser , and i have install google toolbar on it , one day i have just try this, just open a new tab and just for quracity i have click on "Google Pagespeed" icon.it get open a google search page with that topic on " cache-about-blank" and decided to write a topic on it. i know u also come like this way.

now wht is this cache:about:blank and mozilla .

basically if you click on pagerank button it will show you cache version of site but if your not opening any site and still click on that button then it goes to google search option with "about:blank". On mozilla there is many setting are there , if u simply open a browser and type about:config on the url it will shows you the various setting on the browser. there are lot many setting are there on all type connection, browser, server, service , so on
don't change anything without any proper knowledge, other wise it get save and may be some problem get arise later on.

but still if your interested to do so you can refer this mozillatips.com. or want more on how to customize the interface just refer this customize the interface . both are very much interesting to know more on Fx

if your using IE then
if you open this on IE then may be on latest version you will never get such type if page on about:blank ,

just try it , you will enjoy it.

Refer This Post :
- how to configure local-host setting on FireFox
- Firefox Extensions for Twitter and Facebook

Sunday, April 18, 2010

Jquery AutoComplete Plugin

Hi yes long time back , i was quite busy with my life , fine today i come up with Jquery cool feature , i thing is very known to you and its very useful while developing any application ,

yes its " AutoComplete" plugin . Jquery has good plugin on auto-completion , which means that what ever you want to seach and if you search accordingly it will display the result on the same bases. yes on the same bases , now your very much interested to use this yes you can use this on your application, and make your search more attractive and more easy to user. here are the way you can add the code for auto completion tool.

There are some good Features you will get over the AutoCompletion Tools .
1. Just like a Drop down but with quite good help.
2. just like DOM tree on xml
3. Better window auto complete box.
and may more.

steps to add Jquery on your page.

1. Put this code on your < head > section
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" > </script >
< script type='text/javascript' src='./jquery.autocomplete.js'> </script >

2. add below form tag
< form action="" onsubmit="return false;" >

<p >
Enter City: < input type="text" id="CityLocal" value="" />
< input type="button" value="Get Value" onclick="lookupLocal();" />
< /p >

3. on your javascript code add this

< script type="text/javascript" >
function lookupLocal(){
var oSuggest = $("#CityLocal")[0].autocompleter;

oSuggest.findValue();

return false;
}

$(document).ready(function() {
$("#CityAjax").autocomplete(
"autocomplete_ajax.cfm",
{
delay:10,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);

$("#CityLocal").autocompleteArray(
[
"Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron",
"Albany", "Alexandria", "Alger", "Alledonia", "Alliance", "Alpha", "Alvada",
"Alvordton", "Amanda", "Amelia", "Amesville", "Amherst", "Amlin", "Amsden",
],
{
delay:10,
minChars:1,
matchSubset:1,
onItemSelect:selectItem,
onFindValue:findValue,
autoFill:true,
maxItemsToShow:10
}
);
});
< /script >

for the Example purpose i have declare few city name , you can add this on array as per your requirement and all.

5. close the form section and run the page , it will show your the output like this way


You can download the source code and sample from here
Download Here .
Demo Here .

hope you like it , if you have any query or comment plz leave a reply to full fill your query, thank you.

Monday, March 15, 2010

How Google works

Google now explain there Business via These three videos in very nice manner . there are main three principles behind this is : Search ,apps , and Ads.
according to Google Search is our core part , apps is main umbrella over all the software and Ads is a central business proposition.

Now you can see how Search get works :
google Creats a Index of each web pages and manage them according to the category and evaluating that more than 200 Quality factor.as you can see google produces search in fraction of time,now you can think you fast there indexing is ?



How Google Apps get work:
till now google get introduces thousands of application or tools . all the application data is stores online, so its not specific to one computer.you can download that file anywhere on your mobile as well as on your pc too.


How Google search ads works :
when you do search with google web search , that time you can see ads are also showing according to there results and all . ads search result offering very useful information for commercial queries . look at the below videos on how it exactly works.


hope you like this videos , you can see it on http://www.google.com/howgoogleworks

Saturday, March 6, 2010

Google Buzz Widget jQuery Plugin

hi , come up with new jquery feature with Google buzz , Google Buzz is a new way to discuss any ideas and new things which comes up inbuild in gmail now a days. so you will come to know how it is ?but if u want to develop this using jquery then surly this article will help you, you can design same buzz stream into your website.

Now google Buzz API provides buzz in Atom Format,but some policy need to be maintain under that. you cant grab all the data from another domain without JSONP. now in this case you can use the Google AJax feed api service and download the rss or the atom which will convert into
json compatible format.

something look like this way:






How to use :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"> </script>


Here are the two Google Api for Jquery and for Google Buzz you can place this in < head > section


These are the Features :

  • You can Dispaly buzzes in fixed list or as you want

  • many css features like height, width , opacity and all

  • customize each link

  • you can disaply hole buzz in your page


yes one more thing , now the Google buzz is very new in and may be rules may get change later on also, so keep on updating
if you know anything new on this , plz post a comment so it will better to us or reader to know update part

Sunday, February 28, 2010

Jquery & css base mega Menus

hi you have seen many drop down verticle as well as horizantal menus . if you have small amount of menus data then you can go with the small menus desing , but if u have many number of requirement in menus then here is cool collection i have on mega menus. hope you like it , if u know more plz add it ..........

1.Mega Drop Down Menus with the CSS & jQuery



2.Inspiration Elsewhere


Demo




3.Virgin





4. Gateway.com

View Demo




5.Billabong.com,

hope you like it , if you know more add it on comments

Sunday, February 14, 2010

Jquery Slider

Jquery has lot of plugins on various topics , yeach i was using some of them in my application and i really like them , its really cool , hope it may be useful to u also here i found some nice slider controls in jquery , there are many ways you can use that just like a slider with content , simple slider , slider with vertical , slider with horizontal with image , slider with simple text , with text + images so many combination u can find

here are the cool examples u can use that on slider ................

1. jQuery Cycle

Demo

2. content + images Slider


3. Easy slider
Demo

4.CrossSlide


5.Pikachoose

Demo

yeach this one is cool , you can show maximum number of images with cool effects
hope u like this collection.......if u know some more plz add it on comments