How to point a single domain to 2 different web hosting accounts

Recently i purchased a domain name 2lessons.info from GoDaddy for my blog and pointed it to blogger because there is not much customization option in wordpress.com.

My blog 2lessons.info is now powered by blogger.com. I just had to customize the blogger template.

1. Setup custom domain name at Blogger

– In new Blogger profile click on the Basic Settings at left menu and provide your desired domain name.

2.  Choosing a webhosting company for hosting demo and download files

I have already tried many free web hosting providers, but found 000webhosting much better.

– Register at http://www.000webhost.com/order.php

– We will now create a sub domain at 000webhost http://demos.2lessons.info

– Our next step will be to park our domain name at 000webhost

3.  Setting up domain at GoDaddy to point to blogger and 000webhost both.

– Login to your GoDaddy profile.

– Click on MyAccount

– Launch your domain and open domain manager

– In DNS Manager tab click launch

– In CNAME (Alias) click Quick Add

– Host: demos and Points to = “Your server address from 000webhost“

Wait for 15 minutes and your changes at domain name will be propagated and you will be able to upload your files to your sub-domain.

https://itswadesh.wordpress.com/2012/07/10/how-to-point-a-single-domain-to-2-different-web-hosting-accounts/

A Simple Css Only Hover Dropdown Menu

A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu.

The HTML

The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.

These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.

<ul id="menu">

<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>

</ul>

The CSS

<style>

li ul {

display: none;

}

li:hover ul {

display: block;

}</style>

Your required minimal form of dropdown menu can be found bellow for download.

• Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.
• In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.
• The drop down menu is fast, simple and effective
• A drop down menu could never be so simple to design and using CSS alone.
• The menu is designed purely using CSS and avoids any jQuery or Javascript library which makes it much more faster and simple.

A more advance version ready to use and good looking can be found bellow.

samsung omnia lite mic problem GT-B7300

I use samsung omnia lite (model: GT-B7300) mobile phone. I always had issue with its mic. The person at the other side is not able to hear anything as well as there is break in voice.

I was able to setup for its optimum performance. And now it works great.

Here is how i was able to boost mic on Samsung Omnia Lite

Put this code *#0002*28346#
Press Gain
Go to Mic Amp Gain
Set this:
MGNR7 0110
MGNL3 1001
I hope it's will help you.

A nice vertical scrolling news ticker plugin using jQuery

Are you looking for Facebook style vertical scrolling news ticker application which shows updates from friends? It creates a smooth vertical scrolling effect which consequently attracts visitors to any news update because of its animation effect. This is a tutorial, which is very suitable for beginers. Even people having less knowledge in jQuery / Javascript can also implement this into their website.

Almost all modern web browsers supports this plugin. Hence you won’t have to worry about compatibility.

The tutorial contains one one html file and one js files including  jQuery plugin.

– index.htm
– newsticker.js (Small javascript file to create the news ticker)

   

19+ Excellent Collection of Free JavaScript Date Pickers

A date picker is an easy process to introduce a date/time into an input field. It will give a professional impression to your forms by simplifying the process of selecting a specific date or a range of dates.

The following list may help you in selecting a script that will offer a better experience to your website’s visitors. JQuery and MooTools are some of the well known libraries used to create the date pickers.

1.JQuery UI Datepicker

  It  is an excellent script that supports multiple themes and can be used in particular formats. Here are some examples:

• date range restriction
• alternate field population
• display month and year menus
• display button bar
• display multiple months
• show datepicker when clicking a date icon

[Go to Project Page | View Demo]

2. jQuery Datepicker

  It is a plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting dates. It’s a simplified version of the JQuery UI Datepicker.

Features include:

•               works as a popup for an input field or inline in a div/span
  •   full keyboard equivalents
  •   Predefined date formats are available. You can even define your own format.
  •   Minimum/Maximum date restriction
  •   Update an alternate field with the date in a different format
  •   Select a range of dates
  •   Show week of the year / days from other months
  •   Callbacks on hover, change of month/year, selection and closure
  •   CSS Customizable
  •   Language selector

[Go to Project Page | View Demo]

3. The JQuery Date Picker Plugin

  It is a flexible and unnoticeable  calendar component. It helps you to easily add date inputting functionality to your web forms and pages. This script, as the previous mentioned one, can work in many ways. Here are some examples:

• simple datePicker with today selected
• simple datePicker with dates in the past selectable
• simple datePicker with ONLY dates in the past selectable
• datePicker with multiple months visible at once
• datePicker with multiple select
• renderCalendar with callbacks

[Go to Project Page | View Demo]

4. Date Picker

It is a JQuery Plugin with a lot of features and easy to implement in your web applications:

• Flat Mode – as element in page
• Multiple calendars
• Single, multiple or range selection
•  Dates can be marked as special, weekends, special days
•  The look can be easily customizable through CSS
•  Localization for months’ and days’ names
•   Custom day to start the week
•   Fits into the viewport
• 

5. jQuery Date Input

It  is a small, fast and pretty date picker .

Features include:

•  CSS customization
• Language selector
• Specify the first day of the week
• Date formatting

[Go to Project Page | View Demo]

6.  Unobtrusive Date-Picker Widget V4

  It is an excellent script which is accessible using the keyboard, requires no embedded JavaScript blocks, requires no pop-up windows and is suitable for use in within documents served as application/xhtml+xml.

Features:

•  full keyboard accessible
•   Support for multiple date formats and date dividers
•   nameSpace friendly and unobtrusive
•   Customizable via CSS
•   Upper and lower dates limits can be set
•   Certain days of the week can be disable
•   “Smart” localization
•   Bespoke days of the week can be highlighted
•   It is free to use, even commercially, being released under a CC share-alike license

[Go to Project Page | View Demo]

7. Fancy Mootools Date Picker

It  is a nice script that can be customized using CSS.

Features:

•  The number of characters for the day names abbreviation can be specified
•   The total number of days can be set for each month
•   The date format is editable (default value used: ‘mm/dd/yyyy’). A regular expression is used to replace the value with a date
•   You can specify the first day of the week (1 – Monday, 7 – Sunday)
• Year Range is supported (from start year + number of years to add)
• The order of the years from the dropdown can be either ascendant (‘asc’) or descendant (‘desc’) – from start year to end year or reverse.

[Go to Project Page | View Demo]

8. Calendar

  It is a JavaScript class written for MooTools that adds accessible and unobtrusive date pickers to your form elements.

Features:

•   Style-able and semantic XHTML
•   Highly configurable use of inputs and selects
•   Variable navigation options
•   Future / past calendar restrictions (and more)
•   Multi-calendar support (with padding)
•   Multi-lingual and fancy date formatting

[Go to Project Page | View Demo]

9.  Vista-like Ajax Calendar (vlaCalendar)

  The version 2 that uses the well-known library framework MooTools is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar.

Features include:

•   Authentic Vista Look and Feel
•   CSS Customizable
•   Easily changeable date labels
•   Easily stylable
•   Both normal and datepicker calendar can be instantiated multiple times
•   Lightweight

[Go to Project Page | View Demo]

10.DatePickerControl v1.1.6

  This transforms your input text control into a date-picker control.

Features include:

•  Automatic input control conversion by setting a single attribute in the ‘input’ tag, or using a special ‘id’ attribute.
•   Multiple date formats
•   Layered calendar (no annoying pop-up windows)
•   Navigation through mouse and keyboard
•   First day of week can be defined
•   Day Limits (Min and Max)
•   CSS Support
•   LGPL License

[Go to Project Page | View Demo]

11. jsCalendar

It is a nice DHTML Date Picker that is easy to setup (in either flat or pop-up mode) and it’s compatible with most popular browsers, being created using web standards.

Features include:

•   Multiple date formats are supported
•   Keyboard navigation
•   Fast setup
•   Select multiple dates
•   Highlight special dates

[Go to Project Page | View Demo]

12. Yahoo! UI Library: Calendar

 It is a UI control that enables users to choose one or more dates from a graphical calendar presented in a single or a multi month interface.

Some important features:

•   multi-select calendar
•   multi-page calendar
• Minimum/Maximum Dates
•   Calendar navigator
•   CSS Customizable

[Go to Project Page | View Demo]

13. Jason Moon’s Calendar Script

It is a date picker simple and easy to integrate in the pages of your website that supports multiple date formats and works in most modern browsers.

Features include:
* the look of the calendar can be easily changed by editing the calendarDateInput.js file: font, size and style; background color; cell dimensions; top row background color; highlighted day background color
* multiple date pickers can be used in a single page
* specify number of seconds until the calendar disappears

[Go to Project Page | View Demo]

14. JavaScript Calendar Script/Date Picker Widget

It is a simple & unobtrusive script from OpenJS.

Features:

•   Simple
•   Multiple calendars can be added on the same page
•   Self Contained (it doesn’t require an external library)
•   Unobtrusive
•   CSS Customizable

[Go to Project Page | View Demo]

15. dhtmlxCalendar

It  is a lightweight cross-browser JavaScript calendar which can be configured either as a popup date picker or a flat calendar. It’s a fully customizable and easy to use script.

Features include:

•   JavaScript API Full Control
•   Select between a range of dates
•   Inactive dates (User is unable to select inactive date)
•   Double calendar
•   Easy connection to the text field
•   Multi language support – Language and settings can be switched on the fly
•   Custom holidays can be set

[Go to Project Page | View Demo]

16. Simple Calendar Widget

  It is a flexible, simple and fully commented calendar script that works across most modern browsers.

Features include:

•   Customizable for date format, colors, language and year range
•   A date is accepted as an input
•   The first day of the week can be chosen for the display
• Specific dates can be disabled
•   Week numbering
•   Dynamic language selection
•   Draggable (optionally)

[Go to Project Page | View Demo]

17. Rich Calendar

It is a cross-browser JavaScript datepicker script that implements the appropriate functionality with many advanced options widely extending fields of its applications.

Features include:

•   No Window Pop-Ups
•   Skinnable – CSS Customizable
•   Multilingual
• Language dependent date formats
•   Multiple calendars in a single page
•   Positioning can be relative or absolute
•   User-defined behavior

[Go to Project Page | View Demo]

18. jsDatePick

It  is a nice date picker that uses DOM techniques to generate its HTML code.

Features include:

•   Appear as a popup for an input field or inline in a DIV / SPAN
•   Limit the possible picking days to today’s date
•   Swap the colors of the date’s cells from a wide range of colors
•   Set the limits for the years enabled in the calendar

[View Demo | Download]

19. Xin Calendar Mods

It is a collection of the core scripts (calendars from Xin Calendar) and their mod scripts.

Features include:

•   In-Page and Pop-up calendar
•   Advanced Date range
• Long date formats supported
•   Two Digit Years
•   Calendar Title (in your own format)
• Month/Year List
•   Date Link
•   Journal
•   Date Tips
•   Special Days

[Go to Project Page | View Demo]

7+ Useful jQuery Techniques For URLs, Querystrings and Hash Parameters

Normally we use Server side scripts like PHP, ASP, C# to retrieve the information required about our Page URL, QueryString and Hash Parameter. But amazingly it can also be done using Javascript or jQuery too. It can be very handy considering the speed of program as well as ease in programming.
The following are examples of useful code snippets which we can directly use.

1. Get the Current Page URL

A very simple snippet, which stores the current page URL in a variable:

// Retrieve current URL
var url = document.URL;

2. Get the Current Page Root URL

A very simple snippet, which stores the root URL in a variable:

// Retrieve root URL
var root = location.protocol + '//' + location.host;

3. Highlight Current Menu Item

Rather than manually modify navigation menus to add an “active” class to the current page we can use jQuery to identify which link contains the current URL which will save a lot of programming time:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

 

4. Page Redirect Using Javascript
If you need to redirect a page using jQuery:

// Redirect - insert required URL
window.location.href = "https://itswadesh.wordpress.com/";

5. Get Querystring Parameters of the Current Page

If the URL contains a querystring with multiple parameters the following snippet will parse each parameter and store the array as a variable:

var vars = [], hash;
var q = document.URL.split('?')[1];
if(q != undefined){
q = q.split('&');
for(var i = 0; i < q.length; i++){
hash = q[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
}

To use any of the parameters you can access the value using the parameter name. E.g. if the URL contains the querystring “?a=3&b=2&c=1″ you can access the value for “a” using:

// Will alert the value of parameter a
alert(vars['a']);

6. Get the URL Hash Parameter

Retrieve a hash parameter and store in a variable:

// Get # parameter
var param = document.URL.split('#')[1];

7. Change Browser Address Bar Hash Parameter

In the example below we replace the hash parameter, which we get from the clicked link. Useful for adding bookmarking capabilities when using AJAX:

// update browser address bar URL
$('a.demo-link').click(function(){
var hash = $(this).attr('href');
location.hash = hash;
});

8. Check If Link Contains External URL

The following snippet will check if a clicked link contains a URL to an external web page and if so, open in a new browser window:

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
this.target = "_blank";
});

7+ jQuery Modal Popup Window Plugins With Tutorials, Demo and Downloads

1. jQuery Speedo Popup

Features:

• Its good for all requirement
  • a popup Plugin
  • a Notification Plugin
  • a Lightbox Plugin
  • an Alert Box Plugin

  

2. Simple jQuery Modal Window Tutorial

Features:

• Able to search the whole html document for A tag NAME=”modal” attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
• A mask that will fill the whole screen.
• Modal windows that is simple and easy to modify.

3. Popup Modal Window Using the jQuery Reveal Plugin

It is a simple little modal window, perfect perhaps for small confirmation messages as seen in the preview. And no, there is no excuse for ever using Comic Sans.

4. SimpleModal – Lightweight jQuery Modal Dialog

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The main aim of SimpleModal is to facilitate developers with a cross-browser overlay and container that will be populated with data provided.

5. ColorBox-A lightweight customizable lightbox plugin for jQuery

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
• Appearance is controlled through CSS so it can be restyled.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads upcoming images in a photo group.
• Well vetted. ColorBox is one of the top jQuery plugins.

6.NyroModal v2 :: jQuery Plugin

• Ajax Call
• Ajax Call with targeting content
• Single Image
• Images Gallery with arrow navigating
• Gallery with any kind of content
• Form
• Form in iframe
• Form with targeting content
• Form with file upload
• Form with file upload with targeting content
• Dom Element
• Manual Call
• Iframe
• Stacked Modals
• Many embed element through Embed.ly API / Demos
• Error handling
• Modal will never goes outside the view port
• Esc key to close the window
• Customizable animation
• Customizable look
• Modal title
• W3C valid HTML (Transitionnal)

7.boxy – Facebook-like dialog/overlay, with frills

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

8.ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Top 10 Collection of jQuery Tutorials Inspired from Facebook

Top 10 Collection of jQuery Tutorials Inspired from Facebook at itswadesh.wordpress.com

1. Facebook type vertical navigation menu created with jquery

2. How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper

3. Free gmail, facebook type chat application using CSS, jQuery and PHP

4. Facebook Style CSS JQuery drop down menus

5. Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

6. Facebook Style Alert Confirm Box with jQuery and CSS

7. How to track online status of a user in my website like facebook

8. Creating a Simple Photo Album with jQuery Similar to Facebook

9. Facebook like red notification simple css technique

10. Facebook Style Footer Admin Panel

How to Display Author Info Box of a Guest Post in Blogger

Sometimes bloggers accept guest post due to lack of time. In return they provide the author with some quality backlinks and advertisement. Hence it becomes necessary to display some information about the author in a polite and attractive manner. This further encourage more and more people to write quality articles for us.

The tutorial bellow explains how to create and add it into the blogger template. I’ve used only HTML and CSS to implement this.

So Lets jump straight to the tutorial part!

How To Create a Customized Author Info Box in Blogger?

 

1. Go To Blogger > Template > Backup > Download Full Template

 

2. Click On Edit HTML

 

 

3. Search for ]]></b:skin>

 

 

4. Just above it paste the code below

 

#ipi_profile{width:500px;height:100px;border:1px solid #dcdcdc;background-color:#f9f9f9;font:bold 12px "Trebuchet MS",Verdana,Arial}
.ipi_pic{float:left;margin:6px}
.ipi_pic img{border:4px solid #fff}
.ipi_details{float:left;border-right:1px solid #dcdcdc;padding:0 15px 10px 10px;margin-top:10px}
.ipi_contact{float:left;margin-top:10px;padding:0 0 0 15px}
.ipi_facebook,.ipi_facebook:hover{color:#3c5a98;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_twitter,.ipi_twitter:hover{color:#29c9ff;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_mailto,.ipi_mailto:hover{color:#000}

 

5.    Now Save your template and write the html code to display the author info

Whenever you write a guest post, switch to HTML mode of the editor and at the end add the code below

<!------------ Author Info Box Start ------------>
<b>Writer</b><br />
<div id="ipi_profile">
<div>
<img alt="Ipsita Sahoo" src="http://4.bp.blogspot.com/-KWqHBYbwJOI/T6EVr4BxgAI/AAAAAAAAAAs/oADS2-J3Yzs/s220/ipi.JPG" width="80px" />
</div>

<div><span style="color: #3292dc; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal;">Ipsita Sahoo</span><br />
Manager<br />
Odisha, INDIA
</div>
<div><span style="color: #666666; font-size: 10px;">&nbsp;</span> <br />
<span style="color: #666666; font-size: 10px;">Email&nbsp; :</span> <a href="mailto:ipsita@gmail.com">ipsita[at]gmail.com</a><br />
<div style="float: left; margin-top: 10px;"><div style="background-color: #1a4485; color: white; float: left; font: bold 14px arial; padding: 2px 4px;"><a href="http://www.facebook.com/ipi" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">facebook</a></div><div style="background-color: #6fdbff; color: white; float: left; font: bold 14px arial; margin-left: 5px; padding: 2px 4px;"><a href="http://www.twitter.com/duskycode" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">twitter</a></div></div>
</div>
</div>

I hope the above tutorial was useful. Keep commenting.

How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper

Facebook’s new beeper alert notification system looks so handy.

I believe that this is the most effective way of notifying anything live like a friends update or a friends request or when someone comes online.

But the technology behind is just so simple. It contains only a bit of javascript code using jQuery and some simple CSS.

In this tutorial we are going to learn how to create such a update notification plugin, which facebook developers call it as a beeper.

The Basic Setup

1. Include the jQuery and notification javascript libraries into your document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="facebookNotification.js" type="text/javascript"></script>

2. Include the notification CSS into your document

<link rel="stylesheet" type="text/css" href="style.css" />

3. Create a div to display the notification message and name it “tips”

<div id="tips"></div>

Features

• In Facebook Whenever there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually.
• Automatically hides the facebook beeper after five seconds.
• Onmouseover, the script prevents the hiding of facebook beeper.
• Again after 5 seconds of mouseout, the facebook beeper hides automatically.
• There is a close button at the top-right corner to close a particular facebook beeper.
• It almost simulates the facebook beeper (Update notification system).