Topic: adding scripts to header

adding scripts to header

johnnydoe
Member

@johnnydoe

15 years, 11 months ago

hello,

i’ve tried to add ** to /mytheme/header.php ( inside the head tags of course) –

**

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/jquery.accordion.js”></script>

<script type=”text/javascript” src=”js/jquerycustom.js”></script>

but it does’nt work so far, is there a special bbpress rule for 3rd party scripts?

it works as standalone version, but the integration in bbpress fails big time.

thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

Participant

@chrishajer

What do you mean does not work? What appears in the <head> section of the rendered pages? Post your edited header.php as well.

And you should probably use bb_enqueue_script (or maybe it’s wp_enqueue_script depending on the version you’re running.) That prevents loading a script more than once, I believe.

johnnydoe

Member

@johnnydoe

15 years, 11 months ago

hello chris,

i’m actually not able to run the first accordion of http://jquery.bassistance.de/accordion/demo/ inside of mytheme/front-page.php

here is my header.php part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"<?php bb_language_attributes( '1.1' ); ?>>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php bb_title() ?></title>



<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.accordion.js"></script>

<script type="text/javascript" src="js/jqq.js"></script>



<?php bb_feed_head(); ?>

<link rel="stylesheet" href="<?php bb_stylesheet_uri(); ?>" type="text/css" />

<?php if ( 'rtl' == bb_get_option( 'text_direction' ) ) : ?>

<link rel="stylesheet" href="<?php bb_stylesheet_uri( 'rtl' ); ?>" type="text/css" />

<?php endif; ?>



<?php bb_head(); ?>



</head>



<body id="<?php bb_location(); ?>">



........ etc

and the front-page.php part:

<div class="basic" id="list1b">

<a>Titel1</a>

<div>



You've seen it coming!

Buy now and get nothing for free!



</div>

<a>Titel2</a>

<div>



your bear, you have to admit it!

No, we aren't selling bears.



</div>

<a>Titel3</a>

<div>



get two for three beer.



And now, for something completely different.

And now, for something completely different.



</div>

<a>Titel4</a>

<div>



get two for three beer.



And now, for something completely different.

And now, for something completely different.



</div>



</div>

jqq.js is:

jQuery().ready(function(){

// simple accordion

jQuery('#list1a').accordion();

jQuery('#list1b').accordion({

autoheight: false

});



// second simple accordion with special markup

jQuery('#navigation').accordion({

active: false,

header: '.head',

navigation: true,

event: 'mouseover',

fillSpace: true,

animated: 'easeslide'

});



// highly customized accordion

jQuery('#list2').accordion({

event: 'mouseover',

active: '.selected',

selectedClass: 'active',

animated: "bounceslide",

header: "dt"

}).bind("change.ui-accordion", function(event, ui) {

jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');

});



// first simple accordion with special markup

jQuery('#list3').accordion({

header: 'div.title',

active: false,

alwaysOpen: false,

animated: false,

autoheight: false

});



var wizard = $("#wizard").accordion({

header: '.title',

event: false

});



var wizardButtons = $([]);

$("div.title", wizard).each(function(index) {

wizardButtons = wizardButtons.add($(this)

.next()

.children(":button")

.filter(".next, .previous")

.click(function() {

wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))

}));

});



// bind to change event of select to control first and seconds accordion

// similar to tab's plugin triggerTab(), without an extra method

var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');



jQuery('#switch select').change(function() {

accordions.accordion("activate", this.selectedIndex-1 );

});

jQuery('#close').click(function() {

accordions.accordion("activate", -1);

});

jQuery('#switch2').change(function() {

accordions.accordion("activate", this.value);

});

jQuery('#enable').click(function() {

accordions.accordion("enable");

});

jQuery('#disable').click(function() {

accordions.accordion("disable");

});

jQuery('#remove').click(function() {

accordions.accordion("destroy");

wizardButtons.unbind("click");

});

});

info: the js-parts are in the “theme” root (kakumei/js/) , the css parts of the accordion are merged into the original kakumei stylesheet.

thanks so far.

chrishajer

Participant

@chrishajer

15 years, 11 months ago

How about using the full URI to the javascript? In your script tags, you can use a template tag to add the template path including where you stored the files. Once you are sure they’re referenced properly and actually being loaded, you can go from there.

<script type="text/javascript" src="<?php bb_active_theme_uri(); ?>js/jquery.js"></script>

<script type="text/javascript" src="<?php bb_active_theme_uri(); ?>js/jquery.accordion.js"></script>

<script type="text/javascript" src="<?php bb_active_theme_uri(); ?>js/jqq.js"></script>

And when you say “doesn’t work so far” do you mean it’s like the javascript is just not there, no action, or something else?

johnnydoe

Member

@johnnydoe

15 years, 11 months ago

hey chris that worked, i mean the uri fix.

thanks a bunch.