Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is is possible to autoScroll a popup

    Refer to http://www.javascriptkit.com/script/...2/postit.shtml

    This popup can be moved and repositioned. But i also want this popup to automatically follow as the user scrolls the page so that the popup always remains visible...

    Thanks in advance.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm your drag and drop script wasn't working in Firefox. I've implemented a different one that works. I have also made the box fixed so it scrolls as the user scrolls.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    /*Post-it note script- by javascriptkit.com
    Visit JavaScript Kit (http://javascriptkit.com) for script
    Credit must stay intact for use*/
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    }
    #postit {
    position:fixed;
    width:250px;
    padding:5px;
    background-color:lightyellow;
    border:1px solid black;
    visibility:hidden;
    z-index:100;
    cursor:pointer;
    left:150px;
    top:150px;
    }
    -->
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    }
    #postit {
    position:absolute;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="postit">
    <div style="text-align:right"><a href="#" onclick="closeit();return false">[Close It]</a></div>
    <!--INSERT YOUR CONTENT HERE-->
    this is content
    <!--END YOUR CONTENT HERE-->
    </div>
    <script type="text/javascript">
    
    //Post-it only once per browser session? (0=no, 1=yes)
    //Specifying 0 will cause postit to display every time page is loaded
    var once_per_browser=0
    
    ///No need to edit beyond here///
    
    var ns4=document.layers
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ns4)
    crossobj=document.layers.postit
    else if (ie4||ns6)
    crossobj=ns6? document.getElementById("postit") : document.all.postit
    
    
    function closeit(){
    if (ie4||ns6)
    crossobj.style.visibility="hidden"
    else if (ns4)
    crossobj.visibility="hide"
    }
    
    function get_cookie(Name) {
      var search = Name + "="
      var returnvalue = "";
      if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        if (offset != -1) { // if cookie exists
          offset += search.length
          // set index of beginning of value
          end = document.cookie.indexOf(";", offset);
          // set index of end of cookie value
          if (end == -1)
             end = document.cookie.length;
          returnvalue=unescape(document.cookie.substring(offset, end))
          }
       }
      return returnvalue;
    }
    
    function showornot(){
    if (get_cookie('postdisplay')==''){
    showit()
    document.cookie="postdisplay=yes"
    }
    }
    
    function showit(){
    if (ie4||ns6)
    crossobj.style.visibility="visible"
    else if (ns4)
    crossobj.visibility="show"
    }
    
    if (once_per_browser)
    showornot()
    else
    showit()
    
    </script>
    
    <script type="text/javascript">
    /**************************************************
     * dom-drag.js
     * 09.25.2001
     * www.youngpup.net
     * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
     **************************************************
     * 10.28.2001 - fixed minor bug where events
     * sometimes fired off the handle, not the root.
     **************************************************/
    var topVal = "150px"; //this is the top position from the browser
    var leftVal = "150px"; //this is the left position from the browser
    var Drag = {
    
    	obj : null,
    
    	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    	{
    		o.onmousedown	= Drag.start;
    
    		o.hmode			= bSwapHorzRef ? false : true ;
    		o.vmode			= bSwapVertRef ? false : true ;
    
    		o.root = oRoot && oRoot != null ? oRoot : o ;
    
    		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = topVal;
    		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = leftVal;
    		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
    		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
    
    		o.minX	= typeof minX != 'undefined' ? minX : null;
    		o.minY	= typeof minY != 'undefined' ? minY : null;
    		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
    		o.maxY	= typeof maxY != 'undefined' ? maxY : null;
    
    		o.xMapper = fXMapper ? fXMapper : null;
    		o.yMapper = fYMapper ? fYMapper : null;
    
    		o.root.onDragStart	= new Function();
    		o.root.onDragEnd	= new Function();
    		o.root.onDrag		= new Function();
    	},
    
    	start : function(e)
    	{
    		var o = Drag.obj = this;
    		e = Drag.fixE(e);
    		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
    		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    		o.root.onDragStart(x, y);
    
    		o.lastMouseX	= e.clientX;
    		o.lastMouseY	= e.clientY;
    
    		if (o.hmode) {
    			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
    			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
    		} else {
    			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
    			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
    		}
    
    		if (o.vmode) {
    			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
    			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
    		} else {
    			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
    			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
    		}
    
    		document.onmousemove	= Drag.drag;
    		document.onmouseup		= Drag.end;
    
    		return false;
    	},
    
    	drag : function(e)
    	{
    		e = Drag.fixE(e);
    		var o = Drag.obj;
    
    		var ey	= e.clientY;
    		var ex	= e.clientX;
    		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
    		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    		var nx, ny;
    
    		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
    		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
    		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
    		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
    
    		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
    		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
    
    		if (o.xMapper)		nx = o.xMapper(y)
    		else if (o.yMapper)	ny = o.yMapper(x)
    
    		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
    		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
    		Drag.obj.lastMouseX	= ex;
    		Drag.obj.lastMouseY	= ey;
    
    		Drag.obj.root.onDrag(nx, ny);
    		return false;
    	},
    
    	end : function()
    	{
    		document.onmousemove = null;
    		document.onmouseup   = null;
    		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
    									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
    		Drag.obj = null;
    	},
    
    	fixE : function(e)
    	{
    		if (typeof e == 'undefined') e = window.event;
    		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
    		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
    		return e;
    	}
    };
    Drag.init(document.getElementById("postit"));
    </script>
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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