I am trying to create two pivot tables using pivottable.js to show payroll hours
the desired result would be like this:
Payroll for location 1
foo
bar
biz
Payroll for location 2
bad
bash
bin
obviously in the pivottable.js display form which I cannot recreate here
however, the pivottable only shows one for the page and it is either location 1 or location 2
I dont know enough about javascript or html to understand what I am doing wrong here, it seems like a simple problem that I just am not seeing. this is all within a php file.
here is the code I am using for the php file
$pageStart = '<html>
<head>
<title>Payroll</title>
<!-- c3 and d3 scripts and jquery -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<!-- PivotTable.js -->
<link rel="stylesheet" type="text/css" href="./jquery/pivottable/dist/pivot.css">
<script type="text/javascript" src="./jquery/pivottable/dist/pivot.js"></script>
<script type="text/javascript" src="./jquery/c3_renderers.js"></script>
<style>
body {font-family: Verdana;}
</style>
<!-- mobile support -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<p> Location 1 payroll hours
<script type="text/javascript">
// This loads the payroll hours for location 1
// no derived attributes
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$(function(NB){NB,
$("#output").pivotUI(
' . $json . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
});
</script>
<br>
<p> location 2 Payroll Hours
<script>
$(function(SV){
$("#output").pivotUI(SV,
' . $json2 . ',
{rows: ["Name"],
cols: ["Hours_type", "Date"],
aggregatorName: "Sum",
vals: ["Hours"],}
);
})
</script>
<div id="output" style="margin: 30px;"></div>
</body>
</html>';
print $pageStart;
the $json and $json2 are mysql functions that pull the data for the pivottable to display
If you use $("#output") for both tables, then one will overwrite the other.
You would need two different tags with different ids like :
Reference first table in output and second in output1
Related
Is it possible to create several text editor cells within a single page? My desired outcome is to have a button that when clicked allows the user to add new cells of code, where the user can write and later run. Similar to Jupyter notebook. The editor itself is imported from the ace.js library.
For that, I think I need some function add_editor(parent_div) that adds a new text editor to a div that is given as a parameter. ( Which I have failed to implement )
My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load.
I'm not so good with handling with the DOM (especially without React), so even if the solution seems obvious to you, it might not to me.
This is last working version of the code that I have so far
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div class="container" style="">
<div id="editor">
<!-- the div containing the code, has the id "editor" !-->
def print_something():
print(a)
</div>
</div>
</div>
<div class="col-3">
empty column
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
function configure_editor(){
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
}
configure_editor()
</script>
</body>
</html>
Help will be much appreciated!
Edit: I need to solve this in Javascript or Jquery, without React.
A cleaner method is to assign an editor to each instance using your own structure. With jquery:
<div id="instance0"></div><div id="instance1"></div>
<script>
var instances[];
var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);
function newInstance($rootElement){
var instance = {};
instance.id = $rootElement.attr('id');
instance.$root = $rootElement;
instance.editor = ace.edit($rootElement[0]);
instance.editor.instance = instance;
instances.push(instance);
}
</script>
This gives you a 1 to 1 instance to editor relationship with backpointers. It will save you much angst in the future. You can just flip in sessions and keep the editors static.
I think I have found somewhat of a solution on my own with jQuery, even though it seems messy.
Each time a new editor will be added with increasing ids, i.e : "editor0", "editor1", "editor2", and so on.
Here is the full code
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div id="editors_container">
</div>
</div>
<div class="col-3">
<button id="add_editor">Add a new editor</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
existing_editors = [];
$(document).ready(function(){
$("#add_editor").click(function(){
console.log("reached here!")
let editor_id = "editor"+existing_editors.length;
$newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
$("#editors_container").append($newDiv);
let editor = ace.edit(editor_id);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
existing_editors.push(editor);
});
});
</script>
</body>
</html>
I'm very new to coding and learning as I go.
My current conundrum: trying to create a multi-select list where the first three options selected (think course subjects, for example) would be free, but every additional selection thereon would carry a $200 fee, and the total would be displayed. Example:
Math - $0
English - $0
History - $0
Geography - $200
Art - $200
...until the end of the list. There's no limitation on how many options the use can select and no tie-in to a specific options; the first three are free regardless of which option is chosen.
I've been playing around with the W3 list code below because it fits the style of the rest of the form:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"
});
listObj.appendTo('#select');
</script>
</body>
</html>
You can count how many items are in the listObj.value from tagging and removed events:
#priceList
{
white-space: pre;
}
#priceList
{
display: inline-flex;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<h2> Select the Desired Activites </h2>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<div class="priceListBox">Price per item: <span id="priceList"></span></div>
<div>Price total: <span id="price">0</span></div>
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
//event listeners
tagging: getPrice, //item added
removed: getPrice //item removed
});
listObj.appendTo('#select');
//event handler
function getPrice()
{
let price = 0;
if (listObj.value.length > 3)
price = (listObj.value.length - 3) * 200;
//display total price
document.getElementById("price").textContent = price;
let priceList = [];
for(let i = 0; i < listObj.value.length; i++)
{
priceList.push(listObj.value[i] + " = " + (i > 2 ? 200 : 0));
}
//display prices for each item
document.getElementById("priceList").textContent = priceList.join("\n");
}
</script>
</body>
</html>
I don't know if this is what you want, but you could do an event listener on the tagging event, and then do the calculation with the selected tag length.
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"});
// Listen on tagging event and execute the function to calculate.
listObj.tagging = function () {
var selectedTags = listObj.value;
if (selectedTags.length > 3) {
var total = (selectedTags.length - 3) * 200;
alert('$' + total);
}
}
listObj.appendTo('#select');
I hope this helps you getting on your way.
From the documentation, you can read the following about the dropdown, and it's listObj:
change
Event
Triggers when an item in a popup is selected or when the model value is changed by user. Use change event to Configure the Cascading DropDownList
They also provide an example. So I added that to your code, by adding an 'change' property to your listObj, and then print the cost through valueChanged().
NOTE: you need to select some activities, and then click somewhere else that's not the dropdown to see the price.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
// ADDED
change: (event) => { valueChanged(event.value) }
});
listObj.appendTo('#select');
// ADDED
function valueChanged(valueArr) {
let price = 0,
maxFreeActivities = 3,
costPerActivity = 200,
numberOfSelectedActivities = valueArr.length;
if (numberOfSelectedActivities > maxFreeActivities) {
price = (numberOfSelectedActivities - maxFreeActivities) * costPerActivity;
}
console.log('price:', price);
}
</script>
</body>
</html>
My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts
I have a tableau workbook with
2 sheets
a bar chart (sheet called BAR)
a pie chart (sheet called PIE)
2 Dashboards
the bar graph full screen (sheet called FULLBAR)
the pie chart full screen (sheet called FULLPIE)
Now im trying to load them into an HTML page with buttons to switch between the dashboards. I followed the tutorial and it pulls in the initial dashboard (FULLBAR) just fine, however the switching of dashboards is where I run into a problem.
When clicking a link to switch i get this error in the console
Error: Sheet is not found in Workbook
Here is my code (server obviously XXXX'ed out)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Proof of Concept</title>
<meta name="description" content="Proof of Concept">
<meta name="author" content="thisDude">
<script type="text/javascript" src="http://xxx.xxx.xxx.xxx:xxxx/javascripts/api/tableau-2.0.0.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span3 col-xs-6'><img style="height:39px; width:100px;" src="logo.jpg" ></div>
<h2 class='col-xs-6 span7 pagination-centered'>Proof of Concept</h2>
</div>
<div class='row'>
<h3 class='offset3 span7 pagination-centered' id='sheetName'></h3>
</div>
<div class='row'>
<!-- All of our work will happen here -->
<!-- Viz located at http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR -->
<ul id = 'menu' class='nav nav-list offset1 span2'>
<!-- This is the menu where we will add all of our buttons. -->
<li class='nav-header'>Switching Views</li>
<li><a onClick="switchView('FULLBAR')">Bar Chart</a></li>
<li><a onClick="switchView('FULLPIE')">Pie Chart</a></li>
</ul>
<div id='tableauViz'></div>
<script>
</script>
<!-- This is the end of the section where we will do our work. -->
</div>
</div>
</body>
</html>
and my app.js code:
window.onload=function() {
var vizDiv = document.getElementById('viz');
var vizURL = "http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR_1";
var options = {
width: '100%',
height: '500px',
hideToolbar: true,
hideTabs: true
};
viz = new tableauSoftware.Viz (vizDiv, vizURL, options);
};
function switchView(sheetName) {
workbook = viz.getWorkbook();
workbook.activateSheetAsync(sheetName);
console.log(sheetName);
console.log(workbook + " workbook var");
console.log(viz.getWorkbook() + " viz.getWorkbook var");
}
Found out the answer --
I initially had published to the server with the option "Show Sheets as Tabs" DESELECTED. My javascript was also using hideTabs: true.
Doing this causes the JS api to not know the names of the sheets.
By selecting the option during publishing "Show Sheets as Tabs", the API was able to correctly switch visualizations. The js option "hideTabs: true" still keeps the visual tabs hidden.
I have three sheets in my tableau public account. I have created two buttons and describe as java script file as below.
function switchView(sheetName) {
var workbook = viz.getWorkbook();
workbook.activateSheetAsync(sheetName);
}
`
No action is performed after clicking on button.
I want twitter updates within 10 seconds of interval of dynamic users.I have written following code but it is taking only query and user name as "microsoft", others name are not accepted. My code is as below.
<html>
<head>
<!-- DC Twitter CSS -->
<link href="twitter/jquery.tweet.css" rel="stylesheet">
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="twitter/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Twitter JS -->
<script src="twitter/jquery.tweet.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function ($) {
$(".query").tweet({
username: "microsoft",
avatar_size: 16, // avatar size in px
count: 10, // how many tweets to show
query: "#microsoft", // search query
loading_text: "searching twitter...",
refresh_interval: 10 // seconds before next refresh
});
});
</script>
</head>
<body>
<div id="query" class="query" style="width:80%;"></div>
</body>
</html>
I don't know what is happening inside.Suggestions are welcomed. Thanks for any help.
The username can be blank, you just need to update the query parameter to change the results, this could also be dynamic, what are you trying to do exactly?
eg: for fred it would be:
<html>
<head>
<!-- DC Twitter CSS -->
<link href="twitter/jquery.tweet.css" rel="stylesheet">
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <!-- (do not call twice) -->
<!-- DC Twitter JS -->
<script src="twitter/jquery.tweet.js" charset="utf-8"></script>
<script>
jQuery(function ($) {
$(".query").tweet({
username: "",
avatar_size: 16, // avatar size in px
count: 10, // how many tweets to show
query: "fred", // search query
loading_text: "searching twitter...",
refresh_interval: 10 // seconds before next refresh
});
});
</script>
</head>
<body>
<div id="query" class="query" style="width:80%;"></div>
</body>
</html>
for hashtag fred (#fred) it would be:
<html>
<head>
<!-- DC Twitter CSS -->
<link href="twitter/jquery.tweet.css" rel="stylesheet">
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <!-- (do not call twice) -->
<!-- DC Twitter JS -->
<script src="twitter/jquery.tweet.js" charset="utf-8"></script>
<script>
jQuery(function ($) {
$(".query").tweet({
username: "",
avatar_size: 16, // avatar size in px
count: 10, // how many tweets to show
query: "#fred", // search query
loading_text: "searching twitter...",
refresh_interval: 10 // seconds before next refresh
});
});
</script>
</head>
<body>
<div id="query" class="query" style="width:80%;"></div>
</body>
</html>
Here is the jsFiddle: http://jsfiddle.net/MNebj/