Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to pass drop down list value to twitter widget

Status
Not open for further replies.
Viptelekom

Viptelekom

Technical User
Mar 6, 2012
6
HU
Dear forum members,

I am looking for a solution to change the UserName based on the drop down list or similar which i predefinie in the html code.

The original widget code is this one :

Code: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor ([URL unfurl="true"]www.coffeecup.com)">[/URL]
    <meta name="created" content="P, 10 febr. 2012 16:53:48 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="[URL unfurl="true"]http://html5shim.googlecode.com/svn/trunk/html5.js"></script>[/URL]
    <![endif]-->
  </head>
  <body>
<div align="center">
<script charset="utf-8" src="[URL unfurl="true"]http://widgets.twimg.com/j/2/widget.js"></script>[/URL]
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 591,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#eb0707'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('UserName').start();
</script>
</div>  
</body>
</html>

My idea is to user a drop down list like this one to change the username:

Code: 
<select>
  <option value="Viptelekom">Viptelekom</option>
  <option value="Twitter">Twitter</option>
</select>

Any suggestion is welcome.

Thank you,
Gergely
 
Sort by date Sort by votes
How are you currently setting the UserName?

By your code, the widget lads automatically when the page loads.

Changing that value would require you to change how the widget loads. If you stick it in a function, you can get the user name from any input element and then pass it to it.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Dear vacunita,

Currently it is working as i copied the code, only manually.

I try to figure out how it can be done.

My last attempt is the following:

Code: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor ([URL unfurl="true"]www.coffeecup.com)">[/URL]
    <meta name="created" content="P, 10 febr. 2012 16:53:48 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="[URL unfurl="true"]http://html5shim.googlecode.com/svn/trunk/html5.js"></script>[/URL]
    <![endif]-->
  <script language="JavaScript"><!--
	function checkData()
		{
		var myTest  = me.D1.options[me.D1.selectedIndex].value
alert(myTest)   
invocke(myTest);
     }
</script>
	
</head>
  <body>
<div align="center">

<form method="POST" name="me">
    <select size="1" name="D1"  onChange="checkData()">
    <option value="Viptelekom">Viptelekom</option>    
    <option value="Viptelekom">Viptelekom</option>
    <option value="Twitter">Twitter</option>
    </select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>


<script charset="utf-8" src="[URL unfurl="true"]http://widgets.twimg.com/j/2/widget.js"></script>[/URL]
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 591,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#eb0707'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('myTest').start();
</script>
</div>  
</body>
</html>

The problem is how to use the value of the menu as Username.

Thank you,
Best Regards,
Gergely
 
Upvote 0 Downvote
Again, your code runs automatically at page load. Which means by the time you get a chance to select a name from your dropdown the widget has already loaded.

As I said above, make a function and call the widget after the name has been chosen only.

Code: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor ([URL unfurl="true"]www.coffeecup.com)">[/URL]
    <meta name="created" content="P, 10 febr. 2012 16:53:48 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="[URL unfurl="true"]http://html5shim.googlecode.com/svn/trunk/html5.js"></script>[/URL]
    <![endif]-->
  <script language="JavaScript"><!--
    function checkData()
        {
        var myTest  = me.D1.options.value;
      runWidget(myTest);

     }
</script>
    
</head>
  <body>
<div align="center">

<form method="POST" name="me">
    <select size="1" name="D1"  onChange="checkData()">
    <option value="Viptelekom">Viptelekom</option>    
    <option value="Viptelekom">Viptelekom</option>
    <option value="Twitter">Twitter</option>
    </select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>


<script charset="utf-8" src="[URL unfurl="true"]http://widgets.twimg.com/j/2/widget.js"></script>[/URL]
<script>
function runWidget(userName){
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 591,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#eb0707'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser(userName).start();
}
</script>
</div>  
</body>
</html>



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Dear vacunita,

I tried as you mentioned, but for me in this case the screen is empty and i cannot see the twitter widget on the screen.

It can be that by default it comes with twitter username Viptelekom for example and later i can change it as i wish ( i plan to change it not only once, so the drop down box can be present each time i change the user ).

Thank you,
Gergely
 
Upvote 0 Downvote
Hi

Minor error in the JavaScript code : forms can not be directly referred by name.
Code: 
[b]function[/b] [COLOR=darkgoldenrod]checkData[/color][teal]()[/teal]
        [teal]{[/teal]
        [b]var[/b] myTest  [teal]=[/teal] [highlight]document[teal].[/teal][/highlight]me[teal].[/teal]D1[teal].[/teal]value[teal];[/teal]
      [COLOR=darkgoldenrod]runWidget[/color][teal]([/teal]myTest[teal]);[/teal]

     [teal]}[/teal]
Major error in the theory : without specifying the [tt]id[/tt] of the element to populate, the widget will use [tt]document.write()[/tt].
Code: 
[b]new[/b] TWTR[teal].[/teal][COLOR=darkgoldenrod]Widget[/color][teal]([/teal][teal]{[/teal]
  version[teal]:[/teal] [purple]2[/purple][teal],[/teal]
  type[teal]:[/teal] [green][i]'profile'[/i][/green][teal],[/teal]
  rpp[teal]:[/teal] [purple]4[/purple][teal],[/teal]
  interval[teal]:[/teal] [purple]30000[/purple][teal],[/teal]
  width[teal]:[/teal] [green][i]'auto'[/i][/green][teal],[/teal]
  height[teal]:[/teal] [purple]591[/purple][teal],[/teal]
  [highlight]id[teal]:[/teal] [green][i]'guano'[/i][/green][teal],[/teal][/highlight]
[gray]// ... same things enumerated in earlier posts ...[/gray]
[teal]}[/teal][teal]).[/teal][COLOR=darkgoldenrod]render[/color][teal]().[/teal][COLOR=darkgoldenrod]setUser[/color][teal]([/teal]userName[teal]).[/teal][COLOR=darkgoldenrod]start[/color][teal]();[/teal]
Code: 
[b]<div[/b] [highlight][maroon]id[/maroon][teal]=[/teal][green][i]"guano"[/i][/green][/highlight][b]></div>[/b]

Feherke.
 
Upvote 0 Downvote
Hi Feherke,

I see, and where do i need to put the <div id="guano"></div> part into the html code?

I mean bitween which two lines?

Thanks,
Gergely
 
Upvote 0 Downvote
Should have researched that widget a bit more, and realized that. The form error however, I just never saw.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Hi

Gergely said:
I see, and where do i need to put the <div id="guano"></div> part into the html code?
Click to expand...
Wherever you want the Twitter box to appear.

In case you already have an element in your page dedicated to contain the twitts, no need to add that [tt]div[/tt], just your element's [tt]id[/tt] ( give it one if has none ) to the constructor.

Feherke.
 
Upvote 0 Downvote
i see, but i am not an expert in this programming.

So is it enough if i add the id guano, and then the constructor like this one?

}).render(guano).setUser(userName).start();

Thanks,
Gergely
 
Upvote 0 Downvote
Hi

Ok, let us cut of the misunderstandings. Here is the complete document I used for testing ( with minor additional changes to correct some syntax errors ) :
HTML: 
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html[/b] [maroon]lang[/maroon][teal]=[/teal][green][i]"en"[/i][/green][b]>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]charset[/maroon][teal]=[/teal][green][i]"utf-8"[/i][/green][b]>[/b]
[b]<title></title>[/b]
[gray]<!--[if IE]>[/gray]
[gray]<script src="[URL unfurl="true"]http://html5shim.googlecode.com/svn/trunk/html5.js"></script-->[/URL][/gray]
<![endif]-->
[b]<script>[/b]
[b]function[/b] [COLOR=darkgoldenrod]checkData[/color][teal]()[/teal]
[teal]{[/teal]
  [COLOR=darkgoldenrod]runWidget[/color][teal]([/teal]document[teal].[/teal]me[teal].[/teal]D1[teal].[/teal]value[teal])[/teal]
[teal]}[/teal]
window[teal].[/teal]onload[teal]=[/teal]checkData
[b]</script>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<div>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"me"[/i][/green][b]>[/b]
[b]<select[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"D1"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"checkData()"[/i][/green][b]>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"Viptelekom"[/i][/green][b]>[/b]Viptelekom[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"Twitter"[/i][/green][b]>[/b]Twitter[b]</option>[/b]
[b]</select>[/b]
[b]</form>[/b]
[b]</div>[/b]
[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"guano"[/i][/green][b]></div>[/b]
[b]<script[/b] [maroon]charset[/maroon][teal]=[/teal][green][i]"utf-8"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://widgets.twimg.com/j/2/widget.js"[/URL][/i][/green][b]></script>[/b]
[b]<script>[/b]
[b]function[/b] [COLOR=darkgoldenrod]runWidget[/color][teal]([/teal]userName[teal])[/teal]
[teal]{[/teal]
  [b]new[/b] TWTR[teal].[/teal][COLOR=darkgoldenrod]Widget[/color][teal]([/teal][teal]{[/teal]
    version[teal]:[/teal] [purple]2[/purple][teal],[/teal]
    type[teal]:[/teal] [green][i]'profile'[/i][/green][teal],[/teal]
    rpp[teal]:[/teal] [purple]4[/purple][teal],[/teal]
    interval[teal]:[/teal] [purple]30000[/purple][teal],[/teal]
    width[teal]:[/teal] [green][i]'auto'[/i][/green][teal],[/teal]
    height[teal]:[/teal] [purple]591[/purple][teal],[/teal]
    id[teal]:[/teal] [green][i]'guano'[/i][/green][teal],[/teal]
    theme[teal]:[/teal] [teal]{[/teal]
      shell[teal]:[/teal] [teal]{[/teal]
        background[teal]:[/teal] [green][i]'#333333'[/i][/green][teal],[/teal]
        color[teal]:[/teal] [green][i]'#ffffff'[/i][/green]
      [teal]}[/teal][teal],[/teal]
      tweets[teal]:[/teal] [teal]{[/teal]
        background[teal]:[/teal] [green][i]'#000000'[/i][/green][teal],[/teal]
        color[teal]:[/teal] [green][i]'#ffffff'[/i][/green][teal],[/teal]
        links[teal]:[/teal] [green][i]'#eb0707'[/i][/green]
      [teal]}[/teal]
    [teal]}[/teal][teal],[/teal]
    features[teal]:[/teal] [teal]{[/teal]
      scrollbar[teal]:[/teal] [b]false[/b][teal],[/teal]
      loop[teal]:[/teal] [b]false[/b][teal],[/teal]
      live[teal]:[/teal] [b]false[/b][teal],[/teal]
      behavior[teal]:[/teal] [green][i]'all'[/i][/green]
    [teal]}[/teal]
  [teal]}[/teal][teal]).[/teal][COLOR=darkgoldenrod]render[/color][teal]().[/teal][COLOR=darkgoldenrod]setUser[/color][teal]([/teal]userName[teal]).[/teal][COLOR=darkgoldenrod]start[/color][teal]();[/teal]
[teal]}[/teal]
[b]</script>[/b]
[b]</body>[/b]
[b]</html>[/b]


Feherke.
 
Upvote 0 Downvote
Thank you for both of your help, finally it is working well!

Do you know if i can use in some way with html frames the drop down list and then to show the tweets in a separate frame?

Now it is working in one frame only, but i think the drop down box has to be within the same frame.

Thank you,
Gergely
 
Upvote 0 Downvote
Hi

Personally I think this is a bad idea. Anyway, you can easily put the [tt]form[/tt] and the widget in separate frames as long as they comply with the Same origin policy.
Code: 
[red]<!DOCTYPE[/red] [maroon]HTML[/maroon] [maroon]PUBLIC[/maroon] [green][i]"-//W3C//DTD HTML 4.01 Frameset//EN"[/i][/green] [green][i]"[URL unfurl="true"]http://www.w3.org/TR/html4/frameset.dtd"[/URL][/i][/green][red]>[/red]
[b]<html[/b] [maroon]lang[/maroon][teal]=[/teal][green][i]"en"[/i][/green][b]>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]http-equiv[/maroon][teal]=[/teal][green][i]"content-type"[/i][/green] [maroon]content[/maroon][teal]=[/teal][green][i]"text/html; charset=utf-8"[/i][/green][b]>[/b]
[b]<title></title>[/b]
[b]<frameset[/b] [maroon]cols[/maroon][teal]=[/teal][green][i]"*,*"[/i][/green][b]>[/b]
[b]<frame[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"form.htm"[/i][/green][b]>[/b]
[b]<frame[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"widget"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"widget.htm"[/i][/green][b]>[/b]
[b]</frameset>[/b]
[b]</html>[/b]
Code: 
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html[/b] [maroon]lang[/maroon][teal]=[/teal][green][i]"en"[/i][/green][b]>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]charset[/maroon][teal]=[/teal][green][i]"utf-8"[/i][/green][b]>[/b]
[b]<title></title>[/b]
[b]<script>[/b]
[b]function[/b] [COLOR=darkgoldenrod]checkData[/color][teal]()[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]top[teal].[/teal]widget [teal]&&[/teal] top[teal].[/teal]widget[teal].[/teal]runWidget[teal])[/teal] top[teal].[/teal]widget[teal].[/teal][COLOR=darkgoldenrod]runWidget[/color][teal]([/teal]document[teal].[/teal]me[teal].[/teal]D1[teal].[/teal]value[teal])[/teal]
  [b]else[/b] [COLOR=darkgoldenrod]setTimeout[/color][teal]([/teal]checkData[teal],[/teal][purple]1000[/purple][teal])[/teal]
[teal]}[/teal]
window[teal].[/teal]onload[teal]=[/teal]checkData
[b]</script>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<div>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]"#"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"me"[/i][/green][b]>[/b]
[b]<select[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"D1"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"checkData()"[/i][/green][b]>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"Viptelekom"[/i][/green][b]>[/b]Viptelekom[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"Twitter"[/i][/green][b]>[/b]Twitter[b]</option>[/b]
[b]</select>[/b]
[b]</form>[/b]
[b]</div>[/b]
[b]</body>[/b]
[b]</html>[/b]
Code: 
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html[/b] [maroon]lang[/maroon][teal]=[/teal][green][i]"en"[/i][/green][b]>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]charset[/maroon][teal]=[/teal][green][i]"utf-8"[/i][/green][b]>[/b]
[b]<title></title>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"guano"[/i][/green][b]></div>[/b]
[b]<script[/b] [maroon]charset[/maroon][teal]=[/teal][green][i]"utf-8"[/i][/green] [maroon]src[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://widgets.twimg.com/j/2/widget.js"[/URL][/i][/green][b]></script>[/b]
[b]<script>[/b]
[b]function[/b] [COLOR=darkgoldenrod]runWidget[/color][teal]([/teal]userName[teal])[/teal]
[teal]{[/teal]
  [b]new[/b] TWTR[teal].[/teal][COLOR=darkgoldenrod]Widget[/color][teal]([/teal][teal]{[/teal]
    version[teal]:[/teal] [purple]2[/purple][teal],[/teal]
    type[teal]:[/teal] [green][i]'profile'[/i][/green][teal],[/teal]
    rpp[teal]:[/teal] [purple]4[/purple][teal],[/teal]
    interval[teal]:[/teal] [purple]30000[/purple][teal],[/teal]
    width[teal]:[/teal] [green][i]'auto'[/i][/green][teal],[/teal]
    height[teal]:[/teal] [purple]591[/purple][teal],[/teal]
    id[teal]:[/teal] [green][i]'guano'[/i][/green][teal],[/teal]
    theme[teal]:[/teal] [teal]{[/teal]
      shell[teal]:[/teal] [teal]{[/teal]
        background[teal]:[/teal] [green][i]'#333333'[/i][/green][teal],[/teal]
        color[teal]:[/teal] [green][i]'#ffffff'[/i][/green]
      [teal]}[/teal][teal],[/teal]
      tweets[teal]:[/teal] [teal]{[/teal]
        background[teal]:[/teal] [green][i]'#000000'[/i][/green][teal],[/teal]
        color[teal]:[/teal] [green][i]'#ffffff'[/i][/green][teal],[/teal]
        links[teal]:[/teal] [green][i]'#eb0707'[/i][/green]
      [teal]}[/teal]
    [teal]}[/teal][teal],[/teal]
    features[teal]:[/teal] [teal]{[/teal]
      scrollbar[teal]:[/teal] [b]false[/b][teal],[/teal]
      loop[teal]:[/teal] [b]false[/b][teal],[/teal]
      live[teal]:[/teal] [b]false[/b][teal],[/teal]
      behavior[teal]:[/teal] [green][i]'all'[/i][/green]
    [teal]}[/teal]
  [teal]}[/teal][teal]).[/teal][COLOR=darkgoldenrod]render[/color][teal]().[/teal][COLOR=darkgoldenrod]setUser[/color][teal]([/teal]userName[teal]).[/teal][COLOR=darkgoldenrod]start[/color][teal]();[/teal]
[teal]}[/teal]
[b]</script>[/b]
[b]</body>[/b]
[b]</html>[/b]
Note that [tt]frame[/tt]s are deprecated and they were removed from HTML 5. So I made the [tt]frameset[/tt] document HTML 4.01 to keep it standard compliant. Again, I think the
use of [tt]frame[/tt]s is a bad idea.


Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
381
Kennelbloke
Kennelbloke
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
266
nanbread
nanbread
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
482
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
275
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top