I have the following code to display in Indian numbering system.
var x=125465778;
var res= x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
Am getting this output :125,465,778.
I need output like this: 12,54,65,778.
Please help me to sort out this problem .
i'm late but i guess this will help :)
you can use Number.prototype.toLocaleString()
Syntax
numObj.toLocaleString([locales [, options]])
var number = 123456.789;
// India uses thousands/lakh/crore separators
document.getElementById('result').innerHTML = number.toLocaleString('en-IN');
// → 1,23,456.789
document.getElementById('result1').innerHTML = number.toLocaleString('en-IN', {
maximumFractionDigits: 2,
style: 'currency',
currency: 'INR'
});
// → ₹1,23,456.79
<div id="result"></div>
<div id="result1"></div>
For Integers:
var x=12345678;
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
alert(res);
Live Demo
For float:
var x=12345652457.557;
x=x.toString();
var afterPoint = '';
if(x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'),x.length);
x = Math.floor(x);
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
alert(res);
Live Demo
Simple way to do,
1. Direct Method using LocalString()
(1000.03).toLocaleString()
(1000.03).toLocaleString('en-IN') # number followed by method
2. using Intl - Internationalization API
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.
eg: Intl.NumberFormat('en-IN').format(1000)
3. Using Custom Function:
function numberWithCommas(x) {
return x.toString().split('.')[0].length > 3 ? x.toString().substring(0,x.toString().split('.')[0].length-3).replace(/\B(?=(\d{2})+(?!\d))/g, ",") + "," + x.toString().substring(x.toString().split('.')[0].length-3): x.toString();
}
console.log("0 in indian format", numberWithCommas(0));
console.log("10 in indian format", numberWithCommas(10));
console.log("1000.15 in indian format", numberWithCommas(1000.15));
console.log("15123.32 in indian format", numberWithCommas(15123.32));
if your input is 10000.5,
numberWithCommas(10000.5)
You will get output like this, 10,000.5
For integers only no additional manipulations needed.
This will match every digit from the end, having 1 or more double digits pattern after, and replace it with itself + ",":
"125465778".replace(/(\d)(?=(\d\d)+$)/g, "$1,");
-> "1,25,46,57,78"
But since we want to have 3 in the end, let's state this explicitly by adding extra "\d" before match end of input:
"125465778".replace(/(\d)(?=(\d\d)+\d$)/g, "$1,");
-> "12,54,65,778"
Given a number to below function, it returns formatted number in Indian format of digit grouping.
ex: input: 12345678567545.122343
output: 1,23,45,67,85,67,545.122343
function formatNumber(num) {
input = num;
var n1, n2;
num = num + '' || '';
// works for integer and floating as well
n1 = num.split('.');
n2 = n1[1] || null;
n1 = n1[0].replace(/(\d)(?=(\d\d)+\d$)/g, "$1,");
num = n2 ? n1 + '.' + n2 : n1;
console.log("Input:",input)
console.log("Output:",num)
return num;
}
formatNumber(prompt("Enter Number",1234567))
https://jsfiddle.net/scLtnug8/1/
I am little late in the game.
But here is the implicit way to do this.
var number = 3493423.34;
console.log(new Intl.NumberFormat('en-IN', { style: "currency", currency: "INR" }).format(number));
if you dont want currency symbol, use it like this
console.log(new Intl.NumberFormat('en-IN').format(number));
The easiest way is just to use Globalize plugin (read more about it here and here):
var value = 125465778;
var formattedValue = Globalize.format(value, 'n');
Try like below, I have found a number formatter Plugin here : Java script number Formatter
By using that i have done the below code, It works fine, Try this, It will help you..
SCRIPT :
<script src="format.20110630-1100.min.js" type="text/javascript"></script>
<script>
var FullData = format( "#,##0.####", 125465778)
var n=FullData.split(",");
var part1 ="";
for(i=0;i<n.length-1;i++)
part1 +=n[i];
var part2 = n[n.length-1]
alert(format( "#0,#0.####", part1) + "," + part2);
</script>
Inputs :
1) 125465778
2) 1234567.89
Outputs :
1) 12,54,65,778
2) 12,34,567.89
Simply use https://osrec.github.io/currencyFormatter.js/
Then all you need is:
OSREC.CurrencyFormatter.format(2534234, { currency: 'INR' });
// Returns ₹ 25,34,234.00
These will format the value in the respective systems.
$(this).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
For US number system (millions & billions)
$(this).replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');
For Indian number system (lakhs & crores)
This function can handle float value properly just addition to another answer
function convertNumber(num) {
var n1, n2;
num = num + '' || '';
n1 = num.split('.');
n2 = n1[1] || null;
n1 = n1[0].replace(/(\d)(?=(\d\d)+\d$)/g, "$1,");
num = n2 ? n1 + '.' + n2 : n1;
n1 = num.split('.');
n2 = (n1[1]) || null;
if (n2 !== null) {
if (n2.length <= 1) {
n2 = n2 + '0';
} else {
n2 = n2.substring(0, 2);
}
}
num = n2 ? n1[0] + '.' + n2 : n1[0];
return num;
}
this function will convert all function to float as it is
function formatAndConvertToFloatFormat(num) {
var n1, n2;
num = num + '' || '';
n1 = num.split('.');
if (n1[1] != null){
if (n1[1] <= 9) {
n2 = n1[1]+'0';
} else {
n2 = n1[1]
}
} else {
n2 = '00';
}
n1 = n1[0].replace(/(\d)(?=(\d\d)+\d$)/g, "$1,");
return n1 + '.' + n2;
}
Improvised Slopen's approach above, Works for both int and floats.
function getIndianFormat(str) {
str = str.split(".");
return str[0].replace(/(\d)(?=(\d\d)+\d$)/g, "$1,") + (str[1] ? ("."+str[1]): "");
}
console.log(getIndianFormat("43983434")); //4,39,83,434
console.log(getIndianFormat("1432434.474")); //14,32,434.474
Based on Nidhinkumar's question i have checked the above answers and
while handling negative numbers the output won't be correct for eg: -300 it should display as -300 but the above answers will display it as -,300 which is not good so i have tried with the below code which works even during the negative cases.
var negative = input < 0;
var str = negative ? String(-input) : String(input);
var arr = [];
var i = str.indexOf('.');
if (i === -1) {
i = str.length;
} else {
for (var j = str.length - 1; j > i; j--) {
arr.push(str[j]);
}
arr.push('.');
}
i--;
for (var n = 0; i >= 0; i--, n++) {
if (n > 2 && (n % 2 === 1)) {
arr.push(',');
}
arr.push(str[i]);
}
if (negative) {
arr.push('-');
}
return arr.reverse().join('');
Improvising #slopen's answer with decimal support and test cases.
Usage: numberToIndianFormat(555555.12) === "5,55,555.12"
utils.ts
export function numberToIndianFormat(x: number): string {
if (isNaN(x)) {
return "NaN"
} else {
let string = x.toString();
let numbers = string.split(".");
numbers[0] = integerToIndianFormat(parseInt(numbers[0]))
return numbers.join(".");
}
}
function integerToIndianFormat(x: number): string {
if (isNaN(x)) {
return "NaN"
} else {
let integer = x.toString();
if (integer.length > 3) {
return integer.replace(/(\d)(?=(\d\d)+\d$)/g, "$1,");
} else {
return integer;
}
}
}
utils.spec.ts
describe('numberToIndianFormat', () => {
it('nan should output NaN', () => {
expect(numberToIndianFormat(Number.NaN)).toEqual("NaN")
});
describe('pure integer', () => {
it('should leave zero untouched', () => {
expect(numberToIndianFormat(0)).toEqual("0")
});
it('should leave simple numbers untouched', () => {
expect(numberToIndianFormat(10)).toEqual("10")
});
it('should add comma at thousand place', () => {
expect(numberToIndianFormat(5555)).toEqual("5,555")
});
it('should add comma at lakh place', () => {
expect(numberToIndianFormat(555555)).toEqual("5,55,555")
});
it('should add comma at crore place', () => {
expect(numberToIndianFormat(55555555)).toEqual("5,55,55,555")
});
});
describe('with fraction', () => {
it('should leave zero untouched', () => {
expect(numberToIndianFormat(0.12)).toEqual("0.12")
});
it('should leave simple numbers untouched', () => {
expect(numberToIndianFormat(10.12)).toEqual("10.12")
});
it('should add comma at thousand place', () => {
expect(numberToIndianFormat(5555.12)).toEqual("5,555.12")
});
it('should add comma at lakh place', () => {
expect(numberToIndianFormat(555555.12)).toEqual("5,55,555.12")
});
it('should add comma at crore place', () => {
expect(numberToIndianFormat(55555555.12)).toEqual("5,55,55,555.12")
});
});
})
Indian money format function
function indian_money_format(amt)
{
amt=amt.toString();
var lastThree = amt.substring(amt.length-3);
var otherNumbers = amt.substring(0,amt.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
var result = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
alert(result)
return result;
}
indian_money_format(prompt("Entry amount",123456))
Related
How to insert a auto-incrementing id from 1 before info.name in jQuery? I use below code to get aggregated data, for example, each quessionId has many related reasons. Below is my partial code of .js code in jQuery:
function fmtQuestionsByID(id,callback){
if(!DATA.questions[id] || !$('#card_'+id) )return;
var project = DATA.projects[DATA.questions[id].projectId];
if(!project)return;
var issueQuestionLists = DATA.alltags.reduce(function(a,b){
if(a[b['quessionId']]) {
a[b['quessionId']].push({name:b['name'],color:b['color'],description:b['description'],reason:b['reason'],question:b['question'],issueId:b['issueId'],department:b['department'],_id:b['quessionId']})
} else{
a[b['quessionId']] = [{name:b['name'],color:b['color'],description:b['description'],reason:b['reason'],question:b['question'],issueId:b['issueId'],department:b['department'],_id:b['quessionId']}]
}
return a;
},{});
for(var i=0;i < DATA.questions[id].tags.length;i++){
var lid = DATA.questions[id].tags[i];
for(var l in issueQuestionLists){
var lb = issueQuestionLists[l]
for(var c=0;c< lb.length;c++){
var lc = lb[c];
if(lc._id == lid){
var info = lc;
console.log('info', info);
$('.tags_question').append('['+info.name+']' + info.description + '。' + 'Reason: '+info.reason+ '。' ||'[no data]' );
}
}
}
}
}
And I use below html to get above data
<div id="questioninfo">
<span class="tags_question"></span>
</div>
In the console, I do have those dictionaries, but why the page only get one dict?
Thanks so much for any help.
Thanks so much for Swati's help, to change .html to .append.
You can define a variable which will store the value of count and then whenever you need to print it first increment it and then add that as well with the data which you are already appending .So your code will look like below :
var count = 0; //declare this
for (var i = 0; i < DATA.questions[id].tags.length; i++) {
//..other codes
var lc = lb[c];
if (lc._id == lid) {
count++; //increment
var info = lc;
console.log('info', info);
//add with other datas
$('.tags_question').append(count + '[' + info.name + ']' + info.description + '。' + 'Reason: ' + info.reason + '。' || '[no data]');
}
}
I have the following table in vue component.
when click the download button what I need is to download an excel file including multiple data of a Spare Part. So the excel file looks like follows:
<download-excel v-if="spare_parts.length"
class="btn btn-view"
:data="json_data"
:fields="json_fields"
:title="['Equipments - Spare Part - '+ spare_part.name,'' ]"
worksheet="My Worksheet"
:name="'Equipments - Spare Part - '+spare_part.name+'.xls'">
<i class="fa fa-download sky-fa" title="Download Report" #click="getReportDetails(spare_part.sap)"></i>
</download-excel>
json_fields: {
'Equipment - Serial Number': {
callback: (value) => {
return `${value.maintenance.equipment.serial_number}`;
}
},
'Customer Name': {
callback: (value) => {
return `${value.maintenance.equipment.technical_customer.name}`;
}
},
'Unit Price (LKR) - Without VAT': {
callback: (value) => {
let final = '';
let VAT = '';
let decimalCount = 2;
let decimal = ".";
let thousands = ",";
let amount = `${value.cost}`;
try {
let decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
// return final;
} catch (e) {
console.log("Errors " + e);
}
return final;
}
},
'Unit Price (LKR) - With VAT': {
callback: (value) => {
let final = '';
let VAT = '';
VAT = (`${value.vat}` == 1) ? `${value.cost + (value.cost * (value.vat_percentage / 100))}` : '-';
if (`${value.vat}` == 1) {
let decimalCount = 2;
let decimal = ".";
let thousands = ",";
let amount = VAT;
try {
let decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
final = negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "")
} catch (e) {
console.log("Errors " + e);
}
} else {
final = '-';
}
return final;
}
},
},
json_data: [],
json_meta: [
[
{
'key': 'charset',
'value': 'utf-8'
}
]
],
when clicking the icon it triggers the getReportDetails(spare_part.sap) function.
getReportDetails(name){
axios.get('/technical/sparepart/get-report/'+name)
.then(function (response) {
this.json_data = response.data;
if (this.json_data.length == 0) {
alert('No Data in this Spare Part');
}
}.bind(this))
.catch(error => {
console.log("Errors : " + error);
});
},
So the data which need to display inside the excel sheet is getting from this function by calling the following method in the SparePartController:
public function getReportDetails($name)
{
$maintenance_spare_parts = MaintenanceSparePart::with('maintenance.equipment.technicalCustomer')->where('spare_part', $name)->get();
return $maintenance_spare_parts;
}
I have 2 questions here.
When I click on the download icon downloading started at the second time click. But after that every next click the downloading is happening. Why always the second time?
After I download I can see the correct data in the excel sheet. But when I click the download icon in another row without page refreshing I'm getting the previous data in my excel file. What's the reason for that?
Can anyone point me where I did wrong in this case?
This is my JSONP file:
<?php
header('Content-type: application/javascript;');
header("access-control-allow-origin: *");
header("Access-Control-Allow-Methods: GET");
//db connection detils
$host = "localhost";
$user = "test";
$password = "test";
$database = "myradiostation1";
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
//query the database
$query = mysql_query("SELECT *, DATE_FORMAT(start, '%d/%m/%Y %H:%i:%s') AS start,
DATE_FORMAT(end, '%d/%m/%Y %H:%i:%s') AS end FROM radiostation1");
//loop through and return results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$shows[$x] = array("id" => $row["id"], "startminutes" => $row["startminutes"], "start" => $row["start"], "endminutes" => $row["endminutes"],"end" => $row["end"],"mediumname" => $row["mediumname"], "longname" => $row["longname"], "description" => $row["description"],"short_id" => $row["short_id"],"promomessage" => $row["promomessage"],"email" => $row["email"],"phonenumber" => $row["phonenumber"],"textnumber" => $row["textnumber"],"textprefix" => $row["textprefix"],"showimage" => $row["showimage"],"longdescription" => $row["longdescription"],"facebooklink" => $row["facebooklink"],"otherlink" => $row["otherlink"],"websitelink" => $row["websitelink"],"keywords" => $row["keywords"] );
}
//echo JSON to page
$response = $_GET["callback"] . "(" . json_encode($shows) . ");";
echo $response;
?>
It does work, up to a point, but getting the {"success":true,"error":"","data":{"schedule": as seen at this site before my json_encode is where I am.
However, I cannot get it to display any data in my table, although it DOES produce code on-screen when I view it at http://www.myradio1.localhost/onairschedule.php.
The actual code is stored at http://www.myradiostations.localhost/schedule.php
and the callback function works OK, one example being http://www.myradiostations.localhost/schedule.php?callback=?&name=Northern+FM and http://www.myradiostations.localhost/schedule.php?callback=?&name=Southern+FM but what do I need to do to make it change like in these examples:
this example and this example, and to generate an error message like this if no such file exists.
I'm halfway there, just need some advice on fixing my code!
Basically, what I'm trying to do... get a JSONP to work in my HTML table which will vary the content depending on the URL in my javascript file on my page, which is:
var doFades = true;
var LocalhostRadioStations = {
Schedule : {}
};
$(document).ready(function(){
LocalhostRadioStations.Schedule.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
LocalhostRadioStations.Schedule.Show = function () {
_s = null;
_startDate = null;
_endDate = null;
this.days = LocalhostRadioStations.Schedule.days;
_selector = '';
this.setShow = function(s) {
this._s = s;
this._startDate = new Date( parseInt(s.startminutes, 10) * 1000);
this._endDate = new Date(parseInt(s.endminutes, 10) * 1000 );
};
this.getEndDate = function(){
return this._endDate;
}
this.getStartDate = function(){
return this._startDate;
}
this._getShowDay = function (){
return this.days[this.getStartDate().getDay()];
};
this._getShowUnitsTaken = function(){
// if it's the same day
return this._getEndUnits() - this._getStartUnits();
};
this._getEndUnits = function(){
if(this.getEndDate().getHours() == 0)
{
//console.log(this._s.longname +' ends at midnight');
return 48;
}
return this.getEndDate().getMinutes() !== 0 ? (this.getEndDate().getHours() * 2) : (this.getEndDate().getHours() * 2);
};
this._getStartUnits = function(){
if(this.getStartDate().getHours() == 0)
{
return 0;
}
return this.getStartDate().getMinutes() !== 0 ? (this.getStartDate().getHours() * 2) : (this.getStartDate().getHours() * 2);
};
this.getCellPositions = function() {
return {
'start' : this.getStartDate(),
'end' : this.getEndDate(),
'colIndex' : this.getStartDate().getDay() + 2,
'startUnits' : this._getStartUnits(),
'endUnits' : this._getEndUnits(),
'unitsTaken' : this._getShowUnitsTaken()
}
};
this.pad = function(number){
return number < 10 ? '0'+number : number;
};
// return the table cell html.
this.toHtml = function () {
var d = new Date();
var units = this._getStartUnits();
var rowspan = this._getShowUnitsTaken();
var desc = this._s.description;
var name = this._s.longname;
var starttime = this.pad(this.getStartDate().getHours()) + ':' + this.pad(this.getStartDate().getMinutes());
var endtime = this.pad(this.getEndDate().getHours()) + ':' + this.pad(this.getEndDate().getMinutes());
var site = this._s.websitelink;
var cls = this.isActive() ? 'current-program' : '';
var isToday = this.getStartDate().getDay() === d.getDay() ? 'active-program' : '';
var html = '<td class="schedule-show ' + isToday + ' ' + cls + '" rowspan="' + rowspan + '" data-start="' + this.getStartDate() + '" data-end="' + this.getEndDate() + '">';
html += '<div>';
html += '' + name + '';
html += '</div>';
if(doFades)
{
html += '<div class="schedule_details clearfix" style="display:none;">';
html += '<img width="105px" height="105px" alt="' + desc + '" src="' + this._s.showimage + '">';
html += '<strong>' + name + '</strong>';
html += '<p>' + desc + '</p>';
html += '<span>' + starttime + ' - ' + endtime +'</span>';
html += '</div>';
}
html += '</td>';
return html;
};
this.setTableSelector = function(sel){
this._selector = sel;
};
// check if we should add the active class.
this.isActive = function(){
var t = new Date();
return t >= this.getStartDate() && t <= this.getEndDate();
};
};
LocalhostRadioStations.Schedule.ScheduleGen = function(){
return {
insertShow : function(show) {
var p = show.getCellPositions();
$('tr#units-' + p.startUnits).append(show.toHtml());
},
init : function (stationName){
var self = this;
// load the schedule.
$.getJSON('http://www.myradiostations.localhost/schedule.php?callback=?&name=', {
name: 'Northern FM'
}, function(json){
// loop each show and append to our giant table.
// this is well sick.
if(json.success === false)
{
$('.content-inner table').remove();
$('<div>errors</div>').appendTo('.content-inner');
}
else
{
var currentDay = '';
var day = 0;
// highlight the current time..
var d = new Date();
var weekStart = new Date();
weekStart.setDate(d.getDate()-6-(d.getDay()||7));
$.each(json.data.schedule, function(i, broadcast){
var dStart = new Date( parseInt(broadcast.startminutes, 10) * 1000);
var dEnd = new Date(parseInt(broadcast.endminutes, 10) * 1000 );
/*// transform to a show object defined above, if the show spans 2 days we create two show objects.
// IF THE SHOW STARTS/ENDS AT MIDNIGHT, DON'T SPLIT IT.
if(dStart.getHours() !== 0 && dEnd.getHours() !== 0 && dStart.getDate() != dEnd.getDate())
{
var showOne = new LocalhostRadioStations.Schedule.Show();
showOne.setShow(broadcast);
// set to midnight
showOne.getEndDate().setHours(0);
showOne.getEndDate().setMinutes(dStart.getMinutes());
// append first half of show.
self.insertShow(showOne);
// handle second half.
var showTwo = new LocalhostRadioStations.Schedule.Show();
showTwo.setShow(broadcast);
showTwo.getStartDate().setDate(showTwo.getStartDate().getDate() + 1);
showTwo.getStartDate().setHours(0);
showTwo.getStartDate().setMinutes(dEnd.getMinutes());
//console.log('2nd Half Start: ' + showTwo.getStartDate());
//console.log('2nd Half End: ' + showTwo.getEndDate());
self.insertShow(showTwo);
}
else
{*/
var show = new LocalhostRadioStations.Schedule.Show();
show.setShow(broadcast);
show.setTableSelector('table#schedule');
// add the show to the table. Thankfully the order these come out the API means they get added
// in the right place. So don't change the schedule builder code!
self.insertShow(show);
//}
});
var days = LocalhostRadioStations.Schedule.days;
// apply the current day / time classes
$('th:contains('+ days[d.getDay()]+')').addClass('active');
$('td.time').each(function(i, cell){
// get the value, convert to int.
var hours = $(cell).html().split(':')[0];
// compare the hours with now, add class if matched.
if(parseInt(hours, 10) === d.getHours())
{
$(cell).addClass('current_time');
}
});
}
if(doFades)
{
// apply events to show info fade in / out.
$('td.schedule-show').hover(function(){
$(this).find('.schedule_details').fadeIn('fast');
}, function(){
$(this).find('.schedule_details').fadeOut('fast');
});
}
});
}
};
}();
LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);
});
It should change the schedule according to the JSONP, but what do I do to fix it?
Basically, I am trying to make my own localhost version of http://radioplayer.bauerradio.com/schedule.php?callback=&name=Rock+FM and its JSON / JSONP (I am not sure exactly what type the original is, but then again the site is experimental and on a .localhost domain) for testing purposes where the content is taken from the database, and changes according to station name, e.g. http://radioplayer.bauerradio.com/schedule.php?callback=&name=Metro+Radio and http://radioplayer.bauerradio.com/schedule.php?callback=&name=Forth+One etc.
Edit: The full code for my page can be seen at http://pastebin.com/ENhR6Q9j
I'm not sure exactly what's missing, but from the code you gave so far, I made a jsfiddle:
Demo
I modified some things to make it work (mostly appending stuff), because I don't know your original HTML file. But I also made some changes based on what you say you wanted. First of all I modified your $.getJSON call to be something like:
$.getJSON('http://radioplayer.bauerradio.com/schedule.php?callback=?', {
name: stationName //stationName is from the argument passed
}, function(json){...})
Which should give back the station based on what is passed to
LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);
To make it more interesting, I also added a bit of code that reads from the url. In this case if you go to the page with a domain.htm/page?Northern FM it will read the text after the ? and put it in twittiName.
var twittiName="Rock FM"; //default station
if(window.location.search){
twittiName=window.location.search.substring(1) //or window.location.hash
}
Tried to look for other stations that might be on your publics site, but so far I could only test with "?Rock+FM". But does mean you can show the errors, which your code can handle as it is.
?Rock+FM
?Random Name
So it seems that your code mostly works but do comment if I have missed anything.
http://www.juriseodesign.com/clock/Sydney.php
My clock count javascript shows errors. I have my background changes working, but after adding the count clock javascript, the clock doesn't work. I guess it is caused by "collisions" with Mootools and regular jQuery, but I don't have any idea how to fix it. Could anybody can help this for me? Also, how to connect to other paged when I click the one of the city in the dropdown menu?
Thank you so much!
// JavaScript Document
//initial time
var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower){
var upperBackId = upperId+"Back";
$(upperId).src = $(upperBackId).src;
$(upperId).setStyle("height", "64px");
Uncaught TypeError: Object # has no method 'setStyle' (repeated 315 times)
$(upperId).setStyle("visibility", "visible");
$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
$(lowerId).src = pathLower+parseInt(changeNumber)+".png";
$(lowerId).setStyle("height", "0px");
$(lowerId).setStyle("visibility", "visible");
var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipUpper.addEvents({
'complete': function(){
var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipLower.addEvents({
'complete': function(){
lowerBackId = lowerId+"Back";
$(lowerBackId).src = $(lowerId).src;
$(lowerId).setStyle("visibility", "hidden");
$(upperId).setStyle("visibility", "hidden");
} });
flipLower.start('height', 64);
}
});
flipUpper.start('height', 0);
}//flip
function retroClock(){
// get new time
now = new Date();
h = now.getHours();
m1 = now.getMinutes() / 10;
m2 = now.getMinutes() % 10;
s1 = now.getSeconds() / 10;
s2 = now.getSeconds() % 10;
if(h < 12)
ap = "AM";
else{
if( h == 12 )
ap = "PM";
else{
ap = "PM";
h -= 12; }
}
//change pads
if( h != h_current){
flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
h_current = h;
}
if( m2 != m2_current){
flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
m2_current = m2;
flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
m1_current = m1;
}
if (s2 != s2_current){
flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
s2_current = s2;
flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
s1_current = s1;
}
}
setInterval('retroClock()', 1000);
I just looked at jQuery reference, setStyle method does not exist.
You should use css method instead :
$(upperId).css('height','64px;');
Looking at this code, there are many things, that don't match with jQuery methods.
For example: if you want change src attribute to upperId element, in jQuery you should use attr method:
// $(upperId).src = $(upperBackId).src; // WRONG
$(upperId).attr('src', $(upperBackId).attr('src')); // CORRECT
If you want reference an element with its id you must prepend # before the element id:
var upperBackId = "#" + upperId + "Back";
You try to use Mootools methods with jQuery. There is no setStyle() method in jQuery.
Like others have suggested you should use $(..).css( ...) function since setStyle does not exist in jQuery.
I usually also prefer to use $(...).hide() and $(...).show() instead of $(...).css("visibility","hidden") or $(...).css("visibility","visible") since "visibility" still takes space and is the same as setting opacity to 0 - If I hide the element, I don't want it to use any space...
Hi I'm using tooltips on my site to give links and certain images hints/descriptions. I wanted for my tooltips to be able to have different styles. I pass this variable into the JS file and the code does work to an extent..
The error I am receiving is: The first rollover I make sets the style for all other rollovers, even those that are sending a variable for a different style..
Mouseover HTML
(text, size, style) - this is an example of two different onmouseovers sending a diff style
onmouseover="tooltip.show('About Us', 89,'cont1');"
onmouseover="tooltip.show('Archive', 89,'cont2');"
JS
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 40;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h, no;
var ie = document.all ? true : false;
return{
show:function(v,w,no){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id + no);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'text');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
If I follow your code, it looks like your handing in style and using it as part of the name of the ID for the div your creating for the tool tip (I'm assuming your styling things based on ID name). If this is all true, it looks like your issue is that after the first tooltip is created (when tt == null at the top of your show function) you never change the ID of the tool tip after that. The ID only updates on create, so the style will not change once its created.
of course I could be completely wrong about this (I am after all out of coffee at this moment...)
Sorry for not actually answering your question, but you shouldn't invent the wheel. There're SO many libraries out there, that does the exact same thing. Here is 50 to get you started.