How to create a custom (without using plugins) news ticker for wordpress?

Question

I am trying to create a custom news ticker for word press without using any plugins. I am weak in JS area. Need a hand on JS part please.

PHP widget:

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);

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

        <ul class="list-6" id="ticker">
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
        </ul>

<?php   endwhile;?>

CSS:

ul#ticker {
    width: 220px;
    height: 120px;
    overflow: hidden;
}

How can I write javascript code for this to get a real news ticker?

[EDIT] I created this news ticker: http://jsfiddle.net/riffaz/92s92k1d/ and it's working fine in fiddle.

I am trying to add this ticker to the site. For that I put this code on a PHP widget

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);?>  
        <ul class="list-6 ticker" style="height: 82px;">
            <?PHP while (have_posts()) : the_post();?>
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
            <?php   endwhile;?> 
        </ul>   

I put this line into child theme style.php

.ticker {
    height: 75px;
    overflow: hidden;
}

Then on child theme footer.php : I put following code(right above the tag):

function tick(){
        $('.ticker li:first').slideUp( function () { $(this).appendTo($('.ticker')).slideDown(); });
    }
    setInterval(function(){ tick () }, 5000);

It does nothing on my home page. It stays where they are on the home page. But if I go to any pages it's working fine. weird. Any ideas how to fix this?

http://www.ldjf.org/ look at the bottom right area.. Footer area upcoming events

Answer 1

It is a big ask to just expect a community to provide you the code to build a custom Javascript tool. I suggest you take a look at some of the jQuery documentation.

You already have a list of your posts in PHP, so start with jQuery's each method - http://api.jquery.com/each/

Then decide on some behaviors for your ticker:

http://api.jquery.com/delay/

http://api.jquery.com/category/effects/sliding/

http://api.jquery.com/category/effects/fading/

I think those are good places to start. Take a go at the docs, update with some sample code. Happy to take a look at what you put together. Good luck!

[EDIT]

So there is really just one issue that I see for your code itself: Your CSS is assigning a 350px height to .ticker in your theme. You said you assigned a 75px height, but you also said you put it in style.php. So there may be a caching issue, or you maybe have put your CSS in the wrong file. u-design-child/style.css shows a 350px height.

I would make a couple of suggestions on your code, though. The biggest is that I would not restrict height of your parent element just to 'hide' your child elements from view. You are using jQuery already to remove it from view. Keep it out of view until you need it again, rather than bringing it back immediately. This will allow your content to be variable in height while remaining in full view and not getting cut off from the bottom. In your PHP, show your first <li> normally, then the others <li style="display:none;">. Then using jQuery, iterate through your list, turning visibility on and off as needed. I think that will get the behavior you want. Look at this http://jsfiddle.net/92s92k1d/21/