1 (edited by asleo 2006-07-12 16:55)

Topic: JavaScript-problem (Nifty Corners)

I am trying to use Nifty Corners from http://www.html.it/articoli/niftycube/ on my forum at http://fortellinger.net/forum/ . Everything (every page) works in Opera 9, but Nifty Corners don't work on the following pages in Firefox and IE:

http://fortellinger.net/forum/userlist.php
http://fortellinger.net/forum/search.php
http://fortellinger.net/forum/register.php
http://fortellinger.net/forum/login.php

I have also tryed to use something different than window.onload for the JavaScript for the Nifty Corners, but with no luck.

2

Re: JavaScript-problem (Nifty Corners)

Try removing <pun_body> from main.tpl and see if nifty corners works then. If it does then you know the problem is a conflict between PunBB's body.onload and nifty corners.

3 (edited by asleo 2006-07-12 18:02)

Re: JavaScript-problem (Nifty Corners)

Thanks! It works when I remove the body.onload. Any idea on how I can solve it? I am sorry to ask, but I don't know much about JavaScript, so I appreciate any help. smile

I don't know what will be the hardest; changing the PunBB JavaScript or the Nifty Corners JavaScript ...

4

Re: JavaScript-problem (Nifty Corners)

I don't know much about javascript either but what I do know is that body onload is now frowned upon. I think it would be preferable to alter the punbb code. Maybe somebody who knows more than either of us can help.

5 (edited by asleo 2006-07-13 12:13)

Re: JavaScript-problem (Nifty Corners)

I have really been trying til find a solution, and I probably have, I just don't know how to use it/implement it. Working with JavaScript with absolutely no knowledge about the language it's like being blind. The following might be a solution for me:

http://simon.incutio.com/archive/2004/0 … dLoadEvent

I have carefully read all of the article (and many others), but I don't understand how to implement it in order to fix my problem with the «body onload ...» conflict.

Maybe I don't  need the body.onload in PunBB, does it do anything of great importens on some of the pages, or could I just remove any «body onload ...» from my forum?

6

Re: JavaScript-problem (Nifty Corners)

All it does is autofocus the first field on forms.

7

Re: JavaScript-problem (Nifty Corners)

Great, and thank you! I sure don't need the autofocus that much, and certainly not more then I need the nifty corners. I really want them. smile

8 (edited by asleo 2006-07-13 13:00)

Re: JavaScript-problem (Nifty Corners)

The only place i found «body onload ...» was in header.php on line number 127 and 128 (I am running the latest version; PunBB 1.2.12). There I have the following code:

// START SUBST - <body>
if (isset($focus_element))
{
    $tpl_main = str_replace('<body onload="', '<body onload="document.getElementById(\''.$focus_element[0].'\').'.$focus_element[1].'.focus();', $tpl_main);
    $tpl_main = str_replace('<body>', '<body onload="document.getElementById(\''.$focus_element[0].'\').'.$focus_element[1].'.focus()">', $tpl_main);
}
// END SUBST - <body>

Should I delete the entire code from above, or just portions of it? I am a little afraid of doing something wrong ...

9

Re: JavaScript-problem (Nifty Corners)

I just deleted the entire code, and everything seems to be working perfectly. So I guess I didn't have to ask about that ...

10 (edited by yi3artist 2007-04-17 13:13)

Re: JavaScript-problem (Nifty Corners)

This is how to get Nifty Corners Cube (i.e. v3) to work on PunBB without dropping the form element focusing. (Nifty Corners Cube is an unobtrusive and flexible application for getting rounded corners on your site)

Open "header.php".

After the lines:

<?php

if (defined('PUN_ADMIN_CONSOLE'))
    echo '<link rel="stylesheet" type="text/css" href="style/imports/base_admin.css" />'."\n";

And before the lines:

if (isset($required_fields))
{
    // Output JavaScript to validate form (make sure required fields are filled out)

?>
<script type="text/javascript">

Add the following:

// Import Nifty Corners Cube for rounded corners
// Import function for handling multiple onload events
// Load such events (form element focusing and Nifty Corners Cube)

?>
<link rel="stylesheet" href="<?php echo PUN_ROOT ?>/...?.../niftyCorners.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo PUN_ROOT ?>/...?.../niftycube.js"></script>
<script type="text/javascript" src="<?php echo PUN_ROOT ?>/...?.../addLoadEvent.js"></script>
<script type="text/javascript">
    addLoadEvent(function(){Nifty("xxx","yyy")});
<?php

if (isset($focus_element))
{

?>
    addLoadEvent(function(){document.getElementById("<?php echo $focus_element[0] ?>").<?php echo $focus_element[1] ?>.focus()});
<?php

}

?>
</script>
<?php

In the code above, there are three instances of "/...?.../" and the two instances of "xxx" and "yyy".

I am not hear to explain Nifty Corners Cube, so users of the application should recognize the "xxx" and "yyy" as the spots where they would insert the parameters for the application.

The first two "/...?.../" will need to be replaced with the sub-directory (folder) path that you have stored the "Nifty Corners Cube" files in (relative to the directory PunBB is installed in). (Only the files loaded above are actually necessary for the Nifty Corners; the other files included in the Nifty Corners zip file are examples and such.)

The third "/...?.../" will need to be replaced with the sub-directory (folder) path that you have stored the "addLoadEvent.js" javascript file in (relative to the directory PunBB is installed in). This file (addLoadEvent.js) should contain the following code:

/*
 * Executing JavaScript on page load
 * Author: Simon Willison
 * Source: http://simonwillison.net/2004/May/26/addLoadEvent/
 */

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */ 
});

If you would rather include this tiny function directly within header, it is also acceptable to instead replace the line:

<script type="text/javascript" src="<?php echo PUN_ROOT ?>/...?.../addLoadEvent.js"></script>

...with the javascript function it refers to (i.e. the javascript function I printed above).

And very important! Make sure to delete (or comment out) the code that uses the "body" tag to focus on the form element. (This was done at the beginning of this thread with the effect of making the Nifty Corners application work, and is still required to do so.) In case you missed the discussion above, this is the code you must delete (or comment out):

// START SUBST - <body>
if (isset($focus_element))
{
    $tpl_main = str_replace('<body onload="', '<body onload="document.getElementById(\''.$focus_element[0].'\').'.$focus_element[1].'.focus();', $tpl_main);
    $tpl_main = str_replace('<body>', '<body onload="document.getElementById(\''.$focus_element[0].'\').'.$focus_element[1].'.focus()">', $tpl_main);
}
// END SUBST - <body>

I have tested this in The following Mac browsers: Firefox 2, Opera 9, Netscape 7, Safari 2. I repeat, those are for Mac. If some kind soul out there tests this on Windows browsers, please tell me the results big_smile

The author of addLoadEvent(), Simon Willison, on 26th May 2004 regarding his function wrote:

... I?ve tested the above code successfully on IE 5, 5.5 and 6 for Windows; IE 5 and Safari for Mac; Opera 7.5 and FireFox on Mac (which should mean it works with those browsers on Windows as well). Opera 6 for Mac failed the test ...

Re: JavaScript-problem (Nifty Corners)

Moved to Modifications