Search code examples
javascriptjqueryhtmltickernews-ticker

Ticker problems, wont load in motion, just displays all text. jquery ajax


i am after making an news ticker and its the first time ive come across this website.

http://www.jquerynewsticker.com/

and ive got the code all set up as this

 <div class="news_ticker"><link href="LPMS\production_scn\jquery_news_ticker\styles\ticker-style.css" rel="stylesheet" type="text/css" />
                    <script src="LPMS\production_scn\jquery_news_ticker\includes\jquery.ticker.js" type="text/javascript"></script>
              <ul id="js-news" class="js-hidden">
                <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
                <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
                <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
                <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
                </ul>


            <script type="text/javascript">
            $(function () {
            $('#js-news').ticker();
            });
            </script>


               </div>

im assuming it all goes in the 1 div? it simple lists latest items news instead of scrolling or anything, its almost as if its not picking up the jquery but i have rooted it to find the source, can anyone shed any light on this for me?

EDIT/UPDATE

with thanks to Java_User i have managed to get it to somewhat work, now my issues is it wont display what i ask it to output, it only shows a line even when i change the text /input.

my code now is.. this is in the head

<link href="/LPMS/production_scn/jquery_news_ticker/styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="/LPMS/production_scn/jquery_news_ticker/includes/jquery.ticker.js" type="text/javascript"></script>
</head>

this is at the bottom of the page ( the rest of the page is empty to avoid any conflictions for now!)

<div class="clear_line"></div>
 <script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

<!-- News Feed ticker  - use jquery to scroll ticker!! -->
<div class="news_feed">
    <img src="/LPMS/images/news/breaking_news.png" style="border-style:none;">
   <div class="news_ticker"><ul id="js-news" class="js-hidden">
    <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
    <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul> </div></div>


</div>

any ideas why it displays just an underscore _ like that? its doing my head in!

thanks


Solution

  • i found that putting the ticker script into a seperate .js file works flawlessly.

    taking this out:

      <script type="text/javascript">
                $(function () {
                $('#js-news').ticker();
                });
                </script>
    

    and putting it into its own .js file and calling it has allowed it to work for me.