I really don't understand why IE (only, ok for any other browser) gives me HTML1402: Character reference is missing an ending semi-colon “;” with the following code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<span id="here"></span>
<div id="url_iframe">https://www.google.com.br/search?q=ie+html+1402+with+jquery&ie=utf-8&oe=utf-8&client=firefox-b&gws_rd=cr</div>
<script>
var url_iframe = jQuery('#url_iframe').text();
jQuery('#here').append('<iframe src="'+encodeURIComponent(url_iframe)+'" scrolling="no" frameborder="0" width="320" height="300"></iframe>');
</script>
</body>
</html>
Some one know how to fix it, so that stop to appear in console?
I tried without encodeURIComponent and same error.
The URL is just a sample, I konw that won't work, it's a test for an issue of a very big and complex code, all I discover was if I change it to iframe instead of using jquery, no warning shows, but I need to do it with jquery, because of the data before my append in the real web application.
Assuming that the error had to be a MS bug, I discovered that I was right and all I needed was to swap the div for input:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<span id="here"></span>
<input type="hidden" id="url_iframe" value="https://www.google.com.br/search?q=ie+html+1402+with+jquery&ie=utf-8&oe=utf-8&client=firefox-b&gws_rd=cr"/>
<script>
var url_iframe = jQuery('#url_iframe').val();
jQuery('#here').append('<iframe src="'+url_iframe+'" scrolling="no" frameborder="0" width="320" height="300"></iframe>');
</script>
</body>
</html>
If someone know how to do it with div, I will be glad if share here...
Related
I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#content').load("import.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
and here is the page that I'm trying to import:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="test-div">
<p>This is some text.</p>
</div>
</body>
</html>
can somebody please point out what I might be doing wrong here?
The DOM is likely not fully loaded when the .load function is being run. Change to this.
<script>
$(document).ready(function() {
$('#content').load("import.html");
});
</script>
Note - as in the comment, this only works on a server.
It should ideally work. There must be some other issue
Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?
It's just a couple of lines of code: http://jsfiddle.net/z7bHt/
HTML:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
</body>
JAVASCRIPT:
$("#bowleft").mouseenter(function(){
console.log("worked!!!");alert("worked!!!");
});
but this simple mouseover isn't working, locally or remotely, in either chrome or firefox!
Could someone try this themselves to see if i'm going crazy or if it is my operating system? https://www.dropbox.com/s/ahpaluj2e7ru9xn/mouseover.zip
The .mouseenter code is running before the #bowleft element exists. You need to ensure that it runs after that element exists in the DOM. There are many ways to do this. I would suggest moving your JavaScript to right before </body>. You can also wrap it in:
$(function () {
Or $(document).ready(function () {, which is functionally the same.
I would also suggest using .on instead of the specific function named after the event, but this doesn't affect you here. All together:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").on("mouseenter", function () {
console.log("worked!!!");
});
</script>
</body>
You are trying to reference the image with your JS before it exists in the DOM.
The best thing to do is to move your JS to just before the closing body tag, like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").mouseenter(function(){
console.log("worked!!!");
alert("worked!!!");
});
</script>
</body>
</html>
If you want to keep it in the head of the document, you'll have to wrap it in a $(document).ready() callback.
try this it worked ........
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bowleft").mouseenter(function () {
console.log("worked!!!"); alert("worked!!!");
});
});
Let's say we have this markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>project.js</title>
<script src="project.js"></script>
<script>
</script>
</head>
<body>
<h1>some project — javascript & html tests</h1>
<hr />
<p>
testing 123
</p>
</body>
</html>
I know that there are .prependChild(), .appendChild(), .innerHTML, etc, properties and methods, but what I am looking for is how to add (append) contents after the </body> tag closure?
I need this, without using jQuery — is it possible?
If you use 'id'.you can use these property:
document.getElementById('id').nextSibling;
document.getElementById('id').previousSibling;
It won't work in some browser because content after body is not "legal". Anyway, this would be:
document.body.parentNode.appendChild(document.createTextNode('text after body'));
document.body.parentNode.appendChild(document.createComment('comment after body'));
http://jsfiddle.net/yVKk6/ and inspect the Result frame.
I used window.scrollYMax in firefox to get the max scroll, and used window.scrollY to find how close I was to the bottom of the page so that I could load more feeds. Problem is window.scrollYMax doesn't work outside of firefox! Help!
I think that you need document.body.scrollHeight
Those properties are Firefox-specific. This page gives a good explanation of what browsers support what: http://www.quirksmode.org/dom/w3c_cssom.html.
You might be looking for:
x.scrollWidth
x.scrollHeight
The following code works great for me -
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<embed id="pdf" src="your-source-of-pdf" width="100%" height="" type='application/pdf'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#pdf').attr('height', document.body.scrollHeight);
});
</script>
</body>
</html>
Why is it so that when you use window.parent.showMessage("Video Is OK"); inside a .js file you've included on a page, it won't work, but only if it's on the page itself..?
Can you fix this?
There are two scenarios that I can think of where you'd want to use window.parent. The first is when you have a window open another window using window.open. The other is where the first window uses an iframe to load a page. In the former case, it appears as though you actually want to use window.opener, as ukostin has said. In the latter case, window.parent works fine. Both methods work properly whether the code is inline or loaded from an external JS file. Here are some tests:
POPUP
parentWindow.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
<body>
Open
</body>
</html>
externalWindow.js:
function showMsgExternal(msg){window.opener.showMsg(msg);}
childWindow.htm:
<html>
<head>
<script>function showMsgInline(msg){window.opener.showMsg(msg);}</script>
<script src="externalWindow.js"></script>
</head>
<body>
Inline
External
</body>
</html>
IFRAME
parentFrame.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
</head>
<body>
<iframe src="childFrame.htm" width="300" height="100"></iframe>
</body>
</html>
externalFrame.js:
function showMsgExternal(msg){window.parent.showMsg(msg);}
childFrame.htm:
<html>
<head>
<script>function showMsgInline(msg){window.parent.showMsg(msg);}</script>
<script src="externalFrame.js"></script>
</head>
<body>
Inline
External
</body>
</html>
Try to use window.opener as link to the parent window.