|
JavaScript - Crossbrowser Moving Layers Around A Page
Usually I can find what I need by doing a Googlesearch.
This time, I can't seem to find anything. I need a crossbrowser method for moving layers around the screen. So simple an idea! If it helps answer my query, here is the js for what I have already (a sort of horrible mess that works in IE): PS - I can live with a jquery solution! Code: <!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
Similar TutorialsHi Guys, seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation. Can you one please shed some light on how to do this. Your help is greatly appreciated. Cheers Dileep I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything. What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll. Can anyone point me in the right direction? Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help. ***Index.htm Code: 01.<html> 02.<head> 03.<!-- 04. New Perspectives on JavaScript 05. Tutorial 4 06. Review Assignment 07. 08. Avalon Books 09. Author: Rexdreamer 10. Date: 08/12/09 11. 12. Filename: index.htm 13. Supporting files: ab.gif, ablogo.gif, avalon2.htm 14.--> 15.<title>Avalon Books</title> 16.<script type="text/javascript" > //insert embedded script that uses an if statement to test for W3C DOM 17. if (document.getElementById) location.href="avalon2.htm" //if supported browser load avalon2.htm using the href prop of the location obj 18.</script> 19. 20.</head> 21. 22.<body style="background-color: black"> 23.<p style="text-align: center"> 24.<img src="ablogo.jpg" alt="Avalon Books" /><br /> 25.<img src="ab.gif" alt="" /> 26.</p> 27.</body> 28.</html> ***Avalon.htm Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Author: Chris Veal
Date: 08/12/09
Filename: avalon2.htm
Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript">
function placeObjects() { //insert function named placeObj
var w = winWidth/2; //declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100); //place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3) //use setZ functionto set zindex for kids object to 3
setZ("fiction",z2) //use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1) //use setZ functionto set zindex for nfiction object to 1
moveAvalon(); //call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
}
}
function swapImages() { //insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>
<body onload="placeObjects()">
<div id="kids">
<img src="kids.jpg" alt="" /><br />
Sale this month on children's books
</div>
<div id="fiction">
<img src="fiction.jpg" alt="" /><br />
Fiction selection of the month
</div>
<div id="nfiction">
<img src="nfiction.jpg" alt="" /><br />
Non-fiction selection of the month
</div>
<div id="avalon">
Avalon <span id="books">Books</span>
</div>
</body>
</html>
***script.js Code: /*
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Name: Chris Veal
Date: 08/12/09
Function List:
xCoord(id)
Returns the x-coordinate of the object with id with the value id
placeIt(id, x, y)
Places the id object at the coordinates (x,y)
shiftIt(id, dx, dy)
Moves the id object dx pixels to the right and dy pixels down
showIt(id)
Hides the id object by setting its visibility style to "visible"
winWidth()
Returns the width of the interior browser window in pixels
winHeight()
Returns the height of the interior browser window in pixels
setZ(id, z)
Sets the z-index value of the id object
swapIt(id1, id2, id3)
Swaps the z-index values of id1, id2, id3
*/
function setZ(id, z) { // create new function called setZ with 2 parameters
object=document.getElementById(id); // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z; // set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) { // create new function called swapIt with 3 parameters
var object1=document.getElementById(id1); //getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);
var object3=document.getElementById(id3);
var z1=object1.style.zIndex; //create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;
object1.style.zIndex=z3; //change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1; //change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2; //change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}
function placeIt(id, x, y) {
var object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function shiftIt(id, dx, dy) {
var object=document.getElementById(id);
object.style.left=parseInt(object.style.left)+dx+"px";
object.style.top=parseInt(object.style.top)+dy+"px";
}
function xCoord(id) {
object=document.getElementById(id);
xc=parseInt(object.style.left);
return xc;
}
function showIt(id) {
var object=document.getElementById(id);
object.style.visibility="visible";
}
function winWidth() {
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement) return document.documentElement.offsetWidth;
else if (document.body.clientWidth) return document.body.clientWidth;
}
function winHeight() {
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement) return document.documentElement.offsetHeight;
else if (document.body.clientHeight) return document.body.clientHeight;
}
I have another crossbrowser problem - using frames. I am trying to make this hidden right frame appear where it should in other browsers such as Firefox. It only works in IE at the moment. This is a cut down demo: http://www.aapress.com.au/demo/readt.../readtest.html It consists of a number of parts: readtest.html left.html rightframe.html right.html top.html The rightframe.html is the holder for right.html. I am not trying to simplify it, just make the right.html page appear in the rightframe.html in FF. I suspect it has something to do with the coding at the bottom of rightframe.html: Code: <script type="text/javascript">
function test()
{
testframe.internalid.innerHTML = maindiv.innerHTML;
}
window.setTimeout("test()", 1000);
</script>
Is it obvious? Hello good coders! Thanks to the wonderful script provided by coothead he http://www.codingforums.com/showthread.php?t=87036 I was wondering how I could adjust the transition/fade speed between the images in the script? I tried a couple of different ways, but I couldn't get it working. Does anyone know how I can adjust this in a cross-browser compatible way? 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">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#mapImage_holder {
text-align:center;
}
#mapImage {
border:1px solid #000;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var maps=new Array();
maps[0]='dots.gif,#dots';
maps[1]='map.jpg,#blood';
maps[2]='apple0.jpg,#apples';
var c=0;
var speed=1000*10; //set for 10 secs, change to suit needs.
function swapMap() {
obj=document.getElementById('mapImage');
if(c==maps.length) {
c=0;
}
obj.src=maps[c].split(',')[0];
obj.useMap=maps[c].split(',')[1];
c++;
setTimeout('swapMap()',speed);
}
window.onload=swapMap;
//]]>
</script>
</head>
<body>
<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>
<div>
<map id="dots" name="dots">
<area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
<area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
<area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
<area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
<area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
<area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>
<map id="blood" name="blood">
<area coords="40,144,80,171" href="http://www.codingforums.com/" alt="" />
<area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
<area coords="184,144,224,171" href="http://w3c.org/" alt="" />
<area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>
<map id="apples" name="apples">
<area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
<area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
<area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
<area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
<area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
<area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>
</body>
</html>
I searched long and hard for an example of how to do this but couldn't find anything similar, even after searching a good number of other forums. Below is a script I have that displays a list of summary info for multiple people. When you mouse over some ones summary info, a bio appears below that summary info (pushing everything below it down). What I'd like to do is take it further and allow more layers. For example, when you hover over their bio, more info about them pops up below that, and so on. I know you're probably tired of seeing mousevent/text questions but I'm desperate at this point. If some one could just add a mouseover event to the bio section that displayed more text below it would suffice and I could take it from there. Heres the code: Code: <p>
<script type="text/javascript">
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS: [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
//Declaring Variables to be used later
var staff_members = -1;
var max_staff_members = 9;
var staff_name_array = new Array(); //Array of strings
var staff_title_array = new Array(); //Array of strings
var staff_length_array = new Array(); //Array of strings
var staff_info_array = new Array(); //Array of strings
var staff_array = new Array(); //Array of strings
var staff_id_array = new Array(); //Array of answer IDs
var image_source_array = new Array(); //Array of full html code, for images
var staff_start = new Array(); //Array of starting pos for staff bios
var staff_end = new Array(); //Array of ending pos for staff bios
var start_span = '<span style="font-size: 12px;">';
var end_span = '</span>';
var img_start_str = "<img alt=";
var img_end_str = '">'; //"border-style: solid;";//Followed by " />
var img_end_str_len = 3; //24;
function init() {
remove_staff_tag();
for (i = 0; i < staff_members; i++) {
staff_name_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_title_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_length_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_info_array[i] = pull_bio(i)
}
for (i = 0; i < staff_members; i++) {
staff_array[i] = start_span + staff_name_array[i] + //"<br/> " +
staff_title_array[i] + //"<br/> " +
staff_length_array[i] + //"<br/> " +
staff_info_array[i] + end_span; //"<br/> " +
}
for (i = 0; i < staff_array.length; i++) {
staff_id_array[i] = "emp_bio_long_" + (i);
}
remove_unused_staff();
}
function remove_staff_tag() {
var ret = document.getElementById("div_tag").innerHTML;
var ind = ret.indexOf("(max 9):[");
var text_after_num = ret.substring(ind + 8);
staff_members = liferay_workaround("," + ret.substring(ind + 9, ind + 10));
document.getElementById("div_tag").innerHTML = text_after_num.substring(8);
}
function remove_unused_staff() {
var div_html = document.getElementById("div_tag").innerHTML;
for (i = 0; i < max_staff_members; i++) {
staff_start[i] = div_html.indexOf("emp_bio_short_" + i) - 29;
staff_end[i] = div_html.indexOf("Bio " + (i + 1) + " End") - 26;
}
end_pos = staff_end[staff_members - 1];
document.getElementById("div_tag").innerHTML = div_html.substring(0, end_pos);
}
function pull_bio(emp_num) {
var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
var len = ret.length;
var img_start_pos = ret.indexOf(img_start_str);
var img_end_pos = ret.indexOf(img_end_str);
return ret;
}
function set_all_bios() {
for (i = 0; i < staff_memebrs; i++) {
staff_info_array[i] = "changed";
}
}
function pull_pic_test(emp_num) {
var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
var img_start_pos = ret.indexOf(img_start_str);
var img_end_pos = ret.indexOf(img_end_str);
var ret2 = ret.substring(img_start_pos, img_end_pos + img_end_str_len);
return ret2;
}
function get_bio(emp_num) {
return staff_array[emp_num];
}
function clear_all_bios() {
for (i = 0; i < staff_id_array.length; i++) {
document.getElementById(staff_id_array[i]).innerHTML = '';
}
}
function change_text(id_to_change, value_to_change_to) {
clear_all_bios();
document.getElementById(id_to_change).innerHTML = value_to_change_to;
}
function liferay_workaround(almost_number) {
var adj = false;
if (almost_number == ",0") {
almost_number = 0;
adj = true;
}
if (almost_number == ",1") {
almost_number = 1;
adj = true;
}
if (almost_number == ",2") {
almost_number = 2;
adj = true;
}
if (almost_number == ",3") {
almost_number = 3;
adj = true;
}
if (almost_number == ",4") {
almost_number = 4;
adj = true;
}
if (almost_number == ",5") {
almost_number = 5;
adj = true;
}
if (almost_number == ",6") {
almost_number = 6;
adj = true;
}
if (almost_number == ",7") {
almost_number = 7;
adj = true;
}
if (almost_number == ",8") {
almost_number = 8;
adj = true;
}
if (almost_number == ",9") {
almost_number = 9;
adj = true;
}
if (!adj) {
almost_number = 1;
}
return almost_number;
}
</script></p>
<div class="faq-content" id="div_tag">
<p id="staff_num">
Enter number of staff members within the brackets (max 9):[4]</p>
<p class="emp_bio_short" id="emp_bio_short_0" onmouseout="" onmouseover="change_text('emp_bio_long_0', get_bio(0))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>18 years</span></p>
<p class="answer" id="emp_bio_long_0" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 1 End --------------------------><!---------------------- Bio 2 --------------------------> <p class="emp_bio_short" id="emp_bio_short_1" onmouseout="" onmouseover="change_text('emp_bio_long_1', get_bio(1))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>5 years</span></p>
<p class="answer" id="emp_bio_long_1" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 2 End --------------------------><!----------------------- Bio 3 --------------------------> <p class="emp_bio_short" id="emp_bio_short_2" onmouseout="" onmouseover="change_text('emp_bio_long_2', get_bio(2))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>6 years</span></p>
<p class="answer" id="emp_bio_long_2" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!---------------------- Bio 3 End --------------------------><!----------------------- Bio 4 --------------------------> <p class="emp_bio_short" id="emp_bio_short_3" onmouseout="" onmouseover="change_text('emp_bio_long_3', get_bio(3))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company:</strong> 5 years</span></p>
<p class="answer" id="emp_bio_long_3" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!----------------------- Bio 4 End --------------------------><!----------------------- Bio 5 --------------------------> <p class="emp_bio_short" id="emp_bio_short_4" onmouseout="" onmouseover="change_text('emp_bio_long_4', get_bio(4))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_4" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 5 End --------------------------><!----------------------- Bio 6 --------------------------> <p class="emp_bio_short" id="emp_bio_short_5" onmouseout="" onmouseover="change_text('emp_bio_long_5', get_bio(5))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_5" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 6 End --------------------------><!----------------------- Bio 7 --------------------------> <p class="emp_bio_short" id="emp_bio_short_6" onmouseout="" onmouseover="change_text('emp_bio_long_6', get_bio(6))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_6" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!---------------------- Bio 7 End --------------------------><!----------------------- Bio 8 --------------------------> <p class="emp_bio_short" id="emp_bio_short_7" onmouseout="" onmouseover="change_text('emp_bio_long_7', get_bio(7))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_7" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 8 End --------------------------><!----------------------- Bio 9 --------------------------> <p class="emp_bio_short" id="emp_bio_short_8" onmouseout="" onmouseover="change_text('emp_bio_long_8', get_bio(8))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_8" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 9 End --------------------------><!---------------------- Bio 10 --------------------------> <p class="emp_bio_short" id="emp_bio_short_9" onmouseout="" onmouseover="change_text('emp_bio_long_9', get_bio(9))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_9" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 10 End --------------------------></div>
<p>
<script type="text/javascript">
init();
change_text('emp_bio_long_0', get_bio(0))
</script></p>
Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems: (1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart. (2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it. I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable? Hi, I am trying to develop a quiz system.Here is a simplified version of my code with lots of modifications made mainly for easier comprehension. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript">
var count=3;
var questions = new Array(3);
for (var i = 1; i <=count; i++)
{
questions[i] = "Question "+String(i);
}
</script>
<script type="text/javascript">
/*
Global "swap" holder
Use value, null, if no layer initially visible
*/
var currlayerId = "question1";
function toglayer(id)
{
if(currlayerId) setDisplay(currlayerId, "none");
if(id)setDisplay(id, "block");
currlayerId = id;
}
function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
<style type="text/css" media="screen, print, projection">
.text
{
display:none;
}
</style>
</head>
<body>
<li><a href="#" onclick="toglayer('question1');return false;">Q.1</a></li>
<li><a href="#" onclick="toglayer('question2');return false;">Q.2</a></li>
<li><a href="#" onclick="toglayer('question3');return false;">Q.3</a></li>
<div id="question1" class="text">
<script>document.write(questions[1]);</script>
<br>
</div>
<div id="question2" class="text">
<script>document.write(questions[2]);</script>
</div>
<div id="question3" class="text">
<script>document.write(questions[3]);</script>
</div>
<script>toglayer('question1');</script>
</body>
</html>
When you will run the code,you will find three links Q.1 Q.2 Q.3 These links are basically due to the following code Code: <li><a href="#" onclick="toglayer('question1');return false;">Q.1</a></li>
<li><a href="#" onclick="toglayer('question2');return false;">Q.2</a></li>
<li><a href="#" onclick="toglayer('question3');return false;">Q.3</a></li>
When you click on any of the links,you will see the question associated with it.This is because of the following code Code: <div id="question1" class="text"> <script>document.write(questions[1]);</script> <br> </div> <div id="question2" class="text"> <script>document.write(questions[2]);</script> </div> <div id="question3" class="text"> <script>document.write(questions[3]);</script> </div> -------------------------------------------------------------------------------------- Now,here's the question,how do I put the div layers and their links in a loop.That is,I want it to be something like this Code: (for var i=1;i<=count;i++)
{
<li><a href="#" onclick="toglayer('question[i]');return false;">Q.[i]</a></li>
}
Code: (for var i=1;i<=count;i++)
{
<div id="question[i]" class="text">
<script>document.write(questions[i]);</script>
<br>
</div>
}
The reason why I ask this is,is because the number of questions in the quiz depends on the value of the javascript variable "count".Therefore,if the value of count is 5,the number of questions would be 5,if it is 6 the number of questions will be 6,etc. Thanks Hemant Hello, I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC." The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated. Here is the script I'm using: <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; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--></script> And here is my menu: <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a> </td> Hello, I'm new to the forum. I tried coding this myself, but i'm just not that well versed in javascript and need a little help. I am trying to show certain div tags when you click on a hyperlink in an html document. I have four links (bio, news, portfolio, and resume) and four div tags (bio, news, portfolio, and resume). I am just going to show the code for one of the links. This is what I have for the bio link in the head of the html: Code:
function setVisible( setting )
{
var myElement = document.getElementById("bio");
if(setting)
myElement.style.visibility="visible";
else
myElement.style.visibility="hidden";
}
</script>
This is what I have in the style sheet: Code:
#bio {
position: absolute;
font: 9pt arial;
line-height: 10.5pt;
color: #fff;
width: 575px;
height: 300px;
margin-top: 390px;
margin-right: auto;
margin-left: 40px;
margin-bottom: 5px;
z-index: 1;
border: 0px solid #fff;
}
This is what I have on the link in the html doc (I'm assuming this is wrong, I don't know what the proper code should be): Code: <a href="javascript:onClick="setVisible(true)";">BIO</a> Does what I'm trying to do make sense? I'm assuming that it would be the same set up for all four links? Please let me know if I need to be more specific. Any help would GREATLY be appreciated! Thank you, Gerry I have a site with hidden layers http://dyingtobemen.com/. I would like to have the scrollbar customized but I'm having problems finding anything that will work with hidden layers. Anyone know of something I can use with hidden layers to customize a scrollbar? Thanks.
Hello to all. I am a new to the forum and new to Javascript, so please be gentle. I have a web page in which I am using a script to toggle between div tags. I learned how to set it up for only a few divs, but want to use more than 10+ div tags with the corresponding buttons on the side. When I set it up with 11 buttons, the 10th button does not work, but all of the single digit buttons do. (The 11th button is going to be a hyperlink eventually.) Here is the code for anyone who can help: <code> <script language="javascript" type="text/javascript"> function Button(obj) { var cls = obj.className; if(cls!='Btn_Selected') { if(cls=='Btn') { cls = 'Btn_Highlight'; } else { cls = 'Btn'; } } obj.className = cls; } function select(obj) { for (var x = 1; x <= 10; x++) { document.getElementById("Button"+x).className = 'Btn'; document.getElementById("Content"+x).style.display = 'none'; } obj.className='Btn_Selected'; var tmp = obj.id; var num = tmp.substr(tmp.length-1); document.getElementById("Content"+num).style.display = 'block'; } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </code> Hopefully I was clear with what I am looking to achieve. If I need to attach additional code or a link to the web page, let me know. Any help would be greatly appreciated. Thanks All in advance, ScottoNM Hello, Could anyone help me? I'm looking for a script that remembers, re-sets, and can set to the previous state the show or hide behavior of a layer upon return to the page. I have an image gallery that's in 3 categories: wedding, bridal shower and save-the-dates. When viewing an image in the bridal shower or save-the date galleries and I press on the link I created titled "Back to Gallery" it does not return me back to the Bridal Shower or Save-the-dates gallery (whichever I'm in) it returns me to the main Invitations gallery page. So bascially I'm looking for a script that will write to a cookie what layers are shown and what are hidden so when you return it reads the cookie and displays the last layers you had showing before leaving the page. What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
Hello everyone. I am trying to make a flag with css and then move it with javascript. Code: <html>
<head>
<title>Flag</title>
<link rel="stylesheet" type="text/css" href="flag3.css" />
<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
</head>
<body>
<h1>The flag of ___ by www</h1>
<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
<script language="JavaScript">
moveObjRight(bar3);
</script>
</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window. Any help will be appreciated. Thank you. Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. Hello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx |
|||||||