Forums

JoshWhiteDesign

Ok, so I had a previous post that was just a false alarm. The real issue I think it's boiled down to is that I can't seem to get WP to execute any jquery or javascript from the header.php to any of my custom pages.

I have an index page setup as a custom page (www.citrusbunny.com) it's the main one you are looking at.

Granted I'm fairly new to jquery, but I've successfully got it to work in a normal html page. This is the same issue I was having with the simplemodal contact form - the action doesn't do anything on the page itself.

I used Chris' "proper way" to include jscript into a WP template through the header.php, but that doesn't seem to have helped.

Just an FYI - when I load any plugins that include jquery or anything else, it works just fine. I'd really like the ability to do some custom stuff, too though.

So what I have right now is:

header.php



<head profile=\"http://gmpg.org/xfn/11\">
	

		... blah blah blah ...

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

		<link rel=\"alternate\" type=\"application/rss+xml\" title=\"<?php bloginfo('name'); ?> RSS Feed\" href=\"<?php bloginfo('rss2_url'); ?>\" />

		<link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />
		
                <?php wp_enqueue_script(\"jquery\"); ?>


		<?php wp_head(); ?>
<script type=\"text/javascript\">
       $(document).ready(function() {
            $(\"li.action\").click(function(){
	       $(\"#contactslide\").slideUp();
            });
       });
</script>
</head>

in the stylesheet I have #contactslide defined as a 250px x 350px box with a black background just for testing. It's supposed to slide up or down when you click the link "Contact Slide".

On the custom index page, I have:

<?php 

/*

Template Name: index

*/

?>



<?php get_header(); ?>

<div id=\"right_column\"> 
	
	
	<div align=\"center\">
	<a href=\"/contact\" class=\"smcf_link\"><img src=\"/wp-content/themes/citrusbunny/images/quote_request.jpg\" alt=\"\" /></a></div>

        <ul>
            <li class=\"action\"><a href=\"#\">Contact Slide</a></li>
        </ul>



	

	<?php get_sidebar(); ?>

	

</div>

<div id=\"contentheader\"></div>

<div id=\"content\">

	<div id=\"indexcontent\">

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div class=\"post\" id=\"post-<?php the_ID(); ?>\">

			<h2><?php the_title(); ?></h2>

			<?php the_content('<p class=\"serif\">Read the rest of this page &raquo;</p>'); ?>

			<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>

		<?php endwhile; endif; ?>

	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

	</div>

</div>

<div id=\"contentfooter\"></div>



<?php get_footer(); ?>

So, I'm not sure what's causing it to not function. My goal is that if I can figure out why this isn't working, it will solve why I can't get any jquery or foreign to WP scripts to work.

Does anyone have an immediate idea what I'm doing wrong?

apostrophe

Try changing $ to jQuery in your slide function.

JoshWhiteDesign

No dice - still doesn't do anything when you click it.

apostrophe

So your script says

jQuery(\"#contactslide\").slideDown();

but nowhere in your markup is there an element with the id of contactslide.

davesgonebananas

You can't "wp_enqueue_script" from a theme's template. wp_enqueue_script is more for plugins really, but if you really want to use it you must call it from functions.php before the header has been output.

JoshWhiteDesign

"apostrophe" said:
So your script says
jQuery(\"#contactslide\").slideDown();
but nowhere in your markup is there an element with the id of contactslide.

It's the in stylesheet.css file. I figured it would be easier than posting the entire thing :P

So... dave, should I be using the same script to bring in the elements from the functions.php? Or is it better to do it in the header but in a different way?

apostrophe

It's the in stylesheet.css file. I figured it would be easier than posting the entire thing :P

What? :?
I'm looking at the page in the link you provided and nowhere on that page is there an element with the id of contactslide.

Oh, and the page is loading jQuery fine.

davesgonebananas

Firstly, to clarify what I said before you can use wp_enqueue_script but only if it appears before wp_head in the header. Sorry, I thought you were calling it from further down in the template, which was my mistake.

Secondly, Apostrophe is completely right you have no element with an id of contactslide, so this code will do nothing. You should create a contactslide div somewhere on the page for this to have any effect.

<div id=\"contactslide\">
<p>contact slide contents</p>
</div>

JoshWhiteDesign

Well, now I feel like an idiot lol :)

Thanks for the replies, I really do appreciate it.

treehouse : what would you like to learn today?

Forums

Can't seem to get any jscript to work in WP