I am making calls to twitter dynamically to get the widget on the web site. http://twitter.com/about/resources/widgets/widget_search
Instead of user getting the code from the above website, I am giving a text box to enter the same details to get the twitter search widget box.
I am able to get the tweets, but its removing the previous content and which is already on the page and updating the same page with only twitter feeds.
Here is the code:
<label>Enter Search Keyword:</label>
<input type="text" id="twtKeyword"/>
<br/><br/>
<label>Enter Title:</label>
<input type="text" id="twtTitle"/>
<br/><br/>
<label>Enter Subject:</label>
<input type="text" id="twtSubject"/>
<br/><br/>
<input type="button" id="twtBtnClick" value="Click" onclick="getPageTwitter();"></input>
function getPageTwitter()
{
var searchWord=document.getElementById("twtKeyword").value;
var titleTwt=document.getElementById("twtTitle").value;
var subjectTwt=document.getElementById("twtSubject").value;
$( "#twitterWidget" ).dialog( "close" );
new TWTR.Widget({
version: 2,
type: 'search',
search: searchWord,
interval: 6000,
title: titleTwt,
subject: subjectTwt,
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
}
But I want the widget to stay in the same page without effecting the previous content of the page
This isn't something the Search Widget was designed for. You will likely have to write your own JavaScript to poll the Search API and render the results with your own code.
I think i've the answer for you. I got some coding done to do exactly what you want, Maybe you could iframe a page i'd be willing to setup? up to you.
you can view the page here http://www.twitamix.com
Related
I am using this rating plugin (http://metroui.org.ua/rating.html) in angularjs to show rating in star. I tried to initialize the current rating when page loads.
data-score="3"
is working but this
data-score="{{userreviewRatings.rating}}"
is not working
<div id="rating-stars" class="large fg-white rating active" style="height: auto;" data-score="{{userreviewRatings.rating}}">
</div>
<form id="rating-form">
<input type="text" id="website-rating" ng-click="submitrating()" name="rating">
</form>
<script>
$(function(){
$("#rating-stars").rating({
static: false,
stars: 5,
showHint: true,
showScore: false,
click: function(value, rating){
rating.rate(value);
$('#website-rating').val(value);
$('#website-rating').trigger('click');
}
});
});
</script>
can someone please tell me how can i give rating using angular variable?
I don't it's good to use both angular and jquery. they are very different in thought.
if you really want to use both of them. you should use $scope.$digest()after
$scope.userreviewRatings.ratinghas changed.
or use
```
$scope.$apply(function () {
$(function () {
$("#rating-stars").rating({
static: false,
stars: 5,
showHint: true,
showScore: false,
click: function (value, rating) {
rating.rate(value);
$('#website-rating').val(value);
$('#website-rating').trigger('click');
}
});
});
})
```
Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.
On my webpage, I have the following link:
<asp:LinkButton ID="lnkChangePic" runat="server" onclick="lnkChangePic_Click" Text="Upload new profile picture"></asp:LinkButton>
When you click it, it calls this function:
protected void lnkChangePic_Click(object sender, EventArgs e)
{
pnlUpload.Visible = true;
pnlChangePic.Visible = false;
}
The link is present in pnlChangePic. pnlUpload is initially not visible. I want the page to be as responsive as possible when the user clicks this link, and at the moment, when the user clicks, only two bits of the page change: the panels, and a twitter stream that is also on the page:
<div class="fr">
<h4 id="twitter">Twitter Stream</h4>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 430,
height: 300,
theme: {
shell: {
background: '#000',
color: '#666'
},
tweets: {
background: '#000',
color: '#666',
links: '#ffa20f'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(asdf').start();
</script>
</div>
What should I do to make it so the twitter steam does not refresh when the user clicks the link? I can can get it to stop doing that, the page will be much more responsive.
You want to run some server-side code without reloading the entire page.
You have two main options -
put the section that you do want to update in an UpdatePanel and update it with ASP.Net AJAX(clicking on a button within an UpdatePanel will trigger an Async Postback - only the part of the page within the UpdatePanel will be updated)
cache the output of the Twitter control and serve the cached version on postback. As the Twitter control seems to be entirely client-side this would probably be a little difficult.
Your best bet is probably the ASP.Net AJAX UpdatePanel.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.
Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.
We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.