JavaScript - Z-index Issue? Text Layered Behind Photo. Popbox Script.

Hello All! First I would like to say that I have attempted to find an answer to my issue and there is obviously an enormous amount of help across this and other forums regarding how to use Javascript to modify your CSS styles including changing the z-Index property.

I am to the point where I believe maybe it just needs an extra set of eyes to help me understand what I am doing wrong here!

My dilemma is that I have a table on my site which has four images, one for different areas of the site. Below that table area, I have a space where I plan to display the text describing those sections upon mouse rollover.

My goal is to have an outer div tag with position relative and then contain 4 div tags inside of that with position absolute so that I can stack them under the background all with negative z-Indexes.

I have a javascript that is called on mouse over and mouse out to raise the z-Index of each div text area, but it is not working.

See the code below:

Javascript for the z-Index change:

Code:

<script type="text/javascript">
<!--

//function to change zIndex

function swapMyImages(obj,z){
var theObj;
	//ie4
	if(document.all){
		theObj=document.all(obj);
		theObj.style.zIndex=z;
	}
	//ie5,6, Mozilla 1.0 and Opera 6
	if(document.getElementById){
		theObj=document.getElementById(obj);
		theObj.style.zIndex=z;
	}
	//nn4x
	if(document.layers){
	theObj=document.layers[obj];
	theObj.zIndex=z;
	}
}
//-->
</script>        
</head>

Anchor for one of the images with mouse overs attached:

Code:

<a class="thumb" href="..." title="Visit Our Shop" onmouseover="swapMyImages('shoptext','10')" onmouseout="swapMyImages('shoptext','-10')"><img src="images/hometable_back.jpg" width="190" alt="Tee Shirt Shop" longdesc="..." /></a>

my Div section with the text areas set to negative z-Index:

Code:

   <div id="hometext">
      	<div id="servicetext">service text here</div>
        <div id="shoptext">shop text here</div>
        <div id="portfoliotext">[portfolio text here</div>
        <div id="contacttext">contact text here</div>
     </div>

my style sheet items for the divs:

Code:

.hometext {
	position:relative;
	float: none;
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
}

#servicetext {
	position:absolute;
	float: none;
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;
}

#shoptext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

#portfoliotext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

#contacttext {
	position:absolute;
	float: none;	
	left:0px;
	top:0px;
	text-align:center;
	z-index:-10;
	background-color:#000000;	
}

Hi,

I am very new to Javascript but have found a great tutorial to create a dynamic dropdown menu. I got it to work, but have problems redirecting it to the correct page after the necessary page refresh to load the items in the 2nd dropdown menu.

The Javascript in the header is the following:

Code:

<SCRIPT language=JavaScript> 
function reload(form){
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='index.php?cat=' + val ;}
</script>

My PHP controller (index.php) code to load the correct frames is as follows:

Code:

<ul id="navbar">
<li><a href="index.php?id=home">Home</a></li>
<li><a href="index.php?id=overview">Overview</a></li>
<li><a href="index.php?id=add">Add new product</a></li>
</ul>

Code:

if(isset($_GET['cat'])){
include ('add.html.php');}
else {

	switch($_GET['id'])
	{
	default: include('home.html.php');
	break; case "home": include('home.html.php');
	break; case "overview": include('add.html.php');
	break; case "add": include('add.html.php');
	}
}

So I have made a workaround to load the "add.html.php" frame with the if(isset)$_GET['cat']. But what I really would like to do is to change the Javascript self.location to

Code:

self.location='index.php?id=add?cat=' + val ;}

so that the PHP index script loads the add.html.php automatically. However, when changing the self.location as described above the page is redirected to home.html.php.

It is really annoying, I have googled for a full day but haven't found a solution yet. Maybe someone can tell me how I can easily load the correct frame by using Javascript?

Many thanks in advance!!

I'm trying to resize this to about 60% smaller... it's a live chat pop-up, but out of my realm to expertise... can anyone help? It's the pop-up on the website brandedgear.com after about 25 seconds.

Thanks!




<div style="FLOAT: left; WIDTH: 500px; BACKGROUND: #FFFFFF url(<{$_themePath}>images/mainbackground.gif) REPEAT; BORDER: SOLID 1px #bcb5a6;">
<div style="BACKGROUND: #FFFFFF url(<{$_themePath}>images/icon_proactiveuserbackground.gif) NO-REPEAT bottom left; BORDER: SOLID 1px #bcb5a6; MARGIN: 8px;">
<div style="TEXT-ALIGN: center;"><img src="<{$_themePath}>images/<{$_product}>.gif" border="0" align="absmiddle" /></div>
<HR align="center" style="WIDTH: 80%; BORDER: none; COLOR: #bcb5a6; BACKGROUND-COLOR: #bcb5a6; HEIGHT: 1px; MARGIN-TOP: 10px; MARGIN-BOTTOM: 3px;" />
<div style="PADDING-LEFT: 120px; TEXT-ALIGN: left; MARGIN-TOP: 30px; HEIGHT: 80px; FONT: 45px Trebuchet MS, Georgia, Verdana, Arial, Helvetica; COLOR: #333333;">
<{$_language[proactivetitle]}>
</div>
<div style="PADDING-LEFT: 120px; VERTICAL-ALIGN: top; MARGIN-TOP: 0px; PADDING-TOP: 0px; HEIGHT: 200px; FONT: 18pt Trebuchet MS, Georgia, Verdana, Arial, Helvetica; COLOR: #776849;">
<{$_language[proactivemsg]}><br />
<div style="PADDING-TOP: 30px; PADDING-LEFT: 80px; TEXT-ALIGN: center;"><div style="BORDER: SOLID 0 #FFFFFF; TEXT-ALIGN: center; BACKGROUND: URL(<{$_themePath}>images/proactivebutton.gif) no-repeat; HEIGHT: 37px; WIDTH: 135px; COLOR: #000000; FONT-WEIGHT: bold; FONT-FAMILY: Trebuchet MS, Georgia, Helvetica, Verdana, Tahoma; FONT-SIZE: 16px; MARGIN: 0px; PADDING-TOP: 6px; PADDING-BOTTOM: 15px; VERTICAL-ALIGN: middle; CURSOR: pointer;" onmouseover="this.style.color='red';" onmouseout="this.style.color='#000000'" onclick="javascript:doProactiveRequest_<{$_randomSuffix}>();"><{$_language[proactivechatnow]}></div></div>
</div>
</div>
</div><div style="FLOAT: left; MARGIN-LEFT: -8px; MARGIN-TOP: -8px;"><a href="javascript:closeProactiveRequest_<{$_randomSuffix}>();"><img src="<{$_themePath}>images/icon_close.png" border="0" align="absmiddle" /></a></div>

Hello Everyone! I'm new to JavaScript. I thought of learning by doing instead of just reading tutorials and books. So I started writing a Greasemonkey script for Facebook.

Basically what it does is it creates a link to download photo albums from Facebook. I'm far from finished but anyway, here's my code so far.

The format of the HTML code block where the URLs of pics are.

Code:

<div class="tagWrapper">
<i style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_a.jpg);"></i>
</div>

And here's my script so far,

Code:

var picURL;
var modURL;
var URLset = [];

for(var i=0; i<picURL.length; i++)
{
    //gets all the URLs in the page
    picURL = document.getElementsByClassName("tagWrapper")[0].children[0].style.backgroundImage;
    modifyURL(picURL);
    URLset.push(modURL);  //inserting them to an array
    
    alert(URLset) ;
}

function modifyURL();
{
    //doing the replacements to make them downloadable
    modURL = picURL.replace("url(", "").replace(")", "");
    modURL = modURL.replace("a.jpg", "n.jpg");
    var dwn = "?dl=1";
    modURL = modURL.concat(dwn);
    
    return modURL;
}

I have created a fiddle so that it all would be clearer.

Since I'm half way through it, I just want to make sure it works up to this point so I have put an alert box to show all the modified URLs stored in the array. (supposed to, at least) the problem is, it isn't showing up.

Can anyone please tell me what I have done wrong here? Bare with me for I'm new to this as I've mentioned earlier. Any help in teh right direction would be much appreciated.

Thanks in advance.

Hey there! This code I am posting is used for some tests I'm doing with PHP and AJAX. What I find absolutely confusing is that when I add the refreshDir() function to any of the other functions, so that it runs once they have done their buisness, it absolutely screws up what-ever function I have it in. For instance if I have it running in the deleteTheFile() function. It prevents it from deleting the file. That function works perfectly fine when the refreshDir() function is not in it. Any hints or solutions? Please let me know if you'd like to see any of my other code. I'm posting the page's code along with the JS file and the Delete the file php page that deletes the files (there are other php files that create and read files). This whole thing was meant to be a simple exercise, but I am entirely confused as to why the refeshDir() function is screwing up everything. I don't think that the issue is related to anything else other than the javascript / ajax. Thanks for your help!

Here is the JS file:

Code:

if (window.XMLHttpRequest){
	ajaxRequest=new XMLHttpRequest();
}
else{
	alert('Try again gold star!');
}

var createResponse = 'Created Successfully';
var deleteResponse = 'Deleted Successfully';
var i = 0;

function refreshDir(){
	ajaxRequest.onreadystatechange = function(){
		if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
			document.getElementById('directory').innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open('GET', 'theReadDir.php', true);
	ajaxRequest.send();
}

function createTheFile(file){
	var file = document.getElementById(file).value;
	var textInput = document.getElementById('toBeInserted').value;
	ajaxRequest.onreadystatechange=function(){
		
		if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
			document.getElementById('responseCreated').innerHTML = " " + createResponse;
		}
	}
	ajaxRequest.open("POST", "theCreator.php", true);
	ajaxRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	ajaxRequest.send("inserted=" + textInput + '&file=' + file);
//	refreshDir();
}

function readTheFile(file){
	var file = document.getElementById(file).innerHTML;
	ajaxRequest.onreadystatechange=function(){
		if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
			document.getElementById('responseRead').innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open('GET', 'theReader.php?file=' + file, true);
	ajaxRequest.send();
}

function readTheFileEntered(file){
	var file = document.getElementById(file).value;
	ajaxRequest.onreadystatechange = function(){
		if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
			document.getElementById('responseRead').innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open('GET', 'theReader.php?file=' + file + '&dir=', true);
	ajaxRequest.send();
}

function deleteTheFile(file){
	var file = document.getElementById(file).value;
	alert(file);
	ajaxRequest.onreadystatechange = function(){
		alert(0);
		if (ajaxRequest.readyState == 1 && ajaxRequest.status == 200){
			alert(1);
		}
		if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
			document.getElementById('responseDeleted').innerHTML = ' ' + deleteResponse;
			document.getElementById('responseDeleted').innerHTML = ' ' + ajaxRequest.responseText;
		}
	}
	alert(2);
	ajaxRequest.open('GET', 'theDeleter.php?file=' + file, true);
	alert(3);
	ajaxRequest.send();
	alert(4);
	refreshDir();
}

function resetFeedback(response){
	document.getElementById(response).innerHTML = '';
}

/*function removeAlert(){
	var t = setTimeout("resetFeedback('responseDeleted')", 2000);
}


function updateSatus(){
	document.getElementById('createButton').innerHTML = 'Update';
	i += 1;
	if (i > 1) createResponse = 'Updated Successfully';	
	var t = setTimeout("resetFeedback('responseCreated')", 2000);
}
*/

Here is the main page code:

Code:

<html>

<head>

<script type="text/javascript" src="operations.js"></script>
<style type='text/css'>

.niceboy{
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #fff;
	text-align: center;
	text-shadow: 0px 1px 0px #B7B7B7;
	background-image: -webkit-linear-gradient(top,#D1D1D1,#c9c9c9);
	border-color: #BABABA;
	border-style: solid;
	border-radius: 12px;
	border-width: 1px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 24px;
	display: inline-block;
	cursor: pointer;
}

.listing{
	margin: 4px;
	width: 200px;
	padding-left: 15px;
	cursor: pointer;
}

.listingfile{
	background-color:#f0f0f0;
}

.listingdir{
	background-color:#e3e3e3;
}

#directory{
	margin: 20px;
}
</style>
</head>


<body onLoad="refreshDir();">

File Name: <input type='text' id='file' />

<br />
<br />

File Contents: <input type='text' id='toBeInserted' />

<br />
<br />
<br />

<div class='niceboy' id='createButton' onclick='createTheFile("file");'>
Create
</div>

<span id='responseCreated'></span>

<br />
<br />


<div class='niceboy' onclick='readTheFileEntered("file")'>
Read
</div>

<span id="responseRead"></span>

<br />
<br />

<div class='niceboy' onclick='deleteTheFile("file");'>
Delete
</div>

<span id = 'responseDeleted'></span>

<br />
<br />

<div class='niceboy' onClick='refreshDir();'>
Refresh
</div>

<div id='directory'>
</div>

<br />
<br />


</html>
</body>

Here's the theDeleter.php file:

PHP Code:
<?php

$file = $_GET['file'];
//$file = 'created-files/'. $file;
echo $file;

function delete($file){
    unlink($file);
    echo 'Deleted Successfully';
}

if (file_exists($file) && is_file($file)) delete($file);
else echo 'whoa bro that file doesn\'t exist!';

?>

And here's the theReadDir.php:

PHP Code:
<?php


$dir = new DirectoryIterator('/wamp/www/phpAjaxTest/');


foreach($dir as $file){
    if (!$dir->isDot()){
    
    $ft = filetype($file);
    if ($ft == 'dir'){
        $format = '<div class=\'listing listing' . $ft . '\' id = \'' . $file . '\' onClick = "readTheFile(\'' . $file . '\'); refreshDir();">' . $file .  '</div>';
        echo $format;
    }
    else{
        $format = '<div class=\'listing listing' . $ft . '\' id = \'' . $file . '\' onClick = "readTheFile(\'' . $file . '\');">' . $file .  '</div>';
        echo $format;
    }

    }

}
?>

Basically any of the other function's (the only one's that I'd want refreshDir() to run in would be the creating and deleting functions) break when I add the refreshDir() function.

I'm admittedly green in this area [among others!], but will there be any issues with any browsers loading the url below with the scripts at the bottom of the page like I have them?

http://alton.k12.mo.us/index.html

FF loads them fine for me, as does IE *until* I hit the compatibility mode button, then it seems to sort of "hang"...but with IE, I'm not really ever sure of what it's doing is correct or not?

I am having an issue with this script I wrote. Actually it works the way it is now, but not the way I want it too.

This is a random raffle ticket number generater. The guys at the fire department where talking about selling 300 tickets and discussing how they were going to select and call the numbers. It got me thinking and inspired to start messing around with javascript again.

It all starts with index.html and a form w/ a button and textarea. When a user clicks the button it will generate a random number and insert it into the textarea. This is accomplished by the Generate(); function that is in Genny.js an external js file.

Code:

<h2>Raffle Ticket Number Generator</h2>
<form name="theform">
<input type="button" name="pickNumber" value="Pick a Winner" onclick="Generate();" />
<br /><br />
<textarea cols="40" rows="25" name="winnersCircle">Winning Numbers Will Display Here!
</textarea>
</form>

This much works just fine. Now onto Genny.js
Code:

//initialize counter and array
count = 1;
winners = new Array();

function Generate(){
//generate a random number from 0-300
var random_number = Math.floor(Math.random()*301);

//checks output of Math.random() against winners array to see if number has been used already
for (i = 0; i < winners.length; i++ ) { 
	if ( winners[i] == random_number )
		alert("I am so sorry... we have accidently drawn a duplicate number! Please pick again.");
}
//add the number to the array
winners[count] = random_number;
//increment the counter
count++;
//display the stored random number
document.theform.winnersCircle.value = winners.join("\n");
}

This much works...somewhat! It generates the random number and checks the winners array to see if it is already used. If it wasn't used it adds the number to the array, increments the counter, and then displays the number in the textarea of the form, as it should. If the number was used it alerts the user, once the user clicks the button to accept the alert it carries on with the script and adds it to the array again and also displays it.
This is not what I want it to do. If the number was used I do not want it added to the array or displayed. I would also like it to regenerate another number without the alert. The alert was wrote in to assist me in checking to see if it was finding a duplicate number, thats all.

As an extra, is there a way to also add a numbered list to the results. To show the sequence of the ticket draw.

I have messed with this for days and rewrote it over and over. I have used different loops and conditional operators to try and solve this problem. But to no avail. Here I am, asking not for the answer but a push in the right direction. Any help would be great, this is becoming an obsession trying to make it work. The code above is the last attempt at this point. Everything else has returned no values or just errors.
Thanks in advance!

This script isnt working. Im not sure what im doing wrong. forgive me i havent programmed in javascript before.


titles.js
Code:

<script type="text/javascript" language="javascript">   
    <!--//  
 function random_Title(){
 if (parseInt(navigator.appVersion) >= 4) {  
        var num = 3;  
        var rantitle = new Array(num+1);  
        rantitle[1] = "Random Title1";  
        rantitle[2] = "Random Title1";  
        rantitle[3] = "Random Title1";  
        ranNumber = parseInt(num * Math.random() + 1);  
        document.title = rantitle[ranNumber];  
    }  
    //-->   
 }
</script>

html page
Code:

<html>
<head>

<script type='text/javascript' src='http://www.flashmajic.com/Google/titles.js'></script>
<script>
  document.title =   random_Title() ;  
</script>
</head

I'm creating sort of a chat with images, the problem is, when i am adding
new data to the DIV (either if it's blank or a new message), it also refreshes
the old data, therefore the images are being reloaded.
Code:

document.getElementById("chatwindow").innerHTML += new_data;

I want to add that new data without having the entire "innerHTML" of that
div being replaced.

hi

I am creating a gallery using my flickr feed. I have the bones of it working the only issue is with the thumbnail pulled from flickr. You get the option of small medium and large whicj Im using meduim.

I want to add an image border around the thumbnails using a background image

but when I add the styles it wont work. If i add a width to the img tag it will distrit the images because its being pulled from the flickr api

anyone any ideas on how to get the background image working?


html code is here

Code:

<body>


	<!-- Some Content -->
	<div id="gallery"> 
	
	
	 <input type='hidden' id='current_page' />  
     <input type='hidden' id='show_per_page' />  
		<div id="flickr">
		
	

		</div> 
		
		<div id='page_navigation'></div>  
		
		
	</div>	
	

</body>

CSS for the img is

Code:

[.hidden {
	display: none;
}

div#flickr a.lightbox img {
	border: 5px solid #b3aaa4;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom:30px
}

and the java script is here

Code:

$(function() {
  
    
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
        'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + 
        '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', 
    function(data){
        var classShown = 'class="lightbox"';
        var classHidden = 'class="lightbox hidden"';
        
        $.each(data.photos.photo, function(i, rPhoto){
            var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
            
            var thumbPhotoURL = basePhotoURL + '_m.jpg';
            var mediumPhotoURL = basePhotoURL + '.jpg';
            
            var photoStringStart = '<a ';
            var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ 
                mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + 
                rPhoto.title + '"/></a>;'
            var photoString = (i < showOnPage) ? 
                photoStringStart + classShown + photoStringEnd : 
                photoStringStart + classHidden + photoStringEnd;

            $(photoString).appendTo("#flickr");
        });
        $("a.lightbox").lightBox();
    });
});

anyone?

What I am trying to achieve is when the Input Box value is increased or decreased using the up/down arrows that the new value will be writen to the Canvas, though the code I have works it dosent render properly. I also have a Span Tag absouletly positioned within the canvas which works perfectly but I'd like the Canvas text to work instead. Not sure if it's possible.

Code:

 
<!doctype html>
<html>
<head>
<title></title>
<!------------------------------------- STYLE ------------------------------------->
<style type="text/css">
canvas {
    background:#222;
}

#length{
	position:absolute;
	left:10px;
	top:10px;
	width:150px;
}

#text_in_canvas{
	position:absolute;
	left:500px;
	top:100px;
	width:400px;
	font-style: normal;
	font-size: 25px;
	color: red;
}
</style>
<!------------------------------------- CODE ------------------------------------->
	<script type="text/javascript">
	var fps = 100;
		function draw_canvas() {
			
				var canvas = document.getElementById("myCanvas");
				var context = canvas.getContext("2d");//returns drawing functions to allow the user to draw on the canvas.
				var width = canvas.scrollWidth;
				var height = canvas.scrollHeight;
				//
				
				
				var startPosX = (300); // Start Position from X axis
				var startPosY = (height - 50); // Start Position from Y axis
				//
				var length = document.getElementById("length").value; //Get's value from Text Input Box
				var text = "This is the number from Input Box: " + length;
				document.getElementById("text_in_canvas").innerHTML= text;
				//LEFT BLOCK
				context.beginPath();
				context.rect(0, 0, 250, height); //position & size of left block
				context.fillStyle = 'black'; //background colour
				context.fill();
				context.lineWidth = 0;
				context.strokeStyle = 'red';
				context.stroke();
				context.closePath();

				//TEXT
				context.font      = 'bold 28px sans-serif';  // set text font
				context.textAlign = 'center';
				context.fillStyle   = '#FFFFFF';  // set text color
				context.fillText(text, 548, 50);

		}
	</script>

</head>

<body onload="draw_canvas()">

	<!-- CANVAS STARTS HERE -->
		<div id="" style="width:1000px;height:600;margin:auto;position:relative;">
			
			<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #000000;"></canvas>
			
					<!-- FORM BEGINS HERE -->
					<form id="my_form">
						<label for="length">Outside too Outside Wallplate Measurement (millimeters):</label>
							<input type="number" id="length" name="length" step="1" min="0" max="" placeholder="" oninput="JavaScript: draw_canvas()">
					</form>
					
					<span id="text_in_canvas"></span>
	
					<!-- FORM END's HERE -->
				
		</div>
	<!-- CANVAS END's HERE -->
	


</body>
</html>

Hi Script Experts

I am facing issue in below code for Brisilia time zone.(GMT-3). Issue comes in October month only. It is going tobig loop. I am not getting how Date object is behaving here.

Thanks in advance
Pranav Sharma
***********************************
<script type="text/javascript">
var nDate;
var nCurrentYear = 2011;
var nCurrentMonth = 10;
nYear=2011;
nMonth=10;
var date = new Date(nYear, nMonth-1, 1);

document.write('Month:'+date.getMonth() +':CurrentMonth:'+nCurrentMonth);
while (date.getMonth() == nCurrentMonth-1)
{
nDate = date.getDate();
document.write(date.toDateString());
date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1);
}


</script>

**********************************

could you have a text box value = to script written in the value place?

I wanted to toggle text by using a JavaScript.

I used the following script:

Code:

		function toggle_visibility(id) {
		 var e = document.getElementById(id);
		 e.style.display = ((e.style.display!='none') ? 'none' : 'block');
		 }

and

Code:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

for every element I wanted to hide by clicking the text.

It works fine, but the content of the div is already displayed when loading the page itself. I want it to be hidden first, and only visible when you blick the text. Is this possible?

Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!