Как я могу разрешить конфликт в моем коде JavaScript?

0

Это код:

<script>var jQuery132 = $.noConflict(true);</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
<style>
.newsticker {
    max-width: 620px;
    margin: auto;
}

.newsticker li {
    color: #4e4e4e;
    background: #F2F2F2;
    overflow: hidden;
    height: 28px;
    padding: 10px;
    line-height: 30px;
    list-style: none;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px dotted #2c8162;
}

.newsticker li:hover {
    background: #FFF;
}
</style>
<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>
<br><br><span id="timer"></span><br><br>



<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 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 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>

Я использую два разных примера jquery newsticker:

Первый конец:

<br><br><span id="timer"></span><br><br>

Оттуда он второй.

Я также добавил в верхней части моего кода эту переменную jQuery132:

<script>var jQuery132 = $.noConflict(true);</script>

Как и где использовать эту переменную?

  • 0
    Пожалуйста, прочитайте DOC: api.jquery.com/jQuery.noConflict. Я не понимаю, почему вы хотели бы использовать $ .noConflict () здесь.
  • 0
    А. Вольф: Я не уверен, является ли решение noConflict решением проблемы. Я не уверен, является ли проблема проблемой tconflict. Проблема в том, что когда я использую этот код, в результате вторая часть делает массу с первой частью. Первая часть должна быть обратным отсчетом таймера и прокруткой newsticker. Второй проход не должен быть связан с первым, он должен быть ниже первого и иметь эффект выделения с текстом внутри. Вы можете увидеть проблему, которую он создает на моем сайте: newsxpressmedia.com/test.html Теперь вопрос, конфликт это или что-то еще?
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Вот хорошая статья о конфликтах jQuery.

Вот код:

<!-- load jQuery version 1.9.0 -->
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_9 = $.noConflict(true);// Here you must need to pass true
                                    //else it will only free $ variable
                                    //and using jQuery with blow libraries
                                    //cause conflict
</script>

//you must load second library later after initializing
//first instance of version and freeup jQuery keyword
//else jQuery keyword will
//cause conflict it you uplaoded both files.

<!-- load jQuery version 1.10.0 -->
<script src="jquery-1.10.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_10 = $.noConflict(true);
</script>

//so now here $ and jQuery both cannot be used

//using $jQuery1_10 will call version 1.10.0 library code
$jQuery1_10( "div p" ).show();

//using $jQuery1_9 will call version 1.9.0 library code
$jQuery1_9( "div p" ).show();

Ещё вопросы

Сообщество Overcoder
Наверх
Меню