Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have the following code in my template page and I have registered jquery and fittext in my theme's functions.php. They are currently showing up in the footer as I set them to. I can set them up in either the header or the footer, but fittext just is not working where ever I place it. When I reduce the screen size the font is supposed to shrink but it doesn't. I am not sure why this is.

I have put up a very rough version of the site it basically just shows the fittext not working you can view it here with the username:anders and password:reading61

<?php
/*
Template Name:Tech Basics
*/
?>
<?php get_header( 'tech' ); ?>

<div id="quote">
    <h1 id="fittext3">Sending you the techie! son you never had.</h1>
</div>
<script type="text/javascript">
        $("#fittext3").fitText();
    </script>
<div class="row mainContent">
    <div class="twelve columns">
        <?php 
        $page_id = 10; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be embedded in the query string of the URL, e.g. page.php?action=edit&post=123.

        $page_data = get_page( $page_id ); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page ( 123 ); ), WordPress will generate an error. By default, this will return an object.

        echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem
?>
    </div>
</div><!--row ends-->
<?php get_footer(); ?>

This seems to get it working however I know it isn't a proper technique, for some reason fittext wants the js right in the middle of the page can any one help with this.

<?php
/*
Template Name:Tech Basics
*/
?>
<?php get_header( 'tech' ); ?>

<div id="quote">
    <h1 id="fittext3">Sending you the techie! son you never had.</h1>
</div>
<script type="text/javascript">
        $("#fittext3").fitText();
    </script>
      <h2 id="fittext1">Welcome to Foundation</h2>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://localhost:8888/austin.kitson.orgWP/wp-content/themes/git.austin.kitson.org/js/jquery.fittext.js"></script>
    <script type="text/javascript">
        $("#fittext1").fitText();
        $("#fittext2").fitText(1.2);
        $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' });
    </script>
<div class="row mainContent">
    <div class="twelve columns">
        <?php 
        $page_id = 10; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be         embedded in the query string of the URL, e.g. page.php?action=edit&post=123.

        $page_data = get_page( $page_id ); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page ( 123 ); ), WordPress will generate an error. By default, this will return an object.

        echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem
?>
    </div>
</div><!--row ends-->
<?php get_footer(); ?>
share|improve this question
2  
Which browser(s) have you tested it in and have you checked the JavaScript console in any of them for errors? –  stealthyninja Oct 24 '12 at 22:17
    
And have you turned WP_SCRIPT_DEBUG on? –  kaiser Oct 24 '12 at 22:20
    
I have only checked it in safari, however I can get it working fine in a regular document just not in wordpress, umm do you have a resource for learning how to check the console, not to familiar with that –  Anders Kitson Oct 24 '12 at 22:21
    
@kaiser No i havent, how to I do that? –  Anders Kitson Oct 24 '12 at 22:21
1  
Debugging WordPress - the Codex How-To. Hint: Always check the Codex first. –  kaiser Oct 24 '12 at 22:30

1 Answer 1

up vote 0 down vote accepted

I figured it out finally, for some reason using the $ in my script just doesnt work so I had to use jQuery instead like this

<script type="text/javascript">
     jQuery(document).ready(function() {

        jQuery("#fittext3").fitText(1.8, { minFontSize: '12px', maxFontSize: '75px' });
         });
    </script>
share|improve this answer
    
WordPress jQuery by default is in noConflict mode. another option is to use jQuery(document).ready(function($), note the $ in function($). this lets you use the $ as the jQuery object ref inside of ready instead of having to use jQuery –  Milo Oct 25 '12 at 0:06
    
@Milo Cool that works too –  Anders Kitson Oct 25 '12 at 0:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.