Shadowbox Javascript

Shadowbox Javascript

by Andy Muir -
Number of replies: 8

Hi All,

Just upgraded our site from 1.9 to 2.1. I redid our theme based around Mary's lovely Aardvark Makeover theme (thanks Mary).

I am trying to include Shadowbox pop ups within our site (www.shadowbox-js.com)

Having read all instructions, I downloaded shadowbox YUI, placed the shadowbox.js file in the javascript folder, modified the config file in the theme to read

$THEME->javascripts_footer = array('jquery-1.6.1','jquery.carousel.min','shadowbox');

After uploading and purging cache I get the following error in IE.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; BTRS122288; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)
Timestamp: Thu, 19 Jan 2012 15:45:49 UTC

Message: '1' is null or not an object
Line: 14
Char: 1994
Code: 0
URI: http://learn.vcrew.com/theme/yui_combo.php?3.4.1/build/oop/oop-min.js&3.4.1/build/event-custom-base/event-custom-base-min.js&3.4.1/build/dom-core/dom-core-min.js&3.4.1/build/dom-base/dom-base-min.js&3.4.1/build/selector-native/selector-native-min.js&3.4.1/build/selector/selector-min.js&3.4.1/build/node-core/node-core-min.js&3.4.1/build/node-base/node-base-min.js&3.4.1/build/event-base/event-base-min.js&3.4.1/build/event-base-ie/event-base-ie-min.js&3.4.1/build/event-delegate/event-delegate-min.js&3.4.1/build/node-event-delegate/node-event-delegate-min.js&3.4.1/build/pluginhost-base/pluginhost-base-min.js&3.4.1/build/pluginhost-config/pluginhost-config-min.js&3.4.1/build/node-pluginhost/node-pluginhost-min.js&3.4.1/build/dom-style/dom-style-min.js&3.4.1/build/dom-style-ie/dom-style-ie-min.js&3.4.1/build/dom-screen/dom-screen-min.js&3.4.1/build/node-screen/node-screen-min.js&3.4.1/build/node-style/node-style-min.js&3.4.1/build/event-custom-complex/event-custom-complex-min.js&3.4.1/build/intl/intl-min.js

Anyone any idea if its possible to use Shadowbox or similar in Moodle?

Appologies if this is not the best forum to use, wasnt sure which one

Thanks in advance!

 

Andy

Average of ratings: -
In reply to Andy Muir

Re: Shadowbox Javascript

by Mary Evans -

Hi,

First of all make sure you are using IE9 at least and that you are NOT in Compatibility Mode check using F12 (Function Key) you should see this...

F12

If you are in Compatibility Mode chang settings as seen in the above image. If you are in the correct Mode then I am not sure what the conflict is.

Have you tried this in other browsers like Chrome/FireFox/Opera/or Safari?

If none of these work...there must be something you have not done correctly, probably missed something out that needs to go directly on the page itself like ../layout/defaultphp or ../layout/frontpage.php).

In the mean time I'll take a look at this Shadow Box.

EDIT: You need to DELETE the old stuff I left in the config.php

$THEME->javascripts_footer = array('jquery-1.6.1','jquery.carousel.min','shadowbox');

It also needs to be in the header...so the FOOTER is the wrong call for this!!!

Cheers

Mary

In reply to Mary Evans

Re: Shadowbox Javascript

by Andy Muir -

Hi Mary

Thanks for your reply.

 

Everything is fine in FF. I have to use IE8 as that is the standard for the company though.

Tried in the header previously, and again just there but always the same result. Also deleted the old stuff (wasnt sure if that was required or not).

I am going to try some alternatives to shadowbox. I shall report back if I get anything to work for anyone else who stumbles accross this.

One other thing - I think I found a wee bug/error in your wonderful Makeover theme (thank you for this - saved hours/days of work!). On the config file, the final item in the $THEME->layouts array is

 'report' => array(
        'file' => 'report.php',
        'regions' => array('side-pre'),
        'defaultregion' => 'side-pre',
        'options' => array('nofooter'=>true, 'nonavbar'=>false, 'nocustommenu'=>true),
    ),

 

But there is is no report.php file in layout. Changed it to default and worked a treat. smile

In reply to Andy Muir

Re: Shadowbox Javascript

by Mary Evans -

Hi Andy,

I'm just playing with the Shadowbox now. I am finding that the previous cache from the old js for this theme will not clear so I had to manually delete it from moodledata directory on the server.

This is one of the drawbacks of using JS with Moodle.

I'm also trying out a few tricks if I get it to work I'll let you know.

As for the report...yes that was another error. addin default.php was the correct thing to do.  It will work but you may find that when printing off a report it prints off sideblock text and/or docked block titles.

Cheers

Mary

In reply to Andy Muir

Re: Shadowbox Javascript

by Andy Muir -

Just to confirm, I tried a couple of alternatives and both worked, I went with Colorbox, which is every bit as good as Shadowbox, if not better.

In reply to Andy Muir

Re: Shadowbox Javascript

by Mary Evans -

Hi,

I gave up on the shadowbox too...I sort of got lost with all the different options...I like simple things! LOL

Cheers

Mart

In reply to Andy Muir

Re: Shadowbox Javascript

by Vijay N -

Hi Andy,

Re: Using Colorbox, 

Can you share the steps you took to set it all up and to make it work on a Moodle activity like page or file. 

Just to be sure, if its the same thing, are we talking the effect found on this link: http://jacklmoore.com/colorbox/

Thanks in advance.

V.

In reply to Vijay N

Re: Shadowbox Javascript

by Mary Evans -

Checkout Development: Using jQuery with Moodle 2.0

Follows the insctuctions for adding the jquery or javascript to the theme you are using for this.

Then depending on if you need to add some small script to the theme layout page you can do as I do and add it as an include using php.

Fisrt you nee to make a small php file to add your colorbox code to.

open Notepad and save the page as colorbox.php into layout folder of your theme. Find the code you need to add and copy it. You can miss off the <script tags as these are not needed in the include.

Paste this into you new colorbox.php file and save.

Next open general.php and frontpage.php and add this line of code to the head of the page...just above the output for the standard_html for the page...like so...

<?php include('colorbox.php') ?>

    <?php echo $OUTPUT->standard_head_html() ?>

</head>

And hopfully it will all work.

Good luck

Mary