JavaScript - Need Some Insight On A Javascript I'm Making

(Please note, although I've included jQuery code here, this is a general JavaScript question.)

At http://jquery14.com/day-05 (code at http://pastie.org/783420) I saw this code:

Code:

// all <a href="#anchor"> smoothscroll to those elements

$("a[href^=#][href!=#]").live('click',function(e){

    $('html,body').animate({'scrollTop': $($(this).attr('href')).offset().top+'px'}); 

    e.preventDefault();

});

I'm using this idea of smoothscrolling to destination anchors in a page I'm developing, but is it a bad idea from an accessibility point of view?

I don't have a screen reader (couldn't get Fire Vox to work), but I am assuming that when you follow a link to a destination anchor in the same document, a screen reader begins reading from the destination anchor.

But this code cancels the default action of the link being followed. The page scrolls, but I assume this means nothing to a screen reader. If my assumptions are correct, the links concerned are broken for screen reader users.

(I suppose none of this matters if screen readers turn off JavaScript, but do they?)

A related question: From what I can tell, when you follow a link to an anchor somewhere on the same page, the page is entirely reloaded. Does this happen in every browser?

Thanks for any help

I followed the tutorial below and got my image fade to work:
http://clagnut.com/sandbox/imagefades/

Now I want to have text become visible once the fade is done. I can't get it to work.

style portion:

.enhanced {
visibility:hidden;
}

javascript functions:

<script language="javascript">
document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()};
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150);
}
if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}
}
}
</script>

I have added this to the last function:

if (opacity = 100) {
textId = 'enhanced';
text = document.getElementById(textId);
text.style.visibility="visible";
}

But the text appears instantly.

hey, i am trying to add events to my website...i have all the events stored in my google calender and i am trying to show only four events at the time for example:

10/01/2011 - John's Birthday
12/01/2011 - Party

i found this example on google however i am having problems...the problem i am having is that it works fine on my computer however when i look at it on another computer nothing appears http://gdata-javascript-client.googl...le_sample.html

thanks

Alright, I am going to post the sections that matter, and then post the full JS at the bottom.

Alright, so youtube allows you to pull videos using javascript. here is the what I am using

Code:

function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

alright, and here is the HTML code.

Code:

<div id="youtubeDivFavs" align="center">
</div>
<script>
insertVideos('youtubeDivFavs','favs','lancxeon','5',0);
</script>

<div id="youtubeDivUser" align="center">
</div>
<script>
insertVideos('youtubeDivUser','user','lancxeon','5',0);
</script>

Now as you can see there are two here. the second one "user" pulls from the url

http://gdata.youtube.com/feeds/users/lancxeon/uploads
It works fine on my website.

the second one pulls from

http://gdata.youtube.com/feeds/users/lancxeon/favorites

It does not work. It makes no sense as you can see both of the urls work fine.

I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work.

It truly makes no sense to me why it does not work, if one works why will the other not work?

Here is the full JS file


Code:

<!--
var cleanReturn = 1; //do you want a full youtube return, or just an image list
var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo

var timer;
var i =0;
var youtubediv = new Array();

function clearList(ul){
	var list = document.getElementById(ul);
	while (list.firstChild) 
	 {
	    list.removeChild(list.firstChild);
	 }		
}

function hideOverlay(){

	var overlay = document.getElementById('youtubeoverlay');
	overlay.style.display = 'none';
	overlay.innerHTML = "";
}

function videoOverlay(id){
	var objBody = document.getElementsByTagName("body").item(0);
	if(objBody){
    var video = document.createElement('div');
	video.setAttribute('id', 'youtubeoverlay');
	video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>';
	objBody.insertBefore(video, objBody.firstChild);
	}else{
		alert('no body element. please add');
	}

}

function mousOverImage(name,id,nr){

	if(name)
		imname = name;
	//make border orange
	imname.style.border = 	'4px solid orange';

	imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
	nr++;
	if(nr > 3)
		nr = 1;
	timer =  setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);

}


function mouseOutImage(name){

	if(name)
		imname = name;
	//make border back to greyish
	imname.style.border = 	'4px solid #333333';
	if(timer)
		clearTimeout(timer)

}

function getVideoId(url){

    var match = url.lastIndexOf('=');
    if (match) {
      id = url.substring(match+1);
      return id;
    }
}

function getId(string){

    var match = string.lastIndexOf("'s Videos");
    if (match != -1) {
      id = string.substring(0,match);
      return id.toLowerCase();
    }

    var match = string.lastIndexOf("query");
    if (match != -1) {
      id = string.substring(match+7);
      return id.toLowerCase();
    }

}
function listVideos(json,divid) {
  divid.innerHTML = '';
  var ul = document.createElement('span');
  ul.setAttribute('id', 'youtubelist');
  if(json.feed.entry){
	  for (var i = 0; i < json.feed.entry.length; i++) {
	    var entry = json.feed.entry[i];
	
	    for (var k = 0; k < entry.link.length; k++) {
	      if (entry.link[k].rel == 'alternate') {
	        url = entry.link[k].href;
	        break;
	      }
	    }
   	

   	var thumb = entry['media$group']['media$thumbnail'][1].url;


    var li = document.createElement('span');

    li.setAttribute('id', 'youtubebox');
    if(cleanReturn == 1){

		if(inlineVideo == 1){
        	li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'"  onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';

		}else{

        	li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
		}
    }else{
        li.innerHTML = entry.content.$t;
    }

    ul.appendChild(li);
	}
  }else{
  	divid.innerHTML = 'No Results Found';

  }

  document.getElementById(divid).appendChild(ul);
}

function youtubeInit(root) {
  //this hacks the layer for mutiple json queries
  id = getId(root.feed.title.$t);
  listVideos(root, youtubediv[id]);

}


function insertVideos(div,typ,q,results,overlay){
  inlineVideo = overlay;
  youtubediv[q.toLowerCase()] = div;

  var script = document.createElement('script');
  if(typ == "favs")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');

  if(typ == "user")
  	script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');


  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

//-->

so i am trying to make a music player where you select a song from a drop down list and then click submit. it then brings up the audio controls with the HTML5 "<audio>" tags and then you can click play and it should work. i am having trouble actually doing this though. the html is

Code:

<html>
<head>
<title>Music Player</title>
<script language="javascript"  type="text/javascript" src="popup.js">
</script>
</head>
<body bgcolor="000000">
<font color="lime" size="6">
<div align="center">
<u>The Mighty Peacock Music Player</u>
</font>
<br>
<br>
<font color="red" size="5">

<select id="convert_to" name="convert_to">
<option value="danza" id="danza">Danza Kuduro by Dan Omar</option>
<option value="iron" id="iron">Iron by Woodkid</option>
<option value="boot" id="boot">Das Boot by Vat19</option>
</select>
<br>
<input type="submit" value="submit" onClick="dispResults(convert_to)">
<p>The song selector is not functioning yet. Sorry for the inconvinence.</p>
<br>
<br>
<div class="music_box" id="music_box">
<audio src="/music/Danza Kuduro.mp3" controls="controls">
</audio>
</div>
</div>
</body>
</html>

and the javascript is

Code:

function dispResults(convert_to) {

    if (id == "danza") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/Danza Kuduro.mp3"      controls="controls"></audio> + "</p>";
    }
    
    if (id == "iron") {
        document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/woodkid.mp3" controls="controls"></audio> + "</p>";
    }

}

any help would be greatly appreciated. Thanks

I'm a newbie...please! html lists making javascript array

I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f


Code:

<div class="demo" id="demo_1">

		<ul>

			<li id="1" class="open"><a id="1" href="#"><ins>&nbsp;</ins>Root node 1</a>

				<ul>

					<li id="2"><a id="2"  href="#"><ins>&nbsp;</ins>Child node 1</a></li>

					<li id="3"><a id="3" href="#"><ins>&nbsp;</ins>Child node 2</a></li>

					<li id="4"><a id="4" href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>

					<li id="6"><a id="6" href="#"><ins>&nbsp;</ins>Root node 222</a>

//SHOUL NOT BE IN MY ARRAY
						<ul>

							<li id="7"><a id="7"  href="#"><ins>&nbsp;</ins>Child node 222a</a></li>

							<li id="8"><a id="8" href="#"><ins>&nbsp;</ins>Child node 222b</a></li>

							<li id="9"><a id="9" href="#"><ins>&nbsp;</ins>Some other child node with longer text 222</a></li>
					</ul>
//END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1

</li>
				</ul>

			</li>

			<li id="5"><a id="5" href="#"><ins>&nbsp;</ins>Root node 2</a></li>

		</ul>

I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now.

Here is my code:

Code:

function fillcap(){
		var wire = document.getElementById("wireSize");
		var conduit = document.getElementById("conduitSize");
		if (wire.option.length >= 10 && conduit.option.length == .5) {
			windows.alert("Wire Size exceeds conduit max fill!")
		}

And the html

Code:

		<h2>Fill Capacity</h2><br>
        <b>Wire Size</b><br>
		<select id ="wireSize">
		<option value="1">#14</option> 
		<option value="2">#12</option> 
		<option value="3">#10</option>
		<option value="4">#8</option> 
		<option value="5">#6</option> 
		<option value="6">#4</option>
		<option value="7">#3</option> 
		<option value="8">#2</option> 
		<option value="9">#1</option>
		<option value="10">1/0</option> 
		<option value="20">2/0</option> 
		<option value="30">3/0</option>
		<option value="40">4/0</option>
		<option value="250">250</option>
		<option value="300">300</option> 
		<option value="350">350</option> 
		<option value="400">400</option>
		<option value="500">500</option> 
		<option value="600">600</option> 
		<option value="700">700</option>
		<option value="750">750</option> 
		</select>  <br>
		<b>Conduit Size</b><br>
		<select id="conduitSize">
		<option value=".5">1/2</option> 
		<option value=".75">3/4</option> 
		<option value="1">1</option>
		<option value="1.25">1-1/4</option> 
		<option value="1.5">1-1/2</option> 
		<option value="2">2</option>
		<option value="2.5">2-1/2</option> 
		<option value="3">3</option> 
		<option value="3.5">3-1/2</option>
		<option value="4">4</option> 
		<option value="5">5</option> 
		<option value="6">6</option>
		</select><br>
		<input value="Wires allowed" onclick="fillcap()" type="button"> 
		<input type="text" name="myresultbox" id="resultbox10"> Wires<br>

Thank you for any advice.

Hi! I'm trying to make a multiple choice quiz using javascript. I downloaded codes from http://www.javascriptkit.com/script/cut180.shtml
But when I used it nothing comes up on the results (number of correct answer, number of wrong answer and percentage) as well as the solution box is empty.
I tried it on Google Chrome and it says "Your browser does not accept cookies. Please adjust your settings."
So I tried it in Safari because that's what we use in school and it doesn't work. The results and solution box is empty.
I am guessing that problem is with cookies?
Please help me.
Here are my codes:

- Quiz

//Enter total number of questions:
var totalquestions=10

//Enter the solutions corresponding to each question:
var correctchoices=new Array()
correctchoices[1]='a' //question 1 solution
correctchoices[2]='d' //question 2 solution, and so on.
correctchoices[3]='b'
correctchoices[4]='b'
correctchoices[5]='c'
correctchoices[6]='b'
correctchoices[7]='a'
correctchoices[8]='c'
correctchoices[9]='d'
correctchoices[10]='b'

/////Don't edit beyond here//////////////////////////

function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}

if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}

if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="results.htm"
}


function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars")
win2.focus()
win2.document.open()
win2.document.write('<title>Solution</title>')
win2.document.write('<body bgcolor="#FFFFFF">')
win2.document.write('<center><h3>Solution to Quiz</h3></center>')
win2.document.write('<center><font face="Arial">')
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices[i]+"<br>")
}
win2.document.write('</center></font>')
win2.document.close()
}

______________________________________________________________
For Results

<html>

<head>
<title>Instant Quiz Results</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><strong><font face="Arial">

<script src="quizconfig.js">
</script>Quiz Results Summary</font></strong></p>
<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116">
<tr>
<td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Number Of Correct Questions:</font></strong></td>
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#D3FFA8"><strong><font face="Arial">Wrong Questions:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Grade Percentage:</font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center></div>

<form method="POST"><div
align="center"><center><p>

<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""

var results=document.cookie.split(";")
for (n=0;n<=results.length-1;n++){
if (results[n].charAt(1)=='q')
parse=n

}

var incorrect=results[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "


</script>

<input type="button" value="Retake Quiz" name="B1"
onClick="history.go(-1)"> <input type="button" value="Show Solution" name="B2"
onClick="showsolution()"></p>
</center></div>
</form>
</body>
</html>


Please help me. I've been trying to find out what is wrong with my codes for a week.

Thanks in advance!

Okay so to be short, I'm trying to make a script similar to a link checker but instead of having to input each link in one by one and click a button (A button saying Validate, for instance), I was looking for something that would do it automatically? Example -

1. First I input the link http://www.example.com/posts.php?do=1000000000 and click Start or Validate.

2. After clicking Start or Validate, the validator or script would begin checking links, modifying the http://www.example.com/posts.php?do=1000000000 to http://www.example.com/posts.php?do=1000000001 and so on and so on, until it reached all 9's.

3. After the scanning, every existent link (Meaning links that didn't give the 404, or re-direct to another page) would be displayed in the page below or a log file.

I really appreciate the help everyone, since I'm still into learning about Javascript. Thanks in advance!

I'm decent at JavaScript but I have no idea how I should go about making a calculator. So far I'll drop a bunch of buttons down that all onclick to a function (a,b) and then it will add or w/e then return. How would I incorporate multiple methods such as subtraction or multiplication though?

Basically I'm confident I the ability to code or learn to make this calculator, just have no idea how to set this up, thanks.

Hello, I'm un-sure on what I should have called this topic so sorry for the possibly mis-leading topic name.

Firstly, my menu bar is attached to the top of the clients screen as seen here.

Secondly, I've been wondering how could I make it so when a button is pressed another div around 40px in height would appear above it(that div is also attached to the clients screen). For example I saw http://9gag.com/, when you click on search button in the top right hand corner the search bar appears ontop of the menu bar.

My JavaScript knowledge is very limited, I know how to make a div appear with the click of a button, but how can I make it be attached to the top of the clients browser and the menu bar in under it?

Codes

Menu bar
Code:

<ul id="menu">
	<li><a href="index.php">Home</a></li>
	<li><a href="Online.php">Server</a>
		<ul>
			<li><a href="Online.php">Server</a></li>
			<li><a href="Bans.php">Bans</a></li>
			<li><a href="Search.php">Search</a></li>
			<li><a href="rules.php">Rules</a></li>
		</ul>
	</li>
	<li><a href="http://thepilotslife.com/forums">Forums</a></li>
	<li><a href="Donate.php">Support Us</a>
		<ul>
			<li><a href="Donate.php">Support Us</a></li>
			<li><a href="Donate.php">Donate</a></li>
			<li><a href="Ad.php">Advertising</a></li>
		</ul>
	</li>
	<li><a href="Highscores.php">Highscores</a></li>
	<li><a href="Airlines.php">Airlines</a></li>
	<li><a href="Forms.php">Forms</a>
		<ul>
			<li><a href="">Forms</a></li>
			<li><a href="">Report Player</a></li>
			<li><a href="BanAppeals.php">Appeal Ban</a></li>
		</ul>
	</li>
	<?php
	echo "<li><a href='Help.php'>Help</a>";
		echo "<ul>";
			echo "<li><a href='Help.php'>Help</a></li>";
			echo "<li><a href='Help.php'>Topics</a></li>";
			echo "<li><a href='Help.php?submit=1'>Submit</a></li>";
			if(isset($_SESSION['username']))
			{
				if($_SESSION['Admin'] == 5) 
				{
					echo "<li><a href='ViewHelp.php'>New Topics</a></li>";
				}
			}
		echo "</ul>";
	echo "</li>";
	if(isset($_SESSION['username']))
	{
		echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a>";
		echo "<ul>";
		echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a></li>";
		echo "<li><a href='logout.php'>Logout</a></li>";
		echo "</ul>";
	}
	else
	{
		$path = $_SERVER['SCRIPT_NAME'];
		echo "<li><a href='login.php?path=$path'>Login</a></li>\n";
	}
	?>
</ul>

Menu bar CSS code.
Code:

#menu {
	height: 34px;
	position: fixed;
	width: 100%;
	z-index: 15;
	top: 0;
}

#menubar {
	color: #B4B4B4;
	border-top: 1px solid #363636;
	border-bottom: 1px solid #363636;
    background: #292929;
	background-image: -moz-linear-gradient(top, #292929, #333, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
	background-repeat: repeat;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubarcont {
	width: 900px;
	height: 34px;
}
#menubarcont ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menubarcont ul li {
	display: block;
	position: relative;
	float: left;
}
#menubarcont li ul { display: none; }

#menubarcont ul li a {
	  display: block;
	  text-decoration: none;
	  white-space: nowrap;
}
#menubarcont li:hover ul {
	display: block;
	position: absolute;
}
#menubarcont li:hover li {
  float: none;
  font-size: 11px;
}

#menubar ul li {
	display: inline;
}
#menubar ul li a {
	float:left;
	line-height: 34px;
	font-size: 12px;
	width: 100px;
	margin: 0 0 0 0px;
	text-decoration: none;
	font-family: 0.75em/1.5 'Lucida Grande', sans-serif;
	color: #B4B4B4;
    background: #292929;
	background-image: -moz-linear-gradient(top, #292929, #333, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
	background-repeat: repeat;
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubar ul li a:hover
{
	color: #FFFFFF;
	background: #222;
}

Thanks for reading and hopefully somebody can point me in the right direction.

I'm working on making a searchable javascript and DOM reference...A chm like what php has.

I mainly need it for myself because I don't always have access to the net. I was wondering if anyone would like to contribute?

Hi all,

I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there.

I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this?

Thanks!
Q

Right now I am using the following method to show/hide divs containing videos.

html
Code:

<div class="vidPop" id="vidPop">
   	<div class="vidFrame" id="vidFrame">
    	<iframe id="Iframe1" src="http://player.vimeo.com/video/xxxxxxx1" width="640" height="360" frameborder="0"></iframe>
        <div class="vidClose"><a href="#" onclick="vidPopdown()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div>
	</div>
</div>
<div class="vidPop2" id="vidPop2">
 <div class="vidFrame2" id="vidFrame2">
    	<iframe id="Iframe2" src="http://player.vimeo.com/video/xxxxxxx2" width="640" height="360" frameborder="0"></iframe>
        <div class="vidClose"><a href="#" onclick="vidPopdown2()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div>
  </div>
</div>

js
Code:

function vidPopup() {
var o = document.getElementById('vidPop');
o.style.visibility = 'visible';
o = document.getElementById('vidFrame');
o.style.visibility = 'visible';
}
function vidPopdown() {
var o = document.getElementById('vidPop');
o.style.visibility = 'hidden';
o = document.getElementById('vidFrame');
o.style.visibility = 'hidden';
document.getElementById('Iframe1').src = document.getElementById('Iframe1').src
}
function vidPopup2() {
var o = document.getElementById('vidPop2');
o.style.visibility = 'visible';
o = document.getElementById('vidFrame2');
o.style.visibility = 'visible';
}
function vidPopdown2() {
var o = document.getElementById('vidPop2');
o.style.visibility = 'hidden';
o = document.getElementById('vidFrame2');
o.style.visibility = 'hidden';
document.getElementById('Iframe2').src = document.getElementById('Iframe2').src
}

all of this works just fine, but now I am adding yet another video, and I know that this isn't the best way to go about doing this. I ought to be able to use 1 function and tell it which iframe to load, however I dont really know javascript. Any and all help on this would be greatly appreciated.