admin管理员组

文章数量:1318156

How to customize the default html output of javascript of default twitter widget?

In the default widget I want to remove Header and footer from output source (**not from using display:none in css)** (**green crossed)** of this, just want to keep the tweet area.

This is default twitter code.

<script src=".js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: 'transparent',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: false,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('tutsplus').start();
</script>

And this is the output of default code

<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
    <div style="width: 100%;" class="twtr-doc">
        <div class="twtr-hd">
            <a class="twtr-profile-img-anchor" href="" target="_blank">
                <img src=".jpg" class="twtr-profile-img" alt="profile"></a>
            <h3>
                Tuts+</h3>
            <h4>
                <a href="" target="_blank">tutsplus</a></h4>
        </div>
        <div class="twtr-bd">
            <div style="height: auto;" class="twtr-timeline">
                <div class="twtr-tweets">
                    <div class="twtr-reference-tweet">
                    </div>
                    <div id="tweet-id-1" class="twtr-tweet">
                        <div class="twtr-tweet-wrap">
                            <div class="twtr-avatar">
                                <div class="twtr-img">
                                    <a href="" target="_blank">
                                        <img src=".jpg" alt="tutsplus profile"></a></div>
                            </div>
                            <div class="twtr-tweet-text">
                                <p>
                                    <a class="twtr-user" href="" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="" target="_blank" class="twtr-hyperlink">/...</a>) <em><a href="" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="/?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- tweets show here -->
                </div>
            </div>
        </div>
        <div class="twtr-ft">
            <div>
                <a href="" target="_blank">
                    <img src=".png" alt=""></a> <span><a href="" style="color: rgb(255, 255, 255);" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
            </div>
        </div>
    </div>
</div>

And I want to get this part only as a output in source from the above default source.

<div class="twtr-tweet-text">
    <p>
        <a class="twtr-user" href="" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="" target="_blank" class="twtr-hyperlink">/...</a>) <em><a href="" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="/?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
    </p>
</div>

JsFiddle example link of this /

How to customize the default html output of javascript of default twitter widget?

http://twitter./about/resources/widgets/widget_profile

In the default widget I want to remove Header and footer from output source (**not from using display:none in css)** (**green crossed)** of this, just want to keep the tweet area.

This is default twitter code.

<script src="http://widgets.twimg./j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: 'transparent',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: false,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('tutsplus').start();
</script>

And this is the output of default code

<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
    <div style="width: 100%;" class="twtr-doc">
        <div class="twtr-hd">
            <a class="twtr-profile-img-anchor" href="http://twitter./tutsplus" target="_blank">
                <img src="http://a2.twimg./profile_images/63581538/tutsplus_normal.jpg" class="twtr-profile-img" alt="profile"></a>
            <h3>
                Tuts+</h3>
            <h4>
                <a href="http://twitter./tutsplus" target="_blank">tutsplus</a></h4>
        </div>
        <div class="twtr-bd">
            <div style="height: auto;" class="twtr-timeline">
                <div class="twtr-tweets">
                    <div class="twtr-reference-tweet">
                    </div>
                    <div id="tweet-id-1" class="twtr-tweet">
                        <div class="twtr-tweet-wrap">
                            <div class="twtr-avatar">
                                <div class="twtr-img">
                                    <a href="http://twitter./tutsplus" target="_blank">
                                        <img src="http://a2.twimg./profile_images/63581538/tutsplus_normal.jpg" alt="tutsplus profile"></a></div>
                            </div>
                            <div class="twtr-tweet-text">
                                <p>
                                    <a class="twtr-user" href="http://twitter./tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter./rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook./rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook./...</a>) <em><a href="http://twitter./tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter./?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- tweets show here -->
                </div>
            </div>
        </div>
        <div class="twtr-ft">
            <div>
                <a href="http://twitter." target="_blank">
                    <img src="http://widgets.twimg./i/widget-logo.png" alt=""></a> <span><a href="http://twitter./tutsplus" style="color: rgb(255, 255, 255);" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
            </div>
        </div>
    </div>
</div>

And I want to get this part only as a output in source from the above default source.

<div class="twtr-tweet-text">
    <p>
        <a class="twtr-user" href="http://twitter./tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter./rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook./rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook./...</a>) <em><a href="http://twitter./tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter./?status=@tutsplus%20&amp;in_reply_to_status_id=38368449310760960&amp;in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
    </p>
</div>

JsFiddle example link of this http://jsfiddle/ZUVzd/

  • javascript
  • css
  • xhtml
  • twitter
Share Improve this question asked Feb 20, 2011 at 5:26 Jitendra VyasJitendra Vyas 153k240 gold badges586 silver badges867 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

To remove header and footer from the widget you can simply add css:

.twtr-hd, .twtr-ft { display: none; }

The widget they provide is meant to be dropped in. It's not really intended for heavy customization beyond the few options they give you. You're better off just building this yourself than fighting it. Here's a jQuery plugin for it. It sounds like you probably want what the first demo is doing, though there are plenty of options for it.

If you prefer Prototype, mootools, or whatever, some rudimentary searching should turn up equivalents.

I think that you are going to have to edit the .js file and host the edited one on your own server.

"For full documented source see http://twitter./javascripts/widgets/widget.js"

Grab that and edit this section.

          var html = '<div class="twtr-doc' + isFull() + '" style="width: ' + this.wh[0] + ';">\
        <div class="twtr-hd">' + getHeader() + ' \
        </div>\
        <div class="twtr-bd">\
          <div class="twtr-timeline" style="height: ' + this.wh[1] + ';">\
            <div class="twtr-tweets">\
              <div class="twtr-reference-tweet"></div>\
              <!-- tweets show here -->\
            </div>\
          </div>\
        </div>\
        <div class="twtr-ft">\
          <div><a target="_blank" href="http://twitter."><img alt="" src="' + logo + '"></a>\
            <span><a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter./' + this._getWidgetPath() + '">' + this.footerText + '</a></span>\
          </div>\
        </div>\
      </div>';

I did this to remove the footer and it works fine for me.

本文标签： cssHow to customize the default html output of javascript of default twitter widgetStack Overflow

版权声明：本文标题：css - How to customize the default html output of javascript of default twitter widget? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742041162a2417553.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。