JavaScript - Making A Dynamic Twitter Widget

Hello everyone~ I hope this will be a very simple question for someone on here. I am a current web design/development major at the art institute kansas city, and this has stumped me and my teacher pretty hard...

I am trying to implement the window widget javascript like the one found he http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/ Where it looks like windows are opening up on the web page. It gave some fairly specific directions: upload these two files to your server and add these tags to create the functions that are called from the linked files. It sounded fairly simple.

I uploaded and linked the two files from my server to the test page I was making, and then created my code and my links (the links call on the code to call on the linked script to open the window with your information.) However, somewhere in the midst of there, something isn't working and I can't figure out what. When I click the link on the test page, instead of opening a window, the link opens with a # in the URL bar after the web address.

You can see what I'm talking about he http://zero7starz.com/test/home.html and see the source code and everything. The files that are in my "test" directory are the two files I needed linked, the home.html file, and the file I'm trying to call "Lingo.html".

Can anyone on here see what the issue is? Or any other information you need from me I'll be happy to provide, but I wasn't sure what else I needed to include in here besides my source code.

Much appreciated!
-Jay

Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.

I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page.

My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top.

Javascript counts the top panel as 0, the second panel as 1 etc etc.

So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story.

My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added.

Thanks!

Hi,

How can I set the following widget so it opens the links (pages) in a new window?


Code:

<SCRIPT charset="utf-8" type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/oweg0a-20/8018/9000c5f7-9ce1-4eb6-887f-0491e54add7d"> </SCRIPT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Foweg0a-20%2F8018%2F9000c5f7-9ce1-4eb6-887f-0491e54add7d&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT>

Thanks in advance!
Regards
Rain Lover

How do I retrieve input/selections from this calendar widget on this site: moongarm.99k.org

Hi All,

I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help.

Code:

function addToParent( formName, selectName, name, label ) {

    var parent       = window.opener;
    var selectWidget = parent.document.forms[formName].elements[selectName];

    if( selectWidget ) {

        var length = selectWidget.length;
        selectWidget[length] = new Option( name, label, false, false );
    }
}

When I tried to debug, internet explorer shows an error in the following line

Code:

selectWidget[length] = new Option( name, label, false, false );

Is there anything wrong with this statement ??

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

Hi All,
i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

For what i need that :

i have my user inserting information on the level 1. let say Copagny info
2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
and so on...

3- those sub level ( subforms ) can also call their respective subforms..



Any idea how to design this ?


thanks

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...

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;
}

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.

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?

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

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!

I 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!

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]+"&nbsp;"} 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.