News Ticker using jquerey

I guess this is too hard for the support staff… Please realise I am using the J-query provided by wordpress which was recommended to me. so I feel like this topic is related to WP. Can you at least reply to this message. Let me know if I put in the right place or if i need to post this elsewhere. I know you guys must be busy with other jobs but Pull-UP

seems to have issues when I try and wrap php around it

Are you trying to load an inline JavaScript or external .js file in WordPress? if you don’t do it the right way with wp_enqueue_scripts, it will result in many conflicts, and probably won’t work.

By the way, don’t post replies to your own topics, this makes them go out of ‘no-replies’ section which always have priority when volunteers use these forums.

Hi sam,

I have enqueued all the scripts and CSS but I find that only some of the scripts work that way, so i’ve put the remaining java scripts at the footer of the page. All my css worked with the enqueue scripts. Its an external js file that loads and works for the most part except for the visual error I get. If you go to the page and have a look you’ll see when a page first loads the news text goes over the page. This isn’t the case when I try this on a flat website(no wordpress).

so i’ve put the remaining java scripts at the footer of the page.

Use wp_footer hook instead of modifying theme files:

function my_footer_js() {
    ?>
       <script>//Inline JS</script>
    <?php
}
add_action('wp_footer', 'my_footer_js');

Please explain more because I have visited the page, didn’t see anything weird, tell us what the JS is and what is it supposed to do..

Sorry, you need to elaborate.
Thanks.

ah ok, I guess if you’re not looking carefully you could miss it. So at the top of the page is a news ticker that shows a custom post. The title is visible and when clicked on it takes you to that article. The problem I’m having is the text for title extends over the edge of the page. You might have to hit refresh a few times to see the error as it only occurs the first time the page loads.

The JS file I believe is called lib.js, essentially all its supposed to do is loop through the titles of news posts. On clicking the post it should go to the posts single page. I think this link here is a better example of the theme.

function add_js_scripts(){
  //Register JS Scripts
//wp_enqueue_script('jquery');
//wp_register_script('jquerymin',get_template_directory_uri().'/js/jquery.min.js', array(), null, 'all');
//wp_register_script('migrate',get_template_directory_uri().'/js/jquery-migrate-1.2.1.js', array('jquery'), null, 'all');
wp_register_script('jquery-ui.min',get_template_directory_uri().'/js/jquery-ui.min.js', array(), null, 'all');
wp_register_script('fish',get_template_directory_uri().'/js/superfish.js', array(), null, 'all');
wp_register_script('mediaelement',get_template_directory_uri().'/js/mediaelement.min.js', array(), null, 'all');
wp_register_script('lib',get_template_directory_uri().'/js/lib.js', array(), null, 'all');
wp_register_script('ui',get_template_directory_uri().'/js/jquery-ui-1.9.2.custom.min.js', array(), null, 'all');
wp_register_script('photo',get_template_directory_uri().'/js/jquery.prettyPhoto.js', array(), null, 'all');
wp_register_script('jclock',get_template_directory_uri().'/js/jquery.jclock.js', array(), null, 'all');
wp_register_script('carousel',get_template_directory_uri().'/js/jquery.jcarousel.min.js', array(), null, 'all');
wp_register_script('flex',get_template_directory_uri().'/js/jquery.flexslider-min.js', array(), null, 'all');
wp_register_script('slide',get_template_directory_uri().'/js/jquery.elastislide.js', array(), null, 'all');
wp_register_script('cookie',get_template_directory_uri().'/js/jquery.cookie.js', array(), null, 'all');
wp_register_script('html5',get_template_directory_uri().'/js/html5.js', array(), null, 'all');
wp_register_script('gmap',get_template_directory_uri().'/js/googlemap_init.js', array(), null, 'all');
wp_register_script('customjs',get_template_directory_uri().'/js/custom.js', array(), null, 'all');
//End Register js

//Enqueue JS

//wp_enqueue_script('migrate');
wp_enqueue_script('jquery-ui.min');
wp_enqueue_script('fish');
wp_enqueue_script('mediaelement');
wp_enqueue_script('lib');
wp_enqueue_script('ui');
wp_enqueue_script('photo');
wp_enqueue_script('jclock');
wp_enqueue_script('carousel');
wp_enqueue_script('flex');
wp_enqueue_script('slide');
wp_enqueue_script('cookie');
wp_enqueue_script('html5');
wp_enqueue_script('gmap');
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts','add_js_scripts');

I enqueue my scripts like this? Is this okay or do I need the footer hook?

So any suggestions?

Hi!

No, you are queuing scripts the right way.

I kept refreshing the page, all I noticed with the news ticker is this little bug:

View post on imgur.com

For which I think this custom CSS would fix:

#flexslider-news .slides li {
    opacity: 0;
    -webkit-opacity: 0;
}
#flexslider-news .slides li.flex-active-slide {
    opacity: 1;
    -webkit-opacity: 1;
}

If you want to add through functions file :

function my_custom_css() {
	?>
		<style type="text/css" media="all">
			#flexslider-news .slides li {
			    opacity: 0;
			    -webkit-opacity: 0;
			}
			#flexslider-news .slides li.flex-active-slide {
			    opacity: 1;
			    -webkit-opacity: 1;
			}
		</style>
	<?php
}
add_action('wp_head', 'my_custom_css');

If that’s not the issue then try to provide a screenshot if possible..

Hi sam,

It seems as though the modification we made to the style sheet made the text that was overlapping at the end dissapear but the text in the front is still not there.LINK Could it be the way i coded it in php, rather than the styesheet thats the issue?

<section class="news-ticker">
	<div id="flexslider-news" class="header_news_ticker">
    	<ul class="news slides" >
    	<?php $args = array('post_type' => 'news_article', 'numberposts' => '4' );
    		$recent_posts = wp_get_recent_posts( $args );
    		foreach( $recent_posts as $recent ) : setup_postdata($recent);
				echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Read: '.esc_attr($recent["post_title"]).'" >' . $recent["post_title"].'</a> </li> ';
			endforeach;
			wp_reset_postdata();?>
		</ul>
        </div>
</section>

Thnks for the help