www.webdeveloper.com
Results 1 to 2 of 2

Thread: How do i make this jquery news ticker to work on my website ?

  1. #1
    Join Date
    Oct 2009
    Posts
    12

    How do i make this jquery news ticker to work on my website ?

    This is the demo of the jquery the breaking news in red i want it to be the same on my website:

    http://www.jqueryscript.net/demo/Fle...d-News-Ticker/

    In my site i have a text file i'm reading it line by line eacy X minutes.
    I want that each line i read to be show in the red breaking news the same it is in the demo website above.

    This is the code im using in my website:

    Code:
    <style>
    #oneliner {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        position: relative;
        margin: 80px auto 40px auto;
        width: 900px;
        height: 44px;
        background-color: #fff;
        border-radius: 2px;
    }
    
    #oneliner:before, #oneliner:after {
        border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
        bottom: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        content: "";
        left: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
        z-index: -1;
    }
    
    #oneliner .header {
        background-color: #ff2e2e;
        display: inline-block;
        width: 180px;
        height: 44px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 44px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        border-radius: 2px 0 0 2px;
        cursor: pointer;
        -webkit-transition: all .2s ease-in-out;
           -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
        -webkit-animation: redPulse 4s infinite;
           -moz-animation: redPulse 4s infinite;
                animation: redPulse 4s infinite;
    }
    
    #oneliner:hover .header {
        -webkit-animation: redPulse 1s infinite;
           -moz-animation: redPulse 1s infinite;
                animation: redPulse 1s infinite;
    }
    
    #oneliner .header:active {
        background-color: #000;
        margin-left: -12px;
        color: #aaa;
    }
    
    #oneliner ul.newsticker {
        display: inline-block;
        height: 44px;
        width: 710px;
        overflow: hidden;
        margin: 0 0 0 -3px;
        padding: 0 0 0 6px;
        line-height: 44px;
        font-weight: 500;
        background-color: #fafafa;
    }
    
    #oneliner ul.newsticker > li{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-bottom: 1px dotted #888;
    }
    
    @-webkit-keyframes redPulse {
        from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
        50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
        to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
    }
    
    @-moz-keyframes redPulse {
        from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
        50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
        to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
    }
    
    @keyframes redPulse {
       from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
       50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
       to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
    }
    </style>
    
    <div id="oneliner">
        <div class="header"> Breaking News </div>
        <ul class="newsticker">
            <li>hello</li>
            <li>hi</li>
        </ul>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://newsxpressmedia.com/files/theme/jquery.newsTicker.js"></script>
    <script>
    	var count = 300;
    	var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
    
    	function timer() {
        count = count - 1;
        if (count == -1) {
    			clearInterval(counter);
    			return;
        }
    
        var seconds = count % 60;
        var minutes = Math.floor(count / 60);
        var hours = Math.floor(minutes / 60);
        minutes %= 60;
        hours %= 60;
    
        document.getElementById("timer").innerHTML = hours + " Hours " + minutes + " Minutes and " + seconds + " Seconds left untill the next news update. "; // watch for spelling
    	}
    	
    	function news(){
       $('body').find('.newsticker').remove();//It will clear old data if its present 
       var file = "http://newsxpressmedia.com/files/theme/test.txt";
        $.get(file, function (txt) {
    			//var lines = txt.responseText.split("\n");
    			var lines = txt.split("\n");
    			$ul = $('<ul class="newsticker" />');
    			for (var i = 0, len = lines.length; i < len; i++) {
    				//save(lines[i]); // not sure what this does
    				$ul.append('<li>' + lines[i] + '</li>'); //here 
    			}
    			//$ul.appendTo('body').newsTicker({
    			$ul.appendTo('div.wcustomhtml').newsTicker({
    				row_height: 48,
    				max_rows: 2,
    				speed: 6000,
    				direction: 'up',
    				duration: 1000,
    				autostart: 1,
    				pauseOnHover: 1
    			});
        });
    	}
    	$(function() {
        news();
        setInterval(function(){
          news();
        },30000)  // it will call every 1 min you can change it
    	});
    </script>
    <span id="timer"></span>
    I see the red breaking news visual like it is in the demo page.
    But the text with the counter back is under the breaking news i want it to be above it.
    Second the text from the text file is under the breaking news and not moving in animation like in the demo page inside the breaking news bar.

    Do i need to download the jquery files upload them to my website/website-ftp and then use it ?

    This is my site you can see there how it looks like now:

    http://newsxpressmedia.com/test.html

    Also i see now the counter back stop at 0 it should get to the 0 and then to start count back again.

  2. #2
    Join Date
    Oct 2009
    Posts
    12

    What i don't understand is how this example does working on my site ?

    HTML Code:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    <script language='JavaScript'>
    $(function(){
     $("ul#ticker01").liScroll();
    });
    /*!
     * liScroll 1.0
     * Examples and documentation at:
     * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
     * 2007-2010 Gian Carlo Mingati
     * Version: 1.0.2.1 (22-APRIL-2011)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires:
     * jQuery v1.2.x or later
     *
     */
    
    
    jQuery.fn.liScroll = function(settings) {
      settings = jQuery.extend({
      travelocity: 0.10
      }, settings);  
      return this.each(function(){
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripWidth = 1;
        $strip.find("li").each(function(i){
        stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
        var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
        $strip.width(stripWidth);   
        var totalTravel = stripWidth+containerWidth;
        var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
        function scrollnews(spazio, tempo){
        $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
        }
        scrollnews(totalTravel, defTiming);    
        $strip.hover(function(){
        jQuery(this).stop();
        },
        function(){
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace/settings.travelocity;
        scrollnews(residualSpace, residualTime);
        });   
      }); 
    };
    </script>
    
    <style>
    /* liScroll styles */
    
    .tickercontainer { /* the outer div with the black border */
    border: 1px solid #000;
    background: #fff;
    width: 500px;
    height: 27px;
    margin: auto 0;
    padding: 0;
    overflow: hidden;
    }
    .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
    position: relative;
    left: 10px;
    top: 8px;
    width: 500px;
    overflow: hidden;
    }
    ul.newsticker { /* that's your list */
    position: relative;
    left: 500px;
    font: bold 10px Verdana;
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    }
    ul.newsticker li {
    float: left; /* important: display inline gives incorrect results when you check for elem's width */
    margin: 0;
    padding: 0;
    background: #fff;
    }
    ul.newsticker a {
    white-space: nowrap;
    padding: 0;
    color: #ff0000;
    font: bold 10px Verdana;
    margin: 0 50px 0 0;
    }
    ul.newsticker span {
    margin: 0 10px 0 0;
    }
    </style>
    
    <ul id="ticker01">
     <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
     <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
     <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
     <!-- eccetera -->
    </ul>
    
    I didn't download any files and uploaded them to my site and it's working.
    Then why the other example in my main message is not working with the text file and at all ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles