SIMPLE DROPDOWN USING CSS AND HTML

It is the simple and basic level tutorial using css and html. Most of the people using some tools to create dropdown, but it is very simple and easy. I want to explain how to design simple drop down menu with CSS, HTML .Take a look at my code and enrich it into your projects.

DOWNLOAD CODE

HTML CODE:

<ul id="nav">
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HOME</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">WEB DESIGNING</a>
<ul>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">JQUERY</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">HTML</a></li>
<li><a href="http://aitamelearning.blogspot.com/" target="_blank">AJAX</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">PROGRAMMING</a>
<ul>
<li><a href="http://javatyro.blogspot.com/" target="_blank">JAVA</a></li>
<li><a href="http://androidtyro.blogspot.com/" target="_blank">ANDROID</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">SHARE</a>
<ul>
<li><a href="http://facebook.com/siddhucse" target="_blank">FACEBOOK</a></li>
<li><a href="http://facebook.com/siddhuvydyas" target="_blank">TWITTER</a></li>
<li><a href="http://facebook.com/cselabs" target="_blank">GOOGLE+</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4297669470429114932#">CONTACT</a></li>
</ul>
</ul>

css code

ul
{
font-family:verdana;
list-style:none;
}
ul li
{
display: block;
position: relative;
float:left;
}
li ul
{
list-style:none;
display:none;
}
ul li a {
 display: block;
 border:solid 1px #3399ff;
 background:#eeeeee;
 padding:10px;
 color:#333333;
 text-decoration:none;
 white-space: nowrap;
 
}
ul li a:hover
{
background:#3399ff;
color:white;
}
li:hover ul {
    display:block;
    position:absolute;
}
li:hover li
{
float:none;
}

Read More

3 simple Steps to Create PHP code to Excel SpreadSheets

   As per many request am telling you that this tutorial designed.Spread sheets are simple and easiest sheets which can arrange data in order.Follow below steps for convertion.

Download Code

                     3 simple Steps to Create PHP code to Excel SpreadSheets 


STEP-1: TYPE OF THE CONTENT 

what type of content its is, it may be pdf or it may be word or excel

        header("Content-Type: application/vnd.ms-excel");

"application/vnd.ms-excel" tells you the content type

STEP-2: ADDING THE DATA

echo "name" ."\t". "ph-no" ."\t". "state"."\n";
echo "siddhu" ."\t". "9533754145" ."\t". "andhra"."\n";

"\t" - gives you tab Space 
"\n"-new line output

name    ph-no       state
siddhu  9533754145  andhra

STEP-3 :DOWNLOAD EXCEL SHEET

header("Content-disposition: attachment; filename=spreadsheet.xls");

data added and header added by writing above lines you can convert php to excel

THANQ
siddhu vydyabhushana.

Read More

Top Free Clone Scripts

its was very interesting and too fuuny to hear ..for web designers, programmers it was sweet new also ,
the social networking sites was developed by some great creative programmers, designers they take help of ajax,php,mySql,jQuery.

Thats why i blogged it with live previews..

You can download it also to do experiments!!!!!!


FACEBOOK CLONE SCRIPT:

   live Preview: Live      Download  :  download

GMAIL CLONE SCRIPT:

Live Preview:   live                  Download:       dwnld

TWITTER CLONE SCRIPT

Lovdbyless : Live Preview Download

elgg : Live Preview Download

Read More

Tutorial on Lists in HTML

HTML
Hyper Text Markup Language

Generally we are implementing lists , using lists on navigation bars , simple drop downs but leave it .Am going to give am brief description on lists.

DEFINITION

A list of items with set of list items is called lists.
there are 4 types oof lists
1)Ordered
2)Unordered
3)definition
4)nested

Ordered Lists

it will be represented in html is <ol> element and close with</ol>.It contains item lists it will be represented as<li> and closed with </li>.

Unordered Lists


it will be represented in html is <ul> element and close with</ul>.It contains item lists it will be represented as<li> and closed with </li>.

1,A,a,I,i

above are the list types in orders list

OUTPUT

 
<ol type="1">
<li>siddhu</li>
<li>pavan</li>
<li>chakitha</li>
</ol>

siddhu
pavan
chakitha

U replace with any one of the above..same as for unordered lists also we have 3 lists types 1)disks
         2)circle
         3)square

DEFINITION LISTS

it will be use full to define definitions and there is a facility to give definition term(dt),definition desccription(dd)

Read More

implement Facebook notifications code using Jquery

Hi as per many requets am going to post the facebook Notifications Code .In facebook when any one requested or accepted u can observe notification .. so now am going to show how the code was implemented.

Lets Start..!



Download Files here

Download 

CSS CODE FOR NOTIFY.CSS

.sNotify_message {
 width: 250px;
 padding: 20px;
 background-color: #eee;
 left: 100px;
 bottom: 50px;
 margin-bottom: 20px;
                   min-height:50px;
 border: 1px solid #333;
                   border-radius:3px;
   }

PHP CODE FOR NOTIFICATIONS.PHP

<html>
<head>
<title> Document</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script src="Notify.js" type="text/javascript"></script>
<link href="Notify.css" rel="stylesheet" />
</head>

<body>

<script type='text/javascript'>
function siddhu()
{
       sNotify.addToQueue('notification message as fb');
sNotify.alterNotifications('chat_msg');
    
}
</script>


<input type='submit'  value='display notification' name='subnit' onclick='return siddhu()'>
</body>
</html>

Read More

Taking snapshots using jquery

As per many requests am going to post "taking snapshots using jquery"
.we all are very habituate to taking photos and uploading pics in fb or google+.if we analyze what happening in behind it ..it was simple and interesting just 4 files going to give u that camera main javascript file was webcam.js  to give sound 
shutter.mp3

thats all lets start...!

HIERARCHY:

i already told that 4 items clearly it was in pic..












                   DOWNLOAD            LIVE DEMO


CODING:
code for test.html

<head>

 <title>JPEGCam Test Page by siddhu</title>

</head>
<body>
 <table><tr><td valign=top>
 <h1>JPEGCam Test Page</h1>
 <h3>Demonstrates a very simple, one-click capture & upload implementation</h3>
 
 <!-- First, include the JPEGCam JavaScript Library -->
 <script type="text/javascript" src="webcam.js"></script>
 
 <!-- Configure a few settings -->
 <script language="JavaScript">
  webcam.set_api_url( 'test.php' );
  webcam.set_quality( 100 ); // JPEG quality (1 - 100)
  webcam.set_shutter_sound( true ); // play shutter click sound
 </script>
 
 <!-- Next, write the movie to the page at 320x240 -->
 <script language="JavaScript">
  document.write( webcam.get_html(320, 240) );
 </script>
 
 <!-- Some buttons for controlling things -->
 <br/><form>
  <input type=button value="Configure..." onClick="webcam.configure()">
    
  <input type=button value="Take Snapshot" onClick="take_snapshot()">
 </form>
 
 <!-- Code to handle the server response (see test.php) -->
 <script language="JavaScript">
  webcam.set_hook( 'onComplete', 'my_completion_handler' );
  
  function take_snapshot() {
   // take snapshot and upload to server
   document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
   webcam.snap();
  }
  
  function my_completion_handler(msg) 
  {
   // extract URL out of PHP output
   if (msg.match(/(http\:\/\/\S+)/)) {
    var image_url = RegExp.$1;
    // show JPEG image in page
    document.getElementById('upload_results').innerHTML = 
     '<h1>Upload Successful!</h1>' + 
     '<h3>JPEG URL: ' + image_url + '</h3>' + 
     '<img src="' + image_url + '">';
    
    // reset camera for another shot
    webcam.reset();
   }
   else alert("PHP Error: " + msg);
  }
 </script>
 
 </td><td width=50> </td><td valign=top>
  <div id="upload_results" style="background-color:#eee;"></div>
 </td></tr></table>
 <h2>By Siddhu vydyabhushanana </h2>
</body>
</html>

test.php

<?php



$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( $filename, file_get_contents('php://input') );
if (!$result) {
 print "ERROR: Failed to write data to $filename, check permissions\n";
 exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
print "$url\n";

?>

enjoy it...!

Read More

facebook like button to blog posts or website

Integrate facebook like button to our blogposts because fb is one of the best traffic for website lets start the process how to put it 


Example:
if u posted a link ur fb wall u got 7 likes for that u want ti show that in ur blog so for that it is usefull.

iframe allowTransparency='true' frameborder='0' scrolling='no' 
src='http://www.facebook.com/plugins/like.php?href=http://aitamelearning.blogspot.com/2012/10/connect-oracle10x-database-using-jsp.html&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&height=21'></iframe>

from the above code the dark colored link u need to exchange with ur link 

http://aitamelearning.blogspot.com/2012/10/connect-oracle10x-database-using-jsp.html

the color scheme in the code is light, u can replace the word with dark also height and width u know enjoy with the above code and integrate it to ur blog.

Read More

Design Facebook Style Alert Box

Good night to all of my site viewers and my friends because time was 11:30pm but i got mail from my friend to post how the fb style alert confirm box will work , deisgn so i designed with jQuery and Css ok Lets Start....................!

Download Some scripts :

1)jQuery.alert.js

2)jquery_facebook.alert.js

3)facebook.alert.css

Download ALL in one:

Download Here

HTML /JAVA SCRIPT CODE:

<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>
 <script type="text/javascript">
   $(document).ready( function() {
    $(".delete_post").click( function() 
   {
   jConfirm('Press DELETE to remove post', 'Confirmation Dialog', 
     function(r) {
     if(r==true)
     {
         $(".divbody").slideToggle(300);
     }
     });
    });
    });
   </script>
<body bgcolor='#eee'>
<div class='divbody'>
<div id='divimg'>
<img src='https://www.opendrive.com/files/62612599_vSCTi/admin.jpg' width='70' height='80' alt='siddhu vydyabhushana'></img>
</div>
<div id='divtext'>
<a href='#' class='delete_post' id='1' '>X</a>
just 5 min ago i developed it , am developing fb wall script ....<a href='http://feeds.feedburner.com/AitamE-learning'>Click Here</a><br><br>
<div id="time">5 min ago</div>
</div>
</div>

Read More

Typing Game with jQuery

Just now i played typing game ...the specialty is they developed using Jquery only .i provided the demo link click to play

                               

Live Demo              Tutorial Link

Read More

Status Message designing with CSS

As per soo many requests am going to develop this status message design with css .Already one month back i designed this 

1)Status Message designing USING CSS AND JQUERY

But now i am posting with css only ,..............learn and enjoy it.

                    Live Demo

Step-1

html coding as 

Html code


<div class='divbody'>
<div id='divimg'>

</div>
<div id='divtext'>

<div id="time"></div>
</div>
</div>

STEP-2

CSS code:

.divbody
{
width:600px;
border:dashed 1px #eee;
min-height:80px;
padding:5px;
margin-left:333px;
}
#divimg
{
width:70px;
height:80px;
border:solid 1px #888;
padding:5x;
float:left;

}
#divtext
{
padding:5px;
float:left;
width:500px;
min-height:80px;
font-size:17px;
font-family:Articulate Light;
}

#time
{
font-family:'Georgia', Times New Roman, Times, serif;
color:#999;

}

Read More

Useful jQuery Plugins For web developers

you know am always think about designing...! I know how much hard it was to write coding so i posted jQuery Plugins to develop simple forms,password strengthen , floating box, light box...enjoy it

1)jQuery Validation Plugin

                                                                     
demo

2)jQuery Alert Plugin

demo

3)jQuery password strength plugin

Demo

4)jQuery floating box plugin

Demo

5)jquery Light Box Plugin

http://www.phpletter.com/Demo/Jquery-Floating-Box-Plugin/

6)jQuery Plugin for Simple Dropdown

DEMO

Read More

How to create ADMIN profile box

Hello am going to post how to create admin profile box.As per many requests i created this and we show facebook, twitter links to connect admin in that post as below pic

CSS code:

#profile
{
width:330px;
border:solid 1px #333;
min-height:190px;
padding:10px;
font-family:Articulate Light;
}
#right
{
float:left;
}
#left
{
float:left;
}

HTML CODE

<div id='profile'>
<div id='left'>
<img src='https://www.opendrive.com/files/62612599_vSCTi/admin.jpg' alt='siddhu vydyabhushana'></img>
</div>
<div id='right'>
<h2>Siddhu vydyas</h2><br><br>
<a href='http://www.facebook.com/siddhucse'><img src='https://www.opendrive.com/files/62612600_fov7E/fb.png' alt='facebook'></img></a>
<a href='http://twitter.com/siddhuvydyas'><img src='https://www.opendrive.com/files/62612604_SOoSZ/twitter.png' alt='twitter'></img></a>
<a href='http://feeds.feedburner.com/AitamE-learning'><img src='https://www.opendrive.com/files/62612602_ZUUe7/subscribe.png' alt='subscribe'></img></a>
</div>
</div>

Read More

HOW TO Recover spaces in between Divisions

Good morning friends after one week am interested to post a post but i think it will be more useful to u for example u are going to design a timeline like facebook or something while writing matter in divisions some may be small ,some may be big spaces may occur like below pic

Coming to coding just 

HTML CODE FOR divisions:

<div id="container">


<div class="box">1</div>
<div class="box">siddhu vydyabhushana<br>
siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>siddhu vydyabhushana<br>
              				  </div>		  
<div class="box">3</div>
<div class="box">4 </div>
				  
</div>

CSS CODE 

#container
{
width:1100px; 
margin: 0 auto;
border:dashed 1px #bdbdbd;
padding:15px;
 }
.box{
width: 400px;
float: left;
background-color:#ffffff;
padding:10px;
font-family:Articulate Light;
background:#3388bb;
border:solid 1px #B4BBCD;
min-height:50px;
}
.box:hover
{
border:solid 1px black;
background:#3399cc;
border-radius:4px;
box-shadow:3px 3px 3px 3px #666;
-webkit-box-shadow :ease-in-out 0.30;
}

it will be recovered by jQuery library is MASONRY   download it from 

 Masonry jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function()
{

$('#container').masonry({boxSelector : '.box'});
});
</script>

After apply these the the pic will be

Read More

Speech Recognition set to your Blog or Website

Hi friends today am going to post a new feature ...that is speech recognition 

if any laptop or system have any keboard problems to type text it will be more use full.if u open it in google chrome , it will work properly.....  and another 

thing is that in code x-webkit-speech is a command used to show mike button in textbox.

Live Demo:

                                       

Code:

Speech Recognition Siddhu Subscribe Here

<form method="get" action="http://www.google.com/search">
 <input type="text" name="siddhu" size="25" x-webkit-speech/>
 <input type="submit" value="Google Search" />
</form>

Read More

Login and Registration using JSP , MS Access Database

As per too many requests am going to explain detail database connection using jsp and ms access .Java server pages are dynamic so we are using it for db connections.Coming to scripting jsp is most flexible and reliable than others,but present php leading good role in web designing..................

Last Posts:

1)Oracle Database Connection 
2)MS Access Database Connection 

HTML CODE PIC FOR LOGIN :

JSP CODE FOR LOGIN.JSP:   

here we used request.getParameter   to get values from one session to another. I used try , catch method when an error occur it will goes to ctach field.

Code designed by #Siddhu Vydyabhushana Subscribe Me


<%@ page import="java.sql.*"%>
<%
try
    {
        String user2=request.getParameter("username");
        String pass2=request.getParameter("password");

  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
        Connection con=DriverManager.getConnection("jdbc:odbc:epoll","","");
  Statement stmt=con.createStatement();
  ResultSet rs=stmt.executeQuery("select pass from user where user='"+user2+"' and pass='"+pass2+"'");
  if(rs.next())
  {
  String pass3=rs.getString("pass");
  String flag1=rs.getString("flag");
  if(flag1.equals(str)==true)
  {
  
  if (pass3.equals(pass2)==true)
  {
  session.putValue("user1",user2);
  response.sendRedirect("user.jsp");
  }
  }
  }
  else
  {%>
  <script>
  alert("invalid login");
  response.sendRedirect("epoll.html");

  </script>
  
  <%}
  con.close();
  }
catch(Exception e)
    {
        out.println("done exception"+e);
  
    }

HTML PIC FOR SIGNUP:-

signup.jsp code:   here we used request.getParameter   to get values from one session to another. I used try , catch method when an error occur it will goes to ctach field.

Code designed by #Siddhu Vydyabhushana Subscribe Me

<%@ page import="java.sql.*"%>
<%
try
    {
        String user1=request.getParameter("username");
        String email1=request.getParameter("email");
        String pass1=request.getParameter("password");
  int  flag=0;
  String str=Integer.toString(flag);
  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
        Connection con=DriverManager.getConnection("jdbc:odbc:epoll","","");
  PreparedStatement pst= con.prepareStatement("insert into user values(?,?,?,?)");
  pst.setString(1,user1);
  pst.setString(2,email1);
  pst.setString(3,pass1);
  pst.setString(4,str);
  
  pst.executeUpdate();
  
  con.close();
    }
catch(Exception e)
    {
        out.println("done exception"+e);
  
    }
%>

Read More

simple Syntax Highlighters Using CSS

Good evening friends , these days blogging is one of the most important hot topic for engineering students ....when they are writing programs it may be effect the page without effecting we need to display 100% .................

PRE is command used in html to display code ,without effecting., 
below  i implemented and source is also given

before using code u use class of 'syntax' & 'syntax1'

hi guys i designed this syntax highlighters if u paste
it in ur blog before <body> u can enjoy it also


<style>
.syntax
{
width:600px;
background:#eee;
color:black;
font-size:14px;
font-family:Microsoft Sans Serif;
padding:12px;
border :dashed 1px #bdbdbd;
border-radius:3px;
}
b
{
color:green;
}
.syntax1
{
font-family:Verdana;
border:solid 1px #bdbdbd;
background:white;
font-size:17px;
padding:10px;


}
</style>

#siddhu vydyabhushana

Read More

Simple Disappear effect using jquery

Now let us see a new concept in Jquery

This sample will show you how to make something disappear when an image button is clicked.

Required Files:

1. disappear.html
2.jquery-1.4.2.js



When the <img class="delete"> is clicked, it will find its parent element <div class="pane"> and animate its opacity=hide with slow speed.

Here i am placing source code... 

DOWNLOAD SOURCE CODE

DOWNLOAD jquery-1.4.2.js

Read More

Auto Complete Text box using jquery with oracle database and JSP

Required Files:

• index.jsp

• list.jsp

• jquery.autocomplete.js

• jquery-1.4.2.min.js

• style.css

Database:

create a user with name "ex" and password as "ex"create a table as "states" place all your required states in that table

Source Files:

Here i am giving you a link to DOWNLOAD these five files 

How to run:

copy these five files and paste it into C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\yourfolder

run it as http://localhost:8001/index.jsp
type just one character like 'a' then you find all the states starts with "a".

How the source code is working:

See in list.jsp line no.33 you may get one doubt, what is that ‘q‘ right ? in fact we are not sending any parameter with name ‘q’ from the index.jsp but for every keyup in the text box (in index.jsp) jquery will sends each character to the list.jsp in the form of ‘q’ and compares with the values in that list, i mean ‘q’ is the default parameter using by jQuery API.

How to send extra parameters along with that q:

$(‘#country’).autocomplete(“list.jsp”, {extraParams: {state: California }} );

This will generates the internal URL like

……./getdata.jsp?q=ourChar&state=California

Output:

Database:

Table name: states

Read More

Connect Oracle10x Database using JSP

As per requesting am going to show how to connect Oracle10g using JSP.
Before u nedd to download and install it 

Download: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-win32soft-098987.html

using Above link first download and install it . after first configuration is needed,for that 

START----->My Computer----->Os Drive (C or D)-------> Programming Files-----

-->Oracle----->Product--->10.2.0.----->server----->Jdbc----->lib

copy the path as below

C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib\ojdbc.jar;.;

copy the above code and paste it in EnvironMent Variables


Goto Right Click on My Computer----->Properties------>Advanced System 

Settings------->Environment Variables-----> Find Path in System Variables the

and paste the above in path field if there is any path u use ; (Semicolon) to

differentiate

for eg:


D:\ProgramFiles\Java\jdk1.6.0\bin  ;

C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib\ojdbc.jar;.;

JSP CODE:

just for demo am showing this in further post i will give brief info....

Class.Forname:

               Class.forName("oracle.jdbc.driver.OracleDriver");

Connection: 

for creating connection b/w user and database in jsp we need to write this type of code ,we are getting connection for decvice driver for that we used 

DriverManager.getConnection

we are getting connection using URL:- jdbc:oracle:thin:@localhost:1521:XE

On installation we gave Username and Passwor d to Protect ur DB.

Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:15 21:XE","Username","Password");

Read More