PDA

View Full Version : Getting Javascript to work with Wordpress?



evanmiller2007
08-02-2010, 06:20 PM
Hi Guys,
I'm pretty new to Wordpress, and I'm working on making my first custom theme. So far things are going pretty well for what I'm trying to do. The problem I'm coming across right now is that I want to use the Swiss Army Slideshow Javascript in my header, but it doesn't seem to work. I'm also trying to get the DD_Belated png fix to work.

I did some searching on Google, and everything I read seems to say that it should work fine... but for some reason it is acting like the Javascript isn't even there at all.

I don't have the site hosted live at the moment (using xampp), so here is the code I'm using in header.php:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title><?php
/*
* Print the <title> tag based on what is being viewed.
* We filter the output of wp_title() a bit -- see
* twentyten_filter_wp_title() in functions.php.
*/
wp_title( '|', true, 'right' );

?></title>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, div, a, span');
</script>
<![endif]-->

<script type="text/javascript">

var slides=[];
slides[0] = ["images/1.jpg"];
slides[1] = ["images/2.jpg"];
slides[2] = ["images/3.jpg"];
slides[3] = ["images/4.jpg"];
slides[4] = ["images/5.jpg"];
slides.random=1;
slides.no_controls=1;
slides.no_descriptions=1;

</script>

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

/***********************************************
* Swiss Army Image slide show script - John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
</head>

<body <?php body_class(); ?>>

<div id="page">
<div id="header">
<div id="headerdesc"><?php bloginfo( 'description' ); ?></div>
<div id="slideshow"><script type="text/javascript">
new inter_slide(slides, 829, 276, 5000)
</script></div>
<div id="nav">
<ul id="navigation">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
</div>
<div id="frame">
<div id="content">


If you need to see the site in action to help, let me know and I'll see about getting it set live at a dummy domain.

Thank you very much!
Evan

Beverleyh
08-02-2010, 07:37 PM
I havent used Wordpress myself but I know in Joomla, you need to get a plugin to allow you to run custom javascripts - maybe that's what's happening here?

What did the Wordpress forums say relating to this potential problem?

evanmiller2007
08-03-2010, 04:10 PM
thanks for the response. i don't know why i thought to post here and not on the wordpress forums! that makes a lot more sense. i'll give that a try and see what the gurus there have to say.

azoomer
08-03-2010, 04:47 PM
Looking at your code I would think that the paths to the scripts could be the problem ( swissarmy.js and DD_belatedPNG.js). Did you confirm that these paths are working ? In my experience this is often what goes wrong in wordpress. What do you see when you view the page source and try to follow the links to the scripts ?. It looks like it is the twenty teen your are customizing. I have made a slideshow in the header of twenty teen before, but I chose to do via a child theme and adding the javascript in the functions.php using something like this

<?php

wp_enqueue_script('jquery');

function add_slideshow(){?>
<script type="text/javascript">

Here is my slideshowscript !!!

</script>
<?php }
add_action('wp_head', 'add_slideshow');

?>

Just thought i'd show you this method because it works well. ( you probably don't need to enqueue jQuery though)