SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot pannick's Avatar
    Join Date
    Aug 2003
    Location
    Florida
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to reposition script

    I am using a post it script from dynamic drive. I would like the post it pop up to appear closer to the top of my page. www.floridahorsetrader.com I have tried replacing absolute with top but that puts it right in the page instead of appearing over it.

    Any tips would greatly be appreciated
    Part 1
    <!-------------------------Sticky Note Test-------------------------->

    <!-- This script and many more are available free online at -->

    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Original: Team DynamicDrive -->

    <!-- Web Site: http://www.dynamicdrive.com -->

    <style type="text/css">



    #fadeinbox{

    position:absolute;

    width: 300px;

    left: 0;

    top: -400px;

    border: 2px solid black;

    background-color: lightyellow;

    padding: 4px;

    z-index: 100;

    visibility:hidden;

    }



    </style>





    <script type="text/javascript">



    /***********************************************

    * Sticky Note script- Dynamic Drive DHTML code library (www.dynamicdrive.com)

    * Visit DynamicDrive.com for hundreds of DHTML scripts

    * This notice must stay intact for legal use

    * Go to http://www.dynamicdrive.com/ for full source code

    ***********************************************/



    //Specify display mode. 3 possible values are:

    //1) "always"- This makes the fade-in box load each time the page is displayed

    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session

    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...

    // For example, 2 would display the box about (1/2) 50% of the time the page loads.



    var displaymode="always"



    var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)

    var autohidebox=["yes", 25] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]

    var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)

    var IEfadelength=3 //fade in duration for IE, in seconds

    var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)



    ////////No need to edit beyond here///////////



    if (parseInt(displaymode)!=NaN)

    var random_num=Math.floor(Math.random()*displaymode)



    function displayfadeinbox(){

    var ie=document.all && !window.opera

    var dom=document.getElementById

    iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

    objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox

    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset

    var docwidth=(ie)? iebody.clientWidth : window.innerWidth

    docheight=(ie)? iebody.clientHeight: window.innerHeight

    var objwidth=objref.offsetWidth

    objheight=objref.offsetHeight

    objref.style.left=docwidth/2-objwidth/2+"px"

    objref.style.top=scroll_top+docheight/2-objheight/2+"px"



    if (showonscroll=="yes")

    showonscrollvar=setInterval("staticfadebox()", 50)



    if (enablefade=="yes" && objref.filters){

    objref.filters[0].duration=IEfadelength

    objref.filters[0].Apply()

    objref.filters[0].Play()

    }

    objref.style.visibility="visible"

    if (objref.style.MozOpacity){

    if (enablefade=="yes")

    mozfadevar=setInterval("mozfadefx()", 90)

    else{

    objref.style.MozOpacity=1

    controlledhidebox()

    }

    }

    else

    controlledhidebox()

    }



    function mozfadefx(){

    if (parseFloat(objref.style.MozOpacity)<1)

    objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree

    else{

    clearInterval(mozfadevar)

    controlledhidebox()

    }

    }



    function staticfadebox(){

    var ie=document.all && !window.opera

    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset

    objref.style.top=scroll_top+docheight/2-objheight/2+"px"

    }



    function hidefadebox(){

    objref.style.visibility="hidden"

    if (typeof showonscrollvar!="undefined")

    clearInterval(showonscrollvar)

    }



    function controlledhidebox(){

    if (autohidebox[0]=="yes"){

    var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000

    setTimeout("hidefadebox()", delayvar)

    }

    }



    function initfunction(){

    setTimeout("displayfadeinbox()", 100)

    }



    function get_cookie(Name) {

    var search = Name + "="

    var returnvalue = ""

    if (document.cookie.length > 0) {

    offset = document.cookie.indexOf(search)

    if (offset != -1) {

    offset += search.length

    end = document.cookie.indexOf(";", offset)

    if (end == -1)

    end = document.cookie.length;

    returnvalue=unescape(document.cookie.substring(offset, end))

    }

    }

    return returnvalue;

    }





    if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){

    if (window.addEventListener)

    window.addEventListener("load", initfunction, false)

    else if (window.attachEvent)

    window.attachEvent("onload", initfunction)

    else if (document.getElementById)

    window.onload=initfunction

    document.cookie="fadedin=yes"

    }





    </script>
    <!-----------------------------Sticky Note End-------------------------------->
    Part 2
    [QUOTE]<!-----------------------------Sticky Note Test----------------------------------------->
    <DIV id="fadeinbox" style="filterrogidXImageTransform.Microsoft.RandomDissolve(duration=1) progidXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">



    <!-------------------INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.---------------------------->
    <img border="1" src="pdfs/flyer.jpg" width="312" height="400"><br>
    &nbsp;<div align="center">
    <table border="0" width="110%" id="table14">
    <tr>
    <td>
    <a href="mailto:kelly@tkofarm.com">Email us for more info</a></td>
    <td> <a href="#" onClick="hidefadebox();return false">Hide Box</a>

    </td>
    </tr>
    </table>
    </div>

    </DIV>



    <!------------------------------------------------Sticky Note End------------------------------------------->

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is related to your last question. You're running that script in your iframe, which, like all frames, is a full-fledged window object. Therefore, everything in the script is calculated relative to the iframe - not the containing (main) window. That why the fade-in box is positioning itself over the iframe.

    Oh, yeah...since the box is an element of the iframe page, there is no way to position it outside the iframe. Change this:
    Code:
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    ...to this:
    Code:
    objref.style.top=scroll_top+20+"px"
    ...& see what happens. You can fiddle with the blue value.

    If that doesn't get it. you'll have to embed it in the containing page one way or another; the script makes it self-centering, even if the page is scrolled.

    Any particular reason for the iframe in the first place? Pretty much the entire page...shouldn't use frames if at all possible.
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot pannick's Avatar
    Join Date
    Aug 2003
    Location
    Florida
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it is not I got that working with your tip.

    This is a different script

  4. #4
    SitePoint Zealot pannick's Avatar
    Join Date
    Aug 2003
    Location
    Florida
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a lot of pages and it get old making sure each one is perfect. I was trying to figure out a way to do it like .php and have everything always go to one page like a frame.


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
  •