Results 1 to 5 of 5

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

  1. #1
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by jscheuer1; 08-18-2013 at 06:14 AM. Reason: Format

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 313 Times in 311 Posts
    Blog Entries
    12

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    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>

  4. The Following User Says Thank You to molendijk For This Useful Post:

    best100 (08-29-2013)

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    best100 (08-29-2013)

  7. #5
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    THANK YOU vwphillips & molendijk ..GREAT SCRIPTS!!!

    exactly what i was looking for

Similar Threads

  1. Image button link to another div in same page
    By aelynne in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-31-2013, 12:23 PM
  2. Replies: 2
    Last Post: 04-09-2011, 06:34 PM
  3. Glossy menu active link same as Accordion scrip
    By daveddp in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-24-2008, 09:32 AM
  4. Replies: 1
    Last Post: 12-04-2006, 09:07 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •