creating a gallery with mootools, can someone help?
December 29, 2006 10:56 AM   Subscribe

Since all sorts of very clever people frequent metafilter I figured it would be worth a shot to repost this mootools related javascripting question here.

I have something that looks like this:


<div id="slidebox">
          <div class="image">
               <img id="bar" src="images/test.jpg" alt="dynamically inserted alt tag" />
          </div>
          <span id="buttons">
               <a href="#" onclick="buttonOne();">1</a>
               <a href="#" onclick="buttonTwo();">2</a>
               <a href="#" onclick="buttonThree();">3</a>
          </span>
     <span id="labels">This is a description</span>
</div>


I can't understand how to write a function that will replace the content of 'bar', 'buttons' and 'labels' when called.

Ultimately I intend to store the three values using JSON. When the user clicks an item on a list it triggers a function that goes to the JSON array(?) and grabs the three values from the index that shares the ID of the trigger. For example if I have this, <a href="#" id="example" onclick="doIt();">Example</a>, then,
When called the doIt() would go grab something like this:

var example = {
     "bar" : {
          "src" : "images/example.jpg",
          "alt" : "example",
     }
     "buttons" : "<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>",
     "labels" : "This is an example",
}

And replace the existing markup with something like this:

<div id="slidebox">
          <div class="image">
               <img id="bar" src="images/example.jpg" alt="example" />
          </div>
          <span id="buttons">
               <a href="#" onclick="buttonOne();">1</a>
               <a href="#" onclick="buttonTwo();">2</a>
               <a href="#" onclick="buttonThree();">3</a>
          </span>
     <span id="labels">This is an example</span>
</div>

I'm pretty clueless as to how to change the content and extremely clueless as to how to write a function that can get the values from the JSON and change the content. Could someone please help me understand? Thank you!
posted by Grod to Computers & Internet (6 answers total)
 
The innerHTML property is how you manipulate HTML within an element. As in:

window.document.forms[0].all("labels").innerHTML = "This is an example";

You can even do freaky things like dynamically write javascript, inline CSS, etc.
posted by LordSludge at 11:18 AM on December 29, 2006


I liked innerHTML, but if you're one of those people who cares about compliance, etc., you'll probably end up with the more tedious methods.
posted by adipocere at 11:23 AM on December 29, 2006


Response by poster: I'd rather do it through the DOM, I just don't exactly how.
posted by Grod at 11:24 AM on December 29, 2006


Response by poster: Actually, I do know how. The most basic way is something like this:
function doIt(){
var path = 'images/test1.jpg';
theImage = $('bar');
theImage.src = path;
}
(where $ is a shorthand for getElementByID)

The part that troubles me is writing 1 function that can figure out which variable to look in for the values it will use to update the content based on the ID of the element that triggered it.
posted by Grod at 11:55 AM on December 29, 2006


function doIt(a){

if (a == 'div1') {

var path = 'images/test1.jpg';
theImage = $('bar');
theImage.src = path;

}
}

?
posted by gramcracker at 1:37 PM on December 29, 2006




« Older Pinball in Durham   |   Help me consider the pros / cons of different... Newer »
This thread is closed to new comments.