SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Eliminate Flickering of Popup (Div)

    hi guys,

    i was working on an html page wherein when you click on the "comment" icon (blue balloon), a popup box or div comes out.

    http://squaredpixels.com/rubricone/website/trial.html

    my problem is, when the page loads or is refreshed, the popup box or div flickers or shows up.

    is there a way to eliminate the flickering or showing of the popup box or div?

    here is the javascript:

    // ***** Popup Control *********************************************************

    function at_display(x) {
    var win = window.open();
    for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
    }

    // ***** Show Aux *****

    function at_show_aux(parent, child) {
    var p = document.getElementById(parent);
    var c = document.getElementById(child );
    var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
    var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

    for (; p; p = p.offsetParent) {
    top += p.offsetTop;
    left += p.offsetLeft;
    }

    c.style.position = "absolute";
    c.style.top = top +'px';
    c.style.left = left+'px';
    c.style.visibility = "visible";
    }

    // ***** Show *****

    function at_show() {
    var p = document.getElementById(this["at_parent"]);
    var c = document.getElementById(this["at_child" ]);
    at_show_aux(p.id, c.id);
    clearTimeout(c["at_timeout"]);
    }

    // ***** Hide *****

    function at_hide() {
    var c = document.getElementById(this["at_child"]);
    c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
    }

    // ***** Click *****

    function at_click() {
    var p = document.getElementById(this["at_parent"]);
    var c = document.getElementById(this["at_child" ]);

    if (c.style.visibility != "visible")
    at_show_aux(p.id, c.id);
    else c.style.visibility = "hidden";
    return false;
    }

    // ***** Attach *****

    // PARAMETERS:
    // parent - id of visible html element
    // child - id of invisible html element that will be dropdowned
    // showtype - "click" = you should click the parent to show/hide the child
    // "hover" = you should place the mouse over the parent to show
    // the child
    // position - "x" = the child is displayed to the right of the parent
    // "y" = the child is displayed below the parent
    // cursor - Omit to use default cursor or check any CSS manual for possible
    // values of this field

    function at_attach(parent, child, showtype, position, cursor) {
    var p = document.getElementById(parent);
    var c = document.getElementById(child);

    p["at_parent"] = p.id;
    c["at_parent"] = p.id;
    p["at_child"] = c.id;
    c["at_child"] = c.id;
    p["at_position"] = position;
    c["at_position"] = position;

    c.style.position = "absolute";
    c.style.visibility = "hidden";

    if (cursor != undefined) p.style.cursor = cursor;

    switch (showtype) {
    case "click":
    p.onclick = at_click;
    p.onmouseout = at_hide;
    c.onmouseover = at_show;
    c.onmouseout = at_hide;
    break;
    case "hover":
    p.onmouseover = at_show;
    p.onmouseout = at_hide;
    c.onmouseover = at_show;
    c.onmouseout = at_hide;
    break;
    }
    }

    // Multiple onload function created by: Simon Willison
    // http://simonwillison.net/2004/May/26/addLoadEvent/
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }

    addLoadEvent(function() {
    at_attach("src_parent", "src_child", "click", "x", "pointer");
    at_attach("second_parent", "second_child", "click", "x", "pointer");
    at_attach("third_parent", "third_child", "click", "x", "pointer");
    at_attach("fourth_parent", "fourth_child", "click", "x", "pointer");
    at_attach("fifth_parent", "fifth_child", "click", "x", "pointer");
    });
    i will greatly apprectiate all the help that i can get.

    thanks in advance!

    scofield888

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any flickering in IE6. What browser are you seeing this in? Does it happen in anything else you have tested it in?
    Quote Originally Posted by scofield888
    is there a way to eliminate the flickering or showing of the popup box or div?
    Yes.. remove this from your page:
    Code:
    <link href="img/popup_window.css" rel="stylesheet" type="text/css">
    	<script type="text/javascript" src="img/popup_window.js"></script>
    	<script type="text/javascript">
    		function toggle(element) {
    		if (document.getElementById(element).style.display == "none") {
    		document.getElementById(element).style.display = "";
    		} else {
    		document.getElementById(element).style.display = "none";
    		}
    		}
    	</script>
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication


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
  •