Need Javascript/CSS help

Azio

I'm trying to make a web page with a "time line" as part of a stupid assignment for university. I want to have a link that toggles the CSS div containing the time line between "display:none" and "display:block", but have been quite unsuccessful. I'm a bit rusty with the old Javascript so I used the script from here, but it doesn't seem to be doing anything. My page is here. Any ideas?

Jasconius

Just change the way it works.

The root command should be

document.getElementByID('divID').style.display = '';

Then just do a logic statement to check to see what the current value of that is, if it is empty then set it to none, if it is none, set it to empty.

You don't need to explicitly set it to block, it will work just the same without doing that.


It doesn't need to be any more complex than that since you are only doing it to a single div.

Azio

OK I've been fighting with it for a while and it doesn't like my syntax for some reason. Here's what I'm using right now:

function toggleLayer( divID )
{
	if (document.getElementByID('divID').style.display = 'block');
	{
		document.getElementByID('divID').style.display = 'none';
	}
	else;
	{
		document.getElementByID('divID').style.display = 'block';
	}
}

The error console says that there's a syntax error with my "else" statement.

Vrtra Theory

Get rid of the semicolon after the "else" and you should be golden.

Also, the "=" on line 3 (inside your if expression) needs to be "==". Equality, not assignment.

Azio

Vrtra Theory wrote: »

Get rid of the semicolon after the "else" and you should be golden.

Also, the "=" on line 3 (inside your if expression) needs to be "==". Equality, not assignment.

Taking out the semicolon didn't help, so I just went with two "if" statements and now it's telling me that document.getElementByID is not a function. Whaaatttt.

edit: lawl, it's supposed to be "ById", not "ByID". But now it tells me that document.getElementById('divID') has no properties.

edit2: I've changed the toggleLayer function; now it just directly instructs the timeline div to hide or show. Now it just doesn't work, no word from the error console.

function toggleLayer()
{
	if (document.getElementById('timeline').style.display == 'block');
	{
		document.getElementById('timeline').style.display = 'none';
	}
	if (document.getElementById('timeline').style.display == 'none');
	{
		document.getElementById('timeline').style.display = 'block';
	}
}

I'm just going to leave this for now. Although my TA is easily impressed by flashy javascript, I need to do the actual writing part before my group kills me. Any ideas would be appreciated though.

Janin

Don't put semicolons after the if() statements either. In fact, if you don't know how to use them, don't use semicolons at all.

Seguer

Semicolons, in most programming languages, are declaring that a line of code has finished.

Example:

x = 34 + 2;

x = 
34 + 
2;

These are the same thing when compiled (or should be)

if statements aren't "a line of code" and so they don't need semicolons:

if (expression) {
   code;
   code;
} else {
   code;
   code;
}

EDIT: The curly braces ("{ }") encapsulate multiple lines of code in order to keep them with the "if" or the "else"

SporkAndrew

Azio wrote: »

function toggleLayer()
{
	if (document.getElementById('timeline').style.display == 'block');
	{
		document.getElementById('timeline').style.display = 'none';
	}
	if (document.getElementById('timeline').style.display == 'none');
	{
		document.getElementById('timeline').style.display = 'block';
	}
}

You were doing a couple of things wrong. First the semi-colon thing as Janin suggested, but also identifying a variable with what you use to directly reference something. Where before you were getElementByID('divID') when you should be getElementByID(divID). The apostrophes denote the actual physical name of the ID, rather than the variable that you are pulling in from the function call.

So what you want is below:

function toggleLayer(whut) {
	if (document.getElementById(whut).style.display == 'block') {
		document.getElementById(whut).style.display = 'none';
	} else {
		document.getElementById(whut).style.display = 'block';
	}
}

Call it with:

<a href="#" title="Toggle timeline on / off" onclick="javascript: toggleLayer('timeline'); return false;">Toggle Timeline On / Off</a>

Seguer

Also this works:

(in spoiler for the huge):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>StudioLab #1  - Telephone</title>
    <style type="text/css">
		<!--
		.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
		.style2 {font-family: "Times New Roman", Times, serif}
		div#timeline {display:inline; width:100%; overflow: auto; border:dotted; border-width:thin;}
		img {
			border-top-width: 0px;
			border-right-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
		}
		-->
    </style>
    
    <script type="text/javascript">
    	
    	/* ====
    	From: http://www.dustindiaz.com/seven-togglers/
    	===== */
    	
		function toggle(obj) {
			var el = document.getElementById(obj);
			el.style.display = (el.style.display != 'none' ? 'none' : '' );
		}
    
    </script>
</head>

<body class="style1">
    <h1>StudioLab #1: Telephone</h1>

    <h6>by <a href="mailto:tamarabonn@hotmail.com">Tamara Bonn</a>, <a href="mailto:bac@sfu.ca">Blake Colwell</a>, <a href="mailto:jag_bentley@hotmail.com">Jagmeet Dioghan</a>, <a href="mailto:gareth_mccall@sfu.ca">Gareth McCall</a>, and <a href="mailto:jsanghera07@hotmail.com">Jiwan Sanghera</a></h6>
    
    <p>In this activity we were tasked with relaying the following message using various technological means, ranging from the antiquated to the cutting edge of modern communications. </p>
    
    <blockquote>

      <p class="style2">&quot;Our 'Age of Anxiety' is, in great part, the result of  trying to do today's job with yesterday's tools--with yesteryear's concepts.&quot; --Marshall McLuhan, 1967</p>
    </blockquote>
    
    <p><strong>Timeline</strong>&nbsp;<input type="button" value="Show/Hide Timeline" onclick="toggle('timeline');"></p>
    
    <div id="timeline" >
      <table border="0" cellpadding="3px" width="1012px" style="font-size:small;">
        <tr><td><a href="images/letter.jpg" target="_new"><img src="images/thumbnails/letter.jpg" alt="letter thumbnail" /></a></td><td><a href="images/msn.jpg" target="_new"><img src="images/thumbnails/msn.jpg" alt="IM thumbnail" /></a></td><td><a href="images/phone.jpg" target="_new"><img src="images/thumbnails/phone.jpg" alt="phone thumbnail" /></a></td><td><a href="images/facebook.jpg" target="_new"><img src="images/thumbnails/facebook.jpg" alt="facebook thumbnail" /></a></td><td><a href="images/email.jpg" target="_new"><img src="images/thumbnails/email.jpg" alt="e-mail thumbnail" /></a></td></tr>
        <tr><td><strong>12:40 PM</strong> - Blake sent the message to Gareth in a hand-written letter.</td><td><strong>12:41 PM</strong> - Gareth relayed the message to Jag using a popular instant messaging service.</td><td><strong>12:43 PM</strong> - Jag used his mobile phone to read the message to Tamara.</td><td><strong>12:47 PM</strong> - Tamara used Facebook's private messaging feature to relay the message to Jiwan.</td><td><strong>12:51 PM</strong> - Finally, Jiwan e-mailed the message to Blake.</td></tr>

      </table>
    </div>
    
    <p>We found that transmitting information through  email, Facebook, Messenger or a cell phone can be very quick and easy, especially to track and  record such transmissions. However, certain limitations presented themselves, such as finding the initial contact  information of all the group members. It was necessary to record phone numbers, email addresses  and Facebook accounts before we could begin the activity.  In addition, Gareth had some minor difficulty reading Blake's handwriting; and when Jag  called Tamara on his mobile phone, parts of the message were lost or changed due to the  spelling or quality of hearing the message. However, when the message was  digitally transmitted as text, it appeared exactly as  it had been recorded. In the end, the original message remained mostly intact except for some missing punctuation, which can be attributed more to human error than to the limitations of the techonologies we used.</p>
    <p>McLuhan's quote means that in  today s society, it is often difficult for people to adopt new technologies, and when those  technologies eventually do become standard many people are stuck using out-dated  technologies and concepts. Because some  members in our group did not have any high-tech means of transmitting the message, we had to employ some old-fashioned methods. Blake, who had neither a computer nor a mobile phone, was forced to write the message by hand. Tamara, Jiwan and Gareth had to share two laptops to relay the message. And before we could even begin, we had to use face-to-face communication to gather up everyone's contact information. However, in contrast to McLuhan s point, we found that  overall it was fairly easy to transmit the quote, despite the fact  that the message was slightly distorted at certain points. It took us about fifteen minutes to exchange contact information and relay  the message, so we finished long before the hour we were given was over.</p>
    <p>The single aspect common to all the technologies  we used was that everything was very quick and efficient. This allowed the  message to be relayed through a network in a matter of minutes. And although Blake had use a written letter, it was still quickly relayed due to the proximity  of the recipient.</p>
    
    <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</body>
</html>

Azio

SporkAndrew wrote: »

snip

Ah, excellent, thank you. Like I said, it's been a while.

SporkAndrew

Azio wrote: »

SporkAndrew wrote: »

snip

Ah, excellent, thank you. Like I said, it's been a while.

No worries. I write this crap for a living so I've generally made just about every stupid mistake you can with this sort of thing.

Janin

Seguer wrote: »

Semicolons, in most programming languages, are declaring that a line of code has finished.

They are optional in Javascript.

Squashua

Janin wrote: »

Seguer wrote: »

Semicolons, in most programming languages, are declaring that a line of code has finished.

They are optional in Javascript.

So are pants, but you probably wear them.

Don't leave out the goddamn semicolons.