How to prevent pop-up upon html page load - javascript

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.

Related

how to find height of div that is generated by javascript

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);

How do I get JavaScript to interact with Jquery?

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>

Jquery draggable jumps on click in Chrome

I have an issue with jQuery draggable. I have two images in a div with a background image. I can click and drag OK in Firefox but in Chrome they both jump to the top left of the div. If you click and drag again it works OK.
<!doctype html>
<html>
<head>
<title>Untitled Document</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<link href="css/styles-test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="plot_graph"> <img src="http://petentest.co.uk/images/plotgraph-v3.png" width="100%">
<div class="drag_container"> <i style="left:51.32211538461539%;top:40.056022408963585%; color: #00C; cursor: move;" class="pennant-blue fa-5x draggable"> <img src="http://petentest.co.uk/images/pp-blue-pennant-2x.png" width="32" /></i> <i style="left:51.32211538461539%;top:40.056022408963585%; color:#00FFFF; cursor: move;" class="pennant-red fa-5x draggable-manager" > <img src="http://petentest.co.uk/images/pp-red-pennant-2x.png" width="32" /> </i> </div>
</div>
<script>
$( ".draggable" ).draggable({
containment: ".drag_container",
stop: function() {
var plotX = $(this).position().left / $(this).parent().width() * 100;
var plotY = $(this).position().top / $(this).parent().height() * 100;
$('.plot_x').val(plotX);
$('.plot_y').val(plotY);
var java_id = $("input[name=java_id]").val();
//var ajaxurl = 'http://petentest.co.uk/includes/send_user_plot_data.php',
data = {
'performance_plan_id' : java_id,
'user_plot_x': plotX,
'user_plot_y': plotY };
$.post(ajaxurl, data, function (response) {
console.log("Plot saved successfully.");
alert('Your position was saved successfully.');
});
}
});
</script>
<script>
$( ".draggable-manager").draggable({
containment: ".drag_container",
stop: function() {
var plotX = $(this).position().left / $(this).parent().width() * 100;
var plotY = $(this).position().top / $(this).parent().height() * 100;
$('.plot_x').val(plotX);
$('.plot_y').val(plotY);
var java_id = $("input[name=java_id]").val();
var ajaxurl = 'http://petentest.co.uk/includes/send_manager_plot_data.php',
data = {
'performance_plan_id' : java_id,
'manager_plot_x': plotX,
'manager_plot_y': plotY };
$.post(ajaxurl, data, function (response) {
console.log("Plot saved successfully.");
alert('You cannnot move your manager\'s assessment.');
});
}
});
</script>
</body>
</html>
JSFiddle: https://jsfiddle.net/petenaylor/sk75rpuh/
I was able to get it to work by adding "position: absolute" into the styling for your pennant-blue icon.
.pennant-blue {
position: absolute;
}

Open a new page in a new window, print it and closed it

I still can't get this code to work, I am trying to use the "onClick" to swap the image once clicked, open this new page in a new window, print this new opened window and closed it. It opens the new page on the new window, but it prints a blank page and it cant close it, it seems that the focus is not been set somehow. Can any one help me on tis? Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print it</title>
<!--style type="text/css" media="print"> .noprint {visibility: hidden;} </style-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<script type="text/javascript">
// <!--
Popup = {
init : function () {
$('a.action_print').bind('click', Popup.printIt);
},
printIt : function () {
var win = window.open('doc1.html','Printed','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250');
if (win) {
win.document.close();
win.focus();
win.print();
}
return false;
}
}
$(document).ready(function () {
Popup.init();
});
// -->
</script>
</head>
<body>
<br>
CLick to Print:<br><br>
<p style=" padding: 125px 0; text-align: center;">
<a class="action_print" target="Printed"><img src="images/cam_off.png" class="img-swap" width="100" height="100" /></a>
</p>
</body>
</html>
Thanks for looking!
I figured it out, all works, I just had to make sure that my files I am printing leave in the same domain. I hope it can help others in need for such a thing, but any improvements on the code are welcome.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Open n Print</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
function openPrintWindow(url, name, specs) {
var printWindow = window.open(url, name, specs);
var printAndClose = function () {
if (printWindow.document.readyState == 'complete') {
clearInterval(sched);
printWindow.print();
printWindow.close();
}
}
var sched = setInterval(printAndClose, 200);
};
jQuery(document).ready(function ($) {
$(".test").on("click", function (e) {
var myUrl = $(this).attr('data-url');
alert(myUrl);
e.preventDefault();
openPrintWindow(myUrl, "to_print", "width=700,height=400,_blank");
});
});
});//]]>
</script>
</head>
<body>
</br>
<a class="test" href="javascript:;" data-url= "doc.html">open print and close doc</a>
<br />
</body>
</html>
The printIt looks weird. At first you close the document, then try to print the content. Try this:
if (win) {
win.focus();
win.print();
win.close();
}
Closing document won't close window, hence win.close(). Notice also the line order.
Also, jQuery 1.4 is quite old, have you considered to update to a newer version?
You may put your javascript/JQuery code in the place where I put the window.print();
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg", "window.print();", true);
To let the full content of the window load properly, change the
printWindow.close()
to
printWindow.onfocus=function(){ printWindow.close();}
See Close window automatically after printing dialog closes

RunningPuppy Animated Gif

I am stuck on my homework project. I am supposed to create a JavaScript program that shows an animated puppy running. I must use caching to start the animation as soon as the images finish loading and 1 of the following: getElementsByName(), getElementById(), or getElementsByTagName(). Here's what I have so far but when I run it in Firefox all I see is a flashing box that says "image of a puppy"
<!DOCTYPE HTML>
<html>
<head>
<title>Running Puppy</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
var puppy = new Array(6);
var curPuppy = 0
for (var imagesLoaded=0; imagesLoaded < 6;
++imagesLoaded) {
puppy[imagesLoaded] = new Image();
puppy[imagesLoaded].src
= "images/puppy" + imagesLoaded + ".gif";
}
function run(){
if (curPuppy == 5)
curPuppy = 0;
else
++curPuppy;
document.getElementById("puppyImage").src = puppy[curPuppy].src;
}
/*]]> */
</script>
</head>
<body onload="setInterval('run()', 150)">
<img src="images/puppy0.gif" id="puppyImage" width="263" height="175" alt="Image of a puppy." />
<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1 id='mainHeading'></h1>");
document.getElementById("mainHeading").innerHTML = document.getElementsByTagName("title")[0].innerHTML;
/*]]> */
</script>
</body>
</html>

Categories

Resources