|
JavaScript - 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... Similar TutorialsHello, I am using JavaScript to show/hide a floating div layer. The code i have works perfectly in Google Chrome but will not display at all in Internet Explorer. Any solutions would be greatly appreciated - coding below and attached: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>James</title>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
// Hide everything but the one we want to toggle
HideAllContent(d);
if(document.getElementById(d).style.display == "none"){
document.getElementById(d).style.display = "block";
}else{
document.getElementById(d).style.display = "none";
}
}
/**
* Hides all the content panes on the page, they must be listed in arr
* @param except - The id of a div not to hide
*/
function HideAllContent(except){
// Make an Array with all the id's of the divs we want to hide
var arr = [
"uniquename1",
"uniquename2",
"uniquename3",
];
// Loop through the Array and call HideContent to hide them
for( var i=0; i<arr.length; ++i ){
if( arr[i] != except )
HideContent( arr[i] );
}
}
//--></script>
</head>
<body>
<h1>Showing and hiding divs with javascript</h1>
<p>Click the links below to show or hide the appropriate divs.</p>
<!--
Links that you want to click.
Use onclick to call the ReverseContentDisplay() javascript method.
This will toggle the display property div of the name passed into
it to "block" or "none".
-->
<a href="#" onclick="ReverseContentDisplay('uniquename1')">link 1</a>
<a href="#" onclick="ReverseContentDisplay('uniquename2')">link 2</a>
<a href="#" onclick="ReverseContentDisplay('uniquename3')">link 3</a>
<!--
The divs that you want to hide.
Each div has its css display property set to "none" so they are
hidden when the page first displays.
-->
<div id="uniquename1" style="display: none;">
<p>Div 1</p>
</div>
<div id="uniquename2" style="display: none;">
<p>Div 2</p>
</div>
<div id="uniquename3" style="display: none;">
<p>Div 3</p>
</div>
</body>
</html>
1) Script Title: Arrow Side Menu 2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-arrow.htm 3.) My Test Pg. http://macmajor.homeip.net/shadow_test/shadow.html 3) Describe problem: After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there). If you know of a fix, I would certainly appreciate it. Thanks in advance! Tracy Hopefully this isn't too badly placed in the Java forum. I'm doing research for a website I'm going to be working on, and am going to be working with a friend to develop (my idea, their coding experience). I have a couple friends that deal in a couple languages, but I'm not sure which can accomplish what I want, so I turn to you: I want to create text that flickers, like an eerie dying fluorescent lightbulb in a horror film. I don't expect it to put out light, and it really doesn't have to even appear like a light, just...like the text it degrading, I suppose is the best way to put it. Like the pixels are trying to stay alive and struggling. I'd really, REALLY like to avoid anything heavy like Flash (and er...I don't know anyone that knows that one) so something in-code (Java, PHP, or even CSS if that's a possibility) would be amazing. I appreciate any help and guidance in this direction. Thanks in advance! I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 100; i >= 0; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function fade_up(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function changeOpac(opacity, id) {
//change the opacity for different browsers
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. Hi i am trying to create a draggable css layer. Code: <html>
<head>
<style type="text/css">
#box {position:absolute;
left:150;top:150;
background-color:blue;
height:100;
width:100;}
</style>
<script type="text/javascript">
function start(){
var count = cnt.value
var count=0;
while (count=0)
{
var x;
var y;
var layer = document.getElementById('box');
x=window.event.clientX;
layer.style.left=x;
y=window.event.clientY;
layer.style.top=y;
}
}
function stop(){
var count = cnt.value;
count = 1;
}
function shw(){
alert(cnt.value);
}
</script>
<body>
<input type="hidden" name="cnt" value="1">
<div id="box" onclick="start()" onrelease="stop()">
</div>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" name="show" value="Show" onclick="shw()">
</body>
</html>
It doesn't seem to work though. The loop never seems to start. btw i was also thinking couldn't i just put while(box.clicked) { or something along those lines. Thanks I have a script that runs a sprite animation on the canvas, adapted from he http://www.kadrmasconcepts.com/blog/...-canvas-style/. After wondering why it wouldn't work on Safari or older versions of Firefox, I saw this: https://developer.mozilla.org/en/Jav.../Function/bind and implemented the suggested shim. However, I'm still getting some errors that I can't explain for the life of me. To make this easy for everyone, I threw it in a jsfiddle: http://jsfiddle.net/zachgold/AL3AQ/. Any help would be appreciated. Thanks! Zach Hello I have this var set: var floatingMenu = { targetX: -270 , targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever! Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI). I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine. This is the code on the HTML page: Code: <script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");so.addParam("salign", "lt");
so.addParam("wmode", "transparent");
so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527");
so.write("flashcontent");</script>
Thanks in advance... ---- Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect. Anyway, someone did help me and I wanted to share the code in case others can use it. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>: Code: <style type="text/css">
div#OVERLAY
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 1200px;
background-color: black;
-moz-opacity: 0.70;
opacity: 0.60;
filter: alpha(opacity=70);
z-index: 10;
display: none;
}
div#FORMHOLDER
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-color: transparent;
text-align: center;
z-index: 15;
display: none;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;
}
div#FORMHOLDER span.closer
{
padding-left: 100px; padding-right: 100px;
color: #E5BC9D;
background-color: black;
}
div#FORMHOLDER iframe
{
width: 653px;
height: 527px;
margin: 0px;
padding: 0px;
background-color: #000;
}
</style>
<script type="text/javascript">
function overshow()
{
var hold = document.getElementById("FORMHOLDER");
hold.style.display = "block";
var stop = parseInt(document.body.scrollTop);
if ( isNaN(stop) ) stop = 0;
if ( stop == 0 )
{
var stop = parseInt(document.documentElement.scrollTop);
if ( isNaN(stop) ) stop = 0;
}
hold.style.top = stop + 50 + "px";
document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
document.getElementById("OVERLAY").style.display = "none";
document.getElementById("FORMHOLDER").style.display = "none";
}
</script>
Next, use the <div> and an <iframe> tag in the fist line after the <body> tag: Code: <div id="OVERLAY"></div> <div id="FORMHOLDER"> <span class="closer" onclick="overoff()">Click here to close</span><br /> <iframe src="form.html" scrolling="no" frameborder="0"></iframe> <br /><span class="closer" onclick="overoff()">Click here to close</span> </div> Finally, when you link to the form page CoffeeCup creates, the code is: Code: <a href="#" onclick="overshow(); return false;">link</a> I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers! Ok. Basically, I will have images, about 150x100 that are all different. They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){
$("img").mouseenter(function(){
//add image on top of this image
})
$("img").mouseleave(function(){
//remove covering image
})
})
What should I replace the comments with? Thanks Hi Gurus, Please find the attached html that i am working on. this has 3 columns and the 3rd column is 'Show Comments' link. when I hover the link it should display the html page on top my existing page like a tooltip. For Example: In this forum, when hovered on each topic, the topic description is displayed as tool-tip. can anyone shed some light? Thanks! <font color="#ffff00">dfgdfgdf <font color="#ff6600">dfgdfgdfg xfgdfg</font></font><font color="#ffff00"></font>
I have this var set: var floatingMenu = { targetX: -270, targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? I am not very knowledable in stuff like this, and thought I would try to do it to help out a friend. I found a code from the internet and used it and it works well, but only in a specific resolution. I need to have the nav bar start and a specific point in the page and the code I have uses X and Y coordinates to place it. I can mess with it to get the right coordinates for a certain resolution, but I want it to work for every resolution someone who views it is using. here is the script Code: <script type="text/javascript">
/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 107,
startY = 395;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
I just need to make it work for every resolution. What the X and Y are set to only work for 1024x768 resolutions. There is a certain spot it needs to start at and if you need the website then please ask if it is needed. So can anyone help? I have this var set: var floatingMenu = { targetX: -270, targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? Hi all, I wasn't sure of the proper search terms to use to find an answer in the JS forums. I'm trying to create a floating navigation bar which only becomes visible at a certain scroll point on a page - specifically, when the static navigation row is scrolled out of view. I have a floating navigation bar already. And I suspect I'd need to give the static menu an ID to reference in the JS. I'm just not certain on how to proceed. Any help would be greatly appreciated. Thanks. Hello all from Romania, I tried few hours yesterday to edit the javascript settings because I want to be displayed once per session. If you can help me, or edit because I know it's very simple but for me... isn't the same thing. This is the code I want to be displayed once per session, and IF you can to close after x seconds, but important is once per session. Quote: <style> #topbar { height:30px; width:auto; background: #005094 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg'); background-repeat:repeat-x; text-align:left; padding-top:4px; } #adsground { height:auto; margin:0 auto; width: 310px; background:#fff; border-bottom:2px #005094 solid; border-right:2px #005094 solid; border-left:2px #005094 solid; text-align:Center; padding:4px; } #headlineatas { margin-left:85px; opacity:1.0; height:auto; width:auto; position:fixed; top:65px; left:170px; border-bottom:1px #005094 solid; border-bottom:0px blue solid; color:#333; padding:0px; z-index:1001; font-size:13px;} </style> <script type="text/javascript"> function getValue() { document.getElementById("headlineatas").style.display = 'none'; } </script> <div id="headlineatas"> <div id="topbar"> <span style="color:#fff;font-size:13px;font-wegight:bold;text-shadow:black 0.1em 0.1em 0.1em">Asculti AlyceRadio.</span> <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.google.ro/" target="_blank" onclick="getValue()">X</a></span> </div> <div id="adsground"> <p align="left"><h3></h3></p> another text here <p> </p></div></div> Thanks ! Hi I'd like to know how this site (linked below) does their floating share box on the left side. I notice it starts from a certain position and then it gets pushed down along with the top of the window when the user scrolls down pass that point, sticking to the top. Is there an external js recalculating the top value as the user scrolls down? Any idea on how I can do the same effect? http://hypebeast.com/2010/05/gp-jean...er-collection/ Thanks in advance for any help, much appreciated. Hi everybody Im new here and javascript newbie ,so I need your helps I want to use a left floating banner on my site www.guruht.com so the floating banner don't cover any text content when a visitor zoom in the page or use a very low resolution like 800x600 or 1024x700. this is the code I use but the banner cover the text : Code: <style>
#floating_banner_bottom {
text-align: left;
width: 00%;
bottom: 00px;
margin-bottom: 0px;
height: 50px;
position: fixed;
z-index: 50;
left: 0px;
</style>
<div id="floating_banner_bottom">
<!-- Button to Close Banner -->
<a style="display:scroll;position:fixed;bottom:50px;left:0px">
banner code
<br />
<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;">
<i style="font-family: Georgia,"Times New Roman",serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i>
<center>
<img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" />
</center>
</a>
</div>
<a/>
</a></a></div>
<!-- End Here -->
Hello everyone, I've been looking for a script that will float my website navigation bars within a table or table cell. I can find scripts that will float down the whole page but obviously thats not as I want it. If anyone knows of one that fits what I want or knows whether it is even possible then I would be very grateful if you could let me know either way. i want to make a floating menu.. but the administrator want it to be selected from database... Does anyone have an idea? or how to make it? also i want to know if it can be done or not???? |
|||||||