Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Tag: Jquery

Alternate Table Row Color

Today I m going to show you how to alternate table Row color by 2 different Method one includes CSS3 and other jQuery both are pretty simple, so I guess you might wanna know what is all this, you might have seen on many websites or blogs that nowadays in table you see that each row has different color alternately, well some people do it the hard way and some the easy way, today I will show you all the easy way to do it.

February 3, 2012 Ritesh Sanap Solutions acuvue 2 colors opaque, Alternate Table, Colors, CSS3, Jquery, Row

Top 5 Jquery Slide Gallery

Do you have minimal traffic from your website or blogsite? Is it too plain you wish you could afford to hire web developers and graphic artists to achieve the getting high standard of Internet users and clients?

You need no expertise to achieve that standard. So i gathered the simplified but best and user friendly JQuery to suit your needs and to give hype for your business and personal portfolios to help you maximize your traffic.

SLIDEDECK for WordPress

Though this Slide Jquery Gallery requires more time and effort to have that professional look of your blog or website, this slide deck will give the impression of PERFECTIONISM driving to marketing and advertising strategy. For its free? there is no room for second thoughts of having this and change your life for real.

YOXVIEW 

Aside from its ability to beautify your gallery, it is also capable of embedding your videos. Don’t you think its great to have that creative look in your site? Though i do not advice for business or e-commerce sectors to have this to present your gallery and advertising portfolios.





TRANSPARENT SLIDE GALLERY | tutorial 


This is open for Blogger and WordPress users. It has the simplest and easiest to understand tutorial among jqueries i used. It has automatic slide so i suggest to add more pictures to maximize the slideshow.

SLIDE SHOW JQUERY | tutorial 



I personally like it for your client testimonials. Lets put different strategy to your website. The idea of giving your clients to be heard is a win-win advertisement. The logic? “you value your clients, and your service will speak for it”.

JC FLASH PLAYLIST

It has 3 categories to choose from. The best thing about this Flash playlist, it is 100% FREE. Its like a touch screen, automatically move up and down when you point your cursor to the list. It has quite delay if you have too much pictures loaded in the playlist so have a separate gallery for best views of your work.

If you are familiar with Flash, this one is for you.

Now, doze off to your dashboard and change your blog into more inviting and fun to read. Having second thought? i bet not. On a positive note, for blogger users, they can maximize or minimize the size of their slide. check out tutorials to learn more about the products.

For FREE inquiries for your creative and professional web design, 
email riteshhanap@gmail.com.
For FREE inquiries for advertising and marketing strategies for small business websites, email kumi.atienza@gmail.com.

June 12, 2010 Ritesh Sanap Blogger Tutorials Blog Design Series, Cool things, Jquery, Tutorials

Beautify Sidebar Link List with Jquery Effect


Hi! After few days ago I wrote about TipTip Jquery, Today I’ll share about beautify sidebar link list with Jquery. Usually we have many link list in the sidebar, like categories, recent posts, or recent comments. We will add an effect to make this list prettier, if we hover to a link, the link will move smoothly to right and will back to original position then. This effect doesn’t use a Jquery plugin, but we directly use the function in the Jquery framework. So, don’t wait anymore, let’s go to the steps!

Javascript

Add this following code before </head>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

If you have already add this code, you no longer need to add this code again.

Then, add this following code. This is the core of this tutorial.

<script type=”text/javascript”>
$(document).ready(function(){
$(‘.widget-content ul li a, #panel ul li a’).mouseover(function(){
$(this).animate({paddingLeft:”20px”}, { queue:false, duration:250});
});
$(‘.widget-content ul li a, #panel ul li a’).mouseout(function(){
$(this).animate({paddingLeft:”0″}, {queue:true, duration:250})
});
});
</script>

Some Options

  • Change 250 to set the animation speed (in millisecond)
  • Change 20 to set the animation distance (in px)
  • If not work, try to change .widget-content with .sidebar

Demo

That’s all. See you!!

May 23, 2010 Ritesh Sanap Blogger Tutorials Jquery

TipTip Jquery – Change Default Hyperlink’s Title Style

Long time not posting… Now I’ll share how to integrate TipTip Jquery plugin to your blog. This plugin will change the default title attribute style become interest one. Don’t worry, this plugin is containing no images, it’s all using CSS, so it will load lightly. But, this plugin will not work in IE that we know doesn’t support CSS3.

Well, I don’t have any words again, so let’s go to the steps

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below above </head>.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/> 

If you have already add this code, you no longer need to add this code again.

After that, add the script below. This script is the core of TipTip Jquery.

&lt;script src=’http://mbahrizh.googlecode.com/files/jquery.tipTip.js’ type=’text/javascript’/&gt; 

Also add this script. This script to call the TipTip Jquery.

<script type=”text/javascript”>
$(function(){
$(“.tooltip”).tipTip();
});
</script> 

 

CSS

This plugin use bundled CSS file, so copy code below before </head>.

<link rel=”stylesheet” href=”http://mbahrizh.googlecode.com/files/tipTip.css” /> 

 

HTML

To activate TipTip, you must add class and title attribute to your tag, such as a, div, p, input, etc.
Example below use a tag

<a href=’YOUR-LINK-HERE’ class=’tooltip’ title=’THIS IS THE TITLE COLUMN OR YOU CAN ADD DESCRIPTION’ >This is a link</a> 

If you hover at that link, the container which contain the title attribute will show interestly with some CSS styles.

Some Options

You can add following options to customize it as you wish. Example below is added maxwidth and edgeoffset option.

$(function(){
$(“.tooltip”).tipTip({maxWidth: “auto”, edgeOffset: 10});
}); 

Some other options:

  • activation: string (“hover” by default) – jQuery method TipTip is activated with. Can be set to: “hover”, “focus” or “click”.
  • keepAlive: true or false (false by default) – When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
  • maxWidth: string (“200px” by default) – CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or ‘auto’.
  • edgeOffset: number (3 by default) – Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
  • defaultPosition: string (“bottom” by default) – Default orientation TipTip should show up as. You can set it to: “top”, “bottom”, “left” or “right”
  • delay: number (400 by default) – Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.

Thats all. See you!!!

Note : If you want completely CSS based tooltip you can click here.

May 13, 2010 Ritesh Sanap Blogger Tutorials Blog Design Series, Blogger Hacks, Cool things, Customization, Jquery

Facebox – Facebook Styled Lightbox

Facebox is really an awesome creation using jQuery. it can be used for many purposes such such as displaying images in a fancy or cool manure . we have covered many Facebook Tips and Tricks.its really an awesome creation.Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Facebox consists of 2 .js files, 1 .css file and some images that make up its interface (such as round corner images). I have zipped the files together.



Click here to download the files

Download these files and upload to your server or any hosting or google account. After Downloading these files edit Facebox.css as per you blog requirement( If you don’t know how to do it, then ask me!!) and replace image sources of images(i.e. b.png, bl.png, br.png, tl.png and tr.png). Now, replace image sources in Facebox.js (i.e. closelabel.gif and loading.gif).

Are you confused?? If yes then leave a comment, i will explain you how to replace image sources.

Now, follow these steps:

  1. Go to Layout section and then open Edit html. Click on Download Full Template to take the backup of your current template(don’t miss this, else things may go haywire!!). Now, Check the box to Expand Widget Templates. Insert the following code in the Head Section. I would Suggest you to paste the code just above . 
    <script src=’‘ type=’text/javascript’/><link href=’‘ media=’screen’ rel=’stylesheet’ type=’text/css’/><script src=’‘ type=’text/javascript’/><script type=’text/javascript’> jQueryundefineddocument).readyundefinedfunctionundefined$) { $undefined’a[rel*=facebox]’).faceboxundefined) })</script><style type=’text/css’>.thickstyle{background: silver;}</style>

    Change the web address in red, if you have uploaded above files on your server or googlepage and Save the Template.

  2. Now its the time to explain how and where to use Facebox. 
    1. Display an image using Facebox: If you want to display images using facebox, use the following code: 
      <p><a href=”http://3.bp.blogspot.com/_nX0wvumD9VU/S81K21P3STI/AAAAAAAAAao/p66UQf6Qhgo/s1600/logo.png” rel=”facebox”> Best 2 know</a></p>

      Result of the above Code :

      Best 2 know

      Click on the above link for results.

      If you are using this scrip in a menu then, remove <p></p>

    2. FaceBox used to display an inline DIV: This is the most useful code. It can be used to display text notes, announcement, disclaimer, contact form and so on… In this case a link is placed on your blog and when you click on that link, the pop up (like facebook) appears. 

      <p><a href=”#mydiv” rel=”facebox”>View DIV with id=”mydiv” on the page</a></p><div id=”mydiv” style=”display:none”>This is the contents of a hidden DIV on the blog, with ID=”mydiv” and style set to “display:none” <br /><a href=”http://www.dynamicdrive.com”>Dynamic Drive</a></div>

      The Result of the above code :

      View DIV with id=”mydiv” on the page

      This is the contents of a hidden DIV on the blog, with ID=”mydiv” and style set to “display:none”

      Dynamic Drive

      Click on the above link and see the result.

    3. FaceBox used to display an external page, plus apply a CSS class to the container (to further style it): It is like previous one only, but with more styling is added to the pop up.
      <style type=”text/css”>.thickstyle{background: silver;}</style>”<p><a href=”http://www.best2know.info/2006/04/contact-us.html” rel=”facebox[.thickstyle]”>View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class</a></p>

      The Result for above code :

      ”

      View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class

      Click the above link for result.
      If it the pop up does not appear after following these steps.. reload the page twice and check again. Remove <p></p> and check, it should work.
      Note: Set href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your blog only. Do not point it to any external link. It will not Work, if you do so.

so did you like it? Any doubts or questions? Leave a comment, i will surely help you…

April 20, 2010 Ritesh Sanap Blogger Tutorials Blogger Hacks, Jquery

Jquery – Create Float Menu with Scroll Follow Effect

Hi! My name is Rizqy and I’m new as writer in this blog. Thanks to Ritesh for make me a writer. In this blog, I’ll write about javascript especially jquery, tips-trick windows, and maybe the other. In this occasion I’ll write about jquery javascript framework. Jquery is one of the most popular javascript framework. It has many plugin that we can use freely to beautify our blog or website.

Now I’ll share how to make a float menu with touching of jquery effect. The example of float menu we can see at http://spenasa-blogger.blogspot.com. Look at the left side, you will find a float menu with some menu of course. If we scroll the page, that menu will look like follow our scroll. We will use Jquery Scrool Follow plugin for this. You can go to the documentation page of this plugin at http://kitchen.net-perspective.com/open-source/scroll-follow.

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>

After that, add the script below. This script is the core of the jquery scroll follow and Jquery UI.

<script src=’http://mbahrizh.googlecode.com/files/jquery.scrollfollow.js’ type=’text/javascript’/>

<script src=’http://mbahrizh.googlecode.com/files/jquery-ui-1.7.2.custom.min.js’ type=’text/javascript’/>

Also add this script. This script for call the scroll follow effect.

<script type=’text/javascript’>
$( document ).ready( function ()
{
$( ‘#floatmenu’ ).scrollFollow();
}
);
</script>

CSS

This is the basic CSS. You can costumize it as your desire. Add the CSS below before ]]></b:skin>.

#floatmenu {background:#FFF; border: 2px solid #088A08; position: absolute; width: 40px; height: 200px; color: rgb(102, 102, 102); font-size: 12px; top: 100px; left: 0px; z-index: 1;}

HTML

Basicly, you just add a <div> tag after <body> tag. You’re free to choose your menu content. You can give your facebook, twitter, or the other.

<div id=’floatmenu’>
<!– The menu content is here… –>
</div>

That’s all my first post. In another time, I’ll write about the other jquery effects. I hope you enjoy it.

April 19, 2010 Ritesh Sanap Blogger Tutorials Blogger Hacks, Jquery, Social Bookmarking

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Make Your Own Avatar
  • You might also like this Widget for blogger or Related post widget
  • How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
  • 100+ Best Online Games - Who Else Wants to Play ?
  • How to Change the Welcome/Login Screen in Windows XP ?
  • Windows Vista CD key
  • Add/Remove page/Post View Counter Widget For Blogger
  • h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

110 Amazing Magic Tricks with Everyday Objects – eBook

July 27, 2008 By Ritesh Sanap 1 Comment

Download Avira Anti Virus Bootable Rescue CD Free

August 9, 2008 By Ritesh Sanap Leave a Comment

Record a Screencast

March 28, 2009 By Ritesh Sanap 1 Comment

NewoosFormat – Blogger Template

August 8, 2010 By Ritesh Sanap 4 Comments

How to add our own logo to Dashboard

March 15, 2011 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean