Scrolling text Javascript and php/wordpress data HELP!!

  • friggart

    (@friggart)


    12 years, 7 months ago

    I am producing a custom feature on the homepage of a wordpress site. I am producing 3 vertical scrolls on the same page and have found a java script on Dynamic drive that fulfils my needs. See http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

    The scrollers display different posts on different days. I.e Monday post 1, tuesday post 2 and so on.

    The basic version of the javascript for the content for the slider is:

    var pausecontent=new Array()
    pausecontent[0]=’JavaScript Kit
    Comprehensive JavaScript tutorials and over 400+ free scripts!’
    pausecontent[1]=’Coding Forums
    Web coding and development forums.’
    pausecontent[2]=’CSS Drive
    Categorized CSS gallery and examples.’

    But where the script puts the scroller content, I need to make the loop and output the_content from wordpress. (For now I have set this up to show certain posts, but it will be all posts from a specific category) So I need to create a unique number for the array i.e pausecontent[**here**] so I have called the post id. and for the content I have called the content. Here i smy code:

    <script type=”text/javascript”>
    var pausecontent3=new Array()
    <?php

    // FIND POST ACCORDING TO DAY
    switch(date(‘N’)) {
    case 1: ?>
    <?php query_posts(‘p=69’); ?>
    <?php break;
    case 2: ?>
    <?php query_posts(‘p=71’); ?>
    <?php break;
    case 3: ?>
    <?php query_posts(‘p=73’); ?>
    <?php break;
    case 4: ?>
    <?php query_posts(‘p=75’); ?>
    <?php break;
    case 5: ?>
    <?php query_posts(‘p=77’); ?>
    <?php break;
    case 6: ?>
    <?php query_posts(‘p=79’); ?>
    <?php break;
    case 7: ?>
    <?php query_posts(‘p=81’); ?>
    <?php break;
    default:
    }

    // the Loop

    while (have_posts()) : the_post(); ?>

    pausecontent3[<?php $meta_desc = get_post_meta(the_ID()); echo $meta_desc; ?>]='<?php the_content(); ?>’

    <?php endwhile; ?>

    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

    new pausescroller(pausecontent3, “pscroller3”, “someclass”, 2000)

    </script>

    I keep getting the ‘undefined’ notice when I run the script. I check over the source from the browser and it displays correctly in the source, but it doent run correctly and seems that Javascript is not recognising the PHP inputs.

    Can anyone shed any light on this at all or have any suggestions?

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jackson Whelan

    (@madjax)

    12 years, 7 months ago

    First – use pastebin.wordpress.com so people can read your code easily.

    Second – perhaps you should avoid using the Post ID for the array pointer. Instead you should increment from 0. ex

    $count = 0;
while (have_posts()) : the_post(); ?>

pausecontent3[<?php echo $count; ?>]='<?php the_content(); ?>'

<?php $count++; endwhile; ?>

    Third – using the_content within a JS array is asking for problems (IMHO). Try something like;

    pausecontent3[<?php echo $count; ?>]='<?php echo esc_js( $post->post_content ); ?>'
    Thread Starter friggart

    (@friggart)

    12 years, 7 months ago

    Thanks Jackson, worked great with a little fiddling, and for the pastebin tip. Its doing exactly what I want, but one thing. I am not sure if its even possible but the JS is showing the full code instead of formatting it. Example Line:

    I want this:

    CLASS 1
    9.00am – 10.00am

    But I am getting this:

    <strong>CLASS 1</strong>9.00am - 10.00am

    Do you know if it is even possible. I have tried creating a new variable first, then calling the variable instead of the direct code, but that did the same thing. That said, i am very happy that it is now working at least so thanks!

    Jackson Whelan

    (@madjax)

    12 years, 7 months ago

    You could try this and see if it plays nice with your JS

    pausecontent3[<?php echo $count; ?>]='<?php echo addslashes_gpc( $post->post_content ); ?>'
    Thread Starter friggart

    (@friggart)

    12 years, 7 months ago

    Hi

    Thanks again, but unfortunately no joy. It would not work at all initially, so I made it a php variable first which helped, but only added the /n tags at the end of each line. But the /n tags were visable. Here is what I tried.

    <script type="application/javascript">//<![CDATA[

/*Example message arrays for the two demo scrollers*/

<?php 

switch(date('N')) {
case 1: ?>
<?php query_posts('p=69'); ?>
<?php break;
case 2: ?>
<?php query_posts('p=71'); ?>
<?php break;
case 3: ?>
<?php query_posts('p=73'); ?>
<?php break;
case 4: ?>
<?php query_posts('p=75'); ?>
<?php break;
case 5: ?>
<?php query_posts('p=77'); ?>
<?php break;
case 6: ?>
<?php query_posts('p=79'); ?>
<?php break;
case 7: ?>
<?php query_posts('cat=7'); ?>
<?php break;
default:
} ?>

var pausecontent2=new Array()
 <?php
$count = 0;
while (have_posts()) : the_post(); ?>

<?php
$displayhtml = esc_js( $post->post_content ); ?>

pausecontent2[<?php echo $count; ?>]='<?php echo addslashes_gpc( $displayhtml ); ?>'
<?php $count++; endwhile; ?>

new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
//]]></script>

    Many Thanks

    Jackson Whelan

    (@madjax)

    12 years, 7 months ago

    Not sure, but that script is 5 years old, and we’ve come a long way since then : ) I’d recommend using a jQuery plugin which would allow you to rotate a series of <div>s formatted however you please.

    Check out something like http://jquery.malsup.com/cycle/

    If you’re still gung ho on the original, try something like this:

    <?php
$count = 0;
while (have_posts()) : the_post();
?>
pausecontent2[<?php echo $count; ?>]='<?php echo $post->post_content; ?>'
<?php $count++; endwhile; ?>

    The example you linked to uses unsecaped HTML in the variables and seems to work just fine. Just be sure to use double quotes for your attributes in the HTML

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Scrolling text Javascript and php/wordpress data HELP!!’ is closed to new replies.