IUG 2009 – Finding Your InnerHTML – Using Dynamic HTML to Change the Unchangeable

Posted: May 19, 2009 in conferences, Innovative Interfaces, Innovative Users Group, integrated library system, IUG, iug 2009
Tags: , ,

David Kuhn

Monterey Public Library

 

Several random notes from the presentation. Track down David for his presentation materials. Lots of detailed examples.

 

 

Things to remember

JavaScript operates asynchronously – it doesn’t wait for something else to finish before going on to the next command.

You can’t change code until it’s rendered.

The code you see isn’t always what your browser sees.

And of course – Firefox and IE render differently.

 

Seeing what your browser sees:

Surround the section with <div> tags

Give it a unique ID.

Add script: <script>alert(document.getElementByID(assigned id).innerHTML);</script>

 

Add new content

Add <div id=“someid1”></div> to your code where the new content is to appear

 

End your javascript code with:

document.getElementbyID(‘someid1’).innerHTML=your new content

 

Modify existing content

The smaller the section you modify, the better.

 

Making changes to Content

Identify a unique marker in the text

Use search and replace to change the text

Regular Expressions highly recommended

 

What about System Generated pages?

Add <div id="someid"> to toplogo

Add </div> to botlogo

Put your script in botlogo

Identify unique markers on the page so your script can identify it.

This script will appear on every page of the catalog. You need to find a way to trigger or not trigger the script according to what you want to do.

 

Examples

Add new content – Dynamic RSS feed page, Printer friendly export book page

Modify existing content – View patron record, preferred searches

 

Final considerations

Do not hang too many lights on the tree!

Software upgrades:

May break your modifications

Your modifications may break the page

Advertisements
Comments
  1. Daynah says:

    Great notes Kevin! I’ll probably start adding more JS to our WebOpac now. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s