Question

我有以下代码：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 350,
  theme: {
    shell: {
      background: '#5785BC',
      color: '#eff4fa',
    },
    tweets: {
      background: '#ffffff',
      color: '#424242',
      links: '#2480bd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('Sometwitterpage').start();

</script>
</div>
<style type="text/css">
#twtr-widget-1 {float:right; border:solid 10px #e6edf5; }

</style>

它与jquery UI手风琴在同一页面上，由于某种原因它会阻止手风琴的工作。我花了几个小时看看有什么打破了手风琴。手风琴只在包含http://widgets.twimg.com/j/2/widget.js 时才会中断。该文件已压缩，因此我不知道从哪里开始。还有其他人遇到过这个吗？

Answer 1

<script type="text/javascript">

  $.noConflict();
  jQuery(document).ready(function($) {
    // Code for accordion here.
  });
  // Code for twitter here.

</script>

它的工作方式是这样的，但有什么方法可以看到来源 - 你有一个可以分享的网址吗？然后我们可以更好地找到相关代码的位置......

****** ****** UPDATE

我在这里更新，因为这篇文章变得有点乱，聊天没有工作等等。所以，努力'包含'信息..

您发布到jsfiddle的$(document).ready(function(){})中没有<head>，因此您可以尝试从...中调用Twitter小部件。

<body onload="new TWTR.Widget({}).render().setUser('Sometwitterpage').start();">

编写一个可以从onload调用的函数并且该函数包含对新的twitter小部件的调用可能更好。
onload只会在一切都被加载后触发，所有图像等等，所以你的手风琴应该已经工作，然后你可以调用twitter小部件。据推测，用户可能会看到推特小部件“显示”为页面的添加元素。

info re onload="myFunc()"以及此处与$(document).ready()的差异... Difference between onload() and $.ready?

看看它是怎么回事 - 如果没有，我们会想到其他的东西。

取值

******更新2 ******

好的，如果您无法访问<body>代码，请尝试以下方法：

带手风琴的街区

：

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

<script type="text/javascript">

  $.noConflict();
  jQuery(document).ready(function($) {
    // Code for accordion here eg...
       $('.accordion .head').click(function() {
    $(this).next().toggle('slow');
    return false;
   }).next().hide();
  });

</script>

然后在带有twitter小部件的块中：

<script type="text/javascript">

  //your original twitter widget code
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 350,
  theme: {
    shell: {
      background: '#5785BC',
      color: '#eff4fa',
    },
    tweets: {
      background: '#ffffff',
      color: '#424242',
      links: '#2480bd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('Sometwitterpage').start();


</script>

看看情况如何......

****更新3 ****

在jsfiddle上发布的<head>中有以下内容：

<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery-ui-1.8.19.custom.min.js?m=20120904100316"></script>


<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.prosteps.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.boxy.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.scroll-To.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.hoverIntent.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.jqzoom1.0.1.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.tools.scrollable.min.js?m=20120904100316">

您是否可以选择打开/关闭这些功能 - 例如，如果您不打算使用可滚动的jquery工具，请将其关闭 - 即不要包含源.js文件。我的猜测是问题来自冲突的变量是非常非常强大的，所以你可以尝试通过关闭/打开各种脚本来隔离它。摆脱盈余是一个明确的起点。

Answer 2

可能有点简单 - 甚至可能不是最佳做法 - 但是你试过改变'包含'的顺序 - 大概是你有一个

<script src="yourSource/jquery-ui.js"></script>

我过去曾经改变了顺序，先包括另一个，然后就开始工作了。不太满意，因为这实际上并没有确定问题，但它可能让你再次滚动......

S

Twitter小部件与jquery ui手风琴冲突

2 个答案: