0

I have the following code:

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

It is on the same page as the jquery UI accordion, for some reason it stops the accordion from working. I have spent quite a few hours seeing what broke the accordion. The accordion only breaks when http://widgets.twimg.com/j/2/widget.js is included. The file is compressed so I am not sure where to start. has anyone else come across this?

Ashley Briscoe
  • 649
  • 2
  • 11
  • 31

2 Answers2

1
<script type="text/javascript">

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

</script>

It works like this but is there any way I can see the source - have you got an url you can share? Then we could work out better where to place the relevant code...

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

I'm updating here as this post is getting a bit messy, what with chat not working etc. So, in an effort to 'contain' the info..

There's no $(document).ready(function(){}) in the <head> you posted to jsfiddle, so you could try to call the twitter widget from...

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

  • it may be better to write a function that you can call from onload and that function contains the call for new twitter widget.

  • onload will only fire once everything has been loaded, all images etc. so your accordion should already be working and then afterwards you can call the twitter widget. Presumably the user would then see the twitter widget 'appear' as an added element to the page however.

info re onload="myFunc()" and the differences compared to $(document).ready() here... Difference between onload() and $.ready?

see how it goes - if not, we'll think of something else.

S

******UPDATE 2******

Ok, so if you don't have access to the <body> tag try this:

in the block with accordion:

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

and then in the block with the twitter widget:

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

See how that goes...

****UPDATE 3****

In the <head> you posted on jsfiddle there was the following includes:

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

Do you have the option of turning these features on/off - for example if you're not going to use a jquery tools scrollable, turn it off - i.e., don't include the source .js file. My guess is there's a very, very strong chance the problem is coming from conflicting variables so you could try to isolate it by turning off/on the various scripts. Getting rid of surplus is a definite starting point.

Community
  • 1
  • 1
Scott Clark
  • 198
  • 1
  • 2
  • 9
  • Sorry if I seem dumb but I don't understand where to put that script. I have to add I can't access the body element as there area we can edit is with in divs inside the body – Ashley Briscoe Sep 04 '12 at 12:10
  • what does the accordion element look like in your code and which cms are you using? p.s. lunctime - back in 30 – Scott Clark Sep 04 '12 at 12:12
  • Sorry the CMS is bespoke and works on some stupid block system to edit pages, each block is a self contained div. The accordion is the jquery-ui standard accordion – Ashley Briscoe Sep 04 '12 at 12:14
  • Unfortunately that hasn't done it. Its the that causes the problem when I remove that it works but the twitter widget doesn't obviously – Ashley Briscoe Sep 04 '12 at 14:20
  • I am sure your answer is correct its just something that isn't working within this system – Ashley Briscoe Sep 04 '12 at 14:27
  • look at your code that calls the twitter widget `shell: { background: '#5785BC', color: '#eff4fa', }` - extra comma after '#eff4fa' - not necessarily related to the problem but it's amazing how an extra comma can consume a day of debugging! – Scott Clark Sep 04 '12 at 15:06
  • Also, 'src="widgets.twimg.com/j/2/widget.js"' - is that filepath right? no protocol statement - http:// S – Scott Clark Sep 04 '12 at 15:14
  • [link]http://widgets.twimg.com/j/2/widget.js sorry thats the file url i think SO removed the http:// – Ashley Briscoe Sep 04 '12 at 15:40
  • I corrected those last two points to no avail. thanks anyway for all your help – Ashley Briscoe Sep 04 '12 at 15:43
  • I am afraid all those files are required and I have no control over them. Thanks anyway you have been more than helpful – Ashley Briscoe Sep 05 '12 at 09:18
  • @Ashley Briscoe - don't know if you're still resolving the issue or not but if you are then you should definitely have a look at this - could free you from jquery-UI... [css3.bradshawenterprises.com/accordions/](http://css3.bradshawenterprises.com/accordions/) – Scott Clark Sep 05 '12 at 10:30
  • That does seem like a great alternative. unfortunately the menu system is built on accordion and I do not have control over that. again thank you for your time and your help. – Ashley Briscoe Sep 05 '12 at 11:02
  • Ok Ashley - best of luck with your project! Feel free to @me if you have need. S – Scott Clark Sep 05 '12 at 12:12
  • Thank you I will you have been very helpfull. – Ashley Briscoe Sep 05 '12 at 12:23
0

May be a little simplisctic - and perhaps even not best practice - but have you tried changing the 'include' order - presumably you've got a 

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

I've had in the past - changed the order to include the other first and it started working. Not so satisfying as this doesn't actually identify the problem however it might get you rolling again...

S

Scott Clark
  • 198
  • 1
  • 2
  • 9