Category Archives: Technology

How to build a Previous and Next buttons with List and Css scripts.

Here I’m explaining how to build a previous and next buttons with list and css scripts. Please follow the steps mentioned below.

1) We need a container div. So write a div tag first and give an ID for it. I gave for my div “prevNextContainer”.
2) Write the previous and next lists inside the container div. Give an ID “prev” for previous list and “next” for next list.
<div id="prevNextContainer">
   <li id="prev"><a href="#">Previous<a/></li>
   <li id="prev"><a href="#">Next<a/></li>
</div>

3) Add some styles to the container div.
<style>
#prevNextContainer{
   padding:0px;
   font-family:Tahoma;
   font-size:11px;
   border-bottom:3px solid #dadada;
   height:35px;
}
</style>
4) Set margin and padding to zero for ul and li tags.

#prevNextContainer ul, #prevNextContainer li{
   padding:0px;
   margin:0px;
}

5) Now we need to push previous list to left, next list to right and remove the list style. Set float to left for previous list and float to right for next list. Set the list-style-type to none for both.

#prevNextContainer #prev{
   float:left;
   list-style-type:none;
}
#prevNextContainer #next{
   float:right;
   list-style-type:none;
}

6) Now we are going to makeup the buttons. Give some style to the both anchors tags.

#prev a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#prev a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}
#next a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#next a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}

7) See the sample below.

Thats it…. Enjoy.

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Javascript Reference – Alert();

Alert() is a methord of the window object. Its display popup boxes with messages(‘Texts’) with OK button.
Usage: alert("Hai Guest");

How to write text with multiple lines in an alert box?

Alert is a mathord of window object. So its can’t read HTML tags. Some commonly used escapes characters listed below:
\n : It inserts a new line
\t : tab
\r : Carriage return
\b : backspace
\f : form feed
\' : Single Quote
\" : Double Quote
\\ : Backslash

Usage: alert("Hai User\n Welcome to My website");
Click here to see the alert mentioned above.

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]