Using document.write to control javascript twitter widget

[tekboi]

I'm trying switch the twitter javascript widgets out depending on the time. So in the day, the twitter widget will be colored differently than at night.

I used the code that twitter gave me and came up with this code. But I get a syntax error in DW on the "document.write" lines.

Here is the code that twitter gave me...

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'search',
      search: '@BigNotch',
      interval: 6000,
      title: 'Follow Me On Twitter',
      subject: 'BigNotch',
      width: 180,
      height: 300,
      theme: {
        shell: {
          background: '#17d1ff',
          color: '#ff8fda'
        },
        tweets: {
          background: '#ededed',
          color: '#383838',
          links: '#ff8aed'
        }
      },
      features: {
        scrollbar: false,
        loop: true,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        toptweets: true,
        behavior: 'default'
      }
    }).render().start();
    </script>

Here is the complete code that I put together. I get an error on line 88. The document.write line.

<!-- Twitter Widget -->

<div id="isolate">   

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


  <script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();    

 if (7 <= currentTime&&currentTime < 17) {

       document.write('<' + 'script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#242124',
      color: '#f0af4d'
    },
    tweets: {
      background: '#333333',
      color: '#c2c2c2',
      links: '#f7bc63'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</' + 'script> ');   
 }

 else {
      document.write('<' + 'script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#17d1ff',
      color: '#ff8fda'
    },
    tweets: {
      background: '#ededed',
      color: '#383838',
      links: '#ff8aed'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</' + 'script> ');

  }

      }


changeTwitter();
-->
</script>

[Luckychap]

Try this :D

<!-- Twitter Widget -->

<div id="isolate">   

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


  <script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();    

 if (7 <= currentTime&&currentTime < 17) {

       document.write("<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#242124',
      color: '#f0af4d'
    },
    tweets: {
      background: '#333333',
      color: '#c2c2c2',
      links: '#f7bc63'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script> ");   
 }

 else {
      document.write("<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '@BigNotch',
  interval: 6000,
  title: 'Follow Me On Twitter',
  subject: 'BigNotch',
  width: 180,
  height: 300,
  theme: {
    shell: {
      background: '#17d1ff',
      color: '#ff8fda'
    },
    tweets: {
      background: '#ededed',
      color: '#383838',
      links: '#ff8aed'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>");

  }

      }


changeTwitter();
-->
</script>

[tekboi]

I tried that when first writing the script. It didn't work...

someone told me that the </script> will stop the script. which is why i have the "+" there.

I'm such a newb smh

[Luckychap]

No thats not true. Your code was failing because you used single quotes (') to build <script> tag string and that string itself contains many (') which will definitely give error.

Don't believe on someone until you verify. Try this simple code:-

This one is your type which gives error:-

<html>
    <body>
        <script>
        <!--
            document.write('<script>alert('script code called with single quotes');</script>');
        -->
        </script>
    </body>
</html>

Now try this one:-

<html>
    <body>
        <script>
        <!--
            document.write("<script>alert('script code called with double quotes');</script>");
        -->
        </script>
    </body>
</html>

The second code is running, which concludes:-
1. "someone told me that the </script> will stop the script" is totally false
2. If second sample code is not working for you then there is something wrong in calling Twitter api.

I can only advise you to use firebug to debug your code and let us know the outcomes.

[Taywin]

As LuckyHarp said, your problem started at line 20 in your 2nd code portion. If you really look at the color enhancement of the code block, you should at least see something is wrong there.

You are incorrectly composing your string while you want to write out in document.write(). As a result, you create an unterminated string. One way to use only single quote is to add an escape backslash to the quote.

[tekboi]

I tried using the double quotes but that didn't work either. Dreamweaver sill gives me an error and it doesn't work in the browser. Even the code you posted above gives me an error in DW. It works in Firefox only, but with tons of errors.

It seems that people disagree on how to achieve this. I was given 3 different ways to do this, and so far none of them have worked. I'll continue to keep trying different methods until something works.

[Taywin]

How about use the backslash to escape the character instead of double/single quote? You could keep your original version, but add a backslash right before every 'single quote' inside the document.write string. In other words, only concatenate string will need a backslash.