Results 1 to 10 of 10

Thread: Opening Popup tip from an iframe on top of main page

  1. #1
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Opening Popup tip from an iframe on top of main page

    1) Script Title: stickytooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...m#.UkV9_kko600

    3) Describe problem: I am needing to open this tooltip that is launched from inside an iframe. it needs to be outside and on top of the main page holding the iframe in much the same as I launch browser windows from within the iframe using the (target="_top") attribute. Is there a modification to either the java script or the HTML code that can accomplish this? Thanks

    4) Example: http://songbe.8thmob.org/test/TESTIFRAME.html

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Try to experiment with this:
    testiframe.html:
    <!doctype html>
    <html >
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >

    <title>Tooltip From Iframe</title>

    </head>

    <body style="background: #006633">

    <div style="position: absolute; top:100px; width:300px; height: 200px; border: 2px solid red">
    <iframe src="menutest.html" style="position: absolute; width:100%; height: 100% " scrolling="no" frameborder="no"></iframe>
    </div>

    </body>
    </html>
    menutest.html:
    <!doctype html>
    <html >
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >

    <title>Main Menu</title>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script type="text/javascript" >

    /***********************************************
    * Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/


    var stickytooltip={
    tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
    fadeinspeed: 200, //duration of fade effect in milliseconds
    rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
    stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
    stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
    stickynotice2: "Click outside this box to hide it", //customize tooltip status message

    //***** NO NEED TO EDIT BEYOND HERE

    isdocked: false,

    positiontooltip:function($, $tooltip, e){
    var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
    var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
    x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
    y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
    $tooltip.css({left:x, top:y})
    },

    showbox:function($, $tooltip, e){
    $tooltip.fadeIn(this.fadeinspeed)
    this.positiontooltip($, $tooltip, e)
    },

    hidebox:function($, $tooltip){
    if (!this.isdocked){
    $tooltip.stop(false, true).hide()
    $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
    }
    },

    docktooltip:function($, $tooltip, e){
    this.isdocked=true
    $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
    },


    init:function(targetselector, tipid){
    jQuery(document).ready(function($){
    var $targets=$(targetselector)
    var $tooltip=$('#'+tipid).appendTo(parent.document.body)
    if ($targets.length==0)
    return
    var $alltips=$tooltip.find('div.atip')
    if (!stickytooltip.rightclickstick)
    stickytooltip.stickynotice1[1]=''
    stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
    stickytooltip.hidebox($, $tooltip)
    $targets.bind('mouseenter', function(e){
    $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
    stickytooltip.showbox($, $tooltip, e)
    })
    $targets.bind('mouseleave', function(e){
    stickytooltip.hidebox($, $tooltip)
    })
    $targets.bind('mousemove', function(e){
    if (!stickytooltip.isdocked){
    stickytooltip.positiontooltip($, $tooltip, e)
    }
    })
    $tooltip.bind("mouseenter", function(){
    stickytooltip.hidebox($, $tooltip)
    })
    $tooltip.bind("click", function(e){
    e.stopPropagation()
    })
    $(this).bind("click", function(e){
    if (e.button==0){
    stickytooltip.isdocked=false
    stickytooltip.hidebox($, $tooltip)
    }
    })
    $(this).bind("contextmenu", function(e){
    if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
    stickytooltip.docktooltip($, $tooltip, e)
    return false
    }
    })
    $(this).bind('keypress', function(e){
    var keyunicode=e.charCode || e.keyCode
    if (keyunicode==115){ //if "s" key was pressed
    stickytooltip.docktooltip($, $tooltip, e)
    }
    })
    }) //end dom ready
    }
    }

    //stickytooltip.init("targetElementSelector", "tooltipcontainer")
    stickytooltip.init("*[data-tooltip]", "mystickytooltip")

    </script>

    </head>

    <body style="font-family: verdana; font-size: 12px">

    <p>Some page contents here...</p>

    <p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
    <p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
    <p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" alt=""></p>


    <div id="mystickytooltip" >
    <div style="padding:5px">

    <div id="sticky1" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
    <img src="http://img121.imageshack.us/img121/746/thailand.jpg" style="position: relative; width: 300px" alt=""><br>
    Thailand boasts some of the most popular and luxurious resorts in Asia.
    </div>

    <div id="sticky2" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
    <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" style="position: relative; width: 300px" alt=""><br>BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
    </div>

    <div id="sticky3" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
    <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" style="position: relative; width: 300px" alt="">
    </div>

    </div>

    </div>

    </body>
    </html>
    Last edited by molendijk; 09-28-2013 at 10:59 AM.

  3. #3
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First let me say thank you for the help. I finally got part of it working. the popup border does not seem to work so I must be missing something. My right click works fine but still without borders. That's minor; however, here is where my real challenge comes in. I am using two iframes in my pages, one at the top of the page and one at the bottom. I have no problems with the top iframe tooltips working and positioning correctly but the bottom is another story. I can get the tooltips positioned on one web page correctly but when I go to a different page, because the page length is different, the positioning of the tooltips is off. I have some real short and real long pages. It seems as though the tooltip is anchoring from the top of the page and I can't figure out how to anchor at the bottom of the page so that whatever the page length is, the lower iframe tooltips position will remain consistent to the every pages bottom. If you view this test frame link( http://songbe.8thmob.org/test/TESTIFRAME.html ) you can see where I am. Roll over the Forum link on both menus and the PayPal graphic . Again, thank you so much for your assistance on that first issue it really helped. CKH
    Last edited by hartleck; 10-03-2013 at 06:17 PM. Reason: missed instruction

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Your first iframe (at the top) has width:1065px. So the tooltips for this iframe (in MainMenu.html) must have left: 1065px width a correction for left, for instance margin-left: -400px. But the correction may be smaller or bigger dependeing on the width of the tooltips.
    The top position for the first iframe is 21px, its height is approx. 200px (although not explicitly given), so the tooltips for this iframe must have something like top: 221px.
    You end up with something similar to:
    <!--HTML for the tooltips-->
    <div id="mystickytooltip" class="stickytooltip">
    <div style="padding:5px">

    <div id="sticky1" class="atip" style="position: absolute; left: 1065px; margin-left: -400px;top: 221px; width: 250px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:small; background:#FFFFFF; padding: 5px">
    <div style="font-weight:bolder" align="center">What's On Our Forum Board?
    </div>
    <hr />
    <ul><li>Discussion Forums</li>
    <li>Wives Forum</li>
    <li>PTSD Forum and Information</li>
    <li>Agent Orange Forum and Information</li>
    <li>VA Helps Forums and Information</li>
    <li>Various other links and Information</li>
    <li>Members Only Areas</li>
    <li>Story and Picture Upload Area</li>
    <li>Secure Logins</li>
    <li>...And Much More</li>
    </ul>
    </div>
    </div>
    </div>
    Your second iframe (at the bottom) has width:1065px. So the tooltips for this iframe (in BottomMenu.html) must have left: 1065px width a correction for left, for instance margin-left: -400px. But the correction may be smaller or bigger dependeing on the width of the tooltips.
    The top position for the second iframe is top:973px, its height is approx. 200px or 300px (although not explicitly given), so the tooltips for this iframe must have something like top: 700px.
    The following seems to do it for the second iframe:
    <!--HTML for the tooltips-->
    <div id="mystickytooltip" class="stickytooltip">
    <div style="padding:5px">

    <div id="sticky1" class="atip" style="position: absolute; left: 1065px; margin-left: -350px; top: 700px; width: 250px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:small; background:#FFFFFF; padding: 5px">

    <div align="center" style="font-weight:bolder">What's On Our Forum Board?</div>
    <hr />
    <div align="left"><ul><li>Discussion Forums</li>
    <li>Wives Forum</li>
    <li>PTSD Forum and Information</li>
    <li>Agent Orange Forum and Information</li>
    <li>VA Helps Forums and Information</li>
    <li>Various other links and Information</li>
    <li>Members Only Areas</li>
    <li>Story and Picture Upload Area</li>
    <li>Secure Logins</li>
    <li>...And Much More</li>
    </ul></div>


    </div></div>

    <div id="sticky2" class="atip" style="position: absolute; left: 1065px; margin-left: -650px; top: 700px; width: 650px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:small; background:#FFFFFF; padding: 5px">

    <div align="center" style="font-weight:bolder"><u>Please Support Our Website</u></div>
    <div align="left">
    <hr / length="80%" />
    <span style="font-weight:bolder">Why?</span><br />
    To insure that 8thmob.org is able to provide a place for our vets and their families as well as those interested in knowing the true stories of those who served in an Aerial Port capacity, especially those of the MOB. Your contribution helps defray the charges of web space through a web site Host. It it possible that some charges may be incurred for incidentals such as site services and security. All work provided in web site building and maintenance by 8th MOB members is totally volenteer work.<br />
    <span style="font-weight:bolder">How much Should I Donate?</span><br />
    The amount is totally up to you, but an amount of just a few dollars can be a big step in helping us keep 8thmob.org going into the future.<br />
    <span style="font-weight:bolder">Accountability:</span> <br />
    <span >Financial Records will be available to members on the Forum Board. All donations while reflected will remain anonomous.</span><br /><span style="font-weight:bolder">Membership:</span><br />Membership in 8thmob.org <span style="font-weight:bolder"><u>"IS NOT"</u></span>contingent upon donations.</div>
    </div></div></div>
    Note:
    There are certain errors in your files that I didn't correct. But they don't seem to be harmful (at the moment).
    Last edited by molendijk; 10-03-2013 at 09:56 PM.

  5. #5
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I made the changes you suggested as best I understood them but it became evident quickly that the issue when using longer or shorter web page lengths is not addressed here. Thanks, If you have an email you could send me I could send you the site link. I do not want it public yet. Thanks, CKH

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Hartleck, in just a moment I will not be connected for about 10 days. I will answer your post as soon as I am reconnected.

  7. #7
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No problem, thanks

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Hi Hartleck,

    I'm using a computer of a friend of mine right now, so I'm momentarily reconnected.
    Launching the tooltips from within an iframe doesn't seem to be a good idea after all because of a mousetrack-issue with iframes.
    But there's a good solution. Instead of putting both iframes on the pages of your site, you can jquery-load their contents in 'iframe-divs'. Demo and explanations here.

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,777
    Thanks
    2
    Thanked 413 Times in 407 Posts

    Default

    main page

    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
    
    <title>Tooltip From Iframe</title>
    <style type="text/css">
    /*<![CDATA[*/
    .atip {
      position:fixed;z-Index:101;left:-3000px;top:-3000px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
    }
    
    .atipframe {
      position:absolute;z-Index:101;left:-3000px;top:-3000px;margin-Left:30px;margin-Top:-50px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body style="background: #006633">
    
    <div id="tst" style="position: absolute; top:50px; width:300px; height: 200px; border: 2px solid red">
    <iframe id="f1" src="menutest2.html" style="position: absolute; width:100%; height: 100% " frameborder="no"></iframe>
    </div>
    
    <div id="sticky1" class="atip"
    <img src="http://img121.imageshack.us/img121/746/thailand.jpg"  alt=""><br>
    Thailand boasts some of the most popular and luxurious resorts in Asia.
    </div>
    
    <div id="sticky2" class="atip" >
    <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" style="position: relative; width: 300px" alt=""><br>BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
    </div>
    
    <div id="sticky3" class="atipframe" >
    <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" style="position: relative; width: 300px" alt="">
    </div>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSticky={
    
     Show:function(id,x,y){
      var o=this[id];
      if (o){
       var p=o.f?this.pos(o.f):null;
       clearTimeout(o.to);
       this.s&&this.s!=o.s?this.s.style.top='-3000px':null;
       o.s.style.left=(o.f?p[0]+x:(o.mk.offsetLeft-o.s.offsetWidth)/2)+'px';
       o.s.style.top=(o.f?p[1]+y:(o.mk.offsetTop-o.s.offsetHeight)/2)+'px';
       this.s=o.s;
      }
     },
    
     Hide:function(id){
      var o=this[id];
      if (o){
       o.to=setTimeout(function(){ o.s.style.top='-3000px'; },1000);
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     init:function(o){
      o.s=document.getElementById(o.StickyID);
      if (o.s){
       o.f=document.getElementById(o.IFrameID);
       o.mk=document.createElement('DIV');
       o.mk.style.position='fixed';
       o.mk.style.bottom=o.mk.style.right='0px';
       o.mk.style.width=o.mk.style.height='0px';
       document.body.appendChild(o.mk);
       o.ud=false;
       this[o.StickyID]=o;
      }
     }
    
    
    }
    
    zxcSticky.init({
     StickyID:'sticky1'
    });
    
    zxcSticky.init({
     StickyID:'sticky2'
    });
    
    zxcSticky.init({
     StickyID:'sticky3',
     IFrameID:'f1'
    });
    
    function zxcPopUp(id,ud,x,y){
     ud?zxcSticky.Show(id,x,y):zxcSticky.Hide(id);
    }
    
    /*]]>*/
    </script>
    
    </body>
    </html>
    menutest2
    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
    
    <title>Main Menu</title>
    
    
    </head>
    
    <body style="font-family: verdana; font-size: 12px">
    
    <p>Some page contents here...</p>
    
    <p><a href="http://en.wikipedia.org/wiki/Thailand" id="sticky1">Thailand</a></p>
    <p><a href="http://en.wikipedia.org/wiki/British_columbia" id="sticky2">British Columbia</a></p>
    <p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" id="sticky3" alt=""></p>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    var Move={
    
     init:function(o){
      o.obj=document.getElementById(o.id);
      o.pass=window.top.zxcPopUp;
      if (o.obj&&o.pass){
       this.addevt(o.obj,'mousemove','move',o);
       this.addevt(o.obj,'mouseout','move',o);
      }
     },
    
     move:function(o,e){
      var xy=this.mse(e),p=this.pos(o.obj);
      o.pass(o.id,e.type=='mousemove',xy[0]-p[0],xy[1]-p[1]);
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,e); }):null;
     }
    
    
    }
    
    Move.init({
     id:'sticky1'
    });
    
    Move.init({
     id:'sticky2'
    });
    
    Move.init({
     id:'sticky3'
    });
    
    /*]]>*/
    </script>
    
    </body>
    </html>
    animation can be added as required
    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/

  10. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,777
    Thanks
    2
    Thanked 413 Times in 407 Posts

    Default

    with animation

    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
    
    <title>Tooltip From Iframe</title>
    <style type="text/css">
    /*<![CDATA[*/
    .atip {
      position:fixed;z-Index:101;left:-3000px;top:-3000px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
    }
    
    .atipframe {
      position:absolute;z-Index:101;left:-3000px;top:-3000px;margin-Left:30px;margin-Top:-50px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body style="background: #006633">
    
    <div id="tst" style="position: absolute; top:50px; width:300px; height: 200px; border: 2px solid red">
    <iframe id="f1" src="menutest2.html" style="position: absolute; width:100%; height: 100% " frameborder="no"></iframe>
    </div>
    
    <div id="sticky1" class="atip"
    <img src="http://img121.imageshack.us/img121/746/thailand.jpg"  alt=""><br>
    Thailand boasts some of the most popular and luxurious resorts in Asia.
    </div>
    
    <div id="sticky2" class="atip" >
    <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" style="position: relative; width: 300px" alt=""><br>BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
    </div>
    
    <div id="sticky3" class="atipframe" >
    <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" style="position: relative; width: 300px" alt="">
    </div>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSticky={
    
     Show:function(id,x,y){
      var o=this[id];
      if (o){
       var p=o.f?this.pos(o.f):null,m=o.m==8?Math.floor(Math.random()*7):o.m;
       clearTimeout(o.to);
       this.s&&this.s!=o.s[0]?this.s.style.top='-3000px':null;
       o.s[0].style.left=(o.f?p[0]+x:(o.mk.offsetLeft-o.s[0].offsetWidth)/2)+'px';
       o.s[0].style.top=(o.f?p[1]+y:(o.mk.offsetTop-o.s[0].offsetHeight)/2)+'px';
       if (!o.ud){
        while (o.m==8&&m==o.lm){
         m=Math.floor(Math.random()*7);
        }
        this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
        o.lm=m;
       }
       o.ud=true;
       this.s=o.s[0];
      }
     },
    
     Hide:function(id){
      var oop=this,o=oop[id];
      if (o){
       o.to=setTimeout(function(){ o.ud=false; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },1000);
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     init:function(o){
      var m=o.Mode,ms=o.Animate,s=document.getElementById(o.StickyID);
      if (s){
       var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',w=s.offsetWidth,h=s.offsetHeight;
       o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
       o.m='CHVRLDUF?'.indexOf(m);
       o.s=[s];
       o.f=document.getElementById(o.IFrameID);
       o.mk=document.createElement('DIV');
       o.mk.style.position='fixed';
       o.mk.style.bottom=o.mk.style.right='0px';
       o.mk.style.width=o.mk.style.height='0px';
       document.body.appendChild(o.mk);
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.ud=false;
       this[o.StickyID]=o;
      }
     },
    
     animate:function(o,a,f,t,l,srt,mS,ud){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=[],z0=0;
      for (;z0<l;z0++){
       n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
       n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
      }
      l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
      }
      else {
       l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
       if (ud===false){
        a[0].style.top='-3000px';
       }
      }
     },
    
     opac:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     clip:function(o,t){
      o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
     }
    
    
    }
    
    zxcSticky.init({
     StickyID:'sticky1',
     Mode:'H'
    });
    
    zxcSticky.init({
     StickyID:'sticky2'
    });
    
    zxcSticky.init({
     StickyID:'sticky3', // the unique ID name of the pop up DIV.              (string)
     IFrameID:'f1',      //(optional) the unique ID name of the IFRAME.        (string, default = 'F' = fade)
     Mode:'?',           //(optional) the display mode(see Note 1).            (string, default = 'F' = fade)
     Animate:1000        //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    /*
      ** Note 1.
        The 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,
        '?' = Random Clip
    
    
    */
    function zxcPopUp(id,ud,x,y){
     ud?zxcSticky.Show(id,x,y):zxcSticky.Hide(id);
    }
    
    /*]]>*/
    </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/

Similar Threads

  1. Calling a function in Iframe from main page help please!
    By shellymabelly83 in forum JavaScript
    Replies: 4
    Last Post: 12-14-2011, 01:16 AM
  2. Replies: 1
    Last Post: 12-05-2011, 02:51 AM
  3. IFrame SSI opening a new page (not within the iframe)
    By tp4fp in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-03-2008, 12:49 AM
  4. parameter from main browser to popup
    By detieubao in forum JavaScript
    Replies: 4
    Last Post: 04-24-2006, 08:05 AM
  5. Replies: 0
    Last Post: 01-29-2006, 11:14 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
  •