Results 1 to 7 of 7

Thread: drop-in iframe popover - once per browser session?

  1. #1
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question drop-in iframe popover - once per browser session?

    Hi there! Newbie here, learning this coding stuff as I go. I'm seeking your brilliance here... please provide any ideas in super simple, easy to understand, step-by-step wording so that I can understand ;-)

    Does anyone have any ideas on how to alter the code below to have the iframe popover appear once per browser session, and with a drop-in effect? I had to use an iframe popover because I've got some flash objects on my page, and the I cannot get the regular popover to appear in front/above the flash.

    OK - I found the following iframe dhtml popover here: http://www.dynamicdrive.com/dynamici...htmlwindow.htm.


    I've put this in the header:

    Code:
    <script>
    
    //DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
    //For full source code, documentation, and terms of usage,
    //Visit http://www.dynamicdrive.com/dynamici...htmlwindow.htm
    
    var dragapproved=false
    var minrestore=0
    var initialwidth,initialheight
    var ie5=document.all&&document.getElementById
    var ns6=document.getElementById&&!document.all
    
    function iecompattest(){
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function drag_drop(e){
    if (ie5&&dragapproved&&event.button==1){
    document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
    document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
    }
    else if (ns6&&dragapproved){
    document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
    document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
    }
    }
    
    function initializedrag(e){
    offsetx=ie5? event.clientX : e.clientX
    offsety=ie5? event.clientY : e.clientY
    document.getElementById("dwindowcontent").style.display="none" //extra
    tempx=parseInt(document.getElementById("dwindow").style.left)
    tempy=parseInt(document.getElementById("dwindow").style.top)
    
    dragapproved=true
    document.getElementById("dwindow").onmousemove=drag_drop
    }
    
    function loadwindow(url,width,height){
    if (!ie5&&!ns6)
    window.open(url,"","width=width,height=height,scrollbars=0")
    else{
    document.getElementById("dwindow").style.display=''
    document.getElementById("dwindow").style.width=initialwidth=width+"px"
    document.getElementById("dwindow").style.height=initialheight=height+"px"
    document.getElementById("dwindow").style.left="30px"
    document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
    document.getElementById("cframe").src=url
    }
    }
    
    function maximize(){
    if (minrestore==0){
    minrestore=1 //maximize window
    document.getElementById("maxname").setAttribute("src","restore.gif")
    document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
    document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
    }
    else{
    minrestore=0 //restore window
    document.getElementById("maxname").setAttribute("src","max.gif")
    document.getElementById("dwindow").style.width=initialwidth
    document.getElementById("dwindow").style.height=initialheight
    }
    document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
    document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
    }
    
    function closeit(){
    document.getElementById("dwindow").style.display="none"
    }
    
    function stopdrag(){
    dragapproved=false;
    document.getElementById("dwindow").onmousemove=null;
    document.getElementById("dwindowcontent").style.display="" //extra
    }
    
    </script>
    
    
    And I've put this in a code box (in the body - 'to front'):
    
    <div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
    <div align="right" style="background-color:navy"><img src="http://www.richlife.ca/image/close.gif" onClick="closeit()"></div>
    <div id="dwindowcontent" style="height:100%">
    <iframe id="cframe" src="" width=100% height=100%></iframe>
    </div>
    </div>
    
    <script>
    //Use below code to load DHTML Window as page loads 
    if (ns6) window.onload=new Function('loadwindow("http://www.richlife.ca/indexinstructions.html",458,508)')
    else
    loadwindow("http://www.richlife.ca/indexinstructions.html",458,508)
    </script>


    The above works great, except I'm wondering if there's a way to enable the popover to appear once per browser session, and with the drop-in effect as this example: http://www.dynamicdrive.com/dynamici.../dropinbox.htm Any ideas on how I might go about incorporating these two features into the above script?

    ~ Mylnda ('melinda')
    Last edited by ddadmin; 09-27-2011 at 02:38 AM.

  2. #2
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Another add-on question to my post above...

    Is there also a way to add a minimize feature (http://www.dynamicdrive.com/dynamicindex11/abox2.htm) to the iframe popover script above?
    Last edited by Mylnda; 10-09-2005 at 09:17 PM.

  3. #3
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Also, is there a way to get rid of the beveled look around the iframe in the iframe popover above? It would be nice if there were no visual boarder/bevel around the iframe. ;-)

  4. #4
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's all of my questions and requests for help regarding this script. My most pressing request is to get the iframe popover to drop-in and display only once per browser session. Secondary to that would be to eliminate the beveled boarder around the iframe, and lastly to see if there is a way to minimize the popover?

    I appreciate all your efforts and suggestions with this - thank-you in advance!

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    For the once per browser session feature, that's relatively easy. Just replace the script of Step 2:

    Code:
    <script>
    //Use below code to load DHTML Window as page loads 
    if (ns6) window.onload=new Function('loadwindow("http://www.google.com",600,400)')
    else
    loadwindow("http://www.google.com",600,400)
    </script>
    With the below instead:

    Code:
    <script>
    if (document.cookie.indexOf("alreadyloaded")==-1){
    //Use below code to load DHTML Window as page loads 
    if (ns6) window.onload=new Function('loadwindow("http://www.google.com",600,400)')
    else
    loadwindow("http://www.google.com",600,400)
    document.cookie="alreadyloaded=1"
    }
    </script>
    That should do the trick. Unfortunately for the drop in animation, that's a lot more involved.

  6. #6
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank-you much!

  7. #7
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey ddadmin,

    I know this thread is quite old now but I just stumbled upon it through a google search 'cause I desperately need it.

    I'm just wondering if you can also provide a script for us to set the iframe popover to appear once every 24 hours (any hour or minutes for that matter).

    I'm a noob when it comes to javascript programming so I'm really hoping you could help me out...

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
  •