Hello to all the community.
First of all I'd like to thank everyone for hundreds of great answers I found here in the past. It is probably the first time I don't find one.
I discovered today that my IE11 does not digest $.data() when a page is first opened in its tab. Here's the test code (http://dmit.izihost.com/temp/test_IE11_jQuery.htm):
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#do').data('data1', '1');
$('#do').html($('#do').html() + '<br>Document Ready: ' +
$('#do').data('data1') +
" - Here the data is still present"
);
});
$(window).load(function(){
$('#do').html($('#do').html() + '<br>Window Load: ' +
$('#do').data('data1') +
" - Here in IE11 the data is lost when page is opened for the first time; but present after reloading (F5, Ctrl+F5 etc.) in the same browser tab");
});
</script>
</head>
<body>
<div id="do"></div>
</body>
</html>
Try to open it with IE11 (if you test locally, drag-drop the file into the browser rather than double-click), then refresh the page, then open it again in another tab/instance.
I find nothing of the sort in Google. Can someone please shed the light on this issue? It seems to be rather ugly, unless it's a temporary bug.
Good day!
D
P.S. IE version: 11.0.9600.16518
Related
I'm trying to calculate the load time and page size of different URLs/Pages similar to the developer tools performance tab but in javascript. But the current code only calculates its current page instead of a different URL. Is there any way for me to do this because with my research I have no luck.
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency+"\n"+"Start time:"+start+"\n"+"End time:"+now);
alert("Load_size:"+document.getElementsByTagName("html")[0].outerHTML.length + "KB");
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
It will not be possible to read the runtime parameters of a page outside the page your javascript is running on.
Part of the security model is to avoid being able to inspect the runtime of other pages. This is called the "sandbox". You'll need to build a plugin that breaks the sandbox to inspect the domLoad / domReady and other performance events.
Good news though, you probably have one built in! The console for modern browsers shows all those events in the timeline tab.
If you're trying to make a service that attempts to evaluate the runtime of other pages, you'll need to load those in a virtual web browser on the server and interpret the results using selenium or something similar.
You can try this to calculate the load time of a page:
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
});
</script>
edit: this will only work on pages where this JS code will run, so if you cant insert code onto the page you wont be able to run it.
I am beyond new to JavaScript. Having only just differentiated it from Java as a programming language, I have decided to take it up, and want to try out some practical projects. But I have no idea what I'm doing wrong in terms of why my code is just screwing up.
The Idea
At work, I have a system where by simply opening a URL in my browser I can execute a script to reset a batch of ribbon screens. I don't know how the code works, but it does, and I'm happy. But I rather want to have a webpage I can go to that batch opens every webpage. It can be messy; at this point I only want the job done. So from what I understand, I've managed to cobble together some code.
Code
<!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>Ribbon screen batch Reset</title>
<script>
var txt="Success!";
function open()
{
try
{
window.open("test.html");
document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="open()">Run code</button>
</body>
</html>
I promise you I can't see a problem, I have another document in the same folder called test.html, it's just when I click the button on index.html the button disappears, and I'm left with just a blank page. Help is much appreciated!
Two simple fixes:
1) open is a reserved word; call your function something else.
2) You must name the window, then use that name to manipulate it.
Code:
<html>
<head>
<script type="text/javascript">
var txt="Success!";
function openit()
{
try
{
testwin = window.open("test.html");
testwin.document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="openit()">Run code</button>
</body>
</html>
Rename your function to something else, like openMyPage. Using onclick="open()" will call document.open
I have no idea what the "ribbon screen" is but your code has a lot of problems.
First, being if you are using document.write() in <header> the outcome is not going to be visible and it's overall bad practice.
Second problem is this is completely wrong document.write("<p>",txt,"</p><br />");
the correct code would be document.write("<p>"+txt+"</p><br />");
Third, is you can write this whole thing as just one short line:
<button type="button" onclick="window.open("test.html")">Run code</button>
Hope this helps,
Cheers
Already searched the whole web for a solution. First i used jqplot for the visualization of a mysqldatabase, but with growing arrays i'm trying to switch to dygraph, moreover its optimiesed for timedate, the problem is i cannot get it to work on ie explorer <9 especially with regard to the document modus. also tested ietester....
the page of dygraph itself works with the graphs, copied the important parts from it but still cannot get it working, maybe someone can show me my mistake or is it better not to use dygraph?anyone makes use of this and gets it working for internetexplorer 6-8?
The problem is the jquery document.ready function without it everything works fine...
<!DOCTYPE html>
<html>
<head>
<!-- Framework,Diagramm-Klasse,Jqplot,Jqplot Plugin -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurationstool</title>
<script type="text/javascript" src="jquery-test.js"></script>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80], [3,50,60], [4,70,80]]
);
});
</script>
<div id="diagrammpreview" style="height:500px;width:500px;"></div>
</body>
</html>
thanks in advance
What does the debug console in IE say the problem is? It's probably either a race condition or a conflict with the $ variable. You can try to use a pure javascript alternative the ready/load function such as:
window.onload=function() {
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80[3,50,60], [4,70,80]]);
});
I had the same problem in IE and FF.
$(window).load(function) {
instead of
$(document).ready(function) {
helped, together with including the jquery library directly into the html file (although it was included in my CMS)
I'm fairly new to programing, especially javascript. I have created what I am regarding as an net-art project that refreshes a browser and cycles through a series of images. I want the browser window to automatically resize to the dimensions of the images, 612x612 px. I've tried everything I can think of, everything I've come across on the web, and nothing seems to work with the code I have set up for the refresh and image load. I need assistance.
Let me say that I am normally against such unser unspecified browser resizes or any intrusive script that doesn't allow the user to make that decision on his/her own. But this is an art project and will only exist as part of a gallery on my own website and the user will be warned ahead of time, before clicking the link, that their browser will resize.
What I want is for the browser to resize to the specified dimensions when the page loads, then cycle through the images, via the automatic refresh.
So please, anyone who would be willing to offer their assistance with this I would be very very grateful. I've gotten pretty far I think and this resize is the last little bit of the puzzle. Thank you in advance.
You can see the rough project with no resize here: http://jasonirla.com/bgchange%202/
and the code I'm using:
<!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" />
<meta name="title" content="Background Change" />
<meta name="description" content="Background Change" />
<title>Everyday Sky</title>
<script type="text/javascript">
// auto refresh window PT 1
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// no. of images in folder is 43
var totalCount = 43;
// change image on refresh
function ChangeIt() {
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpeg';
}
</script>
</head>
<!-- Refresh PT 2 with timer in seconds 5000=5seconds-->
<body onload="JavaScript:timedRefresh(100);">
<script type="text/javascript">
ChangeIt();
</script>
<style type="text/css">
body {
background-repeat: no-repeat;
}
</body>
</html>
It's true, you can only set the size of a browser window by creating a new window with JavaScript but many security settings will block pop-up windows. I think it's bad UI design to do what you're attempting anyway. If you really want something modern and highly functional, Lightbox (as mentioned above) is a great tool as well as the dialog box in the jQuery UI.
Since this for an exhibition, you will choose what browser to use but most new browsers dont let JavaScript resize them anymore. Worth a try, though.
<body onload="JavaScript:timedRefresh(100);resizeTo(500,500);self.moveTo(640,10);>
....
</body>
Cheers.
I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.