I want to load the columns one by one with gap of few seconds when the page is loaded and to make this working, following the code:
setTimeout(function()
{
$("#box1").removeClass("noDisplay");
},1000);
setTimeout(function()
{
$("#box2").removeClass("noDisplay");
},1200);
setTimeout(function()
{
$("#box3").removeClass("noDisplay");
},1400);
.noDisplay{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
But I think there must be some other way to do it easily and with some effects like fade or something, can anybody please suggest?
thanks in advance
Try this from How to show each div, one by one on jquery?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
<div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
<div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<style>
.noDisplay{display:none;}
</style>
<script>
$(function() {
showDiv();
});
function showDiv() {
if($('.noDisplay:hidden').length) {
$('.noDisplay:hidden:first').fadeIn();
setTimeout(showDiv, 1000);
}
}
</script>
Try this:
$(document).ready(function() {
var tTimer, count = 0;
tTimer = setInterval(function (){
count++;
$("#box" + count).removeClass("noDisplay");
if (count >= 4) clearInterval(tTimer);
}, 100);
});
You can use interval to do it and also mix it up with some css so here's the code:
Javascript
$(document).ready(function(){
var num = 3; //Number of elements
var currentElem = 1;
setInterval(function () {
if(currentElem <= num) {
$("#box"+currentElem).css('opacity','1');
currentElem++;
}
}, 1000);
});
CSS
.Lazy {
opacity: 0;
transition: 1s;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 Lazy" id="box1">Column 1 </div>
<div class="col-xs-4 Lazy" id="box2">Column 2 </div>
<div class="col-xs-4 Lazy" id="box3">Column 3 </div>
</div>
</div>
You can also make it more dynamic by checking existence of element with "box"+currentElem ID instead!
Do you mean like this?
$(document).ready(function() {
var dispInterval = 750;
$.each($('div.noDisplay'), function(key, divItem) {
setTimeout(function(){
$(divItem).fadeToggle('slow');
}, dispInterval);
dispInterval += dispInterval;
});
});
.noDisplay{display:none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 noDisplay" id="box1">Column 1 </div>
<div class="col-md-4 noDisplay" id="box2">Column 2 </div>
<div class="col-md-4 noDisplay" id="box3">Column 3 </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Related
That's my problem: I need to update two separates progbars with their own width but the And bar take the Or percentage and the Or one remains empty. I'm not so good with HTML and Js but I noticed that changing div class=progress-bar the And one works but the Or one doesn't. How can I fill every bar with its percentage?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>skills</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body id="page-top">
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"></h1>
</div>
<!--SKILLS--------------------------------------------------------------------------------------->
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"></h6>
</div>
<div class="card-body">
<!--AND--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">AND</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const and=["And_1","And_2","And_3","And_4","And_5","And_6","And_7"];
const myand=["And_1","And_2"];
var la=and.length;
var lm=myand.length;
var mywid=0;
for(let i=0; i<la; i++){
for(let j=0; j<lm; j++){
if(and[i]==myand[j]){
mywid++;
}
}
}
var perc=(99/la)*mywid;
perc=Math.round((perc + Number.EPSILON) * 100) / 100
var bar = document.querySelector(".progress-bar");
function makeProgress(){
bar.style.width = `${perc}` + "%";
bar.innerText = `${perc}` + "%";
}
makeProgress();
</script>
</div>
</body>
<!--OR--------------------------------------------------------------------------------------->
<body>
<div class="m-4">
<h4 class="small font-weight-bold">OR</h4>
<div class="progress">
<div class="progress-bar" style="min-width: 0px;"></div> <!-- Progress bar HTML -->
</div>
<!-- JavaScript -->
<script>
const or=["Or_1","Or_2","Or_3","Or_4","Or_5"];
const myor=["Or_1"];
var lo=or.length;
var lmo=myor.length;
var orwid=0;
for(let i=0; i<lo; i++){
for(let j=0; j<lmo; j++){
if(or[i]==myor[j]){
orwid++;
}
}
}
var orperc=(99/la)*orwid;
orperc=Math.round((orperc + Number.EPSILON) * 100) / 100
var orBar = document.querySelector(".progress-bar");
function makeProgress(){
orBar.style.width = `${orperc}` + "%";
orBar.innerText = `${orperc}` + "%";
}
makeProgress();
</script>
</div>
</body>
</html>
You are setting the same elements width twice using document.querySelector(".progress-bar")
instead you should give each progress bar an unique ID and set the width for them separately
In HTML:
<div class="progress-bar" id="and-bar" style="min-width: 0px;"></div>
Query selector in Javascript:
var andBar = document.querySelector("#and-bar");
I have some data from an API which I'm displaying on my web page. I've also got some simple HTML for an accordion. I have 4 lots of data and I want to display only one lot per slide on the accordion.
How would I do this? I would like to know how to separate the data for each slide based on my code.
$( function() {
$( "#top-stories" ).accordion();
});
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='')
.then((resp) => resp.json())
.then(function(data) {
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="top-stories">Top Stories</h1>
<h3 class="accordion">Story 1</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 2 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 3 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
<h3 class="accordion">Story 4 - Collapsed</h3>
<div class="panel">
<div class="accordion-title"></div>
</div>
</body>
</html>
If you're open to using jquery-ui library, the following should work.
First of all, your HTML should be something as below:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="top-stories">Top Stories</h1>
<h3 class="accordion">Story 1</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 2 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 3 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
<h3 class="accordion">Story 4 - Collapsed</h3>
<div class="panel">
<div class="accordion-slide"></div>
</div>
</body>
</html>
I've changed the ID's to classes and replaced buttons with h3 tags. Also, I've added a link to the jquery-ui library.
And then the JS would mostly be as suggested by #marzelin with the addition jquery-ui accordin library initialization:
$( function() {
$( "#top-stories" ).accordion();
});
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
.then((resp) => resp.json())
.then(function(data) {
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
change <div id="accordion"></div> to <div class="accordion-slide"></div> and then:
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="."')
.then((resp) => resp.json())
.then(function(data) {
// get all slides
const accordionSlides = document.querySelectorAll(".accordion-slide");
data.results.slice(0, 4).forEach((accordion, i) => {
// insert content into a given slide
accordionSlides[i].innerHTML = `
<h1>${accordion.title}</h1>
<p>${accordion.url}</p>
<p>${accordion.abstract}</p>
<p>${accordion.published_date}</p>
<img src="${accordion.multimedia[4].url}"/>`;
})
})
I'm trying to create a modal activated by jquery. Inside that modal I have a slider created in webflow, but this slider isn't working.
The webflow support suggests to insert, after the modal activator, this line of code: Webflow.require('slider').redraw();
But it's not working.
Here's my code:
$('#plus-1').on('click', function() {
//apri la modal corrispondente
$("#modal-1").css('display', 'flex');
//$('.slider').redraw();
Webflow.require('slider').redraw();
$('#chiudi-1').on('click', function() {
//chiudi la modal corrispondente
$("#modal-1").css('display', 'none');
});});
<script src="https://www.tecmasolutions.com/clients/princype-2/js/configurator-princype-rev002.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.tecmasolutions.com/clients/princype-2/css/normalize.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/components.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/configurator-princype-rev002.css" rel="stylesheet" type="text/css">
<button id="plus-1" type="button">Click Me!</button>
<div id="modal-1" class="modal-prezzi porta-h240 logged">
<div class="info-wrapper-checkout logged">
<a id="chiudi-1" class="chiudi checkout logged">x</a>
<div id="slider-1" class="slider w-slider">
<div class="w-slider-mask">
<div class="img_int-pack-premium-plus a w-slide">
</div>
<div class="img_int-pack-premium-plus b w-slide">
</div>
<div class="img_int-pack-premium-plus c w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="icon-2 w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="icon-3 w-icon-slider-right"></div>
</div>
<div class="slide-nav w-slider-nav w-round"></div>
</div>
</div>
</div>
I found the missing point.
before the Webflow.require('slider').redraw(); I had to put this:
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
for (i = 0; i < 10; i++) {
if(i%4===0){
$("#image-album").append('<div class="row">');
}
$("#image-album").append('<div class="col-md-3">image '+i+'</div>')
if(i!==0 && (i+1)%4===0){
$("#image-album").append('</div>');
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>
I want to update my dom with jquery which contains bootstrap classes to display images in grid. But i am not able to add div with "row" class. I tried to do something as shown in the snippet.
Expect it to be:
<div class="row">
<div class="col">
image 1
</div>
<div class="col">
image 2
</div>
<div class="col">
image 3
</div>
<div class="col">
image 4
</div>
</div>
But it end up being:
<div class="row"></div>
<div class="col">
image 1
</div>
<div class="col">
image 2
</div>
<div class="col">
image 3
</div>
<div class="col">
image 4
</div>
First, build full HTML and then append to span
let htlm ="";
for (i = 0; i < 10; i++)
{
if(i%4===0)
{
htlm +='<div class="row">';
}
htlm +='<div class="col-md-3">image '+i+'</div>';
if(i%4===3)
{
htlm +='</div>';
}
};
$("#image-album").append(htlm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>
Hi huys as you can see here I am having a dialog not found issue . I know this is part of jquery ui which i think i have loaded correctly but it still seems to not be working .
Error:
Uncaught TypeError: $(...).dialog is not a function(anonymous function)
# fablinker.php:524jQuery.event.handle
# jq.js:1936elemData.handle.eventHandle
# jq.js:1599
And here is my code guys , and help would be great been stuck on this with days now. Thanks
<?php
// //identify which user is logged in so the right profile info can be pulled up from dbase
// session_start();
// $UserN = $_SESSION['UserN'];
// if(isset($_SESSION['UserN']))
// {
// //$CurrentUser = $_SESSION['UserID'];
// $UserN = $_SESSION['UserN'];
// }
// else
// {
// header("location:index.php");
// }
if (isset($_REQUEST["casestudyid"]))
{
$casestudyid = $_REQUEST["casestudyid"];
}
else
{
$casestudyid = "";
}
?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fab Linker</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
<!--[if IE 8.0000]>
<link rel="stylesheet" type="text/css" href="IE8.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/fab/main.css" />
<link rel="stylesheet" type="text/css" href="css/fab/style.css" />
<link rel="stylesheet" href="css/fab/jquery.tooltip.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/dolearnfinance-aab51d.webflow.css">
<link rel="stylesheet" type="text/css" href="css/fab/myFab.css" />
<link rel="stylesheet" href="js/fablinker/jquery/jquery-ui.min.css">
<script src="js/fablinker/jquery/external/jquery/jquery.js"></script>
<script src="js/fablinker/jquery/jquery-ui.min.js"></script>
<script src="js/fablinker/popup.js" type="text/javascript"></script>
<script src="js/fablinker/jq.js" type="text/javascript"></script>
<script src="js/fablinker/fab.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fablinker/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/fablinker/jquery.corner.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navscroll" data-collapse="medium" data-animation="default" data-duration="400" class="w-nav navbarone notfixed">
<div class="w-container"><h1 class="logo-text">do<span class="pinktext">Learn</span>Finance</h1>
<nav role="navigation" class="w-nav-menu w-clearfix nav-menu">HomeAboutContactsign in
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="w-section head-section">
<div class="w-container">
<h1 class="course-headings">Fablinker</h1>
<div class="breadcrums-div">
<a href="index.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">HOME</div>
</a>
<div class="breadcrum next">></div>
<a href="index.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">course</div>
</a>
<div class="breadcrum next">></div>
<a href="learn_home.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">Learn</div>
</a>
<div class="breadcrum next">></div>
<a href="fablinker.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">Fablinker</div>
</a>
</div>
</div>
</div>
<div class="w-section main-section ">
<!--######################################################################################################-->
<div id="parent">
<div id="topDiv">
<!-- <div id="mainmenu">
<div id="btnNew" class="menuButton">New</div>
<div id="btnLoad" class="menuButton">Load</div>
<div id="btnSave" class="menuButton">Save</div>
<div id="btnDelete" class="menuButton">Delete</div>
<div id="btnTutor" class="menuButton">Tutor On</div>
<div id="btnHelp" class="menuButton">Glossary</div>
</div> -->
New LoadSaveDeleteTutorGlossary
</div>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Left Column -->
<div id="leftcolumn">
<div id="divInputs" class="exerciseColumn">
<div id="divInputs_SellingAndBuyingGoods"></div>
<div id="divInputs_OverheadExpenses"></div>
<div id="divInputs_Funding"></div>
<div id="divInputs_FixedAssets"></div>
</div>
</div>
<!-- End Left Column -->
<!-- Begin PnL Col -->
<div id="content">
<div id="hdg">
<h3 class ="fablinkerheading" >Profit/Loss Account</h3>
<div class="htmltooltip" id="htt23" style="width: 170px;">
<p class="tipText" >Is a financial statement which shows the net profit or loss of a business for a given accounting period.It is essentially a statement of the "income generating" performance of the business.</p>
</div>
<i class ="i-space" style="color:black;">(Projected)</i>
</div>
<div id="divOutputs_PNL" class="exerciseColumn">
<div id="divOutputs_Sales_PNL"></div>
<div id="divOutputs_CashFlow_PNL"></div>
</div>
</div>
<div id="content">
<div id="hdg">
<h3 style="color: black" >Balance Sheet</h3>
<div class="htmltooltip" id="htt23" style="width: 170px;">
<p class="tipText" >
Is a financial statement which shows the net profit or loss of a business for a given accounting period.
It is essentially a statement of the "income generating" performance of the business.</p>
</div>
<i style="color:black;">(Projected)</i>
</div>
<br/>
<div id="divOutputs_BS" class="exerciseColumn">
<div id="divOutputs_FixedAssets_BS"></div>
<div id="divOutputs_CurrentAssets_BS"></div>
<div id="divOutputs_CurrentLiabilities_BS"></div>
<div id="divOutputs_Assets_BS"></div>
<div id="divOutputs_RepresentedBy_BS"></div>
</div>
</div>
<!-- End Content Column -->
<!-- Begin Right Column ############################################################################################## -->
<!-- Begin PnL Col -->
<!-- End Content Column -->
<div id="rightcolumn">
<div id="hdg">
<h3 style="color: black;" >Operating Ratios</h3>
<div class="htmltooltip" id="htt43" style="width: 170px;" >
<p class="tipText">
The balance sheet is a statement of the financial position of a business at a given date.
It is normally based on historical costs and discloses the book value of the assets, liabilities, share capital and reserves.</p>
</div>
<i style="color: black;">(Projected)</i>
<div id="menu" style="border-style: 2px solid red; padding: 5px; margin-left: 19px; ;margin-top: -43px; background:#195e93; float:right; width:95px; height: 83px;" class="invisible">
<div style="padding: 3px; float: right;">
Home<br/>
About Us<br/>
Support<br/>
Log Out
</div>
</div>
</div>
<div id="divOutputs_RAT" class="exerciseColumn">
<div id="divOutputs_ProfitLossRatios_RAT"></div>
<div id="divOutputs_LiquidityRatios_RAT"></div>
<div id="divOutputs_WorkingCapitalRatios_RAT"></div>
<div id="divOutputs_GearingRatios_RAT"></div>
<div id="divOutputs_VolumeRatios_RAT"></div>
</div>
</div>
<!-- End Right Column -->
<br>
</div> <!-- end -->
</div> <!-- end of wrapper -->
</div>
<div id="dlgNew" class="fldialog">
<h3>New Case Study</h3>
Create a new case study.
<br/>
Name:<input type="text" id="newName"/><br/>
Description:<input type="text" id="newDescription"/><br/>
</div>
<div id="dlgLoad" class="fldialog">
Load a case study:
<select id="selCaseStudies">
</select>
</div>
<div id="dlgDelete" class="fldialog">
Delete a case study:
<select id="selCaseStudiesToDelete">
</select>
</div>
<div id="dlgSave" class="fldialog">
Save:<br/>
Name:<input type="text" id="saveName"/><br/>
Description:<input type="text" id="saveDescription"/><br/>
</div>
<!--End Parent Div -->
<script type="text/javascript" src="js/fablinker/BusinessLogic-min.js"></script>
<script type="text/javascript" src="js/fablinker/fablinkerObjects-min.js"></script>
<script type="text/javascript" src="js/fablinker/jquery.helpify.js"></script>
<?php echo("<script type='text/javascript'>var casestudyid = '$casestudyid';</script>");?>
<script type="text/javascript">
var currentCSName;
var currentCSDescription;
var currentCSID;
var bNotSaved;
$(document).ready(function(){
$('#wrapper').corner();
bSaved = true;
$('#dlgNew').hide();
$('#btnTutor').html('Tutor Off');
$('#btnTutor').addClass('menuButton_Selected');
initMapObjects();
// reset the figures
if (!casestudyid)
{
newCaseStudy();
}
else
{
loadCaseStudy(casestudyid);
}
//configureDependenciesForOutputs();
configureDependencyTree();
recalcAll();
$('#btnNew').click(function(evt){
if (confirm("New Casestudy"))
{
currentCSName = "";
$('#currentCSName').val("");
currentCSDescription = "";
$('#currentCSDescription').val("");
currentCSID = -1;
bSaved = true;
newCaseStudy();
recalcAll();
}
// don't call the home button handler
//evt.stopPropagation();
});
$('#btnRecalc').click(function(evt){
recalcAll();
//alert("recalc(Netassets_BS)");
//om["Netassets_BS"].evaluate();
});
$('#topDiv').click(function(evt){
if (evt.originalTarget == evt.currentTarget)
{
window.location.href="userhome.php";
}
});
$('#btnLoad').click(function(evt) {
// empty the list
$('#selCaseStudies').find('option').remove();
// populate the list of case studies
$.getJSON("dbs/gcsl.php", function(data){
$.each(data, function(key, value){
//alert(key + ":" + value);
$('#selCaseStudies').append("<option value='" + key + "'>" + value[1] + "-" + value[2] + "</option>");
});
});
// show the dialog
$('#dlgLoad').dialog({
buttons: {
"Ok" : function() {
$(this).dialog("close");
var csd = {};
csid = $('#selCaseStudies').val();
//csid = prompt("casestudyid", "1");
loadCaseStudy(csid);
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
$('#btnDelete').click(function(evt) {
// empty the list
$('#selCaseStudiesToDelete').find('option').remove();
// populate the list of case studies
$.getJSON("dbs/gcsl.php", function(data){
$.each(data, function(key, value){
//alert(key + ":" + value);
$('#selCaseStudiesToDelete').append("<option value='" + key + "'>" + value[1] + "-" + value[2] + "</option>");
});
});
// show the dialog
$('#dlgDelete').dialog({
buttons: {
"Ok" : function() {
var csd = {};
csid = $('#selCaseStudiesToDelete').val();
if (confirm("Delete Casestudy")) {
deleteCaseStudy(csid);
//alert ("deleting");
$(this).dialog("close");
//$.getJSON("dbs/dcs.php?csid=" + csid, function(data){
//});
currentCSName = "";
$('#currentCSName').val("");
currentCSDescription = "";
$('#currentCSDescription').val("");
currentCSID = -1;
bSaved = true;
newCaseStudy();
recalcAll();
}
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
$('#btnTutor').click(function(evt) {
if ($('#btnTutor').hasClass('menuButton_Selected'))
{
$('#btnTutor').html('Tutor On');
$('#btnTutor').removeClass('menuButton_Selected');
$('.imginfo').hide();
}
else
{
$('#btnTutor').html('Tutor Off');
$('#btnTutor').addClass('menuButton_Selected');
$('.imginfo').show();
}
// don't call the home button handler
evt.stopPropagation();
});
$('#btnTest').click(function() {
$("#txtSellingPrice").keyup(function(e)
{
alert("hello");
});
});
$('#btnEvaluate').click(function() {
for (var o in om)
{
//alert(om[o].inputDependencies);
om[o].evaluate();
}
});
$('#btnExpand').click(function () {
if ($('#exerciseHeader').height() == 100) {
$('#exerciseHeader').animate({
height:"25px"
}, 500);
}
else
{
$('#exerciseHeader').animate({
height:"100px"
}, 500);
}
});
$("#dlgHelp").helpify();
$('#btnHelp').click(function(evt){
showHelpForTopic("dlgHelp", 1);
});
$('#btnTest').click(function(evt) {
showHelpForFlid("dlgHelp", "CostOfSales_PNL");
});
$('.helplink').click(function(evt) {
alert('hello');
});
$('#btnSave').click(function(evt) {
var csd = {};
csid = currentCSID;
$('#saveName').val(currentCSName);
$('#saveDescription').val(currentCSDescription);
// show the save dialog
$('#dlgSave').dialog({
buttons: {
"Ok" : function() {
$(this).dialog("close");
saveName = $('#saveName').val();
saveDescription = $('#saveDescription').val();
if (saveName != currentCSName)
{
// save as
csid = -1;
$('#currentCSName').val(saveName);
$('#currentCSDescription').val(saveDescription);
}
currentCSName = saveName;
currentCSDescription = saveDescription;
$.each(im, function(index, value) {
console.log(index + " " + value.value);
csd[index] = value.value;
});
//for (item in im)
//{
// csd[item] = im[item].value;
//}
var data = "csid=" + csid
+ "&csn=" + currentCSName
+ "&csdesc=" + currentCSDescription
+ "&csd=" + JSON.stringify(csd);
jQuery.ajax({
url:"dbs/scs.php",
data:data,
type:"post",
success:function(resp){
currentCSID = parseInt(resp);
//alert("saved:" + currentCSID);
alert("saved");
},
error:function(e){
alert("failed to save");
}
});
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
});
</script>
</body>
<footer>
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-3">
<h1 class="logo-text">do<span class="pinktext">Learn</span>Finance</h1>
</div>
<div class="w-col w-col-6">
<div class="centered">
<a href="index.php" class="w-inline-block footer-link">
<div class="footer-link">Home</div>
</a>
<a href="about.php" class="w-inline-block footer-link">
<div class="footer-link">About</div>
</a>
<a href="contact.php" class="w-inline-block footer-link">
<div class="footer-link">Contact</div>
</a>
<a href="#" class="w-inline-block footer-link">
<div class="modal-link footer-link">Sign In</div>
</a>
</div>
</div>
<div class="w-col w-col-3">
<div>
</div>
</div>
</div>
</footer>
</html>