how to call div layer as slide left to right or right to left

After long time i am on my blog.

My first project with indian express

http://www.expressindia.com/gtest/final/expressindiascreen/index.html

i have done lots of new thing which is new for me

1. How to call div layer click on button as slide, when click on left button div layer move right to left as slide, when click on right button div layer move left to right as slide

2. button on off div show and collapse , when click on off button div show expend bottom , when click another off button than on button show off and div layer collapse and show other div layer.

3. click on link show diffrent div layer without javascript only through css

HOW TO USE DIFFERENT CSS FILE FOR MOZILLA AND IE EXPLORER

HOW TO USE DIFFERENT CSS FILE FOR MOZILLA AND IE EXPLORER


This script allows you to detect which browser your visitor is using, then loads up the correct cascading style sheet to suit. Change the name and paths, of the files ie.css (Internet Explorer) and nn.css (Netscape Navigator) to your own file names.

i am using here <> for []
This script needs to go inside the [HEAD] tags.

[SCRIPT LANGUAGE = "JavaScript"]
[!--
var browser = '';
var version = '';
var entrance = '';
var cond = '';
// BROWSER?
if (browser == ''){
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
browser = 'Netscape'
else browser = 'IE';
}
if (version == ''){
version= navigator.appVersion;
paren = version.indexOf('(');
whole_version = navigator.appVersion.substring(0,paren-1);
version = parseInt(whole_version);
}
if (browser == 'IE' && version ]= 4) document.write('['+'link rel="stylesheet" href="ie.css" /]');
if (browser == 'Netscape' && version ]= 2.02) document.write('['+'link rel="stylesheet" href="nn.css" /]');
// --]
[/SCRIPT]

The MVC (Model View Controller)

The MVC (Model View Controller)

introduction to MVC concepts as they are implemented in CakePHP.MVC (Model View Controller)

framework that inspired CakePHP: Ruby on Rails. Ruby on Rails is a web framework for the

programming language Ruby. It implements both Active Record and MVC.

The MVC paradigm is a way of breaking an application, or even just a piece of an

application's interface, into three parts: the model, the view, and the controller. MVC was

originally developed to map the traditional input, processing, output roles into the GUI

Input -> Processing -> Output

Controller -> Model -> View


The user input, the modeling of the external world, and the visual feedback to the user are separated and handled by model, view port and controller objects. The controller interprets mouse and keyboard inputs from the user and maps these user actions into commands that are sent to the model and/or view port to effect the appropriate change. The model manages one or more data elements, responds to queries about its state, and responds to instructions to change state. The view port manages a rectangular area of the display and is responsible for presenting data to the user through a combination of graphics and text.

What is CakePHP?

CakePHP :CakePHP is a free open-source rapid development framework for PHP: a structure of libraries, classes and run-time infrastructure for programmers creating web applications originally inspired by the Ruby on Rails framework.

Why CakePHP?

CakePHP has several features that make it great choice as a framework for developing applications swiftly and with the least amount of hassle:

* Useful core features (for access control lists, AJAX integration, etc.)

* Request dispatcher with good looking, custom URLs

* Compatibility with PHP4 and PHP5

* Works from any website subdirectory, with little to no Apache configuration

* Supplies integrated CRUD for database interaction and simplified queries (including scaffolding)

* Fast and flexible templating (PHP syntax, with helpers)

How to diseble mouse right click for website image

How to diseble mouse right click for website image

Use this code inside of head tag your html file, I am using here <> fir []
please (is lessthan)=< use

[script language="JavaScript1.2"]

/*
Disable right click script II (on images)-

*/

var clickmessage="Right click disabled on images!"

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i(is lessthan)document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
[/script]

Active Record

Active Record
Active Record is the ORM layer supplied with Rails. It closely follows the standard ORM model: tables map to classes, rows to objects, and columns to object attributes. It differs from most other ORM libraries in the way it is configured. By relying on convention and starting with sensible defaults, Active Record minimizes the amount of configuration that developers perform. To illustrate this, here’s a program that uses Active Record to wrap
our orders table.

require 'active_record'
class Order < ActiveRecord::Base
end
order = Order.find(1)
order.discount = 0.5
order.save
This code uses the new Order class to fetch the order with an id of 1 and
modify the discount. (We’ve omitted the code that creates a database connection
for now.) Active Record relieves us of the hassles of dealing with
the underlying database, leaving us free to work on business logic.
But Active Record does more than that. As you’ll see when we develop our
shopping cart application, starting on page 43, Active Record integrates
seamlessly with the rest of the Rails framework. If a web form contains
data related to a business object, Active Record can extract it into our
model. Active Record supports sophisticated validation of model data, and
if the form data fails validations, the Rails views can extract and format
errors with just a single line of code.
Active Record is the solid model foundation of the Rails MVC architecture.

Object/Relational Mapping

Object/Relational Mapping

ORM libraries map database tables to classes. If a database has a table
called orders, our program will have a class named Order. Rows in this
table correspond to objects of the class—a particular order is represented as an object of class Order. Within that object, attributes are used to get and set the individual columns. Our Order object has methods to get and set the amount, the sales tax, and so on. In addition, the Rails classes that wrap our database tables provide a set of class-level methods that perform table-level operations. For example,
we might need to find the order with a particular id. This is implemented
as a class method that returns the corresponding Order object. In Ruby class method

order = Order.find(1) puts
puts "Order #{order.customer_id}, amount=#{order.amount}"
Sometimes these class-level methods return collections of objects.
iterating
Order.find(:all, :conditions => "name='dave'") do |order|
puts order.amount
end
Finally, the objects corresponding to individual rows in a table have methods
that operate on that row. Probably the most widely used is save( ), the
operation that saves the row back to the database.
Order.find(:all, :conditions => "name='dave'") do |order|
order.discount = 0.5
order.save
end

So an ORM layer maps tables to classes, rows to objects, and columns to
attributes of those objects. Class methods are used to perform table-level
operations, and instance methods perform operations on the individual
rows.
In a typical ORM library, you supply configuration data to specify the mappings
between things in the database and things in the program. Programmers
using these ORM tools often find themselves creating and maintaining
a boatload of XML configuration files.

Active Record: Rails Model Support & Database-centric Programming

Active Record: Rails Model Support
In general, we’ll want our web applications to keep their information in a
relational database. Order entry systems will store orders, line items, and
customer details in database tables. Even applications that normally use
unstructured text, such as weblogs and news sites, often use databases
as their backend data store.
Although it might not be immediately apparent from the SQL you use to
access them, relational databases are actually designed around mathematical
set theory. While this is good from a conceptual point of view,
it makes it difficult to combine relational databases with object-oriented
programming languages. Objects are all about data and operations, and
databases are all about sets of values. Things that are easy to express
in relational terms are sometimes difficult to code in an OO system. The
reverse is also true.
Over time, folks have worked out ways of reconciling the relational and
OO views of their corporate data. Let’s look at two different approaches.
One organizes your program around the database; the other organizes the
database around your program.

Database-centric Programming

The first folks who coded against relational databases programmed in procedural
languages such as C and COBOL. These folks typically embedded
SQL2 directly into their code, either as strings or by using a preprocessor
that converted SQL in their source into lower-level calls to the database
engine.
The integration meant that it became natural to intertwine the database
logic with the overall application logic. A developer who wanted to scan
through orders and update the sales tax in each order might write something
exceedingly ugly, such as
EXEC SQL BEGIN DECLARE SECTION;
int id;
float amount;
EXEC SQL END DECLARE SECTION;
EXEC SQL DECLARE c1 AS CURSOR FOR
select id, amount from orders;
while (1) {
float tax;

EXEC SQL WHENEVER NOT FOUND DO break;
EXEC SQL FETCH c1 INTO :id, :amount;
tax = calc_sales_tax(amount)
EXEC SQL UPDATE orders set tax = :tax where id = :id;
}
EXEC SQL CLOSE c1;
EXEC SQL COMMIT WORK;
Scary stuff, eh? Don’t worry. We won’t be doing any of this, even though
this style of programming is common in scripting languages such as Perl
and PHP. It’s also available in Ruby. For example, we could use Ruby’s
DBI library to produce similar-looking code. (This example, like the last,
has no error checking.)
def update_sales_tax
update = @db.prepare("update orders set tax=? where id=?")
@db.select_all("select id, amount from orders") do |id, amount|
tax = calc_sales_tax(amount)
update.execute(tax, id)
end
end
This approach is concise and straightforward and indeed is widely used.
It seems like an ideal solution for small applications. However, there is
a problem. Intermixing business logic and database access like this can
make it hard to maintain and extend the applications in the future. And
you still need to know SQL just to get started on your application.

The Architecture of Rails

The Architecture of Rails Applications

One of the interesting things about Rails is that it imposes some fairly
serious constraints on how you structure your web applications. These constraints make it easier to create applications—a lot easier.

Models, Views, and Controllers

The model is responsible for maintaining the state of the application. model Sometimes this state is transient, lasting for just a couple of interactions with the user. Sometimes the state is permanent and will be stored outside the application, often in a database. A model is more than just data; it enforces all the business rules that apply to that data. We make sure that nothing else in the application can make our data invalid. The model acts as both a gatekeeper and a data store. The view is responsible for generating a user interface, normally based view on data in the model.
Although the view may present the user with various ways of inputting data, the view itself never handles incoming data. The view’s work is done once the data is displayed. There may well be many views that access the same model data, often for different purposes. In the online store, there’ll be a view that displays product information on a catalog page and another set of views used by administrators to add and edit products. Controllers orchestrate the application. Controllers receive events from the Controllers ouside world (normally user input), interact with the model, and display an appropriate view to the user. This triumvirate—the model, view, and controller—form an architecture known as MVC.

MVC was originally intended for conventional GUI applications, where developers found the separation of concerns led to far less coupling, which in turn made the code easier to write and maintain. Each concept or action was expressed in just one well-known place. Using MVC was like constructing a skyscraper with the girders already in place—it was a lot easier to hang the rest of the pieces with a structure already there. In the software world, we often ignore good ideas from the past as we rush headlong to meet the future. When developers first started producing web applications, they went back to writing monolithic programs that intermixed presentation, database access, business logic, and event handling in one big ball of code. But ideas from the past slowly crept back in, and folks started experimenting with architectures for web applications that mirrored the 20-year-old ideas in MVC. The results were frameworks such as WebObjects, Struts, and JavaServer Faces. All are based (with varying degrees of fidelity) on the ideas of MVC. Ruby on Rails is an MVC framework, too. Rails enforces a structure for your application where you develop models, views, and controllers as separate chunks of functionality—it knits them all together as your program executes. One of the joys of Rails is that this knitting process is based on the use of intelligent defaults so that you typically don’t need to write any external configuration metadata to make it all work. This is an example of the Rails philosophy of favoring convention over configuration.

In a Rails application, incoming requests are first sent to a router, which works out where in the application the request should be sent and how the request itself should be parsed. Ultimately, this phase identifies a particular method (called an action in Rails parlance) somewhere in the action controller code. The action might look at data in the request itself, it might interact with the model, and it might cause other actions to be invoked.

Eventually the action prepares information for the view, which renders something to the user. The routing component receives the incoming request and immediately picks it apart. In this simple case, it takes the first part of the path, store, as the name of the controller and the second part, add_to_cart, as the name of an action. The last part of the path, 123, is by convention extracted into an internal parameter called id. As a result of all this analysis, the router knows it has to invoke the add_to_cart( ) method in the controller class StoreController

The add_to_cart( ) method handles user requests. In this case it finds the current user’s shopping cart (which is an object managed by the model). It also asks the model to find the information for product 123. It then tells the shopping cart to add that product to itself. (See how the model is being used to keep track of all the business data; the controller tells it what to do, and the model knows how to do it.)
Now that the cart includes the new product, we can show it to the user.
The controller arranges things so that the view has access to the cart object
from the model, and invokes the view code. In Rails, this invocation is often
implicit; again conventions help link a particular view with a given action.
That’s all there is to an MVC web application. By following a set of conventions
and partitioning your functionality appropriately, you’ll discover
that your code becomes easier to work with and your applications becomes
easier to extend and maintain. Seems like a good trade.
If MVC is simply a question of partitioning your code a particular way, you
might be wondering why you need a framework such as Ruby on Rails.
The answer is pretty straightforward: Rails handles all of the low-level
housekeeping for you—all those messy details that take so long to handle
by yourself—and lets you concentrate on your application’s core functionality.
Let’s see how....

Conversions

Conversions
view image with ruby code and result

To get the string version of an object, we simply write .to_s after it
var1 = 20
var2 = '30'
puts var1.to_s + var2
puts var1 + var2.to_i
.to_s gives the String
.to_i gives the Integer
.to_f gives the Float version
let's try some more interesting (and a few just weird) conversions:
puts '30' .to_f
puts '200.7474' .to_f
puts '302.3333' .to_i
puts ''
puts '11 is my favorite number!' .to_i
puts 'who asked you about 11 or whatever?' .to_i
puts ''
puts 'me anand' .to_s
puts 5.to_i

so this probably gave you some surprises. The first one is pretty standar, giving 30.0. after that we converted the string '200.7474' to a float and to an integer

Variables and assignment

Variables and assignment
view image

Whenever we have putsed a string or a number, the thing we putsed is gone. What mean is, if we

wanted to print something out twice, we would have to type in twice:
suppose u have long content for print 10 time
than
content ='Variables and assignment
Whenever we have putsed a string or a number, the thing we putsed is gone. What mean is, if we

wanted to print something out twice, we would have to type in twice:
suppose u have long content for print 10 time
than'
contentt = 'My name is Anand Kumar Pathak i am trying to learn Ruby language really this language is

easy according other language, i also try to learn ruby on rails'
your ruby code
content ='Variables and assig
nment the thing we
putsed is gone.
What mean is, if we
wanted to print
something out twice,
we would have to type
in twice: suppose u
have long content for
print 10 time than'
contentt =
contentt = 'My name is
Anand Kumar Pathak
i am trying to learn
Ruby language really
this language is easy
according other
language, i also try to
learn ruby on rails'
puts content
puts contentt
puts contentt

your result
>ruby 1.rb
Variables and assig
nment the thing we
putsed is gone.
What mean is, if we
wanted to print
something out twice,
we would have to type
in twice: suppose u
have long content for
print 10 time than
My name is
Anand Kumar Pathak
i am trying to learn
Ruby language really
this language is easy
according other
language, i also try to
learn ruby on rails
My name is
Anand Kumar Pathak
i am trying to learn
Ruby language really
this language is easy
according other
language, i also try to
learn ruby on rails
>Exit code: 0

String arithmetic

String arithmetic
show image

As you can do arithmetic on numbers, you can also do arithmetic on strings! Let's try to add two strings and see what puts does with that:
string 'I Like '
string 'Tee, coffe and cigarette'
so you can code in ruby
puts 'I Like' + 'Tee,coffe and cigarette'
there is a number 420
puts 'me' + 420
difference between numbers and digits. 10 is a number, but '10' is a string of two digits
let's play with this for a while
puts 10 + 10
puts '10' + '10'
puts '10 + 10'
puts 2 * 8
puts '3' * 10
puts '5 * 15'
puts '10' * 10
puts '5' * '10'
there is show u problem for last tow line program #
your code in ruby language
puts 'I Like' + 'Tee,coffe and cigarette'
puts 'me' + '420'
puts 10 + 10
puts '10' + '10'
puts '10 + 10'
puts 2 * 8
puts '3' * 10
puts '5 * 15'
your result
>ruby 1.rb
I LikeTee,coffe and cigarette
me420
20
1010
10 + 10
16
3333333333
5 * 15
>Exit code: 0

how to play ruby language with Letters

how to play ruby language with Letters
We reffer to groups of letters in a programs as strings. (you can think of beads with letters on them being strung together.) to make it easier to see just what part of the code is in a string, I'll color strings 'blue'
show this image for result


here is some string

'hi all'
'Anand Kumar Pathak'
'11 is my favorite number...and yours favorite number?'
'hey !@#$%^&*() heeeeeeeeee wowwwwwwww'
''
as you can see, strings can have punctation, digits, symbols, and spacesin them.. more than just letters. That last string doesn't have anything in it at all; we call that an empty string.
program
puts 'hi all'
puts 'Anand Kumar Pathak'
puts '11 is my favorite number...and yours favorite number?'
puts 'hey !@#$%^&*() heeeeeeeeee wowwwwwwww'
puts ''
puts 6.0 / 2.0
puts 3 * 2
puts 3 - 7
puts 7 / 2
puts 5 * (12 - 8) + -15
puts 98 + (489572 / (9 * 12)) * -15
program result
>ruby 1.rb
hi all
Anand Kumar Pathak
11 is my favorite number...and yours favorite number?
hey !@#$%^&*() heeeeeeeeee wowwwwwwww

3.0
6
-4
3
5
-67897
>Exit code: 0

how to play ruby language with number

how to play ruby language with number

Now that gotten everything ready, write your first program! Open your text editor, and type the following:

puts 1 + 2
puts 5 - 2
puts 3.0 + 7.0
puts 2.0 * 3.0
puts 6.0 - 9.0
puts 6.0 / 2.0
puts 3 * 2
puts 3 - 7
puts 7 / 2

your program result

3
3
10.0
6.0
-3.0
3.0
6
-4
3
you can view image how to write program in ruby language with result
Integer and float
most programming languages (and Ruby is no exception) numbers without decimal points are called integers, and numbers with decimal points are usually called floating-point numbers or, more simply, floats.

How to play with ruby langusge

How to play with ruby langusge

First how to install Ruby

Go get the One-click Installer from the website http://rubyinstaller.rubyforge.org/wiki/wiki.pl/
otherwise you can start from http://rubyinstaller.rubyforge.org/ by clicking (Download) than clicking higest-number version of ruby there version ( 1.8.6-25,1.8.5-24,1.8.5-23,as you understand but i am using for learn ruby 1.8.2-15) when you run it, it will ask you where you want to install Ruby and which parts of it you want installed.. just accept all the defaults.

After install Ruby how to start your programming



first create your project folder where you want in your computer drive.
Than go to start on your desktop/all programs/ruby/SciTE/ after than SciTE editor on your desktop now start write your ruby program first program you want to print your name.
go to SciTe editer
write there
puts 'your nam'
than press f5 on your keybord than option comes for save that time where you want to save your file. type your file name xyz.rb rb is extension for ruby files

Basic JavaScript Lesson 1

JAVASCRIPT

INTRODUCTION

JavaScript is a well featured object oriented programming (OOP) language.
It is not Java.
It is mor light weight language used exclusively on web pages to mainpulate objects on the page and embedded in the browser itself.
Like all programming languages, JavaScript's basic purpose is to pick up on the actions of the user and react to them.
JavaScript does this through a series of Event, Functions, and Objects.
There are all sorts of Events like the famous "onMouseOver" event that initiates the common image rollover or pop up menu. Events are added to HTML tags just like attributes and point to a function.Event coded in its tag, a JavaScript function is called and run.
This is referred to as a "function call"
A function contains JavaScript "statements" that mainpulate an Oblect in some way.This is done dynamically in real time.
Once we point to an object with a reference like above, we can use JavaScript Methods and Properties to manipulate that object. amethod is something an object can do ro call on. A property is a characteristic of an object that can be dynamically changed by JavaScript.
Let me explain

we will changing th background color of web page when an event occurs.Let me make the background of a page change colors when a link on the page is hovered over.
Lets start out by making a simple web page with a gray background:
[script language="JavaScript"]
function change_color(){
document.bgColor="red";
document.fgColor="green"}

function change_back(){
document.bgColor="white";
document.fgColor="black"}

[/script]

follow html code

[html]
[head]
[title]JS Background Changing[/title]
[script language="JavaScript"]

function change_color(){
document.bgColor="yellow";
document.fgColor="green"}

function change_colorA(){
document.bgColor="red";
document.fgColor="blue"}

function change_colorB(){
document.bgColor="#410000";
document.fgColor="#222222"}

function change_colorC(){
document.bgColor="green";
document.fgColor="#810000"}

function change_colorD(){
document.bgColor="pink";
document.fgColor="#710000"}

function change_colorE(){
document.bgColor="#720000";
document.fgColor="#FFFFFF"}

function change_colorF(){
document.bgColor="yellow";
document.fgColor="pink"}

function change_colorG(){
document.bgColor="yellow";
document.fgColor="black"}

function change_colorH(){
document.bgColor="red";
document.fgColor="green"}

function change_colorI(){
document.bgColor="green";
document.fgColor="white"}

[/script]
[style]
a {margin-left:10px;margin-right:15px;color:#000000;text-decoration:none;font-size:14px;font-weight:bold;}
[/style]

[/head]

[body bgcolor="gray"]

[p]Here's some regular ol' paragraph content.[/p]

[a href="#" onMouseOver="change_color()"]AAAAA[/a]
[a href="#" onMouseOver="change_colorA()"]BBBBBB[/a]
[a href="#" onMouseOver="change_colorB()"]CCCCC[/a]
[a href="#" onMouseOver="change_colorC()"]DDDDD[/a]
[a href="#" onMouseOver="change_colorD()"]EEEEE[/a]
[a href="#" onMouseOver="change_colorE()"]FFFFF[/a]
[a href="#" onMouseOver="change_colorF()"]GGGGG[/a]
[a href="#" onMouseOver="change_colorG()"]HHHHH[/a]
[a href="#" onMouseOver="change_colorH()"]IIIIII[/a]
[a href="#" onMouseOver="change_colorI()"]JJJJJJ[/a]
[/body]
[/html]
i am using here <> for []

How to create rounded corners without JavaScript only through css

let me explain suppose you have a blah div now how to show blah div rounded
first define an other div abc div than put your blah div inside abc div.
now use this code
#abc {width:500px;background-color:#FF0000;padding:5px;}
now no need to define blah div as blah name than use this code for rounded corner for your css

.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#ffffff;

}
.spiffy1{
border-right:1px solid #ffffff;
padding-right:1px;
margin-right:3px;
border-left:1px solid #ffffff;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy5{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy_content{
padding:0px 5px;
background:#ffffff;
}
now how to define rounded div inside your html page i am using here <> for {}
{div id="abc"}
{div}
{b class="spiffy"}
{b class="spiffy1"}{b}{/b}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy3"}{/b}
{b class="spiffy4"}{/b}
{b class="spiffy5"}{/b}
{/b} {div class="spiffy_content"}
{div id="maincontent"}
{/div}
<--either you can create a new div where you can use your content
{/div}
{b class="spiffy"}
{b class="spiffy5"}{/b}
{b class="spiffy4"}{/b}

{b class="spiffy3"}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy1"}{b}{/b}{/b}
{/b}
{/div}
{/div}

how to creat rounded corner particular div through css html with javascript

Let me explain how to create rounded corner a particular div

follow javascript code either use javascript file which is link to your html file nor use inside your html head section

this is javascript code
function make_corners()
{
var $i;
var $elements=find_class(document.body,"rounded");//where can define your div id//
if(!(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("5.5")>-1)) for($i in $elements) rounded_corners($elements[$i]);
}


function rounded_corners($element)
{
var $rc_radius=15, $rc_left=true, $rc_right=true, $rc_top=true, $rc_bottom=true, $rc_self_color, $rc_parent_color, $rc_antialiased,$rc_antialiased_cf=0.33,$rc_compact,$rc_auto_margin,$rc_method="margin",$rc_border,$border_color;
var $property,$container,$el_container,$el_inner,$j,$i,$ang,$ang_last,$bw,$width,ee,$err_alert;
var $classes=$element.className.split(" ");
$rc_self_color=get_current_style($element,"background-color","(transparent)|(rgba)");
$rc_parent_color=get_current_style($element.parentNode,"background-color","(transparent)|(rgba)");
$border_color=get_current_style($element,"border-top-color");
for ($i in $classes)
{
$property=$classes[$i].split("-");
if($property[0]=="rc") switch ($property[1])
{
case "radius":
$rc_radius=$property[2];
break;
case "top":
$rc_top=$property[2]!="0"?true:false;
break;
case "left":
$rc_left=$property[2]!="0"?true:false;
break;
case "right":
$rc_right=$property[2]!="0"?true:false;
break;
case "bottom":
$rc_bottom=$property[2]!="0"?true:false;
break;
case "selfcolor":
$rc_self_color="#"+$property[2];
break;
case "parentcolor":
$rc_parent_color=$property[2]=="transparent"?"transparent":"#"+$property[2];
break;
case "inheritstylecolors":
$rc_parent_color=$property[2]!="0"?false:true;
$rc_self_color=$property[2]!="0"?false:true;
break;
case "antialiased":
$rc_antialiased=$property[2]!="0"?true:false;
break;
case "antialiasedcf":
$rc_antialiased_cf=parseFloat($property[2]);
break;
case "compact":
$rc_compact=$property[2]!="0"?true:false;
break;
case "automargin":
$rc_auto_margin=$property[2]!="0"?true:false;
break;
case "method":
$rc_method=$property[2];
break;
case "border":
$rc_method="margin";
$rc_border=true;
$element.style.border="none";
break;
}
}
if($rc_antialiased && $rc_method=="margin")
{
var $arr_self_color=color2array($rc_self_color);
var $arr_parent_color=$rc_border?color2array($border_color):color2array($rc_parent_color);
if($arr_self_color!=false && $arr_parent_color!=false) var $rc_antialiased_color="rgb("+Math.round(($arr_parent_color[0]-$arr_self_color[0])*$rc_antialiased_cf+$arr_self_color[0])+","+Math.round(($arr_parent_color[1]-$arr_self_color[1])*$rc_antialiased_cf+$arr_self_color[1])+","+Math.round(($arr_parent_color[2]-$arr_self_color[2])*$rc_antialiased_cf+$arr_self_color[2])+")";
else $rc_antialiased=false;
}
var $containers=new Array();
if($rc_top)$containers[0]="top";
if($rc_bottom)$containers[$containers.length]="bottom";
if(!$rc_parent_color)$rc_parent_color=get_current_style(document.body,"background-color");
for($j in $containers)
{
$container=$containers[$j];
$el_container=document.createElement("div");
$el_container.className="rc-container-"+$container;
if($rc_parent_color && $rc_method=="margin")
{
try
{
$el_container.style.backgroundColor=$rc_parent_color;
}
catch(ee){self.status="Chyba nastaveni pozadi."}
}
$el_container.style.height=$rc_radius+"px";
for($i=0;$i<$rc_radius;$i++)
{
$el_inner=document.createElement("span");
if($rc_self_color && $rc_method=="margin")$el_inner.style.backgroundColor=$rc_self_color;
$el_inner.style.display="block";
$el_inner.className="rc-inner rc-level-"+$i;
$ang=Math.asin($i/$rc_radius);
$el_inner.style.height="1px";
$el_inner.style.overflow="hidden";
$width=($rc_radius-Math.round($rc_radius*Math.cos($ang)));
if($rc_method=="margin")
{
$el_inner.style.margin="0 "+($rc_right?$width:"0")+"px 0 "+($rc_left?$width:"0")+"px";
if($rc_antialiased || $rc_border)
{
$bw=Math.ceil($rc_radius*Math.cos(Math.asin(($i-1)/$rc_radius))-$rc_radius*Math.cos($ang));
if($bw==0)$bw=1;
$el_inner.style.borderWidth="0 "+($rc_right?$bw:"0")+"px 0 "+($rc_left?$bw:"0")+"px";
if(!$rc_border)
{
try{$el_inner.style.borderColor=$rc_antialiased_color;}
catch($ee){if(!$err_alert)alert("There's probably a wrong CSS declaration of color used (use '#000000' instead of 'black' or '#000'.");$err_alert=true;}
}
else
{
$el_inner.style.borderColor=($rc_antialiased && $width) ? $rc_antialiased_color : $border_color;
if($i==$rc_radius-1)
{
$el_inner.style.backgroundColor=$border_color;
}
}
$el_inner.style.borderStyle="solid";
}
}
else
{
if($rc_parent_color)$el_inner.style.borderColor=$rc_parent_color;
$el_inner.style.borderStyle="solid";
$el_inner.style.borderWidth="0 "+($rc_right?$width:"0")+"px 0 "+($rc_left?$width:"0")+"px";
}
if($container=="top" && $el_container.firstChild)$el_container.insertBefore($el_inner.cloneNode(true),$el_container.firstChild);
else $el_container.appendChild($el_inner.cloneNode(true));
delete $el_inner;
}
if($rc_compact)
{
if($container=="top") $el_container.style.marginBottom="-"+$rc_radius+"px";
else $el_container.style.marginTop="-"+$rc_radius+"px";
}
if($rc_auto_margin)
{
$el_container.style.marginLeft="-"+get_current_style($element,"padding-left");
$el_container.style.marginRight="-"+get_current_style($element,"padding-right");
if($container=="top") $el_container.style.marginTop="-"+get_current_style($element,"padding-top");
else $el_container.style.marginBottom="-"+get_current_style($element,"padding-bottom");
}
if($container=="top" && $element.firstChild)$element.insertBefore($el_container.cloneNode(true),$element.firstChild);
else $element.appendChild($el_container.cloneNode(true));
delete $container;
}
}

// common functions:

function find_class($element,$classnames,$result,$first)
{
if(!$first)$first=$element;
if(!$result)$result=new Array();
if ($element.nodeType==1)
{
var $test_exp=new RegExp("(^| )("+$classnames+")( |$)");
if($test_exp.test($element.className)) $result[$result.length]=$element;
}
if ($element.hasChildNodes()) $result=find_class($element.firstChild,$classnames,$result,$first);
if ($element.nextSibling && $element!=$first) $result=find_class($element.nextSibling,$classnames,$result,$first);
return $result;
}

function get_current_style($element,$property,$not_accepted)
{
var ee,$i,$val,$apr;
var $na=new RegExp($not_accepted);
try
{
var $cs=document.defaultView.getComputedStyle($element,'');
$val=$cs.getPropertyValue($property);
}
catch(ee)
{
if($element.currentStyle)
{
$apr=$property.split("-");
for($i=1;$i<$apr.length;$i++) $apr[$i]=$apr[$i].toUpperCase();
$apr=$apr.join("");
$val=$element.currentStyle.getAttribute($apr);
}
}

if($not_accepted && $na.test($val) && $element.parentNode) $val=get_current_style($element.parentNode,$property,$not_accepted);
return $val;
}

function color2array($value)
{
if($value.substr(0,1)=="#")return hex2array($value);
else if($value.indexOf("rgb")>-1) return rgb2array($value);
else return false;
}

function rgb2array($value)
{
var $i;
var $regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var $array=$regexp.exec($value);
$array.shift();
for($i=0;$i<3;$i++)$array[$i]=parseInt($array[$i]);
return($array);
}

function hex2array($value)
{
return new Array(parseInt($value.substr(1,2),16),parseInt($value.substr(3,2),16),parseInt($value.substr(5,2),16));
}
after define which div you want to rounded corner in this javascript function where define rounded

Let me explain
some time you have problem if you need more rounded corner in your html page

so you should define only class rouned in your css file where write any property which is common your other div

than other property you need define your html page which div you want to rounded corner as follow div id="blah" style="background-color:#ff0000;width:100px" as you like your div

you can do same for other div

than use following code before closing your body tag in your html page


{script type="text/javascript"}make_corners();{/script} i m using here <> for {}

Note: My English communication is not strong please avoid sentence error and frequently ask question email me anand.hey@gmil.com

how to design your particular div scroll

let me explain how to design your particular div scroll through css, html
and JavaScript.

First use following JavaScript code in your head tag after start head tag before close head tag

this code



put this JavaScript code start body tag
i am using here <> for {} there is html problem
{script type="text/javascript"}

{/script}


now creat a JavaScript file

where can put this code and this file link to your html file

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E={4k:6(){P.M(1m,\'4z\',P.4v)},3C:6(f){7 g=15,H=1m,1R=5J;5(!g.20||!g.4D)B;5(3E(f)==\'4F\')f=15.20(f);5(f==14||1R.2Q.2u(\'6H\')!=-1||((1R.2Q.2u(\'6y\')!=-1||1R.2Q.2u(\'6C\')!=-1)&&!(3E(4l)!="6h"&&4l.5Y))||1R.6d==\'67\'||(1R.5N.2u(\'6t\')!=-1&&1R.2Q.2u(\'66\')!=-1))B;5(f.1D){f.1D();B};5(!f.1S||f.1S==\'\'){7 h="68",c=1;1H(15.20(h+c)!=14){c++};f.1S=h+c}7 k=f.1S;f.3c=2i 65();7 l=f.3c;l.1M={5W:[\'-1s\',0],5V:[0,\'-1s\'],5X:[\'1s\',0],5Z:[0,\'1s\'],6G:[0,\'-1p\'],6I:[0,\'1p\'],6J:[0,\'-4W\'],6l:[0,\'+4W\']};l.3i=["-2s","2s"];l.44=["-2s","2s"];7 m=12(\'6v\',C),D=12(\'5f\',C),G=12(\'5k\',C),1d=12(\'5g\',C);7 o=12(\'5e\',C),1h=12(\'5l\',C);2E=8;1d.A.1u=\'4X 4M 5r\';1d.1C();f.1q.4J=\'2t\';1h.A.5L="5M";1h.A.1B="4N";1h.A.U="4N";1h.A.26="3X";1h.A.3S="-5A";1h.1C();7 p=f.T,54=f.1c;2f(f,1d,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);7 q=f.T,55=f.1c,3I=54-55,3V=p-q;7 s=(f.1T)?f.1T:0,57=(f.1V)?f.1V:0;7 t=15.3W.1i,3d=/#([^#.]*)$/;7 u=[\'5j\',\'5n\',\'5p\'];l.V=[];l.1W=[];l.5s=l.O=[];l.5G=l.1Q=[];l.1o=[8,8];l.W=[];l.1x=[0,0];l.1k=[];l.3F=[];l.X=[];1H(f.56){m.Z(f.56)};m.Z(o);f.Z(D);f.Z(1d);5(N(f,\'26\')!=\'3X\')f.1q.26="33";D.A.U="51";D.A.1B="51";D.A.11="17";D.A.13="17";2f(f,1d,"17",[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);7 w=f.1c,4O=f.T,3N;3N=D.T;D.A.5x="5w 4M 5v";5(D.T>3N)2E=C;D.A.5C="17";2f(1d,f,8,[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);1r(D);1r(f);l.X[0]=D.1e-f.1e;l.X[2]=D.1f-f.1f;f.1q.4L=N(f,"J-1P");f.1q.4H=N(f,"J-1N");1r(D);1r(f);l.X[1]=D.1e-f.1e;l.X[3]=D.1f-f.1f;f.1q.4L=N(1d,"J-11");f.1q.4H=N(1d,"J-13");7 x=l.X[2]+l.X[3],3Q=l.X[0]+l.X[1];2f(f,D,8,[\'J-13\',\'J-1N\',\'J-11\',\'J-1P\']);G.A.U=f.1c+\'F\';G.A.1B=f.T+\'F\';D.A.U=w+\'F\';D.A.1B=4O+\'F\';G.A.26=\'3X\';G.A.11=\'17\';G.A.13=\'17\';G.1C();D.Z(m);f.Z(G);G.Z(1h);m.A.26=\'33\';D.A.26=\'33\';m.A.11="0";m.A.U="4K%";D.A.4J=\'2t\';D.A.13="-"+l.X[2]+"F";D.A.11="-"+l.X[0]+"F";l.3R=1h.T;l.39=6(){7 a=m.5E,36=5H=0;1n(7 i=0;il.2g[1])?1:0;l.3q=(3yl.2g[3])?1:0;l.3l=a-l.4Z;l.3r=3m-l.4V;l.35=(l.3l>40)?1:(l.3l<-40)?-1:0;l.2Y=(l.3r>40)?1:(l.3r<-40)?-1:0;5((l.35!=0||l.2Y!=0)&&!l.1X)l.1X=H.2Z(6(){5(l.35==0&&l.2Y==0){H.2n(l.1X);l.1X=8;B};2H();5(l.3p==1||l.3q==1)f.18((l.35*l.3p)+"s",(l.2Y*l.3q)+"s",C)},45)}6 2m(){E.2c(g,\'2w\',3n);5(l.1X)H.2n(l.1X);l.1X=8;5(l.3w)H.53(l.3w);5(l.3s)H.2n(l.3s)}6 2H(){l.3v=(H.58)?H.58:(g.2b&&g.2b.1V)?g.2b.1V:0;l.3o=(H.52)?H.52:(g.2b&&g.2b.1T)?g.2b.1T:0}f.1D=6(a){5(G.L[1]()===0||G.L[0]()===0)B;m.A.J=\'4X\';7 b=l.W[0],4G=l.W[1],3e=G.2k,2C=G.2R,32,2W,2z=[];G.A.U=f.1c-3I+\'F\';G.A.1B=f.T-3V+\'F\';2z[0]=l.O[0];2z[1]=l.O[1];l.W[0]=l.39()>l.O[0];l.W[1]=l.2G()>l.O[1];7 c=(b!=l.W[0]||4G!=l.W[1]||2z[0]!=l.O[0]||2z[1]!=l.O[1])?C:8;3e.19.3h(l.W[1]);2C.19.3h(l.W[0]);32=(l.W[1]||l.1W[1]);2W=(l.W[0]||l.1W[0]);l.39();l.2G();l.3T();l.3J();5(!l.W[0]||!l.W[1]||l.1k[0]||l.1k[1])2C.2D.1C();1l 2C.2D.2y();5(32)3b(3e,(2W&&!l.1k[0])?l.1x[1]:0);1l m.A.11="0";5(2W)3b(2C,(32&&!l.1k[1])?l.1x[0]:0);1l m.A.13="0";5(c&&!a)f.1D(C);m.A.J=\'17\';l.1o[0]=l.1o[1]=8};f.69=f.18=6(a,b,c){7 d=[[8,8],[8,8]],Q;5((a||a===0)&&l.V[0]){a=3z(a,0);Q=G.2R.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-a),0):-a;Q.43();d[0]=[-Q.1a-Q.1O,-Q.1I]}5((b||b===0)&&l.V[1]){b=3z(b,1);Q=G.2k.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-b),0):-b;Q.43();d[1]=[-Q.1a-Q.1O,-Q.1I]}5(!c)l.1o[0]=l.1o[1]=8;B d};f.3a=6(a){5(a==14||!4c(a))B;7 b=4f(a);f.18(b[0]+l.X[2],b[1]+l.X[0],8);f.18(0,0,C)};2f(1d,f,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);f.4S(1d);f.1T=0;f.1V=0;f.2X=C;30(f,\'64\',8);f.1D();f.18(57,s,C);5(t.R(3d)){f.3a(g.20(t.R(3d)[1]))}G.2y();l.6a=H.2Z(6(){7 n=1h.T;5(n!=l.3R){f.1D();l.3R=n}},6c);6 3z(v,i){7 a=v.6e();v=6f(a);B 1b((a.R(/p$/))?v*l.O[i]*0.9:(a.R(/s$/))?v*l.O[i]*0.1:v)}6 3k(a){7 a=a.63(\'-\'),3u=a[0],i;1n(i=1;3t=a[i];i++){3u+=3t.62(0).5R()+3t.5S(1)}B 3u}6 N(a,b){5(H.4E)B H.4E(a,14).5T(b);5(a.4w)B a.4w[3k(b)];B 8};6 2f(a,b,c,d){7 e=2i 3U();1n(7 i=0;i0)||(1y[1][0]==0&&1g<0)));5(l.V[0]&&(!l.V[1]||1K))1y=f.18(l.3i[1G],8,C);3Z=!l.V[0]||(l.V[0]&&l.V[1]&&2P&&!1K)||(l.V[0]&&((1y[0][0]==1y[0][1]&&1g>0)||(1y[0][0]==0&&1g<0)));5(2P&&3Z&&!1K)l.1o[1G]=C;1l l.1o[1G]=8;5(e.1J)e.1J();B 8};6 4c(a){1H(a.1A){a=a.1A;5(a==f)B C}B 8};6 1r(a){7 b=a,23=1z=0;7 c="";5(b.38){1H(b){23+=b.4y;1z+=b.4x;b=b.38;c+=1z+" "}}1l 5(b.x){23+=b.x;1z+=b.y}a.1f=23;a.1e=1z};6 4f(a){7 b=a;23=1z=0;1H(!b.T&&b.1A&&b!=m&&N(b,\'3D\')=="5K"){b=b.1A}5(b.38){1H(b!=m){23+=b.4y;1z+=b.4x;b=b.38}}B[23,1z]};6 30(a,b,c){5(!a.1t)a.1t=\'\';7 d=a.1t;5(b&&!d.R(2F("(^|\\\\s)"+b+"($|\\\\s)")))d=d.3O(/(\\S$)/,\'$1 \')+b;5(c)d=d.3O(2F("((^|\\\\s)+"+c+")+($|\\\\s)","g"),\'$2\').3O(/\\s$/,\'\');a.1t=d}},4v:6(){5(E.34)1m.2n(E.34);7 d=/#([^#.]*)$/,2l=/(.*)#.*$/,5D,i,1w,4B=15.2J("a"),2q=15.3W.1i;5(2q.R(2l))2q=2q.R(2l)[1];1n(i=0;1w=4B[i];i++){5(1w.1i&&1w.1i.R(d)&&1w.1i.R(2l)&&2q===1w.1i.R(2l)[1]){1w.3P=C;E.M(1w,\'5t\',6(e){5(!e)e=1m.1E;7 a=(e.1j)?e.1j:P;1H(!a.3P&&a.1A){a=a.1A};5(!a.3P)B;7 b=15.20(a.1i.R(d)[1]),31=8;5(b==14)b=(b=15.5z(a.1i.R(d)[1])[0])?b:14;5(b!=14){7 c=b;1H(c.1A){c=c.1A;5(c.3a){c.3a(b);31=c}};5(31){5(e.1J)e.1J();15.3W.1i="#"+a.1i.R(d)[1];31.3c.2d();B 8}}})}};E.3L();5(1m.48)1m.48()},3L:6(){5(E.5B)B;E.5u=C;7 a=E.4d(15.2J("5q")[0],"4u",\'4a\');1n(7 i=0,3K;3K=a[i];i++)E.3C(3K)},4d:6(a,b,c){5(3E(a)==\'4F\')a=15.20(a);5(a==14)B 8;7 d=2i 2F("(^|\\\\s)"+c+"($|\\\\s)"),5y,3B=[],3H=0;7 e=a.2J(b);1n(7 i=0,2v;2v=e[i];i++){5(2v.1t&&2v.1t.R(d)){3B[3H]=2v;3H++}}B 3B},34:1m.2Z(6(){7 a=15.20(\'4a-5I\');5(a!=14){E.3L();1m.2n(E.34)}},4K),M:6(a,b,c){5(!E.2e(a,b,c)&&a.4h){a.4h(\'4g\'+b,c)}},2e:6(a,b,c){5(a.46){a.46(b,c,8);1m.46("5c",6(){E.2c(a,b,c)},8);B C}1l B 8},2c:6(a,b,c){5(!E.4e(a,b,c)&&a.4b)a.4b(\'4g\'+b,c)},4e:6(a,b,c){5(a.49){a.49(b,c,8);B C}1l B 8}};6 6L(a){E.3C(a)};E.4k();',62,420,'||||sBr|if|function|var|false||||||||||||||||||||||||||||sY|return|true|mDv|fleXenv|px|tDv|wD|movBr|padding|curPos|getSize|addTrggr|getStyle|cntRSize|this|Bar|match||offsetHeight|width|scroller|reqS|paddings|Math|appendChild||top|createDiv|left|null|document|setPos|0px|contentScroll|sDv|trgtScrll|parseInt|offsetWidth|pDv|yPos|xPos|delta|fDv|href|srcElement|forcedHide|else|window|for|edge||style|findPos||className|border|sSBr|anchoR|barSpace|scrollState|curtop|parentNode|height|fHide|scrollUpdate|event|target|iNDx|while|mxScroll|preventDefault|hoverH|mV|keyAct|right|targetSkew|bottom|cntSize|nV|id|scrollTop|min|scrollLeft|forcedBar|tSelectFunc|max|sFBr|getElementById|goScroll|minPos|curleft|sSDv|_|position|maxPos|moved|mWheelProc|indx|documentElement|remTrggr|mDPosFix|addChckTrggr|copyStyles|mTBox|clientX|new|createScrollBars|vrt|urlExt|intClear|clearInterval|sFDv|setSize|urlBase|visibility||hidden|indexOf|pusher|mousemove|retFalse|fShow|cPSize|barPadding|clientY|hBr|jBox|stdMode|RegExp|getContentHeight|pageScrolled|ofstParent|getElementsByTagName|vertical|mMoveBar|scrollBoth|focusProtect|formItem|vEdge|userAgent|hrz|barZ|sRange|clicked|mouseup|hUpReq|fleXcroll|sYdir|setInterval|classChange|eScroll|vUpReq|relative|catchFastInit|sXdir|maxCWidth|mMouseUp|offsetParent|getContentWidth|scrollToElement|updateScroll|fleXdata|uReg|vBr|padLoss|baseProp|setVisibility|wheelAct|mdX|camelConv|xAw|mY|tSelectMouse|yScrld|mOnXEdge|mOnYEdge|yAw|barClickScroll|parT|reT|xScrld|barClickRetard|doScrollPos|mdY|calcCScrollVal|refreshTimeout|retArray|fleXcrollMain|display|typeof|forcedPos|hElem|key|brdWidthLoss|setWidth|tgDiv|initByClass|selectstart|mHeight|replace|fleXanchor|padHeightComp|zTHeight|zIndex|setHeight|Array|brdHeightLoss|location|absolute|inputName|hEdge||maxx|prepareScroll|contentScrollPos|baseAct||addEventListener|onmousedown|onfleXcrollRun|removeEventListener|flexcroll|detachEvent|isddvChild|getByClassName|remChckTrggr|findRCpos|on|attachEvent|aSize|pointerOffsetY|fleXcrollInit|HTMLElement|pointerOffsetX|scrlTrgt|getPos|index|setTimeout|80|flexinactive|inCurPos|div|globalInit|currentStyle|offsetTop|offsetLeft|load|detail|anchorList|wheelDelta|createElement|getComputedStyle|string|reqV|paddingLeft|mousewheel|overflow|100|paddingTop|solid|1em|postHeight|pkeY|vBar|keyCode|removeChild|DOMMouseScroll|fixIEDispBug|inMposY|100p|1px|length|inMposX|opera|100px|pageYOffset|clearTimeout|brdWidth|intlWidth|firstChild|oScrollX|pageXOffset|none|_hscroller|block|unload|vscroller|domfixdiv|mcontentwrapper|copyholder|blur|onblur|textarea|scrollwrapper|zoomdetectdiv|xScroll|input|yScroll|select|body|blue|containerSize|click|initilialized|black|2px|borderBottom|clsnm|getElementsByName|999|initialized|borderBottomWidth|matcH|childNodes|focus|contentSize|compPad|init|navigator|inline|fontSize|12px|platform|hscroller|scrollgeneric|scrollerjogbox|toUpperCase|substr|getPropertyValue|bscrollgeneric|_38|_37|_39|prototype|_40|visible|base|charAt|split|flexcrollactive|Object|MSIE|KDE|flex__|commitScroll|sizeChangeDetect|basebeg|2500|vendor|toString|parseFloat|mousedown|undefined|hBar|setAttribute|bar|_35|keydown|425|tabIndex|onmouseclick|type|onmousewheel|75|Mac|resize|contentwrapper|dblclick|ondblclick|AppleWebKit|onmouseover|keyup|barbeg|Safari|barend|keypress|baseend|_33|OmniWeb|_34|_36|auto|CSBfleXcroll'.split('|'),0,{}))

now creat your css file

where can put your css code and link to this css file to in your html file

flowing code
i am passing id mainbody in javascript function which is mention in html head code
/*#mainbody, {background-color: #FFFFFF; width: 602px; height: 338px;margin-left:-8px;margin-top:-12px; overflow: auto; border-bottom: 2px solid #F1EECC; border-top: 2px solid #F1EECC; outline: none;}
#test1 {background-color: #FFFFFF; left: 0.8em; top: 1em; }
#test1 div {color: #000000;}
.aligntocenter {margin: 0.5em auto; border: 2px solid #A22; width: 90%; position: relative; height: 500px;}
.fixedsize {width: 400px; height: auto; position: relative; color: black; padding: 1px;}
.scrollgeneric {line-height: 1px; font-size: 1px; position: absolute;}
.vscrollerbase, .vscrollerbar {width: 25px; top: 0px;}
.vscrollerbar {left: 0px;}
.hscrollerbase, .hscrollerbar {height: 15px; left: 0px;}
.hscrollerbar {top: 0px;}
.vscrollerbar, .hscrollerbar {padding: 5px; z-index: 2;}
.vscrollerbarbeg {background-color:#C1C9D0 url(images/verticlascroll.gif) 0px -10px; width: 25px; height: 20px;}
.vscrollerbarend {background-color:#C0CBD8 url(images/verticalscroll.gif); width: 25px; height: 10px;}
.hscrollerbarbeg {background-color:#410000 url(/web/images/verticaloverscroll.gif) -10px 0px; height: 15px; width: auto; left: 0;}
.hscrollerbarend {background-color:#410000 url(/web/images/verticaloverscroll.gif); height: 15px; width: 10px;}
.vscrollerbase, .hscrollerbase {background-color: #D1DDCB; background-image: url(images/horigentalscroll.png);}
.hscrollerbasebeg {left: 0px; top: 0px; height: 15px; background: url(images/scrollbases.gif) -22px 0px no-repeat;}
.hscrollerbaseend {top: 0px; height: 15px; width: 7px; background: url(images/scrollbases.gif) 0% 0% no-repeat;}
.vscrollerbasebeg {top: 0px; width: 15px; background: url(images/scrollbases.gif) -7px -8px no-repeat;}
.vscrollerbaseend {height: 7px; width: 15px; background: url(images/scrollbases.gif) -7px 0px no-repeat;}
.scrollerjogbox {width: 15px; height: 15px; bottom: 0px; right: 0px; background: white url(images/scrolljog.gif) 50% 50%;}*/

after finished all these stuff your particular div scroll design as you need change your css code as you need

Note : My English communication is note strong so please avoid sentence error

if you need any query please email me anand.hey@gmil.com

structure using through div in your html

let me explain how to use div in your html page

1.) suppose your html page have header, left panel, right panel, main body, footer

that time
your structurer should

i am using inline css but avoid inline css always use link css

let me explain id & class for css

id is particular identification which id use for single identity
class is not particular identification
class can use many time but id use one time
first you should use global css in your css * {margin:0px;padding:0px}
than body {margin:auto;padding:auto;font-family:Arial, Verdana, sans-serif;font-size:12px;font-decoration:none;line-height:12px;text-decoration:none;}


you can use following structure in side body tag and closing before body tag

header

left panel which is showing left side. Don't use height because if you fixed your div height it will create problem when your content is goes to long. That time your are gating scroll your particular
div which is not good for a website.

main content where can use your content float:left always position in left

right panel after float this div position right side

may be some time you have a problem
1.) suppose you main content have long content but left panel and right panel have sort content that time your main body may be hidden. That time you should use a class
.clear {clear:both;} in your css, and use

before closing your main body div tag that time your main body showing perfect

Note: My English is not strong please if any sentence error avoid and frequently ask
question. anand.hey@gmail.com

Text(HTML ELEMENT)

* p : Element, P. Purpose, paragraph. Description, This element encloses text in a
paragraph. Start tag, Required

...

* h1, h2, h3, h4, h5, and h6 HTML Tag: h1, h2, h3, h4, h5, and h6. Heading 1 to Heading 6 (1 being the highest level, 6 being the lowest)

* strong :abc the strong element is one of a large group of elements
that the HTML for recommendation calls phrase element such elements assign structural
meaning to designated portion of the document. Astrong element is one that contains text that indicates a stronger emphases than the em element. whereas an em element is rypically rendered as italic text, a strong element is generally rendered as boldface text. Override the default with a style sheet as you see fit.

HTML STRUCTURE

Structure
1.) HTML : For Transitional Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For strict DTD
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"]

2.) HEAD : header of an HTML document where information about the document is placed.
must use the title element within the head element and meta, style,
script, base and link can also be used.
[HEAD]
[TITLE]Introduction to HTML[/TITLE]
[link rel="stylesheet"href="css.css" type="text/css" /]
[script]
]/script]
[/HEAD]
i am using <>=[]

Transitional DTD

Transitional DTD allows some older elements and attributes that have been deprecated

"http://www.w3.org/TR/html4/loose.dtd">
Also if frames are used, to get valid results from the SGML validator, the frameset doctype is needed, like this:
"http://www.w3.org/TR/html4/frameset.dtd">

Document Type Declaration

Document Type Declaration
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document

HTML 4.01 DTDs

HTML 4.01 Strict does not allow presentational markup with the argument that Cascading Style Sheets should be used for that instead

strict doctype looks:
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict

HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes

HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames
"http://www.w3.org/TR/html4/frameset.dtd">

Basic HTML

The most basic, common language on the World Wide Web is HTML. hypertexts is the method by which you move around on the web — by clicking on special text. The HTML language was created in 1989 by Tim Berners-Lee for use on his newly created World Wide Web.It is based on SGML (Standard Generalized Mark-up Language)
structure of an HTML document
simple HTML document: (< >=[]this sign value only for HTML tag)

"http://www.w3.org/TR/html4/strict.dtd">
[HTML]
[HEAD]
[TITLE]My basic HTML [/TITLE]
[/HEAD]
[BODY]
[P]HTML WORLD!
[/BODY]
[/HTML]

MOTHER

What is Mother ??????

M : MILLION THINGS, She gives us.

O : OUTSTANDING.

T : TEARS, She shed for our upbringing.

H : HEART OF PUREST GOLD.

E : EYES , Shining with love.

R : RIGHT GUIDANCE, She always gives us.

Ambition is like love

Just i am trying to make a blog on blogger website