need a scrip to show a link or image button on the right side of page!!!

**best100** · 08-18-2013, 06:09 AM

need a scrip to show a link or image button on the right side of page!!!

when the user click on the link or image, it pops out a sticky

i need to on my website to display the biography of somebody

the user click on the always on the right link and it pops out a window showing the paragraph

need it on my website:

http://thequranreciters.com/Reciters/MUthmanQasim.html

**Beverleyh** · 08-18-2013, 09:20 AM

Have a look in the DD library and you'll find some possible options;

Maybe http://www.dynamicdrive.com/dynamici...edcollapse.htm

Or http://www.dynamicdrive.com/dynamici...chcontent2.htm

There are others though so just have a look around and play with the scripts available.

**molendijk** · 08-18-2013, 11:41 AM

A simple example would be:

Code:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>fadeToggle demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<div id="show_bio" style="position: fixed; top:5px; right: 5px; cursor: pointer"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSZuLWnpZoBUzPABlTOlX9Uq60vW6Iwb-5q5PqNwJMWWp2_9gfa" title="John's biography" alt="John's biography"></div>

<div id="bio" style="display: none; position: fixed; top:45px; right: 5px; border: 1px solid black; padding:10px" >
<div style="float: right; font-size: 80%" >[Click on image to hide]</div><br>
This is John's biography.<br>He was born, lived and died.
</div>

text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>

<script>
$("#show_bio").click(function() {
$("#bio").fadeToggle("slow", "linear");
});
</script>
</body>

</html>

**vwphillips** · 08-18-2013, 02:51 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/


.pop {
  position:absolute;visibility:hidden;z-Index:5;width:615px;height:430px;background-Color:#FFCC66;
}

.mask {
  background-Color:#FFFFCC;
  opacity: .5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style>
</head>

<body>
   <INPUT type="button" value="Profile 1" onmouseup="zxcClipPopUp.Open('drop1',true)"  style="position:absolute;right:50px;top:100px;width:90px;"/>
 <div id="drop1" class="pop" >
 Profile 1
 </div>

   <INPUT type="button" value="Profile 2" onmouseup="zxcClipPopUp.Open('drop2',true)"  style="position:absolute;right:50px;top:150px;width:90px;"/>
 <div id="drop2" class="pop" >
 Profile 2
 </div>

<script type="text/javascript" >
/*<![CDATA[*/
// Clip Pop Up (18-August-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcClipPopUp={

 Open:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   this.open(o,ud);
  }
 },

 init:function(o){
  var id=o.PopUpID,pop=document.getElementById(o.PopUpID),c=o.Clip,mcls=o.Mask,ms=o.Speed,show=o.OpenDelay,hide=o.CloseDelay,grp=o.Group;
  if (pop){
   var c=c&&o.clip!='false'?c:null,c=typeof(c)=='string'?c.charAt(0).toUpperCase():'C',w=pop.offsetWidth,h=pop.offsetHeight,msk=document.createElement('DIV'),mk,m='CHVRLDUIF';
   o.mcls=typeof(mcls)=='string';
   pop.style.position=o.mcls?'fixed':'absolute';
   pop.style.visibility='hidden';
   pop.style.top='-3000px';
   document.body.appendChild(pop);
   msk.style.position='fixed';
   msk.style.visibility='hidden';
   mk=msk.cloneNode(false);
   msk.style.left='0px';
   msk.style.top='0px';
   msk.style.width='100%';
   msk.className=mcls;
   o.msk=msk;
   mk.style.width=mk.style.height='0px';
   mk.style.bottom='0px';
   mk.style.right='0px';
   o.mk=mk;
   document.body.appendChild(msk);
   document.body.appendChild(mk);
   o.w=w;
   o.h=h;
   h=Math.round(h/2);
   w=Math.round(w/2);
   o.mde=Math.max(m.indexOf(c),0);
   m=o.mde;
   o.ra=[[0,h,w,h,w],[0,0,w,o.h,w],[0,h,o.w,h,0],[0,0,0,o.h,0],[0,0,o.w,o.h,o.w],[0,0,o.w,0,0],[0,o.h,o.w,o.h,0],[0,0,o.w,o.h,0],[0,0]];
   o.status=false;
   c=o.ra[m];
   o.pop=[pop,m!=8?'clip':'',c.concat(),m!='8'?[100,0,o.w,o.h,0]:[100,100],m!='8'?c.concat():[0,0]];
   o.ms=isFinite(ms*1)&&ms>0?ms*1:1000;
   o.grp=grp;
   o.grp?zxcClipPopUp[o.grp]=o:null;
   o.ctr=true;
   o.mcls?this.addevt(msk,'mouseup','open',o,false):null;
   this['zxc'+id]=o;
  }
 },

 open:function(o,ud,e){
  var oop=this,grp=zxcClipPopUp[o.grp];
  ud=typeof(ud)=='boolean'?ud:!o.status;
  ud&&grp&&grp!=o&&grp.ud?oop.next(grp,false):null;
  clearTimeout(o.to);
  o.to=setTimeout(function(){
    isFinite(e*1)&&e>=0?o.dly=setTimeout(function(){ oop.open(o,false); },e*1):null;
    oop.animate(o,o.pop,o.pop[4].concat(),o.pop[ud?3:2],new Date(),o.ms*Math.abs((o.pop[4][0]-(ud?100:0))/100)+5,ud);
    oop.pp(o);
    ud?o.pop[0].style.visibility='visible':null;
    o.mcls&&ud?o.msk.style.visibility='visible':null;
    o.status=ud;
    if (ud&&o.grp){
     grp!=o?oop.open(grp,false):null;
     zxcClipPopUp[o.grp]=o;
    }
    o.oncng?o.oncng(o,ud):null;
   },ud?o.sdly:o.hdly);
  return false;
 },

 pp:function(o){
  o.msk.style.height=o.mk.offsetTop+'px';
  o.pop[0].style.left=(o.msk.offsetWidth-o.pop[0].offsetWidth)/2+'px';
  o.pop[0].style.top=(o.msk.offsetHeight-o.pop[0].offsetHeight)/2+'px';
 },


 animate:function(o,a,f,t,srt,mS,z){
  clearTimeout(a[7]);
  var oop=this,ms=new Date()-srt,n,z0=0;
  for (;z0<t.length;z0++){
   n=(t[z0]-f[z0])/mS*ms+f[z0];
   a[4][z0]=Math.max(Math.round(isFinite(n)?n:a[4][z0]),0);
  }
  oop.cng(a,a[4]);
  if (ms<mS){
   a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,z); },10);
  }
  else {
   z===false?a[0].style.visibility=o.msk.style.visibility='hidden':null;
   oop.cng(a,z!==false?t:[0,0,0,0,0]);
  }
 },

 cng:function(a,t){
  a[1]=='clip'?a[0].style.clip='rect('+t[1]+'px,'+t[2]+'px,'+t[3]+'px,'+t[4]+'px)':this.opc(a[0],t[1]);
 },

 opc:function(o,t){
  o.style.filter='alpha(opacity='+t+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=t/100-.001;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
 }

}

zxcClipPopUp.init({
 PopUpID:'drop1',   // the unique ID name of the Pop Up DIV for a single element as an alternative.                 (default = class name option)
 Group:'tom',       //(optional) only one POPUP of the same group name can be open.                                 (default = no group)
 Clip:'C',          //(optional) the Pop Up display mode(see Note 2)                                                (default = 'C' = center)
 Mask:'mask',       //(optional) the class name of the 'mask' to obsure other page elements.                        (default = no mask)
 Speed:500,         //(optional) the animation duration in milli seconds.                                           (default = 1000)
 OpenDelay:20,      //(optional) the open delay in milli seconds.                                                   (default = 20)
 CloseDelay:500     //(optional) the close delay in milli seconds.                                                  (default = 500)
});

zxcClipPopUp.init({
 PopUpID:'drop2',   // the unique ID name of the Pop Up DIV for a single element as an alternative.                 (default = class name option)
 Clip:'F',          //(optional) the Pop Up display mode(see Note 2)                                                (default = 'C' = center)
 Group:'tom',       //(optional) only one POPUP of a group name can be open.                                        (default = no group)
 Mask:'mask',       //(optional) the class name of the 'mask' to obsure other page elements.                        (default = no mask)
 Speed:500,         //(optional) the animation duration in milli seconds.                                           (default = 1000)
 OpenDelay:20,      //(optional) the open delay in milli seconds.                                                   (default = 20)
 CloseDelay:500     //(optional) the close delay in milli seconds.                                                  (default = 500)
});

/*

  ** Note 2.
    The Pop Up display modes are:
    'C' = center clip,
    'H' = horizontal clip,
    'V' = vertical clip,
    'R' = right clip,
    'L' = left clip,
    'D' = down clip,
    'U' = up clip,
    'F' = fade,
    'I' = instant,

 **** Script Functions.
  Function zxcClipPopUp.Open may be call using inline event calls to control the script instance
  i.e.
   <INPUT type="button" value="Open" onmouseup="zxcClipPopUp.Open('drop1',true)"  />
   <INPUT type="button" value="Close" onmouseup="zxcClipPopUp.Open('drop1',false)"  />
   <INPUT type="button" value="Toggle" onmouseup="zxcClipPopUp.Open('drop1',null)"  />
  where:
   parameter 0 = the unique name of the 'PopUp' element.
   parameter 1 = true = open, false = close or null = toggle the Pop Up display.

*/
/*]]>*/
</script>
</body>

</html>