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 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Flickering issue with Floating layer

    I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously.
    The html page is as follows:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>JAVASCRIPT TESTING</title>
    <script language="javascript" type="text/javascript" src="FloatingMenu.js">
    </script>
    <link rel="stylesheet" type="text/css" href="formatting.css">
    </head>
    <body>
    <div id="header1">
    <b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b>
    </div>
    
    
    <div id="content">
    <p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create.
    
    Signing Scripts
    In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to.
    
    With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client.
    
    A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it.
    
    Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following:
    
    Unambiguously assigns ownership of the script to a person or organization.
    
    Allows an HTML page to use multiple signed scripts.
    
    Places the signed script into a Java Archive (JAR) file.
    
    Places the source of the script in the JAR file.
    
    Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script.
    
    .</p>
    </div>
    
    
    <div id="movable">
    <b>Please Login or Register</b>
    </div>
    </body>
    </html>


    JAVASCRIPT FILE IS AS FOLLOWS:

    Code:
    var startY=0;
    var currY=startY;
    var destY=currY;
    var timerID=0;
    var tmr_on=0;
    var temp;
    function floatMenu() {
    	clearInterval(timerID);
    	tmr_on=0;
    if (document.documentElement.scrollTop) {
    temp=document.documentElement.scrollTop; }
    else {
    temp=document.body.scrollTop; }
    destY=temp+startY;
    startFloat();
    }
    
    function startFloat() {
    if(currY==destY) {
    clearInterval(timerID);
    tmr_on=0;
    }
    else if(currY<destY) {
    currY+=2;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",10);
     tmr_on=1;
     }
    }
    else if(currY>destY) {
    currY-=2;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",10);
     tmr_on=1;
     }
    }
    }
    window.onscroll=floatMenu;
    window.onresize=floatMenu;


    AND CSS FILE IS AS FOLLOWS:

    Code:
    #header1 {
    background-color: #66ccff;
    border: 1px solid #66ccff;
    margin-bottom: 5px;
    }
    
    #content {
    padding: 10px;
    border: 1px solid #66ccff;
    margin-bottom: 5px;
    margin-left: 21%;
    height: 800px;
    }
    
    #content a {
    text-decoration: none;
    color: blue;
    display: block;
    }
    
    a {
    text-decoration: none;
    color: blue;
    }
    
    #movable {
    position: absolute;
    width: 20%;
    background: #fdcfcc;
    top: 0px;
    left: 0px;
    }


    At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable.
    Problem is coming on both IE and FF.Any help seriously appreciated...
    Last edited by satish_j; 01-31-2009 at 06:58 AM. Reason: Formatting

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please follow http://www.codingforums.com/showthread.php?t=82672. You may edit your above post.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Please follow http://www.codingforums.com/showthread.php?t=82672. You may edit your above post.
    Sorry for the improper format...Edited the post...

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    That seems to sort out the problem [changed 2 to 1]:
    Code:
    else if(currY<destY) {
    currY+=1;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",10);
     tmr_on=1;
     }
    }
    else if(currY>destY) {
    currY-=1;
    The above makes it slower though. To remove the flicker without sacrificing speed, discard above changes and instead:
    Code:
    function startFloat() {
    if(currY==destY-1) {
    clearInterval(timerID);
    tmr_on=0;
    }
    Last edited by freedom_razor; 01-30-2009 at 11:08 AM. Reason: Added other solution.

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by freedom_razor View Post
    That seems to sort out the problem [changed 2 to 1]:
    Code:
    else if(currY<destY) {
    currY+=1;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",10);
     tmr_on=1;
     }
    }
    else if(currY>destY) {
    currY-=1;
    The above makes it slower though. To remove the flicker without sacrificing speed, discard above changes and instead:
    Code:
    function startFloat() {
    if(currY==destY-1) {
    clearInterval(timerID);
    tmr_on=0;
    }
    Thanks for your reply..
    That definitely seemed to solve the flicker issue,but now if I scroll window up to top(obviously after scrolling down),then the div does not come to the exact 0,0 position,but remains few pixels down.
    can you explain me the reason for this..

  • #6
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question

    Friend,
    Pls help me through this..i think I have got the cause of prob.The solution given by you solves the problem with static HTML.
    But,in real scenario,Iam using a php file in the body for Header1 block.e.g
    Code:
    <html>
    ...
    <body>
    <?php
    require("header1.php");
    ?>
    <div id="content">
    <p>Blah---
    ....
    ...
    And iam stuck here,if i use the static html(as is the case given to you),your sol works perfectly fine,but if i use the php file,the movable div does not shift back to 0,0 position on scrolling up..
    I think iam very close to solution..Pls help me out with this..
    Thanks..

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    How about that then:
    Code:
    function startFloat() {
    if(currY==destY-1) currY--;
    if(currY==destY) {
    clearInterval(timerID);
    tmr_on=0;
    }

  • #8
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nopes,that didn't solve the problem..

  • #9
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Well, it does work OK for me in FF3 and IE7. Can you post the link to your page?
    The only change you have to make to the script is the last bit of code I posted, none of the ones before. I tested it and that 1px difference that was sometimes appearing is corrected now.
    Last edited by freedom_razor; 01-30-2009 at 12:31 PM.

  • #10
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy

    Now,this is getting very frustated.I added one alert statement in the js file and fired this function on window load as well:
    Code:
    function floatMenu() {
    	clearInterval(timerID);
    	tmr_on=0;
    if (document.documentElement.scrollTop) {
    temp=document.documentElement.scrollTop; }
    else if (document.body.scrollTop) {
    temp=document.body.scrollTop; }
    alert(temp);
    destY=temp;
    startFloat();
    }
    function startFloat() {
    ---
    --
    }
    window.onload=floatMenu;
    window.onscroll=floatMenu;
    window.onresize=floatMenu;
    function startFloat() remains same.
    Now,when I open this html file directly from desktop,then iam getting alert on load as '0'.,whereas if i put this same html file,js file in apache directory and then run it in browser as "http://localhost/Welcome.html",I am getting alert on load as 'undefined'.
    Iam going nuts on this.pls help me..
    Thanks.

  • #11
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Thank you very much to all for ur efforts.My problem is resolved and I feel extremely belated.
    I did the foll change in js file to get the prob resolved.Just setted the 'temp' variable to 0 after every If condition.
    Code:
    function startFloat() {
    if(currY==destY) {
    clearInterval(timerID);
    tmr_on=0;
    //*****Reset temp to 0.This is very Imp
    temp=0;
    }
    else if(currY<destY) {
    currY+=1;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",1);
     tmr_on=1;
     //*****Reset temp to 0.This is very Imp
     temp=0;
     }
    }
    else if(currY>destY) {
    currY-=1;
    var newY=currY+"px";
    document.getElementById("movable").style.top=newY;
    if(tmr_on==0) {
     timerID=setInterval("startFloat()",1);
     tmr_on=1;
     //*****Reset temp to 0.This is very Imp
     temp=0;
     }
    }
    }
    Thanks once again for your time..
    Last edited by satish_j; 01-31-2009 at 06:57 AM.

  • #12
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    this is just what i need! only i need it faster, how do i do that?

    Hello guys, after looking around for quite a while i finally found this! i copied the code and tried it out, it works just fine, only i was playing around with it to try to make the div scroll up and down faster but i couldnt figure out how to do it:

    i tried changing:
    currY+=1; into currY+=4;
    and
    currY-=1; into currY-=4;

    it actually works, it scrolls up n down faster but it keeps flickering!! i am kinda new with programming at all sorry for this probably silly question and thank you for your help!


  •  

    Posting Permissions

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