i have this file in which i want to find height of DIV with id "cpDocument" with the help of jquery. This DIV can be seen inside documen.body.innerHTML in line number 46.
index_scorm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>
<script src="../../jquery.min.js"></script>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script>
var deviceReady = false;
var initCalled = false ;
var initialized = false;
function onBodyLoad()
{
if(typeof window.device === 'undefined')
{
document.addEventListener("deviceready", onDeviceReady, false);
}
else
{
onDeviceReady();
}
}
function onDeviceReady()
{
deviceReady = true ;
if(initCalled === true)
initializeCP();
}
function initializeCP()
{
if(initialized)
return;
initCalled = true ;
if(cp.pg && deviceReady === false)
return;
function cpInit()
{
document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'> <div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' > <div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> <canvas id='slide_transition_canvas'></canvas> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> </div> <div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'> </div> <div id='playbar' style='bottom:0px; position:fixed'> </div> <div id='cc' style='left:0px; position:fixed;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> <div id='gestureIcon' class='gestureIcon'> </div> <div id='gestureHint' class='gestureHintDiv'> <div id='gImage' class='gesturesHint'></div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div>";
cp.DoCPInit();
var lCpExit = window["DoCPExit"];
window["DoCPExit"] = function()
{
if(cp.UnloadActivties)
cp.UnloadActivties();
lCpExit();
};
}
cpInit();
initialized = true;
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='initialLoading'></div>
<script>
(function()
{
if(document.documentMode < 9)
{
document.body.innerHTML = "";
document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");
return;
}
window.addEventListener("load",function()
{
setTimeout(function()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'assets/js/CPXHRLoader.js';
script.defer = 'defer';
script.onload = function()
{
var lCSSLoaded = false;
var lJSLoaded = false;
function constructDIVs()
{
if(lCSSLoaded && lJSLoaded)
{
initializeCP();
}
}
cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
lCSSLoaded = true;
constructDIVs();
});
var lJSFiles = [ 'assets/js/jquery-1.6.1.min.js','scormdriver.js','assets/js/CPM.js' ];
cpXHRJSLoader.js(lJSFiles,function()
{
//console.log("js loaded");
lJSLoaded = true;
constructDIVs();
});
}
document.getElementsByTagName('head')[0].appendChild(script);
},1);
},false);
})();
</script>
<noscript style="text-align:center;font-size:24px;">Enable Javascript support in the browser.</noscript>
</body>
</html>
Iam trying to do something like this with no luck:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("body").on('load', function() {
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
});
});
</script>
The script for finding the height of the element can be the last list of initializeCP() function eg.
cpInit();
initialized = true;
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
Related
I ve the following working in codepen but not localy
https://codepen.io/LoudDesignStudios/pen/RwxPJKY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/css1.css">
</head>
<body>
<section id="about-us" class="">
s1
</section>
<section id="why-choose-us" class="">
s2
</section>
<section id="funfacts" class="">
s3
</section>
<section id="services" class="">
s4
</section>
<section id="studio" class="">
s5
</section>
<section id="contactus" class="">
s6
</section>
<section id="footer-widgets" class="">
s7
</section>
<footer id="footer" class="footer">
footer
</footer>
<button onclick="topFunction()" id="scrollUp"><i class="las la-chevron-up" aria-hidden="true"></i></button>
<script>
var mybutton = document.getElementById("scrollUp");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Same codes working in other websites made a while ago and still working just starting from scratch now the window.scroll is not firing.
Thanks.
It's because you're trying to get an element (mybutton) by its ID before the document's contents are fully loaded.
You will need to wrap your code inside a DOMContentLoaded event handler. Below is slightly modified version of your JavaScript code:
document.addEventListener("DOMContentLoaded", function () {
var mybutton = document.getElementById("scrollUp");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
});
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
I'm trying to click a button on an iPhone screen. It works fine on my computer. On the iPhone, the button highlights like the safari browser is trying to select it.
<html>
<head>
</head>
<link rel="stylesheet" href="style.css">
<body id="body" overflow="hidden" bgcolor="black" text="white">
<center>
<div class="content">
<div class="buttons">
<div class="button button1" id="button1"></div>
<div class="button button2" id="button2"></div>
</div>
</center>
</body>
<script src="engine-portal.js"></script>
<script src="socket.io.js"></script>
<script src="controller.js"></script>
<script src="controller-link.js"></script>
</html>
<style type='text/css'>
canvas {
/*border: 1px solid #aaa;*/
cursor: none;
}
</style>
<script>
</script>
'use strict';
class Controller extends Portal {
setup() {
}
connectToServer() {
this.io = io();
this.io.portal = this;
console.log("test");
this.io.emit('join', {});
}
installCanvas() {
}
installInput() {
var b1 = document.getElementById('button1');
b1.addEventListener("mousedown", this.b1down);
b1.addEventListener("mouseup", this.b1up);
b1.controller = this;
var b2 = document.getElementById('button2');
b2.addEventListener("mousedown", this.b2down);
b2.addEventListener("mouseup", this.b2up);
b2.controller = this;
}
b1down(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b1Press();
}
b2down(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b2Press();
}
b1up(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b1Release();
}
b2up(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b2Release();
}
b1Press() {
this.moveInput = -1;
}
b2Press() {
this.moveInput = 1;
}
b1Release() {
this.moveInput = 0;
}
b2Release() {
this.moveInput = 0;
}
parseInput(key_pressed_map, key_up_map, key_pressing_map, key_depressing_map) {
if (this.moveInput == 1) {
this.io.emit('input', 'down');
} else if (this.moveInput == -1) {
this.io.emit('input', 'up');
}
}
}
Im making a simple hud that supposed to show itself when your mouse is on the main panel.
For some reason the onmouseover and out not working. When I click inspect element in the browser on the panel it shows me the html tag. I know that the listeners were created, again from looking at the inspect element in the browser.
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
<img src="icons/white/open.png" style="float:right" class="btnMedia" />
</div>
<div id="bottom">
<center>
<img src="icons/white/pre.png" class="leftandright btnMedia" />
<img src="icons/white/play.png" class="leftandright btnMedia" />
<img src="icons/white/next.png" class="leftandright btnMedia" />
</center>
</div>
</div>
</body>
<script>
var panel = document.getElementById("mainpanel");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
//alert("script")
panel.onmouseover = function() {
alert("in")
top.display = "block";
bottom.display = "block";
}
panel.onmouseout = function() {
alert("out")
top.display = "none";
bottom.display = "none";
}
</script>
</html>
There are two things wrong in your code.
Missing style when manipulating with CSS values
And top is a reserved keyword in JavaScript and it's tricky to use it as an variable
This works:
var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
top2.style.display = "block";
bottom.style.display = "block";
}
panel.onmouseout = function() {
top2.style.display = "none";
bottom.style.display = "none";
}
#mainpanel {
background: #faa;
height: 100vh;
}
#top, #bottom {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
I am top!
</div>
<div id="bottom">
I am bottom!
</div>
</div>
</body>
</html>
Hi I am doing a project in computing for school. I need to get my drag able jQuery box to interact with my traffic lights( my traffic lights are on a cycle) when the box touches i need to traffic light cycle to start, is this possible? any help would be much appreciated,
Here is my code so far;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightscentre = 0
var timer
function ChangeImage() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function LightCycle() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function stopCycle() {
clearTimeout(timer)
}
</script>
</head>
<body>
<img src="red.png" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="ChangeImage()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
You can use drag event:
function init() {
var $light = $('img');
var $draggable = $('#makeMeDraggable').draggable({
drag: function( event, ui ) {
var light_offset = $light.offset();
if (ui.offset.left < light_offset.left+$light.width() &&
ui.offset.left + $draggable.width() > light_offset.left &&
ui.offset.top + $draggable.height() > light_offset.top &&
ui.offset.top < light_offset.top+$light.height()) {
if (!timer) {
LightCycle();
}
} else {
clearTimeout(timer);
timer = null;
}
}
});
}
JSFIDDLE
Either you could do the function in Jquery, for the animation(?) or what you were planning. Else, you can convert Jquery variables in JS to use them in your functions. The best way would be to take any GET/POST and do those in Jquery and do everything else in JS, or the data fetching part.
Also, good luck with your project. Feel free to hit me up at #ev1stensberg ( twitter) and chat.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightsCentre = 0;
var timer = setInterval(function {
window.location.reload()
}, 3000);
var turnOnTheLights = function(e) {
e.preventDefaults();
switch(lights) {
case (document.getElementbyId('redLights').onClick == true) :
return lights[0]
setTimeout(function() {
console.log("hello"),
}, 3000);
case(document.getElementbyId('redLights').onClick == true &&
return lights[0] == true) :
return lights[1].
setTimeout(function() {
console.log("I'm a terrible programmer");
}, 3000)
case(document.getElementbyId('redLights').onClick == true &&
return lights[1] == true) :
return clearInterval(timer)
break;
default: window.location.reload();
}
return lights;
}
var turnOffTheLights = function(e) {
e.preventDefaults();
return window.setTimeout(function() {
console.log("Heyho"), 3000
});
}
</script>
</head>
<body>
<img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="turnOnTheLights()">
<input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
I have an HTML5 (jsp) page with a link (here) to another page which has a link on it (Home) that, when clicked, pops up a message. However, the message pops up when the page is loaded, which is undesirable. Would someone please look at the below code and give me a solution/suggestion as to how to prevent this behavior? Thank you.
HTML link on first page:
<td class="align-left">Click here</td>
JavaScript:
<script>
function fnCallActionOnSelf(actionName)
{
if(actionName == "newpage.htm"){
nullPageValues(); //here link does not like special characters like apostrophes being sent over by the GET
}
document.forms[0].method = "GET";
document.forms[0].target = '';
document.forms[0].action = actionName;
document.forms[0].submit();
}
function nullPageValues() {
//This is for the here link because it does not like special characters like apostrophes being sent over by the GET
document.getElementById('textField1').value="";
document.getElementById('password').value="";
document.getElementById('Name').value="";
document.getElementById('Address').value="";
document.getElementById('City').value="";
document.getElementById('PhoneNumber').value="";
}
</script>
Jsp page that here link points to:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta content="IE=9; IE=8; IE=7; IE=EDGE; chrome=1" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="Pragma">
<meta content="0" http-equiv="Expires">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
</head>
<body>
<div id="container">
<center>
<div style="width: 960px;">
<div>
<div id="Help"
style="vertical-align: middle; display: table-cell;">
<jsp:include page="Help.jsp">
<jsp:param name="isHome" value="no" />
</jsp:include>
</div>
</div>
</div>
</center>
</div>
<div style="clear: both"></div>
<form:form method="post" name="newform"
id="newform" commandName="newformModel" data-parsley-validate="true">
</form:form>
<!-- Lots of stuff here -->
<script src="/project/js/prototype.js" type="text/javascript"></script>
<script src="/project/js/scripts.js" type="JavaScript"></script>
<script src="/project/js/global.js" type="text/javascript"></script>
<script src="/project/js/civem.js" type="text/javascript"></script>
<script src="/project/js/jquery-1.10.2.min.js"></script>
<script src="/project/js/jquery.validate.min.js"></script>
<script src="/project/js/jquery-ui.js"></script>
<script src="/project/js/plugin.js"></script>
<script src="/spiaprojectweb/js/validation.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</body>
</html>
Home link jsp page:
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
function fnCallActionOnSelf(actionName) {
document.forms[0].target = '';
document.forms[0].method = "POST";
document.forms[0].action = actionName; <script>
document.forms[0].submit();
}
function openWindow(anchor)
{
window.open(anchor,'NewWindow','status=0,toolbar=0,resizable=yes,scrollbars=1,width=800,height=600');
}
function findPosition( oElement )
{
oElement=document.getElementById(oElement);
if( typeof( oElement.offsetParent ) != 'undefined' )
{
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return posX;
}
else
{
return posX;
}
}
var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
var salesAidesPos=findPosition('salesLiId');
salesAidesPos-=20;
ddmenuitem.style.left=salesAidesPos+'px';
ddmenuitem.style.visibility = 'visible';
}
function mopenHelp(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
var salesAidesPos=findPosition('helpId');
salesAidesPos-=40;
ddmenuitem.style.left=salesAidesPos+'px';
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem)
{
ddmenuitem.style.left='0px';
ddmenuitem.style.visibility = 'hidden';
}
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<div id="navcontainer" class="header">
<span class="headtitle"></span> <span class="utility">
<ul class="dropdown">
<span id="helpId">
<li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()"
onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li>
</span>
</ul>
</span>
</div>
<div id="dialog" title="Help" style="display:none;">
<p><b>Help Message</b></p>
</div>
<div id="spacer">
<img src="/project/img/spacer.gif" />
</div>
<script type="text/javascript">
function setUpdateMessagePosition(oElement) {
oElement = document.getElementById(oElement);
if (typeof (oElement.offsetParent) != 'undefined') {
for ( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
if (document.getElementById("updateMsg") != null) {
posX = posX + 8;
posY = posY + 3;
document.getElementById("updateMsg").style.left = posX + "px";
document.getElementById("updateMsg").style.top = posY + "px";
}
}
}
I don't know what much of the above means, or whether it is necessary, but it seems to me that all the action (the code of interest) is in the below snippets from the above jsp file:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
</script>
<li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()"
onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li>
<div id="dialog" title="Help" style="display:none;">
<p><b>Help Message</b></p>
</div>
This is a good time for using sessionStorage! You can do it like this. Change this part of your code:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
$( "#dialog" ).dialog();
});
});
</script>
to this:
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
if (sessionStorage.visitedalready) {
sessionStorage.visitedalready= 1;
}
else{
$( "#dialog" ).dialog();
}});});
</script>
That session storage variable will be automatically removed once your session was ended.
<script>
$(document).on("click","a[name='lnkViews']", function (e) {
$(function() {
if (sessionStorage.visitedalready) {
sessionStorage.visitedalready= 1;
}
else{
$( "#dialog" ).dialog();
}});});
</script>
I'm not sure how this worked, but I changed the name of my div to an id and renamed the id to helpDialog and changed to use that in the $(document).on function. Then I got rid of the 'e' in the function parameter list for the function in the $(document).on parameter list. That fixed the problem. I'm not sure which of these did the trick.