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>
Related
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
Hay I have a problem with sorting divs from createElement function.
Problem:
I create divs from database-items which are align in row (latest item on the end)
What I want:
Display the Items in reversed direction. The latest item added to the database should appear as first item in the stream (like a newsstream on facebook).
Question:
How can I change just the direction the divs are loaded/created?
Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers).
I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids
I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue.
Check out my Code:
//create firebase reference
var dbRef = new Firebase("….com/");
var contactsRef = dbRef.child('contacts')
//load all contacts
contactsRef.on("child_added", function(snap) {
//console.log(snap.val())
snap.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
var divCount = 0;
//create divs from database-elements
var card = document.createElement('div');
card.id = 'div'+divCount;
card.setAttribute('class', 'linkprev');
document.body.appendChild(card);
var cardtitle = document.createElement('div');
cardtitle.setAttribute('class', 'cardtitle');
cardtitle.innerHTML = childData;
card.appendChild(cardtitle);
document.guteUrls.execute();
divCount++;
console.log(event);
//linkify plugin to convert div-elements (strings) to hyperlinks
$('div').linkify();
$('#sidebar').linkify({
target: "_blank"
});
});
});
//save contact
document.querySelector(".addValue").addEventListener("click", function( event ) {
event.preventDefault();
if( document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){
contactsRef.push({
name: document.querySelector('#url').value,})
contactForm.reset();}
else {
alert('Oops, seems like an error…');
}
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>frontendpublishing-test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
<link href="css/flexboxgrid.min.css" rel="stylesheet">
<style type="text/css">
#contacts p,
#contacts p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Titel h1</h1>
<hr/>
<div class="row">
<div class="col-md-6">
<form method="post" name="contactForm">
<div class="form-group">
<input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input">
<button type="submit" class="btn btn-primary addValue">Submit</button>
</form>
<!-- <script>
$document.ready(function){
document.getElementsByClassName('linkified');
{console.log("linkified")};
};
</script>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="script.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script async src="https://guteurls.de/guteurls.js"
selector='.linkprev'
gif="http://loading.io/assets/img/default-loader.gif"
callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
callback="(function($){console.log('finished')})"
init="(function($){console.log('JS will start to search URLs now')})"
></script>
</body>
</html>
Thanks for helping :)
since you are using jquery instead of
document.body.appendChild(card);
use
$('body').prepend($(card))
you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like
$('#elementid').prepend($(card))
1.Why not query them descendent from db? :))
2.
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
I am a c programmer and trying to call jquery function from html.
For example from open source I am having below, I would like to make a variable wd accessible to webdriver-app.js
A.html:
<html>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="keyboard.css" rel="stylesheet">
<script src="jquery.keyboard.js"></script>
<script src="webdriver.js"></script>
<script src="base64-arraybuffer.js"></script>
<script src="FileSaver.js"></script>
<script src="hammer.min.js"></script>
<script src="webdriver-app.js"></script>
</head>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebDriverUrlPortChange()" onkeyup="wd.onWebDriverUrlPortChange()"/>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebPageChange()" onkeyup="wd.onWebPageChange()"/>
webdriver-app.js contains:
....
WebDriverJsController.prototype.onWebPageChange = function() {
this.view.updateSessionDepControls();
};
document.addEventListener("DOMContentLoaded", function(event) {
window.wd = new WebDriverJsController();
});
....
Currently, changing above wd.onWebPageChange() to window.wd.onWebPageChange() gives me undefined or null error. What could be wrong in above simplified code?
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
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/