About Me

My photo
Nadiad, Gujarat, India
Hi Friends I am Vipul Soni, an Innovative web Designer & Developer with Excellent skills who thrives on challenges and is passionate for all areas of web Design & Development.

Friday, 18 February 2011

pop up window with HTML & Java script

Here is the html file : -
                 -------


<html>
<head>

<title>Popup Window</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sample.css" />

<script type="text/javascript" src="popup-window.js"></script>

</head>
<body>

<h3>Popup Window</h3>


<!-- ------ Form ----- -->

<form action="" onsubmit="return false;">
<div>
<input type="button" value="Top-Left"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-top-left',      20,  20);" />
<input type="button" value="Center"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center',         0,   0);" />
<input type="button" value="Bottom-Right"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-bottom-right', -20, -20);" />
<input type="button" value="Mouse"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse',               -10, -10);" />
<input type="button" value="Bottom" id="pos_bottom"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-bottom', 0, 10, 'pos_bottom');" />
<input type="button" value="Right"  id="pos_right"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-right',  10, 0, 'pos_right' );" />
<input type="button" value="Default"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit');" />
</div>
</form>


<!-- -------- Popup Window -------- -->

<div class="sample_popup"     id="popup" style="display: none;">

<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit"   id="popup_exit" src="form_exit.png" alt="" />
&nbsp;&nbsp;&nbsp;Login
</div>

<div class="menu_form_body">
<form action="sample.php">
<table>
  <tr><th>Username:</th><td><input class="field" type="text"     onfocus="select();" name="username" /></td></tr>
  <tr><th>Password:</th><td><input class="field" type="password" onfocus="select();" name="password" /></td></tr>
  <tr><th>         </th><td><input class="btn"   type="submit"   value="Submit" /></td></tr>
</table>
</form>
</div>

</div>
</body>
</html>

STYLE SHEET(sample.css)  : -
-----------------------

div.sample_popup { z-index: 1; }

div.sample_popup div.menu_form_header
{
  border: 1px solid black;
  border-bottom: none;

  width: 200px;

  height:      20px;
  line-height: 19px;
  vertical-align: middle;

  background: url('form_header.png') no-repeat;

  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #206040;
  cursor:  default;
}

div.sample_popup div.menu_form_body
{
  width: 200px;
  border: 1px solid black;
  background: url('form.png') no-repeat left bottom;
}

div.sample_popup img.menu_form_exit
{
  float:  right;
  margin: 4px 5px 0px 0px;
  cursor: pointer;
}

div.sample_popup table
{
  width: 100%;
  border-collapse: collapse;
}

div.sample_popup th
{
  width: 1%;
  padding: 0px 5px 1px 0px;

  text-align: left;

  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #004060;
}

div.sample_popup td
{
  width: 99%;
  padding: 0px 0px 1px 0px;
}

div.sample_popup form
{
  margin:  0px;
  padding: 8px 10px 10px 10px;
}

div.sample_popup input.field
{
  width: 95%;
  border: 1px solid #808080;

  font-family: Verdana, Sans-Serif;
  font-size: 12px;
}

div.sample_popup input.btn
{
  margin-top: 2px;
  border: 1px solid #808080;

  background-color: #DDFFDD;

  font-family: Verdana, Sans-Serif;
  font-size: 11px;
}



JAVA SCRIPT(popup-window.js)  : -
-----------------------------------
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;


//  popup mousedown 

function popup_mousedown(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  popup_mouseposX = ie ? window.event.clientX : e.clientX;
  popup_mouseposY = ie ? window.event.clientY : e.clientY;
}


// popup_mousedown_window 

function popup_mousedown_window(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  if ( ie && window.event.button != 1) return;
  if (!ie && e.button            != 0) return;

  popup_dragging = true;
  popup_target   = this['target'];
  popup_mouseX   = ie ? window.event.clientX : e.clientX;
  popup_mouseY   = ie ? window.event.clientY : e.clientY;

  if (ie)
       popup_oldfunction = document.onselectstart;
  else popup_oldfunction = document.onmousedown;

  if (ie)
       document.onselectstart = new Function("return false;");
  else document.onmousedown   = new Function("return false;");
}


//  popup mousemove 

function popup_mousemove(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  var mouseX  = ie ? window.event.clientX : e.clientX;
  var mouseY  = ie ? window.event.clientY : e.clientY;

  if (!popup_dragging) return;

  element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
  element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px';

  popup_mouseX = ie ? window.event.clientX : e.clientX;
  popup_mouseY = ie ? window.event.clientY : e.clientY;
}

//  popup_mouseup 

function popup_mouseup(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  if (!popup_dragging) return;

  popup_dragging = false;

  if (ie)
       document.onselectstart = popup_oldfunction;
  else document.onmousedown   = popup_oldfunction;
}

//  popup exit 

function popup_exit(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  popup_mouseup(e);
  element.style.display = 'none';
}


// popup display
function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
  var element      = document.getElementById(id);
  var drag_element = document.getElementById(drag_id);
  var exit_element = document.getElementById(exit_id);

  var width        = window.innerWidth  ? window.innerWidth  : document.documentElement.clientWidth;
  var height       = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;

  element.style.position = "absolute";
  element.style.display  = "block";

  if (position == "element" || position == "element-right" || position == "element-bottom")
  {
    var position_element = document.getElementById(position_id);

    for (var p = position_element; p; p = p.offsetParent)
      if (p.style.position != 'absolute')
      {
        x += p.offsetLeft;
        y += p.offsetTop;
      }

    if (position == "element-right" ) x += position_element.clientWidth;
    if (position == "element-bottom") y += position_element.clientHeight;

    element.style.left = x+'px';
    element.style.top  = y+'px';
  }

  if (position == "mouse")
  {
    element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
  }

  if (position == "screen-top-left")
  {
    element.style.left = (document.documentElement.scrollLeft+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +y)+'px';
  }

  if (position == "screen-center")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
  }

  if (position == "screen-bottom-right")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )  +x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)  +y)+'px';
  }

  drag_element['target']   = id;
  drag_element.onmousedown = popup_mousedown_window;

  exit_element.onclick     = popup_exit;
}

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);
--------------------------------------------------------------------------

foe more detial or query leave your comment & follow the blog


Vipul Soni

asp tricks : pop up window


<asp:Button ID="Button1" runat="server" Text="Button" />
 page_load(.....)
{

Button1.Attributes.Add("onclick", "window.open('Child.aspx',null,'height=350, width=750,status= no, resizable= no, scrollbars=no, toolbar=no,location=no,menubar=no ');");

Vipul Soni

Monday, 7 February 2011

asp tricks : CAPTCHA Free ASP.NET Control

CAPTCHA Free ASP.NET Control


Vipul Soni

Sunday, 6 February 2011

FavIcon Generator

Dynamic Drive- FavIcon Generator



Vipul Soni

Friday, 4 February 2011

asp trick : Using LinkButton in a listview to select item from database

Using LinkButton in a listview to select item from database - ASP.NET Forums: "protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)"


Vipul Soni

asp tricks : Using LinkButton in a listview to select item from database - ASP.NET Forums

Using LinkButton in a listview to select item from database - ASP.NET Forums: "protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)"

asp tricks : ListView Tips and Tricks


Cutting Edge: ListView Tips and Tricks


Vipul Soni

Thursday, 3 February 2011

asp tricks :Shopping Cart display using ASP.NET ListView and floating DIV (CSS) - Consult Sarath

Wednesday, 2 February 2011

Android phones in India

Android phones in India: The one-stop guide
http://www.dancewithshadows.com/tech/android-phones-in-india-the-one-stop-guide/


Vipul Soni

php tricks : create drop down lists



function select_string($array_input,$name,$selected)
{
$retstring .= "<select name = $name>";
if(is_array($array_input))
{
foreach ($array_input as $key => $value)
{
$retstring .= "<option value = '$key'";
if($selected == $key)
{
$retstring .= " selected";
}
$retstring .= ">$value\n";
}
}
$retstring .= "</select>\n";
return $retstring;
}

This function is used to create drop down lists(select option tags) for using in forms.
$array_input is an associative array of all the key/value pairs.
$name has the name you want to give to the <select> tag which will in turn become a variable which will store value of selected option when the form is submitted.
$selected is the value you want as the preselected value in the list.

There advantage of this approach :-

When the form submitted has some errors and needs to be sent back to the user for corrections .. its very easy to recreate select list with the values user filled in the last attempt
eg . $select_list = select_string($array_name,'name',$name);
where 'name' is the name of the variable .. and $name is the value which user submitted in the last attempt ..


Vipul Soni

Tuesday, 1 February 2011

how to generate uniq random password in c#?

Use the following code : -
-----------------------------------

string passStr = Convert.ToString(System.Guid.NewGuid());

        string[] pssSaprate = passStr.Split('-');

        string pass = passSaprate[0];
        Response.Write(pass);
-----------------------------------

you can call it by function

then replace  : return ranuid;

instead of  : Reponse.Write(pass)


Vipul Soni
There was an error in this gadget