I am trying to display content in a div inside a popover using Javascript and facing some issue. Below is the code. Hope someone can help..
1) ASP.Net master page that calls the pop up vbhtml page
window.izenda=false;
$("#NextGenReportsLink").click(function(){
if(!window.izenda)
{
PleaseWaitOpen();
window.izenda=true;
$.get("/Report/NextGenReportViewer", function(data){
$("#NextGenReportSelectorNew").append(data)
});
}
});
2) The vbhtml page that should pop up on click of #NextGenReportsLink
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="~/Scripts/EmbeddedUI/izenda-ui.css?db1ebd9b10aa86f1fd76" rel="stylesheet">
<link href="~/Content/ReportsFiles/Css/jquery.webui-popover.css" rel="stylesheet" />
<link href="~/Content/ReportsFiles/Css/nanoscroller.css" rel="stylesheet" />
<link href="~/Content/ReportsFiles/Css/reports.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="~/Content/ReportsFiles/Js/jquery.webui-popover.js"></script>
<script src="~/Content/ReportsFiles/Js/jquery.nanoscroller.min.js"></script>
</head>
<body>
<div class="row" id="data" >
<div class="container" id="izenda-root"></div>
</div>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_common.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_locales.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_vendors.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_ui.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/izenda.integrate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
//$("#NextGenReportsLink").click();
PleaseWaitClose();
DoIzendaConfig();
izendaInit();
document.getElementById('NextGenReportSelectorNew').style.display = "block";
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
var options = {
valueNames: ['name']
};
$('#NextGenReportsLink').webuiPopover({
placement: 'vertical',
trigger: 'click',
width: Per98,
offsetTop: -10,
height: Hei,
arrow: true,
title: 'NextGenReports',
closeable: true,
animation: 'fade',
onHide: function () { $("#loadingDiv").hide(); },
onShow: function () {
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
$('.webui-popover.fade').css('left', Per1);
var ll = $('#NextGenReportsLink').offset().left + ($('#NextGenReportsLink').width() / 2)
$('.webui-arrow').css('left', (ll - Per1) + 10);
},
content: $('#data').html(),
type: 'html'
});
$(window).resize(function () {
debugger;
if ($('.webui-popover').is(':visible')) {
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
var ll = $('#NextGenReportsLink').offset().left + ($('#NextGenReportsLink').width() / 2)
$('.webui-arrow').css('left', ll - Per1 + 9);
}
})
});
</script>
</body>
</html>
izendaInit(); function loads a UI into the izenda-root div, however that div is not getting displayed. Instead the below div is getting displayed
I can see another div with the same id "izenda-root" being loaded with the data but I'm not sure how to display that div. Any help is much appreciated.. Please let me know if you need any more documentation on the js/css files referred to in the vbhtml..
3) Below is the izenda.integrate.js
//This function will point the front-end at an Izenda API
var DoIzendaConfig = function () {
var configJson = {
"WebApiUrl": "http://x.x.x.x:yy/api/",
"BaseUrl": "/",
"RootPath": "Scripts/EmbeddedUI",
"CssFile": "izenda-ui.css",
"Routes": {
"Settings": "settings",
"New": "new",
"Dashboard": "dashboard",
"Report": "report",
"ReportViewer": "reportviewer",
"ReportViewerPopup": "reportviewerpopup",
"Viewer": "viewer"
},
"Timeout": 3600,
};
IzendaSynergy.config(configJson);
};
//Error checking during token generation
function errorFunc() {
alert('Token was not generated correctly.');
}
//DoRender will called via successFunc
var DoRender = function (successFunc) {
$.ajax({
type: "GET",
url: "https://xxxx.mock.pstmn.io/GenerateToken",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
};
//The IzendaSynergy.render function will render the entire Izenda front-end with an independent navigation
var izendaInit = function () {
function successFunc(data, status) {
var currentUserContext = {
token: data.token
};
IzendaSynergy.setCurrentUserContext(currentUserContext);
IzendaSynergy.render(document.getElementById('izenda-root'));
}
this.DoRender(successFunc);
};
Related
Converted html content into image format when html page is loaded, But can't able to convert html content into image when it is called from controller.(For convertion we are using HTML2CANVAS)
This is for a Linux server, PHP 7.2 and Codeigniter 3.1.5
We have found solution for load html page using below function:
In Javascript
$.each(data, function(key,value) { //for select multiple datas
var html = escape(value.design);
var orderid = value.orderid;
var label_height = value.label_height;
var label_width = value.label_width;
$(".temp_div").load("<?php echo base_url();?>orders/downloadcavas?design="+html+"&orderid="+orderid+"&label_width="+label_width+"&label_height="+label_height);
});
In Codeigniter
function downloadcavas()
{
$data1['design'] = $design = urldecode($_GET["design"]);
$data1['orderid'] = $orderid = $_GET["orderid"];
$data1['label_width'] = $label_width = $_GET["label_width"];
$data1['label_height'] = $label_height = $_GET["label_height"];
if(isset($label_height))
{
if(isset($label_width))
{
$style = "height:".$label_height."in;width:".$label_width."in;";
}
else
{
$style = "height:".$label_height."in;";
}
}
else
{
$style = "";
}
echo '<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="stylesheet" href="'.base_url().'js/jquery-ui.css"><link href="'.base_url().'js/lable_design.css" rel="stylesheet" />
<style>
.canvas-section {
background-color: #fff;
}
</style>
</head>
<body>
<div id="divCanvas" class="canvas-section divCanvas" style="'.$style.'margin-top:-70px;" >'.$design.' </div>
<script type="text/javascript" >$("#preloader").hide();
$.getScript("'.base_url().'js/html2canvas.js");
setTimeout(function(){
preview1();
},1000);
function preview1()
{
var element = $(".divCanvas");
var orderid = "'.$orderid.'";
var scaleBy = 5;
var w = 1000;
var h = 1000;
var div = document.querySelector(".divCanvas");
var canvas = document.createElement("canvas");
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
context.scale(scaleBy, scaleBy);
html2canvas(div, {
useCORS: true,
canvas:canvas,
onrendered: function (canvas) {
theCanvas = canvas;
var image = theCanvas.toDataURL("image/jpg");
$.ajax({
url: "'.base_url().'template_builder/template/orderimagesave",
data:"canvas="+image+"&orderid="+orderid,
type: "POST",
cache: false,
global: false,
success: function(data){ }});
}
});
} </script>
</body>
</html>';
}
But we cant able to convert images for continuous html content. Can you please suggest anyother method to convert html content into image without loading html page.
Thanks in advance
I'm working on a project where I should show two kind of charts :
a Real time Chart and I'm using smoothie.js lib for this.
a normal chart with zoom option and I'm using canvas lib for this.
as it showen in the code below the smoothie.js use on the body tag an "onload" :
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Pression en temps réel</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="smoothie.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.bufferX = [];
setInterval(function () {
if( typeof lastid == 'undefined' ) {
$.get( "../be.php/lastid_1", function( dataA ) {
lastid = dataA[0].id_x+1;
})
}
else {
$.get( "../be.php/1&"+lastid, function( dataB ) {
var i =0;
var j=0;
if( typeof counter == 'undefined' ) {
counter = 0;
}
if( typeof pck_prev == 'undefined' ) {
pck_prev = -1;
}
lastid = dataB[0].last_id;
for(i=0;i<dataB.length;i++) {
for(j=0;j<dataB[i].data.length;j++) {
if(dataB[i].data[j] !== "" && dataB[i].data[j] !== 0 && typeof dataB[i].data[j] !== 'undefined' && pck_prev !== dataB[i].pck) {
window.bufferX.push(dataB[i].data[j]);
}
}
pck_prev = dataB[i].pck;
}
if(typeof window.bufferX[counter] == 'undefined') {
data_p.append(new Date().getTime(), window.bufferX[counter-1]);
}
})
}
},3000);
var data_p = new TimeSeries();
setInterval(function() {
if(window.bufferX.length>50 && counter <window.bufferX.length)
{
if( typeof counter == 'undefined' ) {
counter = 0;
}
else {
data_p.append(new Date().getTime(), window.bufferX[counter]);
counter++;
}
}
}, 250);
function createTimeline() {
var chart = new SmoothieChart({responsive: true});
chart.addTimeSeries(data_p, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 250);
}
</script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
title:{
text: "Try Zooming And Panning"
},
axisY:{
includeZero: false
},
data: data, // random generator below
});
chart.render();
}
var limit = 1000; //increase number of dataPoints by increasing this
var y = 0;
var data = []; var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
y += (Math.random() * 10 - 5);
dataPoints.push({
x: i - limit / 2,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
</script>
</head>
<body onload="createTimeline()">
<canvas id="chart" style="width:100%; height:700px;"></canvas>
<div id="chartContainer" style="height: 700px; width: 100%;">
</div>
</body>
</html>
The problem is if I delete onload from body tag I will get the canvas chart only and if I let it I will get the real time chart only.
I would like to have both charts showen on my page.
Thanks for reading.
window.onload and <body onload="yourfunction();"> are different ways of using the same event and you are using both which is causing the issue. The easiest way to fix this problem is that you should write both the implementation in one event either in window.onload or in onload of body tag.
Find the updated fiddle here.
You can find both the chart are visible at the same time.
I am building a phonegap application and I get the following error message when debugging.
Uncaught TypeError: app.receivedEvent is not a function(…)** on line 18 of my JS code (I point it out below).
To be honest I have read many guides on the deviceready but I just can't figure out how to properly use it for my phonegap build code.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Anton|Patua+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/fact_page.css">
<title>One Direction Facts</title>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>One Direction - Fact of the Day</h1>
</div>
<div id="deviceready" data-role="main" class="ui-content">
<h2 id="todayh2" class="invisible"> Today's One Direction Fact:</h2>
<div id="quotebox" class="PulseEffect icon">
<div id="ShineDiv" class="shine"></div>
<div class="facebox fade icon">
<div id="ShineDiv2" class=""></div>
</div>
<p class="hidden" id="qotd"> Welcome to<br><strong>One Direction Facts.</strong><br><br>You will get a random fact each day.</p>
</div>
<a id="nextQ" class="" data-role="button" data-ajax="false">View Fact</a>
<div class="XPmeter animateXP" >
<span id="bar" style="width: 20%"></span>
<div id="medaldiv">
<img id="medal" src="images/medal3.svg"><p id="lvl">1</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>New Features Coming Soon!</h1>
</div>
</div>
<!-- --------------------JS------------------------ -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/app_scripts.js"></script>
<script type="text/javascript" src="js/admob.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Here is my JS:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
/*--error is here-->*/ app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent:
$("#nextQ").click(function(){
var tempd = new Date(); //Get today's date
//Checks if localstorage had 'DateOpened' already stored
// Note that by adding strings in there, we end up with a string instead of adding.
// Note the order: Year first, then month, then day.
// Also, since we display it, we put separators in and add 1 to month (since Jan = 0).
var str = tempd.getFullYear() + "-" + (tempd.getMonth() + 1) + "-" + tempd.getDate();
console.log("Today's date: " + str);
var localVal = localStorage.getItem('DateOpened');
console.log("Previous localVal: " + localVal);
if(localVal != null){
var difference = localVal.localeCompare(str);
}
console.log("localeCompare: " + difference);
//If stored date is older than this date do something:
if(localVal == null || difference < 0){
// If the localstorage doesn't exist, nothing happens
console.log("App will now run once for today.")
//Run the JS for the app (give new quote since it is a new day)
var Quotes = [];
var ID = [];
var Tag = [];
//Get quotes from JSON file
$.ajax({
url: './json/facts.json',
dataType: 'json',
type: 'get',
success: function(data){
console.log(data);
console.log("successfully imported the JSON file");
console.log(data.length); //Returns 64
totalQ = data.length;
for (i = 0; i < totalQ; i++){
ID[i] = data[i][0];
Tag[i] = data[i][1];
Quotes[i] = data[i][2];
}
console.log(Quotes.length);
}
})
.done(function(data){ //This waits for AJAX to be done before running
var Quote = new String;
var qnumber = 0;
var totalQ //The total number of available quotes to choose from
var CurrentImage = String;
totalQ = Quotes.length - 1;
console.log("TotalQ = " + totalQ);
//Get list of which facts have already been seen
var seen = JSON.parse(localStorage.getItem('seen'));
console.log("var seen = " + seen);
if (seen == null){
var seen = new Array(totalQ);
for (var i = 0; i < seen.length; ++i) {
seen[i] = false;
}
console.log("var seen = " + seen);
}
//Get a Quote
ChooseQuote(0,totalQ);
//Change the image depending on the quote
//replace the quote with a new one
$("#qotd:visible").hide();
$("#ShineDiv").addClass("shine");
$(".facebox").css("background-image",CurrentImage);
$(".facebox").css("opacity","1.0");
$("#qotd").html(Quote);
console.log("Image Changed");
increaseXP();
//================
function ChooseQuote(min,max){
//Choose 2 random numbers, one for quotes one for image
var RandomNum = Math.floor(Math.random()*(max-min+1)+min);
var ImageNum = Math.floor(Math.random()*(5-1+1)+1);
Quote = Quotes[RandomNum];
CurrentImage = "url(./images/FaceBoxes/" + Tag[RandomNum] + "/" + Tag[RandomNum] + ImageNum + ".png)";
if (seen[RandomNum] == true ) {
//Choose new quote
ChooseQuote(0,totalQ);
console.log("Has this fact been seen before? Answer: " + seen[RandomNum] );
var numOfTrue = 0;
for(var i=0; i<=totalQ; i++){
if(seen[i] === "true")
numOfTrue++;
}
if (numOfTrue = totalQ) {
localStorage.setItem('All_Facts_Seen:', true);
console.log("All the Facts have been seen. Resetting Facts.");
seen = new Array(totalQ); //Empty the seen Array
localStorage.setItem('seen', JSON.stringify(seen)); //Save the empty Array
}
}
else {
seen[RandomNum] = "true";
console.log("This fact has never been seen.")
}
console.log(Quote);
console.log(CurrentImage);
//Remeber which fact is displayed
localStorage.setItem('Curr_Fact', Quote);
localStorage.setItem('Curr_ImgUrl', CurrentImage);
localStorage.setItem('seen', JSON.stringify(seen));
}
//==================
//Save the current date in local storage
localStorage.setItem('DateOpened',str);
console.log("The App Ran, you can get a new fact tomorrow");
console.log("Current LocalStorage Date: " + str);
});
}
else {
//If it is still the same day, show the last fact & image
var Quote = localStorage.getItem('Curr_Fact');
var CurrentImage = localStorage.getItem('Curr_ImgUrl');
$("#qotd:visible").hide(); //Hide main quote
$("#ShineDiv2").addClass("shine");
if ($('h2').hasClass("invisible")){ //if heading is invisble show it, remove that class
$('h2').css('visibility','visible').hide().fadeIn('slow').removeClass("invisible");
}
$(".facebox").css("background-image",CurrentImage);
setTimeout( function() { //This is so that the first image and new image don't crossfade/stretch
$(".facebox").css("opacity","1.0");
}, 100);
$("#qotd").html(Quote); //Replace the main message with the actual quote
console.log("Showing the same fact as before. Wait until tomorrow to get a new fact.");
}
},
};
$(window).load(function() {
var headerh;
var footerh;
var pageh;
var hbtn_nextq;
headerh = $("div[data-role='header']").outerHeight();
footerh = $("div[data-role='footer']").outerHeight();
pageh = $(window).height();
console.log(headerh + " " + footerh + " " + pageh);
var difference = pageh - headerh - footerh;
$(".ui-content").css("height", difference);
var h1, h2, h3, h4 , h5;
h1 = $(".ui-content").outerHeight();
h2 = $(".ui-content>h2").outerHeight();
h3 = $("#quotebox").outerHeight(true);
h4 = $("#nextQ").outerHeight();
h5 = ((h1 - h2 - h3 - h4) /2) - 50;
console.log(h1);
console.log(h2);
console.log(h3);
console.log(h4);
console.log(h5);
var h5s = h5 + "px";
//$("#quotebox").css("margin-top",h5s);
$(".ui-content>h2").css("margin-top",h5s);
//$("#nextQ").css("margin-bottom",h5s);
//ShowXP();
//Make the quotebox flip over on click
$(".facebox, #ShineDiv").click(function(){
$("#quotebox").removeClass("PulseEffect")
$("#ShineDiv").removeClass("shine");
$(".facebox").css("opacity","0");
$("#qotd").fadeIn("slow", function(){});
});
ShowXP();
});
function increaseXP(){
//Get the lvl and xp from storage
var lvl = localStorage.getItem("lvl", lvl);
var XP = localStorage.getItem("XP", XP);
console.log("Old XP = " + XP + " Old Level = " + lvl);
lvl = parseInt(lvl);
XP = parseInt(XP);
//Increase XP
XP = XP + 25;
//Increase lvl
if (XP >= 100){
lvl = lvl + 1;
localStorage.setItem('XP',XP);
localStorage.setItem('lvl',lvl);
UpdateXP(XP);
setTimeout(function() {
ShowUP(lvl);
}, 200);
XP = XP - 100;
console.log("Current XP = " + XP + " Current Level = " + lvl);
UpdateXP(XP);
}
localStorage.setItem('XP',XP);
localStorage.setItem('lvl',lvl);
UpdateXP(XP);
}
function ShowXP(){
var XP = localStorage.getItem("XP");
var lvl = localStorage.getItem("lvl");
if (XP == null){
XP = 0;
localStorage.setItem("XP", XP);
}
if (lvl == null){
lvl = 1;
localStorage.setItem("lvl",lvl);
}
lvl = parseInt(lvl);
XP = parseInt(XP);
$("#lvl").text(lvl);
$(".XPmeter > span#bar").each(function() {
$(this)
.data("origWidth", XP)
.width(0)
.animate({
width: $(this).data("origWidth") + "%" // or + "%" if fluid
}, 1200);
});
}
function UpdateXP(XP){
$(".XPmeter > span#bar").each(function() {
$(this)
.animate({
width: XP + "%" // or + "%" if fluid
}, 1200);
});
}
function ShowUP(new_level){
$("#medal").animate({height: "100px" },600, function(){
$("#lvl").text(new_level);
$("#medal").animate({height: "50px" },600);
});
$(".XPmeter > span#bar").width("0");
}
//-------------------------------------------------------------//
// //
// This is the scirpt that will get the facts and display them //
// //
//-------------------------------------------------------------//
That's because your receivedEvent is not defined as a functions but as a property of the app object so it can't be called as a function.
You to change it from:
// Update DOM on a Received Event
receivedEvent:
to:
// Update DOM on a Received Event
receivedEvent: function(id) {
Hey I'm trying to create a incremental game and am stuck.
You press one button and get a currency which is called "Evos". With these "Evos" you can buy a storyteller who will start to generate "Evos" on his own.
this is the code:
$(document).ready(function() {
"use strict";
var evoAmount = 0;
var storytellerAmount = 0;
var evoIncrement = 1;
var storyteller = {
Amount: 0,
Cost: 10,
Increment: 1
};
var tick = 1000;
var runstoryteller = setInterval(function () {
evoAmount = evoAmount + (storyteller.Increment * storyteller.Amount);
updateValues();
}, tick);
function updateValues(){
$('#evoAmount').html(evoAmount);
$('#storytellerAmount').html(storyteller.Amount);
}
/* Buy storytellers */
$('#storytellerBuy').click(function () {
if (evoAmount >= storyteller.Cost) {
evoAmount = evoAmount - storyteller.Cost;
storyteller.Amount++;
storyteller.Cost = (storyteller.Cost / 100) * 20;
updateValues();
}
});
$('#click').click(function(){
evoAmount = evoAmount + evoIncrement;
document.getElementById("evoAmount").innerHTML = evoAmount;
});
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/slate/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Evo-Clicker v1.0.0</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/click.js"></script>
<div class="main">
<button id="click" class="btn btn-default">Click</button>
<span id="evoAmount">0</span> EVOs <br><br>
<button id="storytellerBuy" class="btn btn-danger">Buy Storyteller</button><span id ="storytellerAmount">0</span> Storytellers
</div>
</body>
</html>
Basically i can buy the first storyteller for 10 Evos. But i want to increase the cost with each bought storyteller by 20%. But if i change the code it either goes into negative "Evos" or in this example you only have to pay once and then buy storytellers for free.
/* Buy storytellers */
$('#storytellerBuy').click(function () {
if (evoAmount >= storyteller.Cost) {
evoAmount = evoAmount - storyteller.Cost;
storyteller.Amount++;
updateValues();
}
});
This works but the stays the same. (Which i want to increase by 20% each time)
You should replace the calculation of cost
this is the right one
storyteller.Cost = (storyteller.Cost * 1.2);
Hello I have a query regarding Kendo UI's Window Content. Basically I've picked up a nice little desktop-like (WebOS) setup that I'd like to fiddle around with. The application windows "openWin1" and "openWin2" are defined but are empty and have no content. Where do I add the content? In HTML5 or Javascript?
Any help would be greatly appreciated. I'm quite new to this.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Masrani Global OS</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="css/system.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.window.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div id="titleBar"><a id="openWin1" class="topBtn" href="#">Terminal</a><a id="openWin2" class="topBtn" href="#">Media Player</a></div>
<div id="deskTop"></div>
<div id="statusBar"><ul id="statusBarBtns"><li id="hideAll"><a class="statBarBtn" href="#">Show Desktop</a></li></ul><div id="logText"></div></div>
</body>
</html>
custom.js:
function log(data){
console.log(data);
}
function repositionWindow(elementName){
var thisWindow = $("#" + elementName).closest('.k-window'),
winOffset = thisWindow.offset(),
thisWindowWidth = thisWindow.width()
thisWindowHeight = thisWindow.height()
bottomEdge = winOffset.top + thisWindowHeight
rightEdge = winOffset.left + thisWindowWidth
deskTopOffset = $('#deskTop').offset()
deskTopHeight = $('#deskTop').height();
deskTopBottom = deskTopOffset.top + deskTopHeight - 25
deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
if(thisWindowWidth>$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
if(bottomEdge>deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
if(rightEdge>deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
if(winOffset.top < deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
if(winOffset.left < deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
if(thisWindow.offset().top<deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
}
function createWindow(elementName,Icon,WindowTitle,Width,Height){
$('body').append('<div id="'+elementName+'"></div>');
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
$('#statusBarBtns').append('<li id="statbar_'+elementName+'"><a class="statBarBtn" href="#WIN-'+elementName+'">'+WindowTitle+'</a></li>');
window.kendoWindow({
width: Width+"px",
height: Height+"px",
title: WindowTitle,
actions: ["Custom","Maximize", "Close"],
close: function(){
$('#statbar_'+elementName).remove();
$("#"+elementName).data("kendoWindow").destroy();
if(elementName == 'myWindow'){
$('#openWin1').show();
}
if(elementName == 'myWindow2'){
$('#openWin2').show();
}
},
activate: function(e){
repositionWindow(elementName);
},
dragend: function(e){
repositionWindow(elementName);
},
resize: function(e){
repositionWindow(elementName);
}
});
$("#" + elementName +'_wnd_title').parent().prepend('<img class="windowLeftIcon" src="icons/'+Icon+'.png"/>');
window = $("#" + elementName).data("kendoWindow");
var vv = window.wrapper.find(".k-i-custom");
vv.removeClass('k-i-custom').addClass('k-i-minimize2');
vv.click(function (e) {
$("#" + elementName).closest('.k-window').hide();
})
}
}
$('.statBarBtn').live('click',function(e){
e.preventDefault();
var elementName = $(this).attr('href');
if(elementName == '#') return;
elementName = elementName.replace("#WIN-","");
var wnd = $("#"+elementName).data("kendoWindow");
if(wnd.element.is(":hidden")){
$("#" + elementName).closest('.k-window').show();
wnd.toFront();
} else {
$("#" + elementName).closest('.k-window').hide();
}
});
$(document).ready(function() {
$('#openWin1').click(function(){
createWindow('myWindow','server','Terminal',500,300);
$(this).hide();
});
$('#openWin2').click(function(){
createWindow('myWindow2','server','Media Player',400,200);
$(this).hide();
});
$('#hideAll').click(function(){
$(".k-window-content").each(function(){
$(this).closest('.k-window').hide();
});
});
});
In your JavaScript, a div is created and added to the DOM:
$('body').append('<div id="'+elementName+'"></div>');
The Kendo Window object is then set up on the created div:
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
...
window.kendoWindow({...});
}
Therefore, any HTML content nested within the created div will be displayed within the Kendo Window, i.e.:
$('body').append('<div id="'+elementName+'"><p>This will appear in the window</p></div>');