Jump to content

New To Javascript - Confusion About Linking To Popup


NikMac

Recommended Posts

Hi - I have a link in the footer of my site to "help.html". I'd like it so that when a visitor clicks the link, a box pops up on the screen and displays help.html. Here's the code I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>[meta info]<script type="text/javascript"><!--	function helpWindow() {	window.open( "help.html", "Help", 	"status = 0, height = 800, width = 400, resizable = 1" )	}//--></script>[link rel to css stylesheet]</head>

(unrelated question - does it matter if the <script> tag comes before <link rel...> tag?)And the HTML code:

<li onClick="helpWindow()">Help</li>

This appears to work correctly, however, the "help" link is not decorated (underlined) as the links beside it (regular <a href> links) are. How can I fix this? Adding <a onClick=...> doesn't seem to work.Finally, is there a risk that visitors who don't have Java won't be able to click the link? If there is, how can I make it so that clicking the link will open help.html in the same window, but only if Java is disabled?Thanks.

Link to comment
Share on other sites

just to be clear, Java is not Javascript.As for your decoration, if you want to make something link, as in this case, you need some sort of href attribute. Try putting the <a href="help.html">help</a> within the <li> tags.And yes, if someone has javascript disabled, this will not work in their browser.

Link to comment
Share on other sites

just to be clear, Java is not Javascript.As for your decoration, if you want to make something link, as in this case, you need some sort of href attribute. Try putting the <a href="help.html">help</a> within the <li>tags.And yes, if someone has javascript disabled, this will not work in their browser.
Thanks. I changed the html to <li><a href="help.html" onClick="helpWindow()">Help</a></li>. Now it is decorated correctly, but when I click on it the popup appears and> the current window changes. Is there a way to keep it decorated but only have the current window change if javascript is disabled? Edit - I slightly misread your post, but it appears that <li onClick="helpWindow()"><a href="help.html" >Help</a></li> (moving "onClick"... from href tag to li tag) doesn't work either.Perhaps it would be better to use an html popup if this is not possible?Thanks.
Link to comment
Share on other sites

As of now, a click event will be registered by your link AND your onclick handler. What you're looking for is something that will capture the click if JavaScript is enabled, so that the click on the link will not be registered. Fortunately, the click event is passed to the onclick handler before it goes to the link.All you really need is a return value. Without changing your current code too much, here is the simplest thing.<a href="help.html" onclick="helpWindow(); return false;">As you develop your skills, you will eventually want to move the javascript out of your tags and into your script, but this should work for now.

Link to comment
Share on other sites

As of now, a click event will be registered by your link AND your onclick handler. What you're looking for is something that will capture the click if JavaScript is enabled, so that the click on the link will not be registered. Fortunately, the click event is passed to the onclick handler before it goes to the link.All you really need is a return value. Without changing your current code too much, here is the simplest thing.<a href="help.html" onclick="helpWindow(); return false;">As you develop your skills, you will eventually want to move the javascript out of your tags and into your script, but this should work for now.
Excellent, adding "return false;" made it work the way I wanted.Thanks for that - I'll definitely try to learn more about JavaScript.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...