Lectora inserts anchors (<A name=""> elements) which sometimes can break things!

I have programmed exercises with a sliding animation from "page" to "page" of exercises using the Scrollable from JQuery Tools. It would work fine in an older FireFox, but broke apparently in the newest version, it newer worked in Chrome, but it works in IE. The exercises would jump to the last page, skipping over everything in between.

After one hour of debugging I found out that an additional <A></A> element had to be inserted in each "page" of the exercises. (I do it programmaticaly using PHP.) Now all items show up … with an additional item (depending on the browser).

This additional item is an anchor inserted by Lectora. There's no use putting code to take it out again to run on page load, as Lectora's code seems to run later. You have to run your code as soon, as the user triggers an action, just at the beginning of it to clean up.

//fixing Lectora interfering with our code …
$("#exercise > .items > a").remove();

A simple fix for a complex problem … Lectora does require a lot of workarounds.

Apparently it is not possible to trigger JQuery events in IFRAMEs using the syntax:

$("#iframe").contents().find("#testdiv").triggerHandler('click');

The event will not be fired.

The other way around (IFRAME -> trigger events in parent) has been already discussed on the web extensively.

The solution is to not use JQuery at all, just use an ordinary function to call in your IFRAME which would then do what the handler should have been doing.

From the parent:

frames[iframe_name'].testfunction();

acts on the IFRAME

<IFRAME name="iframe_name"></IFRAME>

which in turn loads a page with

function testfunction();

Given the limited flexibility of Lectora, in some cases you need to include custom scripted HTML objects.

For instance you want to build an overlay for a login dialog, which would communicate directly with the server using AJAX.

After positioning your external HTML object on the page and building the HTML you want to include (by i.e. a PHP "include" call), sometimes you will find Lectora is putting other things on top of your HTML object's contents.

The first possibility to fix this would be modifying Lectora's "Layering" option of your object: "Bring to Front".

The second possibility comes in handy, if you do not want to modify the Lectora project itself: on-the fly z-index – updating.

I use the JS library JQuery to efficiently work on the DOM across browsers. Using it, you can set the z-index during runtime (i.e. reacting to a mouseclick on an icon):

$('#object-name').css('z-index','1000');

You can find out the name of the DIV Lectora creates for your external HTML object using Firebug, or looking up the object name property in Lectora (double click your object to see the settings dialogue).

Creating DIVs inside your Lectora object and setting their z-indices to higher values, i.e. by CSS, does not work. You need to alter the z-index of the wrapper DIV provided by Lectora. It is created during run-time using this code:

object-name = new ObjInline('object-name',null,0,580,900,40,1,15,null,'div')
object-name.build()

The Lectora code sets the z-index! Thus, your z-index from the CSS would be ignored, and you need to update it during runtime, as I have described above.

Internet Explorer getJSON trouble

This piece of code initially did not work for me on IE:

$.getJSON("../inc/exercise_ajax.php?" + $(this).serialize(), function(json)

FireFox worked without problems.

The reason is that my JSON code was not well-formed. It had a comma (',') too much.

Here's the code which I use in PHP to create my JSON (braces omitted):

foreach($answers as $question => $answer){
$outstr .= '"q'.$question.'": ';
if (isset($_GET[$question])){
if ($_GET[$question] == $answer) $outstr .= 'true';
else $outstr .= 'false';
} else $outstr .= 'null';
$outstr .= ',';
}
echo chop($outstr,',');

You have to chop off the trailing comma – if you don't, IE will choke on it and your callback function won't be executed.

Internet Explorer & AJAX caching

Yes, Internet Explorer caches your requests. You've got to empty the browser cache before testing the fix I mentioned. Also, you should append a unique parameter to suppress caching, i.e. the current timestamp. Example:

var now = new Date();
// submit with AJAX
$.getJSON("../inc/exercise_ajax.php?ts=" + now.getTime() + '&' + $(this).serialize(), function(json)

Internet Explorer's refusing to work with the tabs – that is, the first two tabs work then everything breaks. Firefoxy and Opera do what I intend them to do. Have I mentioned that cross-browser developing can be a burden?

It turns out, that Internet Explorer has a problem with the <FORM> not wrapping around everything, but being split up between DIVs.

This does not work with Internet Explorer:

<div class="panes">
<DIV>
<form action="/" method="post">
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</form>
</DIV>
</DIV><!–closing the panes–>

This works:

<form action="/" method="post">
<div class="panes">
<DIV>
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</DIV>
</DIV><!–closing the panes–>
</form><!–form wraps around the panes –>