PDA

View Full Version : creating elements help



llorax
04-30-2007, 01:46 AM
I have a bunch of elements for navigation on my site and I am putting javascript within these elements. Here is just an html example:


function site() {
document.getElementById("content").innerHTML = "<h1>Site</h1><br><h2>a little bit about intomyheart.org...</h2>
<p>Intomyheart.org domain is my second domain name after I lost my first domain (Twistedbeauty.net) of 5 years.</p>
<h2>Credits</h2>
<p>Domain Register: <a href=\"http://www.975register.com"/>975register.com</a>
Host: <a href="http://www.hostforweb.com">hostforweb.com</a>
HTML: Dreamweaver
FTP: Fetch
Graphics: <a href="http://www.adobe.com">Adobe Suite CS2</a>
HTML and Javascript help: Dynamic Drive</p>";
}

As soon as the a href" is first used, the code breaks back into javascript and destroys the rest of the code. It seems to no longer contain it within the element. How do I change that?

boxxertrumps
04-30-2007, 02:00 AM
this:
<a href="http://www.adobe.com">Adobe Suite CS2</a>
should have the quotes escaped like so:
<a href=\"http://www.adobe.com\">Adobe Suite CS2</a>
the way the js engine sees it...

innerhtml = "this is a string, but when it comes to an <a href=" Not A string Anymore,, the quote starts and ends strings...

Its the same as php and any other language with strings.

llorax
04-30-2007, 10:06 PM
There seems to still be a problem with the code. None of the links work! Can anyone catch any mistakes in my coding?


<html>
<head>
<title>Intomyheart.org v 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function me() {
document.getElementById("content").innerHTML = "<h1>Me</h1><br><h2>a little bit about me...</h2>
}
function site() {
document.getElementById("content").innerHTML = "<h1>Site</h1><br><h2>a little bit about intomyheart.org...</h2>
<p>Intomyheart.org domain is my second domain name after I lost my first domain (Twistedbeauty.net) of 5 years.
I found the name intomyheart appropriate because designing websites has always been a key part of what I do. By
viewing my artwork and my websites, you are quite literally going into my heart.</p>
<h2>Credits</h2>
<p>Domain Register: <a href=\"http://www.975register.com\">975register.com</a><br>
Host: <a href=\"http://www.hostforweb.com\">hostforweb.com</a><br>
HTML: <a href=\"http://www.adobe.com\">Dreamweaver MX 2004</a><br>
FTP: <a href=\"http://www.fetchsoftworks.com\">Fetch</a><br>
Graphics: <a href=\"http://www.adobe.com\">Adobe Suite CS2</a><br>
HTML and Javascript help: <a href=\"http://www.dynamicdrive.com\">Dynamic Drive</a></p>
<h2>Past Layout</h2>
<p><img src=\"images/unlimitedtime.gif\"><br>
<center><b>January 2006</b></center></p>";
}
function current() {
document.getElementById("content").innerHTML = "<h1>Current Project</h1><br><h2>today's work...</h2>
<p>Right now I am building a website for the Worcester Band, the American Mother****ers
and helping them out with some cd designs. Over the summer I will be designing several websites
including the redesigning of Emerson's Fashion Magazine, <a href=\"http://www.emmagonline.com\">Em Mag.</a>
<center><img src=\"images/amf.jpg\"></center>";
}
function projects() {
document.getElementById("content").innerHTML = "<h1>Past Projects</h1><br><h2>yesterday's work...</h2>
<script type=\"text/javascript\">

var portfolio=new Array()
portfolio[0]=[\"photo2.jpg\", \"Kill Conrad\", \"images/kc.jpg\"]
portfolio[1]=[\"photo3.jpg\", \"The Evvy Awards 25\", \"imagse/evvyawards.jpg\"]
portfolio[1]=[\"photo3.jpg\", \"The Wonder Years\", \"imagse/massivecon.jpg\"]
portfolio[2]=[\"photo4.jpg\", \"Mass Bay District\", \"http://www.mbdyruu.org/\"]

var thepics=new photogallery(portfolio, 3, 1, '310px', '340px') <\/script>";
}
function contact() {
document.getElementById("content").innerHTML = "<h1>Contact</h1><br><h2>my 411...</h2>
<form action=\"formmail.php\" target=\"content\" method=\"post\">
Name: <input type=\"text\" name=\"name\" size=\"40\"><p>
Email : <input type=\"text\" name=\"email\" size=\"40\"><p>
Comments : <br><textarea name=\"comments\" cols=45 rows=\"3\"></textarea><p>
<input type=\"submit\" value=\"Submit\">
</form>";
}
</script>
</head>
<body>
<!-- ImageReady Slices (layout.psd) -->
<table id="table" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/layout_01.gif" width="662" height="40" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/layout_02.gif" width="14" height="365" alt=""></td>
<td rowspan="2"><img src="images/heart.gif" width="316" height="351" border="0" usemap="#Map"></td>
<td colspan="3">
<img src="images/layout_04.gif" width="332" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/layout_05.gif" width="5" height="356" alt=""></td>
<td>
<div id="content">
Welcome to intomyheart.org! This is my third layout for this site which is barely a year old. Though this started very much as a personal site, I am starting to develope it into my web portfolio. </p>
<p>Please use the navigation on the left to view my work as a web designer.</p>
<p>If you run into any problems with the site or have questions for me, feel free to use the <a href="javascript:contact()">email form</a> under contacts or simply send me an <a href="mailto:llora@mcgraths.org">email</a>.
</div></td>
<td rowspan="2">
<img src="images/layout_07.gif" width="16" height="356" alt=""></td>
</tr>
<tr>
<td>
<img src="images/layout_08.gif" width="316" height="14" alt=""></td>
<td>
<img src="images/layout_09.gif" width="311" height="14" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<p align="center">Is your computer flash compatible? View my flash site <a href="index.html">here</a>.</p>

<map name="Map">
<area shape="rect" coords="7,115,32,131" href="javascript:me()">
<area shape="rect" coords="220,6,245,23" href="javascript:site()">
<area shape="rect" coords="275,57,315,77" href="javascript:contact()">
<area shape="rect" coords="233,184,314,202" href="javascript:current()">
<area shape="rect" coords="46,260,120,277" href="javascript:projects()">
</map>
</body>
</html>

Bob90
05-01-2007, 12:02 AM
A big error you're making is not closing strings. If you want strings to go over lines you must make each one complete and add a +

Like this.


something.innerHTML = "line 1 of total string"
+ "line 2"
+ "line 3"

Notice each line has a " to start and finish.

:)

llorax
05-01-2007, 04:38 PM
Even when I have all the content on one line, it claims there is a 'potential unsafe operation'.

llorax
05-01-2007, 05:00 PM
Here is the current code:/ I still can't figure out what is wrong!


<script language="JavaScript" type="text/JavaScript">
function me() {
document.getElementById("content").innerHTML = "<h1>Me</h1><br><h2>a little bit about me...</h2>"
+ "<p>My name is Llora."
+ "I plan on graduating in 2009 with a BFA in New Media as well as completed minors in pyschology and photography.</p>"
+ "<p>Ever since I was around 4 or 5 when my dad bought me Kid Pix, I had a passion for computer design."
+ "I also started playing around with web designs. At the age of 14, my dad bought me my first domain name for my birthday."
+ "Ever since, I have continued building my knowledge in both code and design.</p>";
}
function site() {
document.getElementById("content").innerHTML = "<h1>Site</h1><br><h2>a little bit about intomyheart.org...</h2>";
}
function current() {
document.getElementById("content").innerHTML = "<h1>Current Project</h1><br><h2>today's work...</h2>"
+ "<p>Right now I am building a website for the Worcester Band, the American Mother****ers</p>";
}
function projects() {
document.getElementById("content").innerHTML = "<h1>Past Projects</h1><br><h2>yesterday's work...</h2>";
}
function contact() {
document.getElementById("content").innerHTML = "dfdsfsfsdf";
}
</script>

jscheuer1
05-01-2007, 05:09 PM
Works here. You're not talking about the local Active X warning in IE, are you?

llorax
05-09-2007, 07:35 PM
no im using firefox

Twey
05-09-2007, 08:18 PM
Because the Javascript interpreter can end statements at linebreaks, doing:
"str1"
+ "str2"... can be considered two separate statements, the latter of which has no effect (it returns NaN in this case, but nothing is done with the return value). So, you should put the operator on the line before:
"str1" +
"str2"However, rather than doing this, you should have the content already loaded in <div>s, which are hidden (by script) on page load then shown by your script later. This allows non-Javascript users to actually see something.

mwinter
05-09-2007, 09:07 PM
Because the Javascript interpreter can end statements at linebreaks,

Only with restricted productions: the postfix increment and decrement operators (the prefix forms are not restricted), and the continue, break, return, and throw statements. Even then, the statement is only terminated prematurely if the line terminator occurs in a particular location. See section 7.9 Automatic Semicolon Insertion in ECMA-262, 3rd ed. for more detailed information.




"str1"
+ "str2"
... can be considered two separate statements

Only by a broken interpreter.



So, you should put the operator on the line before:

I would recommend the precise opposite. I find it much easier to understand expressions split over several lines if the operator occurs at the beginning of the next line; I only have to scan to the first non-white space character to decide if the line is a continuation or not. I would indent the continued lines, though.

llorax: There is nothing syntactically wrong with the code you included in your last post.

Mike