<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.
Related
Trying to use ng-smart-table to shows delete confirm modal when user try to delete row, but the modal does not appear.
I added delete related settings following documents and other examples but still modal does not show.
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
settings = {
mode: 'external',
pager: {perPage: 10},
hideSubHeader: true,
sort: false,
actions: {
position: 'right',
edit: false,
delete: true,
add: false,
},
delete: {confirmDelete: true},
columns: {
id: {title: 'ID'},
},
}
onDeleteConfirm($event: any) {
if (window.confirm('Are you sure you want to delete?')) {
$event.confirm.resolve();
} else {
$event.confirm.reject();
}
}
Nothing shows on Chrome Console log.
Remove mode: 'external' from the settings.
Please refer the demo for better understanding. DEMO https://stackblitz.com/edit/example-ng2-smart-table
As you can see in the ng2-smart-table documentation:
Triggered only if table confirmDelete = true and mode = inline.
So please change the mode in settings to inline instead of external.
I am working on a javascript control for work, and integrating it into a grails plugin. All the plugin simply does is populate the options based on a taglib, which looks like this:
$(document).ready(function() {
var ${name} = $("#${name}").tagInput({
$inputListener: $("#${inputListenerName}"),
$errorHandler: $("#${errorHandler}"),
$domainListener: $("#${domainListenerName}"),
errorClass: "${errorClass}",
validClass: "${validClass}",
caseSensitive: ${caseSensitive},
constraints: {
minSize: ${minSize},
maxSize: ${maxSize},
maxTags: ${maxTags},
validationRegex: "${tagRegex}"
},
errorMessages: {
size: "${sizeErrorMessage}",
regex: "${regexErrorMessage}",
maxTags: "${maxTagsError}"
},
responsive: {
length: ${maxTagLength},
lengthxs: ${maxTagLengthxs},
xsMode: ${xsWidth}
}
});
debugger;
});
Which looks like this when evaluated:
var emailTags = $("#emailTags").tagInput({
$inputListener: $("#invitesInput"),
$errorHandler: $("#inviteErrors"),
$domainListener: $("#null"),
errorClass: "label-danger",
validClass: "label-primary",
caseSensitive: false,
constraints: {
minSize: 1,
maxSize: 255,
maxTags: 100,
validationRegex: "[^#]+#[^#]+\.[^#]+"
},
errorMessages: {
size: "",
regex: "Must be a valid email string.",
maxTags: "You have entered too many recipients. Please send out invites before adding more recipients."
},
responsive: {
length: 50,
lengthxs: 20,
xsMode: 768
}
});
When Chrome hits the debugger statement, I have the correct object. Which is:
tagInput {parseTags: function, clear: function, serialize: function}
If I step out of this, I immediately entry jQuery and my object is instantly turned into
div#emailTags.turningTags
which eventually turns into
<div id="emailTags" name="emailTags" class="turningTags ">…</div>
If it helps, here is the current code for the tagInput object.
https://gist.github.com/anonymous/e785ec24e0c1388cd599
Why is this happening? Why is my object being turned into this HTML element? I have tried changing the name of the variable to no avail, no matter what I change the name of this variable to, it happens every time. I have tried making it a standalone object and not a jQuery function and the same thing STILL keeps happening.
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.
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
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.