My Float-In Popover is not appear on my page

Discussion in 'HTML & Website Design' started by MindReality, May 7, 2013.

  1. #1
    I installed Instant Popover but I cannot get it to work on my webpage design 2. It
    works on my previous webpage design 3.

    My new webpage design:
    http://www.mindreality.com/discover-incredible-secrets2.html

    My previous webpage design:
    http://www.mindreality.com/discover-incredible-secrets3.html

    I have uploaded the html files of the two pages, and also the style.css code in a notepad for my webpage design 2.

    I would appreciate if someone can find out what is wrong, and how to make it show up on webpage design 2 the same way it does on design 3.
     

    Attached Files:

    MindReality, May 7, 2013 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    There is really a lot of mess on your code.. Open your secrets2.html and find :

    <!-- IPO CODE: DROPIN START -->
    <script language=javascript src=DropPopOver.js></script><script language=javascript>
    var ie=document.all
    var dom = document.getElementById
    var ns4 = document.layers
    var bouncelimit = 32
    var direction = "up"
    var poplayer
    function initbox(){
    if (!dom&&!ie&&!ns4)
    return
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    mkoverlaydrop(); sl = 0; shadeinoverlay();
    poplayer = document.getElementById("dropin").cloneNode(true);
    poplayer.style.top = scroll_top - 250
    poplayer.style.visibility=(dom||ie)? "visible" : "show"
    document.body.appendChild(poplayer);
    dropstart = setInterval("dropin()", 50)
    }
    function dropin(){
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    if (parseInt(poplayer.style.top)<50+scroll_top)
    poplayer.style.top = parseInt(poplayer.style.top) + 40
    else{
    clearInterval (dropstart)
    bouncestart = setInterval("bouncein()", 50)
    }
    }
    function bouncein(){
    poplayer.style.top = parseInt(poplayer.style.top) - bouncelimit
    if (bouncelimit<0)
    bouncelimit+=8
    bouncelimit = bouncelimit * -1
    if (bouncelimit==0){
    clearInterval (bouncestart)
    }
    }
    function dismissbox(){
    try {if (document.getElementById('dropframe')) {frames['dropframe'].location.href = 'about:blank';}} catch(e) {}
    if (window.bouncestart) clearInterval(bouncestart)
    sl = 10; shadeoutoverlay();
    poplayer.style.visibility = "hidden"
    }
    var no=50
    var dropinoverlay;
    function mkoverlaydrop() {
    dropinoverlay = document.createElement('DIV');
    dropinoverlay.style.position = 'absolute';
    dropinoverlay.style.left = '0px';
    dropinoverlay.style.top = '0px';
    var w = (document.body.scrollWidth>document.body.clientWidth)? document.body.scrollWidth : document.body.clientWidth;
    var h = (document.body.scrollHeight>document.body.clientHeight)? document.body.scrollHeight : document.body.clientHeight;
    w = w + 50;
    h = h + 50;
    dropinoverlay.style.width = w;
    dropinoverlay.style.height = h;
    dropinoverlay.innerHTML = "<table width = " + w + " height = " + h + "> </table>"
    dropinoverlay.style.backgroundColor = "#0000FF"
    dropinoverlay.above = poplayer;
    document.body.appendChild(dropinoverlay);
    dropinoverlay.style.opacity = 0;
    dropinoverlay.style.filter = 'alpha(opacity=' + 0 + ')';
    }
    var sl = 0;
    var tm = 14;
    function shadeinoverlay() {
    dropinoverlay.style.opacity = ((no/100) / 10) * sl;
    dropinoverlay.style.filter = 'alpha(opacity=' + (no / 10) * sl + ')';
    sl+=1;
    if (sl<=10)  setTimeout('shadeinoverlay()',tm); }
    function shadeoutoverlay() {
    dropinoverlay.style.opacity = (no/100) / 10 * sl;
    dropinoverlay.style.filter = 'alpha(opacity=' + no / 10 * sl + ')';
    sl-=1;
    if (sl>=0)  {setTimeout('shadeoutoverlay()',tm); }
    else {dropinoverlay.style.visibility = "hidden";
    poplayer.style.visibility = "hidden";
    } }
    function StickyAd()
    {
    if (bouncelimit==0)
    {
    poplayer.style.left = ((ie)? document.body.scrollLeft : window.pageXOffset)+300
    poplayer.style.top = ((ie)? document.body.scrollTop : window.pageYOffset)+50
    }
    }
    </script>
    <!-- IPO CODE: DROPIN END -->
    <!-- IPO CODE: ONLOAD START -->
    <script> function IPOLoad() {setTimeout('initbox()',0);window.onscroll=StickyAd;
    }</script><!-- IPO CODE: ONLOAD END -->
    Code (markup):
    Then Replace It By This New One :

    <!-- IPO CODE: DROPIN START -->
    <script language=javascript src="http://www.mindreality.com/DropPopOver.js"></script>
    <script type="text/javascript">// <![CDATA[
    var ie=document.all
    var dom = document.getElementById
    var ns4 = document.layers
    var bouncelimit = 32
    var direction = "up"
    var crossobj = null;
    function initbox(){
    if (!dom&&!ie&&!ns4)
    return;
    crossobj=(dom)?document.getElementById("dropin") : ie? document.all.dropin : document.dropin
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    crossobj.style.top = scroll_top-250 + "px"
    crossobj.style.visibility=(dom||ie)? "visible" : "show"
    dropstart = setInterval("dropin()", 50)
    }
     
    function dropin(){
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
     
        if (parseInt(crossobj.style.top)<100+scroll_top)
        crossobj.style.top = parseInt(crossobj.style.top) + 40 + "px"
        else{
        clearInterval (dropstart)
        bouncestart = setInterval("bouncein()", 50)
        }
     
    }
     
    function bouncein(){
    crossobj.style.top = parseInt(crossobj.style.top) - bouncelimit + "px"
     
    if (bouncelimit<0)
        bouncelimit+=8
        bouncelimit = bouncelimit * -1
     
    if (bouncelimit==0){
        clearInterval (bouncestart)
        }
    }
     
     
    function dismissbox(){
    if (window.bouncestart) clearInterval(bouncestart)
        crossobj.style.visibility = "hidden"
        }
    window.setTimeout('initbox()',1000);
    // ]]></script>
    <!-- IPO CODE: DROPIN END -->
     
    <!-- IPO CODE: PENC START --><script>eval(unescape("%66%75%6E%63%74%69%6F%6E%20%70%65%6E%63%28%6E%29%7B%76%61%72%20%73%3D%75%6E%65%73%63%61%70%65%28%6E%29%2C%6F%75%74%3D%27%27%2C%63%68%3B%76%61%72%20%6B%65%79%3D%27%74%72%45%51%64%66%41%68%6E%27%3B%66%6F%72%28%69%3D%30%3B%69%3C%73%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%7B%63%68%3D%73%2E%63%68%61%72%43%6F%64%65%41%74%28%69%29%5E%6B%65%79%2E%63%68%61%72%43%6F%64%65%41%74%28%69%25%6B%65%79%2E%6C%65%6E%67%74%68%29%3B%69%66%28%63%68%3D%3D%30%29%7B%63%68%3D%6B%65%79%2E%63%68%61%72%43%6F%64%65%41%74%28%69%25%6B%65%79%2E%6C%65%6E%67%74%68%29%3B%7D%20%6F%75%74%2B%3D%53%74%72%69%6E%67%2E%66%72%6F%6D%43%68%61%72%43%6F%64%65%28%63%68%29%3B%7D%20%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%6F%75%74%29%3B%7D"));</script> <!-- IPO CODE: PENC END -->
    <!-- IPO CODE: ONLOAD START -->
    <script> function IPOLoad() {setTimeout('initbox()',0);window.onscroll=StickyAd;
    }</script><!-- IPO CODE: ONLOAD END -->
    PHP:
    That will work just perfect... Goodluck
     
    themes4all, May 7, 2013 IP
  3. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Thank you!

    But it doesn't really work perfect yet. If you click on the two links, you will see it still doesn't work the same.

    My new webpage design:
    http://www.mindreality.com/discover-incredible-secrets2.html

    My previous webpage design:
    http://www.mindreality.com/discover-incredible-secrets3.html
     
    MindReality, May 7, 2013 IP
  4. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #4
    As i said there is a lot of mess on your code :)

    Here how to fix that, just before the </head> add this code :

    <style type="text/css">
    #dropin {
    position: absolute; 
    visibility: hidden;
    left: 300px;
    top: 50px;
    width: 400px;
    height: 350px;
    border: 3px solid #ff0000;
    background-color: #ffffff;
    }
    </style>
    HTML:
    Find This :

    
    <div id="dropin" style="position: absolute; visibility: hidden;
    left: 300;
    top: 50;
    width: 400;
    height: 350;
    border: 3px solid #FF0000;
    background-color: #FFFFFF"
    >
    
    HTML:

    and Replace With :
    <div id="dropin">
    HTML:
    Now the Popup Will appear Just like the Other...

    Goodluck
     
    themes4all, May 7, 2013 IP
  5. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #5
    DropPopOver.js wasn't working properly, so I have pasted the unhidden version of the code from the Instant Popover software.

    
    <!-- IPO CODE: DROPIN START -->
    <script language=javascript>
    var ie=document.all
    var dom = document.getElementById
    var ns4 = document.layers
    var bouncelimit = 32
    var direction = "up"
    var poplayer
    function initbox(){
    if (!dom&&!ie&&!ns4)
    return
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    mkoverlaydrop(); sl = 0; shadeinoverlay();
    poplayer = document.getElementById("dropin").cloneNode(true);
    poplayer.style.top = scroll_top - 250
    poplayer.style.visibility=(dom||ie)? "visible" : "show"
    document.body.appendChild(poplayer);
    dropstart = setInterval("dropin()", 50)
    }
    function dropin(){
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    if (parseInt(poplayer.style.top)<50+scroll_top)
    poplayer.style.top = parseInt(poplayer.style.top) + 40
    else{
    clearInterval (dropstart)
    bouncestart = setInterval("bouncein()", 50)
    }
    }
    function bouncein(){
    poplayer.style.top = parseInt(poplayer.style.top) - bouncelimit
    if (bouncelimit<0)
    bouncelimit+=8
    bouncelimit = bouncelimit * -1
    if (bouncelimit==0){
    clearInterval (bouncestart)
    }
    }
    function dismissbox(){
    try {if (document.getElementById('dropframe')) {frames['dropframe'].location.href = 'about:blank';}} catch(e) {}
    if (window.bouncestart) clearInterval(bouncestart)
    sl = 10; shadeoutoverlay();
    poplayer.style.visibility = "hidden"
    }
    var no=50
    var dropinoverlay;
    function mkoverlaydrop() {
    dropinoverlay = document.createElement('DIV');
    dropinoverlay.style.position = 'absolute';
    dropinoverlay.style.left = '0px';
    dropinoverlay.style.top = '0px';
    var w = (document.body.scrollWidth>document.body.clientWidth)? document.body.scrollWidth : document.body.clientWidth;
    var h = (document.body.scrollHeight>document.body.clientHeight)? document.body.scrollHeight : document.body.clientHeight;
    w = w + 50;
    h = h + 50;
    dropinoverlay.style.width = w;
    dropinoverlay.style.height = h;
    dropinoverlay.innerHTML = "<table width = " + w + " height = " + h + "> </table>"
    dropinoverlay.style.backgroundColor = "#0000FF"
    dropinoverlay.above = poplayer;
    document.body.appendChild(dropinoverlay);
    dropinoverlay.style.opacity = 0;
    dropinoverlay.style.filter = 'alpha(opacity=' + 0 + ')';
    }
    var sl = 0;
    var tm = 14;
    function shadeinoverlay() {
    dropinoverlay.style.opacity = ((no/100) / 10) * sl;
    dropinoverlay.style.filter = 'alpha(opacity=' + (no / 10) * sl + ')';
    sl+=1;
    if (sl<=10)  setTimeout('shadeinoverlay()',tm); }
    function shadeoutoverlay() {
    dropinoverlay.style.opacity = (no/100) / 10 * sl;
    dropinoverlay.style.filter = 'alpha(opacity=' + no / 10 * sl + ')';
    sl-=1;
    if (sl>=0)  {setTimeout('shadeoutoverlay()',tm); }
    else {dropinoverlay.style.visibility = "hidden";
    poplayer.style.visibility = "hidden";
    } }
    function StickyAd()
    {
    if (bouncelimit==0)
    {
    poplayer.style.left = ((ie)? document.body.scrollLeft : window.pageXOffset)+300
    poplayer.style.top = ((ie)? document.body.scrollTop : window.pageYOffset)+50
    }
    }
    </script>
    <!-- IPO CODE: DROPIN END -->
    <!-- IPO CODE: ONLOAD START -->
    <script> function IPOLoad() {setTimeout('initbox()',0);window.onscroll=StickyAd;
    }</script><!-- IPO CODE: ONLOAD END -->
     
    
    Code (markup):
    But the float-in effect is not working, it just appears on screen without it. Could you make it in the tidy format for this one like what you did in the first post?

    I have attached the html file here.
     

    Attached Files:

    MindReality, May 7, 2013 IP
  6. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #6
    Also, I am not sure whether it is the format of the code or not.

    But the main difference here is that webpage 3 has the float-in effect, but webpage 2 does not.

    Webpage 2:
    http://www.mindreality.com/discover-incredible-secrets2.html

    Webpage 3:
    http://www.mindreality.com/discover-incredible-secrets3.html

    Also, both pages now do not require DropPopOver.js since whatever is found there is not placed directly in the page instead. I have attached the html files of both pages.
     

    Attached Files:

    MindReality, May 7, 2013 IP
  7. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #7
    dude, what i gave you worked properly.. so re-check.. and try again!

    Goodluck
     
    themes4all, May 7, 2013 IP
  8. MindReality

    MindReality Well-Known Member

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    105
    #8
    DropPopOver.js does not work properly even in your code, because it is not called from the correct location. I have pasted the unhidden version of the code so now it does not need to use separate file.

    The main difference now is that webpage 2 does not have the float-in effect and the "sticky" effect (follows you as you scroll) which webpage 3 has.

    Webpage 2:
    http://www.mindreality.com/discover-incredible-secrets2.html

    Webpage 3:
    http://www.mindreality.com/discover-incredible-secrets3.html

    I have attached the files again.

    We're getting close to solving it completely. At least now it is appearing on screen.
     

    Attached Files:

    MindReality, May 7, 2013 IP