I have made a similar kind of image viewer mentioned in below site for my website.
http://www.javascriptkit.com/script/script2/backbox/
The image viewer is working fine in Chrome but not working in Internet Exlporer;
I have not given my website details for security reasons but you view the issue by copy pasting below link in Chrome and Internet Explorer.
http://www.javascriptkit.com/script/script2/backbox/
Click the Image in above link and see the error in internet explorer & see the same in other browser to see its working condition...
PFB snap shot
Could any one of you tell why is not working in internet explorer ?
Error Msg from IE F12 devolper tools console area is :
SCRIPT5007: Unable to get value of the property 'replace': object is
null or undefined effects.js, line 1 character 1747
effects.js =
http://www.javascriptkit.com/script/script2/backbox/js/effects.js
If you need sample js files, please get that from http://www.javascriptkit.com/script/script2/backbox/backboxfiles.zip
HTML used is;
<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>
<script type="text/javascript" src="js/customsignsfooter.js"></script>
regarding about your concern why this occurs in IE and not in chrome, that's because of this condition if(/MSIE/.test(navigator.userAgent) which is true when your browser is IE
for correcting the issue, as you said in a comment you can add a 'undefined' condition.
just replace this line:
if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}
with:
if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}}
and this line:
if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")});}
with:
if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")});}}
in the effects.js file
Open developer tools in IE (press F12) and click the "Console" tab. You should be able to see in there that there's an error with the effects.js script :
SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined
effects.js, line 1 character 1747
That should at least give you somewhere to start looking.
...and if you're that lazy, the actual line of code it's failing on is this :
Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")
The getStyle call is clearly returning null, so subsequently calling replace will fail.
Internet Explorer does not currently have full HTML5 support. Any manipulation of HTML5 related tags or elements will therefore fail. It is worth trying to include the html5shiv library, which tricks IE into believing these tags exist.
Related
I have created a simple website with bootstrap. I'm using the JQuery load function to include separate html files into one to make things manageable. The site is hosted on github pages.
When I open the site in chrome or using a local server it works correctly but when I open the site in Opera the closing script tags for the popperjs and bootstrap scripts disappear and the JQuery load function doesn't work so the external html pages are not rendered.
The site also works correctly when I serve it using a local server and open it in Opera. Also, there are no errors in the console so I don't understand what I'm doing wrong.
Here is my code -
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
</script>
<script>
function loadPartials(){
$("#about").load( "partials/about.html" );
$("#projects").load( "partials/projects.html" );
$("#resume").load( "partials/resume.html" );
$("#blog").load( "partials/projects.html" );
$("#contact").load( "partials/contact.html" );
}
$(document).ready(loadPartials);
</script>
And this is what the page source looks like in Opera -
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
<script crossorigin="anonymous" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js">
<script>
function loadPartials(){
$("#about").load( "partials/about.html" );
$("#projects").load( "partials/projects.html" );
$("#resume").load( "partials/resume.html" );
$("#blog").load( "partials/projects.html" );
$("#contact").load( "partials/contact.html" );
}
$(document).ready(loadPartials);
</script>
The site url is http://pkjc.github.io
I'm sure you have already but have you tried storing Jquery file locally?
Also the latest Opera is only supported:
Any problem with jQuery in the above browsers should be reported as a bug in jQuery.
(Current - 1) and Current denotes that we support the current stable version of the browser and the version that preceded it. For example, if the current version > of a browser is 24.x, we support the 24.x and 23.x versions.
If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or
Safari 5.1+, use jQuery 1.12.
Hope this helps
I've copied and pasted inside my HTML tag the adsense javascript code google hands out -
<ins class="adsbygoogle"
style="display:inline-block;width:234px;height:60px"
data-ad-test="on"
data-ad-client="XXXXX"
data-ad-slot="XXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
[I replaced the actual data-ad-client and data-ad-slot values with XXX when pasting the code here]
It works fine on Chrome, Firefox, Edge but on Internet Explorer i'm getting an exception thrown. It's saying "Javascript runtime error: Unable to get property 'getRandomValues'of undefined or null reference' on the r.crypto.getRandomValues(d); function call within adsense script.
No clue what's going on. Any help is appreciated.
You code be emulating an older version of IE.
You can test for the latest crypto using this script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Cryptography API</title>
</head>
<body>
<script>
var crypto = window.crypto || window.msCrypto;
if (crypto) {
console.log(crypto);
} else {
console.log("Unable to create window.crypto object");
}
</script>
</body>
</html>
You can check the mode you are running in developer tools:
Didn't manage to fully get around it, but i set visual studio to not bother with that exception and everything worked just fine. Eventually switched to DFP so this is no longer an issue if anyone still care.
We've just launched our new Magento site and the letter 'c' is appearing in quotes immediately after the tag. It's not showing up before on my local machine or on our QA site, I've checked the template files and it is not there either. I'm almost certain it can not be a code issue as we have the same code running locally and on our QA site under version control with GIT.
We've cleared the cache and I've tried checking to see if JavaScript was inserting it with the chrome dev tools but could find nothing.
Strangely, the 'c' is not in the view source document but I can see it with the chrome inspector.
I also don't think it can be coming from Magento CMS Pages/Blocks as it loading immediately after the tag.
thanks for the link. after reviewing the page source, you have an extra c character in the header area:
<!-- END GOOGLE ANALYTICS CODE -->
c<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Notice that c before the script tag?
Just in support to Benny Lin's very helpful answer.
What was happening was we had our Google Analytics code loading from a template file which contained the stray letter 'c'. We could see this on our local machines as this templates was disabled in the Magento admin settings, but not on production.
This issue seems to demonstrate that when a stray letter appears within the <body> tags on your dev tools inspector and not the view source page it may be because it is in the <head> section. The browser seems to push all poorly formatted html from the <head> section into the <body> section when rendering.
For example if you open the below html in the chrome browser you will see what I mean:
<!DOCTYPE html>
<html>
<head>
c<title>Title of the document in head</title>
<script type="text/javascript">
var test = "test";
</script>
</head>
<body>
The body of the document......
</body>
</html>
Also while we were searching for the stray letter, we were ably to remove it with the below JavaScript that targets the offending XML node in the DOM with an XPath expression and removes that node only.
<script type="text/javascript">
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
jQuery(_x('//html/body/text()[contains(.,"c")]')).remove();
</script>
I'm trying to use pyjamas (http://pyjs.org/). My input file, named hi.py, looks like this:
from pyjamas import Window
from pyjamas.ui import RootPanel, Button
from pyjamas.ui import HTML
def greet(sender):
Window.alert("Hello!")
b = Button("Click me", greet)
RootPanel().add(b)
I run the following command:
python ~/pyjs-pyjs-07f54ad/bin/pyjsbuild hi.py
Building : hi
PYJSPATH : [
/Users/michaelnatkin/HelloPyjs
/Users/michaelnatkin/pyjs-pyjs-07f54ad/library
/Users/michaelnatkin/pyjs-pyjs-07f54ad/addons
]
Built to : /Users/michaelnatkin/HelloPyjs/output
Which appears to run without errors, and here is my resulting directory:
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls .
hi.js hi.py output
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls output
__init__.py gchart.gif hi.safari.cache.html
_pyjs.js hi.html history.html
bootstrap.js hi.ie6.cache.html tree_closed.gif
bootstrap_progress.js hi.mozilla.cache.html tree_open.gif
disclosurePanelClosed.png hi.nocache.html tree_white.gif
disclosurePanelClosed_rtl.png hi.oldmoz.cache.html
disclosurePanelOpen.png hi.opera.cache.html
I then direct my browser to one of the html files: file:///Users/michaelnatkin/HelloPyjs/output/hi.html
and I get... a blank page. The only error in my js console is:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
which I guess isn't too surprising since the html file says:
<html>
<!-- auto-generated html - You should consider editing and adapting this
to suit your requirements. No doctype used here to force quirks mode; see
wiki for details: http://pyjs.org/wiki/csshellandhowtodealwithit/
-->
<head>
<title>hi (Pyjamas Auto-Generated HTML file)</title>
<meta name="pygwt:module" content="hi">
</head>
<body style="background-color:white">
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
</body>
</html>
So.. I'm completely stuck. Can someone tell me how to get this bad boy to produce output? I've got a much more complicated app I want to create, but if I can't say "Hello" it isn't going to go well. Thank you!
Have you tried it in Firefox too? While nothing is displayed with Chrome, with Firefox I get an error message which comes from the way you import RootPanel and Button. You should replace your single line by:
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
After that your button greets me properly.
And regarding the Chrome issue, either launch it with --allow-file-access-from-files or run a local web server to display your page. More details there: https://github.com/pyjs/pyjs/wiki/googlechromeproblems
I am attempting to embed a Youtube Video inside a webpage. I am using the Youtube Javascript API to embed/load the videos.
My Problem: The video embeds inside Internet Explorer but there are many javascript errors when I inspect the console. These errors mean I cannot replay the video, make the video grow, or really do anything. These javascript errors do not occur in Firefox or Chrome just IE.
Console Error:
SCRIPT87: Invalid Argument.
www-embed-player-vf1m....js line 211 character 405
Heres my JSFiddle that demonstrates the problem. Remember to RUN it in IE to see the problem.
My code:
<html>
<head>
<script src="https://www.youtube.com/player_api" type="text/javascript"></script>
<script type="text/javascript">
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '240',
width: '426',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid});
}, 500);
}
</script>
</head>
<body>
<p>Run in IE and look at console</p>
<div id="Go3u2zw6fbE"></div><script> loadYouTubeVideo("Go3u2zw6fbE"); </script>
</body>
<html>
The problem was that I was running the Javascript code from a local HTML file and not from a HTML file over the internet.
I guess when you run the Youtube Javascript API in a local HTML file (inside Internet Explorer only) the youtube video wont play. Even if I click 'Allow Javascript' it still wont play.