|
JavaScript - Singleline Twitter Feed Js Problem.
Hello, first time poster here.
I have very little understanding of Javascript and have a problem with some I'm using. It's a singleline twitter feed and you can see it top right he http://zest.explosiveapps.com/navigation.php Code: // Compatability with jQuery:
jQuery.noConflict();
window.$ = function (element) {
return document.getElementById(element);
};
/* Header and footer JavaScript */
jQuery(document).ready(function() {
var $ = jQuery;
function scroll_tweet(li){
var post = li.children("div.post"),
pWidth = post.width();
if (pWidth > parseInt(balloon.css('width'))){
var leftEnd = li.find('div.end');
if(leftEnd.length === 0){
leftEnd = $('<div class="end left" />').appendTo(li);
}
var offsX = parseInt(leftEnd.width());
post.animate({left: offsX - pWidth - 55}, 23000, 'linear', function(){post.css('left', offsX);});
}
}
function swap_tweets(current_tweet){
var next_tweet = (current_tweet + 1) % 5; /* max five tweets */
var li = $("li#tweet" + next_tweet);
$("#tweet" + current_tweet).fadeOut(300);
setTimeout(function(){
li.fadeIn(400);
}, 400);
setTimeout(function(){scroll_tweet(li);}, 3800);
display_tweet = next_tweet;
setTimeout(function(){swap_tweets(display_tweet);}, 11300);
}
var balloon = $("#twitterpost div.balloon");
display_tweet = 0;
if($("div.balloon ul li#tweet1").html() !== null){
setTimeout(function(){swap_tweets(display_tweet);}, 12000);
var firstli = $("li#tweet0");
setTimeout(function(){scroll_tweet(firstli);}, 7500);
}
});
As you can see from just watching, it has some problems. It doesn't fade out posts before displaying a new one. From what I understand it talks to the CSS to figure out the length. So maybe that's where the problem is. Code: /* twitter-bubble */
#navigation #twitterpost {
position: relative;
top: -33px;
right: 95px;
}
#navigation #twitterpost .balloon {
position: relative;
float: right;
width: 345px;
height: 21px;
overflow: hidden;
margin-top: 0px;
padding: 0;
background: url(/navigation/images/bubble.png) 0 0 no-repeat;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
#navigation #twitterpost .balloon div {
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
color: #666666;
padding: 0px 0px 12px 10px;
font-size: 11px;
}
#navigation #twitterpost .end {
position: absolute;
top: 0;
z-index: 1;
height: 21px;
background: url(/navigation/images/bubble.png) no-repeat;
}
#navigation #twitterpost .end.left {
left: 0;
width: 0px;
background-position: 0 0;
}
#navigation #twitterpost .end.right {
right: 0;
width: 0px;
background-position: 100% 0;
}
#navigation #twitterpost ul li .post {
position: relative;
}
#navigation #twitterpost ul li .post {
font-size: 11px;
white-space: nowrap;
position: absolute;
top: 3px;
}
#navigation #twitterpost ul {
padding-left: 0px;
margin: 0px;
list-style-type: none;
}
Or maybe it has something to do with using this script http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for take a look at my mess! Sorry for being such an amateur. And by the way, everything is wip on that site Cheers M. Similar TutorialsI have a twitter feed on my site and although am generally happy with it, the time-stamp for each tweet is several hours ahead of my time zone. I've looked through the js files to see if there is anything that allows me to set the timezone but cannot find anything. Anyone know how to reset the time to pacific standard time? Here's the URL http://www.kitchenprose.com/gmtest/index.html Can't for the life of me see anything in the code that controls time zone (would like Pacific Standard time, US) Code: $(document).ready(function() {
$.Juitter.start({
searchType:"fromUser", // needed, you can use "searchWord", "fromUser", "toUser"
searchObject:"gillesmarini", // needed, you can insert a username here or a word to be searched for, if you wish multiple search, separate the words by comma.
// The values below will overwrite the ones on the Juitter default configuration.
// They are optional here.
// I'm changing here as a example only
lang:"en", // restricts the search by the given language
live:"live-125", // the number after "live-" indicates the time in seconds to wait before request the Twitter API for updates.
placeHolder:"juitterContainer", // Set a place holder DIV which will receive the list of tweets example <div id="juitterContainer"></div>
loadMSG: "Loading messages...", // Loading message, if you want to show an image, fill it with "image/gif" and go to the next variable to set which image you want to use on
imgName: "loader.gif", // Loading image, to enable it, go to the loadMSG var above and change it to "image/gif"
total: 4, // number of tweets to be show - max 100
readMo "Read it on Twitter", // read more message to be show after the tweet content
nameUser:"text", // insert "image" to show avatar of "text" to show the name of the user that sent the tweet
openExternalLinks:"newWindow", // here you can choose how to open link to external websites, "newWindow" or "sameWindow"
filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*" // insert the words you want to hide from the tweets followed by what you want to show instead example: "sex->censured" or "porn->BLOCKED WORD" you can define as many as you want, if you don't want to replace the word, simply remove it, just add the words you want separated like this "porn,sex,****"... Be aware that the tweets will still be showed, only the bad words will be removed
});
$("#aRodrigo").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"fromUser",
searchObject:"mrjuitter,rodrigofante",
live:"live-120" // it will be updated every 120 seconds/2 minutes
});
});
$("#aIphone").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"searchWord",
searchObject:"iPhone,apple,ipod",
live:"live-20" // it will be update every 20 seconds
});
});
$("#aJuitter").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"searchWord",
searchObject:"Juitter",
live:"live-180" // it will be updated every 180 seconds/3 minutes
});
});
$("#juitterSearch").submit(function(){
$.Juitter.start({
searchType:"searchWord",
searchObject:$(".juitterSearch").val(),
live:"live-20", // it will be updated every 180 seconds/3 minutes
filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*"
});
return false;
});
$(".juitterSearch").blur(function(){
if($(this).val()=="") $(this).val("Type a word and press enter");
});
$(".juitterSearch").click(function(){
if($(this).val()=="Type a word and press enter") $(this).val("");
});
});
Many thanks! I have a twitter feed on my site and although am generally happy with it, the time-stamp for each tweet is hours and hours ahead of my time zone. I've looked through the js files to see if there is anything that allows me to set the timezone but cannot find anything. Anyone know how to reset the time to pacific standard time? I've searched through the values and don't see anywhere to assign the timezone (would like Pacific Time zone, US) Here's the URL http://www.kitchenprose.com/gmtest/index.html Here's the code: Code: $(document).ready(function() {
$.Juitter.start({
searchType:"fromUser", // needed, you can use "searchWord", "fromUser", "toUser"
searchObject:"gillesmarini", // needed, you can insert a username here or a word to be searched for, if you wish multiple search, separate the words by comma.
// The values below will overwrite the ones on the Juitter default configuration.
// They are optional here.
// I'm changing here as a example only
lang:"en", // restricts the search by the given language
live:"live-125", // the number after "live-" indicates the time in seconds to wait before request the Twitter API for updates.
placeHolder:"juitterContainer", // Set a place holder DIV which will receive the list of tweets example <div id="juitterContainer"></div>
loadMSG: "Loading messages...", // Loading message, if you want to show an image, fill it with "image/gif" and go to the next variable to set which image you want to use on
imgName: "loader.gif", // Loading image, to enable it, go to the loadMSG var above and change it to "image/gif"
total: 4, // number of tweets to be show - max 100
readMo "Read it on Twitter", // read more message to be show after the tweet content
nameUser:"text", // insert "image" to show avatar of "text" to show the name of the user that sent the tweet
openExternalLinks:"newWindow", // here you can choose how to open link to external websites, "newWindow" or "sameWindow"
filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*" // insert the words you want to hide from the tweets followed by what you want to show instead example: "sex->censured" or "porn->BLOCKED WORD" you can define as many as you want, if you don't want to replace the word, simply remove it, just add the words you want separated like this "porn,sex,****"... Be aware that the tweets will still be showed, only the bad words will be removed
});
$("#aRodrigo").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"fromUser",
searchObject:"mrjuitter,rodrigofante",
live:"live-120" // it will be updated every 120 seconds/2 minutes
});
});
$("#aIphone").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"searchWord",
searchObject:"iPhone,apple,ipod",
live:"live-20" // it will be update every 20 seconds
});
});
$("#aJuitter").click(function(){
$(".jLinks").removeClass("on");
$(this).addClass("on");
$.Juitter.start({
searchType:"searchWord",
searchObject:"Juitter",
live:"live-180" // it will be updated every 180 seconds/3 minutes
});
});
$("#juitterSearch").submit(function(){
$.Juitter.start({
searchType:"searchWord",
searchObject:$(".juitterSearch").val(),
live:"live-20", // it will be updated every 180 seconds/3 minutes
filter:"sex->*BAD word*,porn->*BAD word*,****->*BAD word*,****->*BAD word*"
});
return false;
});
$(".juitterSearch").blur(function(){
if($(this).val()=="") $(this).val("Type a word and press enter");
});
$(".juitterSearch").click(function(){
if($(this).val()=="Type a word and press enter") $(this).val("");
});
});
Many thanks! Hello, I have this working js twitter feed on my site, but I am trying to generate the topsy retweet button through the .js file via an innerHTML call, but its not working. the innerHTML works if I put test or something in there, so there is something within this line of code that is breaking it. Code: document.getElementById('retweet-button').innerHTML = '<div class="topsy_widget_data"><!--{"url":"'+url+'","title":"inConcert Web Solutions, Inc."}--></div>';
This is the entire script, I really appreciate any help Code: //Twitter
window.onload = function() {
var ajax_load = "<img class='loader' src='/assets/templates/incon/twitterfeed/loader.gif' alt='Loading...' />";
var url = 'http://twitter.com/statuses/user_timeline/inConcertWeb.json?callback=twitterCallback2&count=1';
var script = document.createElement('script');
$("#twitter_feed").html(ajax_load);
script.setAttribute('src', url);
document.body.appendChild(script);
}
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,
function(url) { return '<a href="'+url+'" rel="nofollow" target="_blank">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li class="twitter_date"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" rel="nofollow" target="_blank">'+relative_time(twitters[i].created_at)+'</a></li> <li><p>'+status+'</p></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
//THIS IS WHERE IT IS BREAKING
document.getElementById('retweet-button').innerHTML = '<div class="topsy_widget_data"><!--{"url":"'+url+'","title":"inConcert Web Solutions, Inc."}--></div>';
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];
var parsed_date = new Date();
parsed_date.setTime(Date.parse(time_value));
var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec');
var m = parsed_date.getMonth();
var postedAt = '';
postedAt = months[m];
postedAt += " "+ parsed_date.getDate();
postedAt += ","
postedAt += " "+ parsed_date.getFullYear();
return postedAt;
}
Hi I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good. If anyone knows where I can find one that's simple to implement that would be great. Kind Regards Hi Everyone, Has anyone noticed the twitter confirmation box (when you hit save in Settings, the page refreshes and a white confitmation box appears along the top of the screen and disappears again in a few seconds)? Does anyone know how to go about implementing this? My JS skills would not be the best. I wonder is there a jquery plugin that I could use or similar? Thanks in advance, Brian Hey, I'm struggling to add twitter links using the current method I'm trying and I really need some help from someone with more knowledge than I. So here's the current attempt and along side is a working function that returns the html sent to it back with the links working. Code:
var ADD_tweeter=function(tweet){ var html="";var T=tweet.split(" ");for(i=0;i<T.length;i++){ if(T[i].indexOf("@")===0){ var stripped=T[i].replace("@","") , tweeter=T[i].replace(T[i], "<a href='http://twitter.com/"+stripped+"'>@"+stripped+"</a>"); T[i]=tweeter}};
for (i in T){html+=T[i]+" "} return html }
var ADD_links= function(txt){ var Txt=txt.replace(/((http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(\/*)(:(\d+))?([A-Z0-9_\/.?~-]*))/gi, '<a href="$1" target="_blank">$1</a>'); return Txt}
I need to devise a way to pick through and change the @twitternames to links. I thought I had it, but when I combined the actions into the script (it's a search engine for twitter subjects) ,the links get the right html, but I can't find a way to make the twitter links work correctly. I tried to follow the same formula as the working function ADD_links, but I just can't seem to understand the notation or something. Also, is $1 part of Regex? And $2? I saw several scripts that were for doing what I want to do , but they all seemed to be php scripts and I couldn't adapt any of them despite countless hours trying. Here's a link to the working page http://www.hardwoodfloorspdx.com/misc/twittersearch/ The page is pretty large so I didn't want to post the entire thing. Any help will be greatly appreciated. On twitter, when you change your avatar/background a small white box covering an inch of the top of the page appears. How can I do this?
So, say I want to grab two twitter feeds from 2 people and put them together in one feed on a page (not using the built in twitter 'goodies'). How can I do this? I'm sure it's possible...
I am wanting to allow a user to update their twitter status from my website. I was planning on using Twitter's @anywhere feature, but this was not a very friendly solution: Take over 3 seconds to load Makes 14 requests Calls jQuery twice Then I found the Twitter REST API: https://dev.twitter.com/docs/api Using OAuth, I want the user to be able to login, and then update their status using that API. I've been trying to find tutorials on this, but I haven't found any that use the REST API to update the Twitter Status. Does anyone have code for/know of a tutorial for what I'm looking for? Hey guys, I have this site http://free-documentaries-online.com . If you go to any documentary page and look under the documentary you will see 'Share this documentary:' like the picture below. I was wondering if you could make all the pictures have a similar size image? facebook.jpg, twitter.jpg, linkedin.jpg, digg.jpg, stumbleupon.jpg, delicious.jpg Here is the code: Code: <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="freedocosonline">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://free-documentaries-online.com/images/delicious.jpg" width="20" height="20" alt="Delicious" title="Add to Delicious!" /></a> <script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggIcon"></a>
<a rel="nofollow" target="_blank" href='http://www.facebook.com/sharer.php?u=http://free-documentaries-online.com/watch/index?watch=<? echo "$foldername"; ?>'> <img border="0" src="../images/facebook.jpg" width="20" height="20"></a> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share"></script></center>
Thanks in advance Ok so I'm making a music website for a project and we have the official Twitter widget in the sidebar. It is an external javascript file as the website must be XHTML 1.0 compliant. What I'm trying to do is make this dynamic so that when viewing different artist pages, the widget changes to that artist's Twitter Feed. I have gotten this to work when the script was fully on the page, by echoing a PHP variable in the javascript, but when it's external I can't figure it out. The file MUST be external so that it passes the XHTML 1.0 Validator. Here's the widgets code(significantly shortened, the full code is too long to post here): Code: new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#000000',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#ff5454'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('choiceprize').start();
All we need is to pass a string to the .setUser('choiceprize') here ^ so that instead of 'choiceprize' it is our variable. Any help is appreciated! i want to assign content of textarea to a div .. like in twitter when you type something and press "Tweet" a div is created and has the content of textarea.. how can i implement it , i know something about getElementById() but not sure how it can help me here As part of course work for class I must write JavaScript/XML (with CSS) to carry out the following tasks. In essence it is a micro version of twitter. Users must be able to login, make posts, edit them. A text box should appear, with reset/update buttons. When the Update button is clicked the following occurs: 1. The user name is added to the message text typed by the user 2. A time stamp is added after the message text 3. A photo is added at the left 4. Any URLs are made into hyperlinks 5. The combined photo and text, formatted suitably, is prepended to the list of previous messages below the input area, i.e. the most recent item is at the top of the places visited. 6. The message box is cleared to allow further user input. - When the Clear button is clicked the text area is cleared. Additionally 1. Using a manually created XML file users must be able to "register themselves" 2. Posts must be manually saved in an XML file which loads upon login 3. When anyone opens the default page they are presented with a list of all your journey and comments (retrieved from the server). 4. Allow a registered user who has logged in to add, delete or modify only their comments. 5. Use one or more XML files to record registered users and passwords as well as posts and comments. These are manually created in 1& 2 above. ---- I initally tackled the first section using innerHTML and other various Javascript components but am at a total loss as to how to achieve the same thing using nodes (and XML). Any help with regards with where to begin would be much appreciated. I've been going at this for a good week now, trying to figure out what the hell is going on. I have this tweet ticker code that scrolls a live feed at the very top of the header. It runs on jQuery 1.5.0. The site I have has a vertically scrollTo div for each button pressed on the navigation. The problem I'm having is that as soon as I plug in the jQuery 1.5.0 which turns on the tweet ticker, it stops the overflow and the scrollTo. So when I click on any of the navigation buttons it jumps to the next page rather than scrolling smoothly. Can anyone please please help me. This is driving me crazy lol. I'm trying to get two RSS feeds to display on a page. I'm trying to be good about it and re-use the same code for each by calling the function twice using different parameters for the feed url, feed limit (number of posts to display), and which div to display the output in (cupcake-feed and pie-feed). It works for either of the two feeds, but not both at the same time. If I try calling both, only the second one displays. If I pick just one to call, either one will display. I'm new to object-oriented concepts (if that's even what you would call this?). What am I doing wrong here? Code: function rssfeedsetup(feedurl, feedlimit, feeddivi) {
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
feeddiv=feeddivi //sets output div name as a global variable for use below
}
function displayfeed(result) {
if (!result.error) {
var thefeeds=result.feed.entries
//convert date to friendly format
var date=new Date(thefeeds[0].publishedDate)
var dateString=date.toLocaleDateString()
//create output content and display it in div
for (var i=0; i<thefeeds.length; i++) {
var rssoutput='<div class="feed-date">' + dateString + '</div>' + '<div class="feed-title"><a href="' + thefeeds[i].link + '">' + thefeeds[i].title + '</a></div>' + '<div id="cupcake-menu" class="hidden">' + thefeeds[i].content + '</div>'
document.getElementById(feeddiv).innerHTML=rssoutput
}
}
else {
alert("Error fetching feeds!")
}
}
//call function on load for each feed to be displayed
window.onload=function(){
rssfeedsetup("http://www.site1.com/feed/", 1, "cupcake-feed");
rssfeedsetup("http://www.site2.com/feed/", 1, "pie-feed");
}
I'm quite new to javascript programming, I basically want to parse a JSON string from an external URL. http://cashtrackr.com/piwik/index.ph...9d8d472cc9974a This is the json string URL and I just want to output the contents of "nb_visits" for example. I would also like to know the terms for a JSON string "?" : ? thanks for your time Sorry, relative newbie here with what is probably a silly question. When I include the code to create a slideshow found here and then later in the page use the feed informer code to display posts from my blog ( <script type="text/javascript" src="http://app.feed.informer.com/digest3/39SQ9SPCHY.js">...) I am getting a syntax error message at the feedinformer code in dreamweaver and I can not figure out the problem. Any help would be appreciated, thank you I have this piece of javascript code, which enables me to get my Picasa photos without link back feature, in my webpage. The issue is with the hardcoded RSS url feed. I want this to be dynamically passed as a variable to the java script. I use a PHP code, where this javascript is coded. In the below code, if I say var samples = <?php $url_code ?>, the javascript does not recognize. Can someone help on this, as I use the same PHP code, with different url feeds, to display different picasa photo albums ? Code: <script type="text/javascript">
function load() {
var samples = "https://picasaweb.google.com/data/feed/base/user/......................../........./.........?alt=rss&kind=photo&authkey=.....................&hl=en_US"
var options = {
numresults: 2,
scaleimages: true,
maintainAspectRatio : false,
displayTime: 1000,
transistionTime: 300,
//linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
|
|||||||