Learn VBA & Macros in 1 Week!

JavaScript - Generate Div Layers In A Loop

Full Excel VBA Course - Beginner to Expert

Generate Div Layers In A Loop	View Content

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

Full Excel VBA Course - Beginner to Expert

Mouseover Causes Text To Appear And Allows Layers

Similar Tutorials

View Content

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:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</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:&nbsp;</strong>President &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>5 years</span></p>
	<p class="answer" id="emp_bio_long_1" style="text-align: left;">
		&nbsp;[<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 &amp; General Manager<br />
		<strong>Length of Time with Company:&nbsp;</strong>6 years</span></p>
	<p class="answer" id="emp_bio_long_2" style="text-align: left;">
		&nbsp;[<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 &amp; 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;">
		&nbsp;[<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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_4" style="text-align: left;">
		&nbsp;[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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_5" style="text-align: left;">
		&nbsp;[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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_6" style="text-align: left;">
		&nbsp;[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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_7" style="text-align: left;">
		&nbsp;[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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_8" style="text-align: left;">
		&nbsp;[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:&nbsp;</strong>John Smith's Title<br />
		<strong>Length of Time with Company:&nbsp;</strong>0 years</span></p>
	<p class="answer" id="emp_bio_long_9" style="text-align: left;">
		&nbsp;[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>

Multiple Layers With The Canvas Tag

Similar Tutorials

View Content

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?

Passing Mouse Coordinates Thru Layers

Similar Tutorials

View Content

Colored Scrollbar On Hidden Layers

Similar Tutorials

View Content

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.

Javascript Toggle Layers Issue

Similar Tutorials

View Content

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

Crossbrowser Moving Layers Around A Page

Similar Tutorials

View Content

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;
}
//-->

Showing And Hiding Layers With Javascript And Css (help)

Similar Tutorials

View Content

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

Show/hide Multiple Layers - Need Help

Similar Tutorials

View Content

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"></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>

How Do I Generate A Url From Variables

Similar Tutorials

View Content

I am building a search function for a sermon blog on squarespace. The format url for category search is www.mysite.org/blog?category=... I have drop down menus and a datepicker but need to figure out how to get java to build the url and redirect to it. The output url should look like http://www.mysite.org/sermons?catego...+mybook+mydate. Any help would be greatly appreciated. Here is my java so far.
Code:

function search() {
var myRootSite = 'www.mysite.org/sermons?category=';
var myNewTitle = document.getElementById('myTextField').value;
var mySpeaker = document.getElementById('mySpeaker').value;
var myService = document.getElementById('myService').value;
var mySeries = document.getElementById('mySeries').value;

var myBook = document.getElementById('myBook').value;
var myDate = document.getElementById('myDate').value;

if (myNewTitle == 0 && mySpeaker == 0 && myService == 0 && mySeries == 0 && myBook == 0 && myDate == 0) {
alert('Please enter some search criteria');
return;
}

var title = document.getElementById('title');
title.innerHTML = mySpeaker;
}

Recursive Function With For Loop, For Loop Is Breaking When Calling Itself

Similar Tutorials

View Content

Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together.

What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array.

What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created.

Here is the test object:
Code:

test = [
	{ 
	  "name" : "Menu 1", 
		"url" :  "menu1.html",
		"submenu" : [
		  {
				"name" : "menu 1 subitem 1",
				"url" :  "menu1subitem1.html"
			},
			{
				"name" : "menu 1 subitem 2",
				"url" :  "menu1subitem2.html"
			} ]
	},
	{ 
	  "name" : "Menu 2",
	  "url" :  "menu2.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 2subitem 1", 
			  "url" :  "menu2subitem1.html"
			},
		  { 
			  "name" : "menu 2subitem 1",
			  "url" :  "menu2subitem1.html"
		  } ]
	},
	{ 
	  "name" : "Menu 3",
	  "url" :  "menu3.html", 
		"submenu" : [ 
		  { 
			  "name" : "menu 3 subitem 1", 
			  "url" :  "menu3subitem1.html"
			},
		  { 
			  "name" : "menu 3 subitem 1",
			  "url" :  "menu3subitem1.html"
		  } ]
	}
];

Here is the recursive function:
Code:

function buildMenuHTML(menuData,level) {
	var ul;
	if (level == 1) {
		ul = "<ul id='menu'>";
	} else {
		ul = "<ul class='level" + level + "'>";
	}

	for (i = 0; i < menuData.length; i++) {
		menuItemData = menuData[i];
		
		ul += "<li>";
		ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
		
		if (typeof menuItemData.submenu != 'undefined') {
			ul += buildMenuHTML(menuItemData.submenu,level + 1);
		}
		
		ul += "</li>";
	}
	
	ul += "</ul>";
	return ul;
}

Here is how the function is called initially:
Code:

buildMenuHTML(test,1);

This is it's return value (with indentation added for readability):
Code:

<ul id='menu'>
  <li><a href='menu1.html'>Menu 1</a>
    <ul class='level2'>
      <li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
      <li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
    </ul>
  </li>
</ul>

'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated.

Searching For Javascript - Cookie Show/hide Layers

Similar Tutorials

View Content

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.

How To Generate Time In Javascript

Similar Tutorials

View Content

Hi All,

i want to achieve an effect like the following, please help

1. i want to get the current time, possibility no from client computer ( sometimes their time is wrong)? i dont know whether can achieve but if cannot, then never mind, just get from client computer.

2. for example now is 1:25 am, i want to generate dynamically every half an hour timing from 2 am(round up) till for example 11 am

something like

<select>
<option>2:00</option>
<option>2:30</option>
................
<option>11:00</option>
</select>

for me this is a bit complicated, anybody can help me?
<option>3:00</option>

Javascript Math To Generate A Value

Similar Tutorials

View Content

ok so heres where I stand, I don't know too much about javascript. Just enough to get me by. I am a PHP developer, I know how to do this in PHP but the client insists on doing it through javascript.

Basically there are 3 different form values that determine the Premium Death Benefit Ratio.

This is the formula the client wants:
Premium to Death Benefit Ratio % (Created by formula = Annual (Level) Premium Amount (Divided by) Death Benefit Amount (equals a percentage) That percentage multiplied by Life Expectancy

The 3 form values in the formula would be Annual Premium Amount (fypremium), Death Benefit Amount (dbp), Life Expectancy (average_le)

I was messing around with javascript trying to figure it out and I have gotten no where since I am not used to writing formulas in JS. Anyways here is what I have so far:

Code:

function calculateLE(inputFieldId1, inputFieldId2, inputFieldId3, outputFieldId){
	var DBR;
	
	var input = document.getElementById(inputFieldId).value;
	
	APA = document.getElementById(fypremium).value;
	DBA = document.getElementById(dbp).value;
	LE  = document.getElementById(average_le).value;
	
	formula = document.getElementById(fypremium).value / document.getElementById(dbp).value = formula3;
	formula2 = document.getElementById(average_le).value * formula3;
	
	if { APA = "" } {
		document.getElementById(outputFieldId).value = "Error getting Annual Premium Amount";
	}
	else if { DBA = "" } {
		document.getElementById(outputFieldId).value = "Error getting Death Benefit Amount";
	}
	else if { LE = "" } {
		document.getElementById(outputFieldId).value = "Error getting Life Expectancy";
	}
	else {
		document.getElementById(outputFieldId).value = formula3;
	}
}

Now I honestly have no clue if I am on the right track but what i've found on the net hasnt really pointed me in the right direction

Here is the form values.

Code:

<input type="text" name="fypremium" id="fypremium" onblur="calculateLE('fypremium', 'dbp', 'average_le', 'premium_dbr')">
<input type="text" name="dbp" id="dbp" onblur="calculateLE('fypremium', 'dbp', 'average_le', 'premium_dbr')">
<input type="text" name="average_le" id="average_le" onblur="calculateLE('fypremium', 'dbp', 'average_le', 'premium_dbr')">

In a nut shell the values for the 3 inputs stated above will determine premium_dbr's value.

fypremium / dbp = percentage;
average_le * percentage = DBR (death benefit ratio);

If someone could point me in the right direction to finishing this id be very greatful.

Generate Image With Javascript

Similar Tutorials

View Content

Hello, I'm a complete javascript beginner so sorry if I'm just being stupid

I wanted to know if it's possible for me to add a picture (as in a .png file) to a page by clicking on something which would then make an image appear on the screen (which I would then want to be able to drag and move but I made a different thread for that question)

I hope this explanation made sense Thank you for your time

Generate Js Api Document With Jsdocx

Similar Tutorials

View Content

I wrote a java tool for scanning Js code and generating API documentation automatically.

Jsdocx Project Website: http://jsdocx.sourceforge.net/

A online example document: http://jsdocx.sourceforge.net/exampl...ocx/index.html

If you find bugs or have suggests, contact with me.

How To Generate Textfield With A Button

Similar Tutorials

View Content

Hello,
I'm looking to create a web form with various text field to get input from users. Upon enter data to each field, users should have option to genenrate another text field underneath (i.e. a sub criteria of the above field). This is what i have so far, but i cannot get each button to generate the textfield right underneath.
Here's my code:
<html>
<head>
<title>test</title>
<script>
var maxFieldWidth = "500";

function addRow(element, indentFlag)
{
var elementClassName = element.className; // this is the class name of the button that was clicked
var fieldNumber = elementClassName.substr(3, elementClassName.length);

// current textfield width, take off the px on the end
var fieldWidth = document.getElementById("textfield" + fieldNumber).style.width;
fieldWidth = fieldWidth.substr(0, fieldWidth.indexOf("px"));

// get the new field number (incremented)
var newFieldNumber = ++fieldNumber;

// get new field width in case we are indenting
var newFieldWidth = fieldWidth;
if(indentFlag)
newFieldWidth = fieldWidth - (newFieldNumber * 10);

var rowContainer = element.parentNode; // get the surrounding div so we can add new elements

// create text field
var textfield = document.createElement("input");
textfield.type = "text";
textfield.setAttribute("value", "textfield " + newFieldNumber);
textfield.id = "textfield" + newFieldNumber;
textfield.setAttribute("style","width:" + newFieldWidth + "px; margin-left: " + (maxFieldWidth - newFieldWidth));

// create buttons
var button1 = document.createElement("input");
button1.type = "button";
button1.setAttribute("value", "++");
button1.setAttribute("onclick", "addRow(this, false)");
button1.className = "row" + newFieldNumber;

var button2 = document.createElement("input");
button2.type = "button";
button2.setAttribute("value", "+");
button2.setAttribute("onclick", "addRow(this, true)");
button2.className = "row" + newFieldNumber;

var button3 = document.createElement("input");
button3.type = "button";
button3.setAttribute("value", "-");
button3.className = "row" + newFieldNumber;

// add elements to page
rowContainer.appendChild(document.createElement("BR")); // add line break
rowContainer.appendChild(textfield);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button1);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button2);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button3);
}

</script>
</head>
<body>
<div id="main-container">
<div>
<input type="text" id="textfield1" value="textfield 1" style="width:500px;" />
<input type="button" class="row1" value="++" onclick="addRow(this, false)">
<input type="button" class="row1" value="+" onclick="addRow(this, true)">
<input type="button" class="row1" value="-">
</div>
</div>

</body>
</html>

Generate Unique Number

Similar Tutorials

View Content

Hi,

I am developing a html ordering system that does not use a database but sends the data via email. To differentiate between two orders I would like to generate and add an unique identifier to the email. One approach I have seen is using data object to generate an unique id:

Code:

function uniqid()
{
    var newDate = new Date;
    return newDate.getTime();
}

This is not guaranteed to be unique as two people can send their request at the exact same time. One question pops up, the data being generated, is this local or utc time? Also, the number being generated in this situation is quite big and not so easy to differentiate two orders for a human.

Ideally I would like to generate a global sequence starting at 1 and incrementing by one for each user that clicks on the order button regardless of timing, timezone etc. Is this possible given the constraints given at the start of the post? Any suggestions are welcome.

Need Help : Positioned Layers/radio Buttons On Order Form Won't Work :/

Similar Tutorials

View Content

Generate Javascript Errors On Purpose

Similar Tutorials

View Content

I would like to remove some hosting imposed google ads on my phpbb board.

Currently I accomplish this by deleting via javascript all the banners divs when the page is loaded.

But unfortunately in that way advertisements are quickly displayed before disappearing.

Now I am thinking about a different (neater) approach to my problem:

maybe I might write some javascript code which interferes with the one injected by google thus generating the inability to show those annoying divs...

Any idea?

How To Generate A Random Page In A Frame

Similar Tutorials

View Content

Hey All,

So to start out, this is my first post on CodingForums! I've only recently started learning web development so I figured it would be a good idea to get involved with some active forums.

I am trying to open a random page in a frame, but I am trying to call the Javascript to do so in another frame. I currently have an html page with a frameset which has two frames. One of the frames is a toolbar that sits at the top of the page and it has an image that acts as button. When the user clicks on this image, the bottom frame generates a random page from an array of links I have hardcoded into the Javascript. The bottom frame is just set to google.com as a default because I couldn't really think of anything to put in an html file there.

The problem I'm having is when I click on the image to open a random page in the bottom frame, nothing happens. The code for all the files are below.

Home.html
Code:

<head>
</head>

<frameset rows='44,*' cols="*" frameborder='no'>
<frame name="toolbar" noresize="noresize" src="toolbar.htm" marginwidth="5px" marginheight="10px" scrolling="no">
<frame name="main" noresize="noresize" src="http://www.google.com" marginwidth="5px" marginheight="5px" scrolling="auto" >
</frameset><noframes></noframes>

<body>
</body>

</html>

The code for the frame, toolbar.htm:
Code:

<head>
<title></title>
<script type="text/JavaScript" src="random.js"></script>
</head>

<body>

<div id="wrapper">
  <div id="toolbar">
    <a href="javascript:getaPage()"><img src="Images/nextpage.png" align="right" /></a>
  </div>
</div>
</body>
</html>

And finally the Javascript, random.js:
Code:

function get_random()
{
var ranNum= Math.floor(Math.random()*3);
return ranNum;
}

function getaPage()
{
var randomPage=get_random();

var page=new Array(3)
Page[0]="http://www.google.com";
Page[1]="http://www.yahoo.com";
Page[2]="http://www.myspace.com";



top.main.location.href=page[randomPage];

}

And as a follow-up question, how difficult would it be to set up this entire random page generating script via php? I'm learning php so I can eventually set up a database of urls in mysql and have tags associated with each url.

Thanks in advance!