Onclick add more html?

Forum Moderators: open

Message Too Old, No Replies

Onclick add more html?

very basic - using a link to add more stuff somewhere else in the page

floydboy

12:30 am on Oct 7, 2010 (gmt 0)

I know I'll sound like a retard when I say this, but...

I have an image that I want to be able to use as a link to add more html somewhere else in the page. For example, you click the image and text appears under it.

Before:

<a href="#" onlick="SOME CODE HERE"><img src="image.jpg"></a>

After:

<a href="#" onlick="SOME CODE HERE"><img src="image.jpg"></a>
This text appears when the above image is clicked.

Can I use document.write for this? Javascript? I'm a novice, how do I do this?

encyclo

12:55 am on Oct 7, 2010 (gmt 0)

You can show and hide blocks of text with Javascript - in general this will be a better approach than using document.write as the content will remain accessible for search engine spiders and users who have disabled scripting.

floydboy

4:18 am on Oct 7, 2010 (gmt 0)

I've tried hide/show divs before, but I can't make multiple independent ones work on the same page. If I wanted to try document.write, how would I use it, and could I write to a specific div from a link somewhere else in the page? Thanks so much!

rocknbil

5:30 am on Oct 7, 2010 (gmt 0)

Or you could do something like this.

<p id="writeme"></p> 

<form action="" onsubmit="return writeIt(this.textentry.value);">
<p><textarea name="textentry" id="textentry" rows="5" cols="25"></textarea></p>
<p><input type="submit" value="write it"></p>
</form>

<script type="text/javascript">
function writeIt(thetext) {
if (document.getElementById('writeme')) {
document.getElementById('writeme').innerHTML=thetext;
}
return false;
}
</script>

Or ... get familiar with jQuery, you can summon an external file to put into writeme. Document.write is more memory intensive as your text gets large . . . unwieldy . . . and old school. :-)

Fotiman

3:07 pm on Oct 7, 2010 (gmt 0)

First, you can not use document.write for this. document.write, if called after the page has finished loading, will REPLACE the contents of your entire page. In general, document.write should be avoided at all cost.

You have several options. You could:

1. Have the content on the page already and "toggle" it with JavaScript. This, in my opinion, is the best option because the content remains available in the page for users with JavaScript disabled and search engines.

2. Use JavaScript to generate the content by appending elements to the DOM. This approach is probably the more complicated one, and also not as good for SEO.

Here's a very simple jQuery approach which uses hide() and toggle():


<DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
  <a href="#" class="toggleLink">This link is not valid because it contains only # in the href</a>
</div>
<div>
  <a href="#foo" class="toggleLink"><img src="image.jpg"></a>
  <div id="foo">This 1st text appears when the above image is clicked.</div>
<div>
<div>
  <a href="#bar" class="toggleLink"><img src="image.jpg"></a>
  <div id="bar">This 2nd text appears when the above image is clicked.</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
  // Find all of the toggle links: they have class 'toggleLink', with an href
  // that starts with '#' but is not equal to only '#' (protection against
  // links like href="#" with no valid id). Get the elements with those ids
  // and hide them
  $("a.toggleLink[href^='#'][href!=#]").each(function (idx, el) {
    var id = $(this).attr('href');
    // Hide the element with this id
    $(id).hide();
    // Attach event handlers to the link
    $(el).click(function (ev) {
      ev.preventDefault();
      var id = $(this).attr('href');
      $(id).toggle();
    });
  });
});
</script>
</body>
</html>

Hope that's helpful.

floydboy

8:11 pm on Oct 7, 2010 (gmt 0)

What if I wanted the link to be part of an imagemap? I tried putting the

href="#foo" class="toggleLink"

in the <area> tag of an imagemap, but now the script won't work. The hidden text appears as already visible, and clicking the imagemap scrolls the page down to the div--basically it treats the div like an anchor, leading me to believe that the script can't "reach" the link from inside the image map. What have I done wrong?

Fotiman

8:33 pm on Oct 7, 2010 (gmt 0)

I don't have a lot of experience with image maps (not a fan). What does your JavaScript code look like? Did you remember to change "a.toggleLink" to "area.toggleLink"?

floydboy

9:05 pm on Oct 7, 2010 (gmt 0)

Thank you Fotiman, that was the problem!