How to fix my jQuery animation?

How to fix my jQuery animation? - javascript

I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my html:
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}

Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/

Related

JS works on CodePen but not locally [duplicate]

This question already has answers here:
Why is simple JavaScript code not running?
(3 answers)
Closed 1 year ago.
I'm trying to get a JS slider to work. I'm using Brackets as my code environment.
I have tried creating a local .js file and putting
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script type="text/javascript" src="my.js"></script>
line in <head>
I have also tried just putting only <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> in <head> and then putting all of the script code within a <script> tag in <head>.
CodePen for that:
https://codepen.io/hiarooo/pen/zYNboJq
As you can see, the slider doesn't function properly.
However, I have noticed that if I simply put the code in the JS box of CodePen (I have commented it, but you can try uncommenting it to see what I mean) then the Slider functions perfectly.
What is wrong with the way I am doing things? I do not understand.
Thank you for any advice.

<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.0">
<title>Crypter | Upload01</title>`enter code here`
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght#700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="my.js"></script>-->
</head>
<body>
<section class="section-slider">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div id="slider-wrap">
<ul id="slider">
<li data-color="#1abc9c">
<div>
<h3>What is cat</h3>
<span>it is a cat</span>
</div>
<i></i>
</li>
<li data-color="#3498db">
<div>
<h3>Slide #2</h3>
<span>Sub-title #2</span>
</div>
<i class="fa fa-gears"></i>
</li>
<li data-color="#9b59b6">
<div>
<h3>Slide #3</h3>
<span>Sub-title #3</span>
</div>
<i class="fa fa-sliders"></i>
</li>
<li data-color="#34495e">
<div>
<h3>Slide #4</h3>
<span>Sub-title #4</span>
</div>
<i class="fa fa-code"></i>
</li>
<li data-color="#e74c3c">
<div>
<h3>Slide #5</h3>
<span>Sub-title #5</span>
</div>
<i class="fa fa-microphone-slash"></i>
</li>
</ul>
<!--controls-->
<div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
<div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
<div id="counter"></div>
<div id="pagination-wrap">
<ul>
</ul>
</div>
<!--controls-->
</div>
</div>
</section>
<script>
//current position
var pos = 0;
//number of slides
var totalSlides = $('#slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('#slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
//next slide
$('#next').click(function(){
slideRight();
});
//previous slide
$('#previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('#slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('#pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('#slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('#counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('#pagination-wrap ul li').removeClass('active');
$('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}
</script>
</body>
Try putting this way it works fine,because If you have code in your JavaScript that alters HTML as soon as the JavaScript file loads, there won't actually be any HTML elements available for it to affect DOM yet, so it will seem as though the JavaScript code isn't working, and you may get errors.Thanks :)

How to add multiple charts to leaflet maps?

I managed to create some bar charts on my leaflet maps and made a reference to it so that it the chart can be shown or hidden based on the checkbox in the side menu. However, only one bar chart can be shown and hidden at a time whereas I need to create several more barcharts and make them all appear at the same time when the checkbox is checked. There is a way to do this but that would mean I have to manually hard code the barcharts which is not very efficient. If you do know of a shortcut that doesnt requires hard code and still create several more barcharts and show/hidden at the same time do let me know.
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Cdn for jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Cdn for Barcharts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
crossorigin="anonymous"></script>
<!-- Event handling of checking of checkboxes -->
<script>
$(document).ready(function(){
// Hides the piechart at the beginning
if($(".leaflet-piechart-icon")){
$(".leaflet-piechart-icon").hide();
}
// Hides the piechart legend at the beginning
if($(".legend")){
$(".legend").hide();
}
// Hides the stringlines at the beginning
if($(1 == 1)){
mymap.removeLayer(polyline);
}
// Hides the barchart at the beginning
if($(1 == 1)){
mymap.removeLayer(barChartMarker);
}
// Shows or hides layers when checkbox is checked or unchecked
$('input[id="pie-charts"]').click(function(){
if($(this).prop("checked") == true){
$(".leaflet-piechart-icon").show(500);
$(".legend").show(500);
}
else if($(this).prop("checked") == false){
$(".leaflet-piechart-icon").hide(500);
$(".legend").hide(500);
}
});
$('input[id="bar-charts"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(barChartMarker);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(barChartMarker);
}
});
$('input[id="choropleth"]').click(function(){
if($(this).prop("checked") == true){
//$("").show(500);
}
else if($(this).prop("checked") == false){
//$("").hide(500);
}
});
$('input[id="string-lines"]').click(function(){
if($(this).prop("checked") == true){
mymap.addLayer(polyline);
}
else if($(this).prop("checked") == false){
mymap.removeLayer(polyline);
}
});
});
</script>
<!-- Access style.css file in the same folder -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="pie-charts"> Pie Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="bar-charts"> Bar Charts
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="choropleth"> Choropleth
</label>
</a>
</li>
<li class="nav-item">
<a href="#" class="navlink">
<label>
<input type="checkbox" id="string-lines"> String Lines
</label>
</a>
</li>
</ul>
</nav>
</div>
<div id="map">
<script src="myscripts.js"></script>
<script src="leaflet-choropleth.js"></script>
</div>
<script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
<script type="text/javascript" src="leaflet-piechart.js"></script>
<script src="leaflet-barchart.js"></script>
</body>
</html>
// leaflet-barchart.js
var options = {
data: {'dataPoint1': 22,'dataPoint2': 36,'dataPoint3': 42,'dataPoint4': 20},
chartOptions: {
'dataPoint1': {fillColor:'#3f0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint2': {fillColor:'#6a0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint3': {fillColor:'#0f6ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
},
'dataPoint4': {fillColor:'#0f9ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
return value.toFixed(2);
}
}
},
};
var barChartMarker = new L.BarChartMarker(L.latLng(20.894, 78.962), options).addTo(mymap);

I have a jquery issue. I have two divs showing and hiding. Both are set to refresh but one is overriding it

I have a jquery issue I have two divs showing and hiding and both are set to refresh but one is over riding the other. I am not sure why the load1 were div1 is at keeps overriding the load2 div2. so when i click on button completed the received div is automatically refreshing and changing the page back to received. I will try to get this on fiddle.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<pre><button class="btn btn-sm btn-primary" id="received">Received</button><button class="btn btn-sm btn-success" id="completed">Completed</button></pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<footer>
<script src="http://localhost/test/assets/jquery/jquery-3.1.0.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0')
{
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
}
else($show_completed.value == '1')
{
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
} );
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</footer>
</body>
</html>

Try this... Hope it helps
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://localhost/test/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom.css" rel="stylesheet">
<link href="http://localhost/test/assets/css/custom_edit.css" rel="stylesheet">
<link href="http://localhost/test/assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://localhost/test/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/test/assets/datatables/js/dataTables.bootstrap.js"></script>
</head>
<body>
<pre>
<button class="btn btn-sm btn-primary" id="received">Received</button>
<button class="btn btn-sm btn-success" id="completed">Completed</button>
</pre>
<div id="load1">
<div id="div1">
<h3>Received Section</h3>
//code goes here......
</div>
</div>
<div id="load2">
<input type="hidden" id="show_completed" value="1" name="show_completed">
<div id="div2">
<h3>Completed Section</h3>
//code goes here......
</div>
</div>
<script type="text/javascript">
var $show_completed = document.getElementById('show_completed');
if($show_completed.value == '0'){
setInterval(function() {
$("#load1").load(location.href+" #load1>*","");
}, 10000); // seconds to wait, miliseconds
} else($show_completed.value == '1'){
setInterval(function() {
$("#load2").load(location.href+" #load2>*","");
}, 100000); // seconds to wait, miliseconds
}
</script>
<script type="text/javascript">
$(document).ready( function () {
$('#div2').fadeOut();
});
$("#received").on('click', function() {
document.getElementById("show_completed").value='0';
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#completed").on('click', function() {
document.getElementById("show_completed").value='1';
$("#div2").fadeIn();
$("#div1").fadeOut();
});
</script>
</body>
</html>

JavaScript Print function issue

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print
When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?
<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;}
.shadow(#shadow){
-webkit-box-shadow:#shadow;
-mox-box-shadow:#shadow;
box-shadow:#shadow;
}
.label-danger{
margin-left:10px;
margin-top:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//console.log(ev.target);
}
function drop(ev) {
ev.stopPropagation()
var EklenecekDiv=ev.target;
var data = ev.dataTransfer.getData("text");
//console.log(ev.target);
console.log($(ev.target).parent());
var divim=ev.target;
var c = divim.children;
console.log(c.lenght);
/*if(c[2]==null)
{
EklenecekDiv=$($(ev.target).parent());
EklenecekDiv.append()
var label1=document.getElementById(data);
var MyLabelAdd1=document.createElement("div");
MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
$(MyLabelAdd1).attr("name","KolonAdi");
EklenecekDiv.append(MyLabelAdd1);
divim.remove();
label1.remove();
return;
console.log(EklenecekDiv);
}
if(c[3]!=null)
{
c[3].remove();
}*/
var label=document.getElementById(data);
var MyLabelAdd=document.createElement("div");
MyLabelAdd.appendChild(document.createTextNode($(label).html()));
$(MyLabelAdd).attr("name","KolonAdi");
if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }
EklenecekDiv.appendChild(MyLabelAdd);
label.remove();
}
function tiklandi()
{
alert("Okey");
}
function Click(e){
if(SecilenItem==null)
{
alert("Lütfen Alan Seçiniz");
return;
}
var item=SecilenItem;
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
KolonDiv.style.marginLeft=Bosluk+"px";
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
};
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
var originalContents = document.body.innerHTML;
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function TabloAlanTiklandi (e){
SecilenItem=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
//e.remove();
}
function FontLi(e)
{
YaziFont=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
}
function StilDegistir(e)
{
}
function EkAlanClick(e){
if($("#EkAlan").val()==null)
{
alert("Lütfen Alan Giriniz");
return;
}
var h1=document.createElement("h1");
var item=$("#EkAlan").val();
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
$("#EkAlan").val("");
}
function BoslukEkle(e)
{
if($("#Aralik").val().lenght==0)
{
alert("Aralik Degeri Giriniz");
return;
}
Bosluk=$("#Aralik").val();
alert(Bosluk);
$("#Aralik").val("");
}
function BoyutEkle(e)
{
if($("#YaziBoyutu").val().lenght==0)
{
alert("Boyut Degeri Giriniz");
return;
}
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Calendar</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Left side column. contains the logo and sidebar -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
<div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
<span class="caret"></span></button>
<ul id="Secenekler" class="dropdown-menu">
<li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
<li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
</ul>
</div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>
<div class="col-xs-1"></div>
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>
<div class="col-xs-4" ></div>
<label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
<label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
<span class="caret"></span></button>
<ul id="Fontlar" class="dropdown-menu">
<li><a onClick="FontLi(this)" href="#">Georgia</a></li>
<li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
<li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
<li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
<li><a onClick="FontLi(this)" href="#">Arial</a></li>
<li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
<li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
<li><a onClick="FontLi(this)" href="#">Impact</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
<li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
<li><a onClick="FontLi(this)" href="#">Verdana</a></li>
<li><a onClick="FontLi(this)" href="#">Courier New</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
</ul>
</div>
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>
</div>
<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>
<!-- /.content -->
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->
</body>
</html>

It's not an optimal solution but can you try replacing CiktiGetir function with this:
function CiktiGetir(e){
var htmlElement = document.querySelector("html");
var printContents = document.getElementById("Kolonlar");
// Make body invisible, append new element to HTML
document.body.style.display = "none";
htmlElement.appendChild(printContents);
window.print();
// Make body visible again, remove the added element
document.body.style.display = "initial";
htmlElement.removeChild(printContents);
}
Replacing HTML content breaks the JS events and dynamic contents.

You are replacing the body HTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
So you will need to reatach the events.
Try the "on" jquery method. Something like
$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

My code was just an example. You will have to adapt it to your code.
You need to reatach the events after replace body content.
If, you dont want to to this, you can refresh the entire page.
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}

Jquery-ui dialog error

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>

Develop Reference

JavaScript is the programming language of the Web.

How to fix my jQuery animation? - javascript

Related

JS works on CodePen but not locally [duplicate]

How to add multiple charts to leaflet maps?

I have a jquery issue. I have two divs showing and hiding. Both are set to refresh but one is overriding it

JavaScript Print function issue

Jquery-ui dialog error

Categories

Resources