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>
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?
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...
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!!!");
});
});
Ok, here is the situation. I have a site that I subscribe to that lets you add your own code, etc. They have a forum editor that I am unable to skin to match my site, so I'd like to just change the colors of the inner most frame (doc3 in the example below).
Here is the basic setup... yes, all documents are from within the same domain but I can only add code to the main document. The doc3 frame is created dynamically. The first frame has a class but no name, the second only has an id... I don't know if the bind works for the inner frame, but firebug isn't giving me any errors.
Oh, and I have tried injecting a stylesheet as well without success.
Main document (with my attempts at accessing doc3)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('iframe').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // This does change doc2 colors
$(this).contents().find('iframe#doc3').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // doesn't work :(
})
})
})
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc2.htm
<html>
<head>
</head>
<body>
<form id="form1">
Document #2
<iframe id="doc3" src="doc3.htm" width="100%" height="250">
</form>
</body>
</html>
doc3.htm
<html>
<head>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
I hope I made this clear enough. Any help or a point in the right direction would be greatly appreciated :)
Edit: updated the Main document with the suggestion from Wahnfrieden (thanks!), but sadly I still can't get to doc3.htm
Assuming your iframes are all on the same domain give this a shot:
$(function() {
$(window).load(function() {
var iframe2body = $('iframe').contents().find('body');
iframe2body.css({ 'background-color': '#333333', 'color': '#ddd' }); // doc2 colors
iframe2body.contents('iframe').contents().find('body').css({ 'background-color': '#fff', 'color': '#ddd' }); // doc3 colors
})
})
I didn't chain it ALL together purely for readability purposes and for IE I had to change it to $(window).load(function() {
$('#iframeID').contents().find('#someID').html();
Accessing to the document object using the iframe element can be pretty problematic. In most cases browsers let the embedded document to access the parent window's context but not vice versa. So in doc2.htm or whichever you want to control, assign your document object to parent windows variable.
main document:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
window.onIframeReady = function () {
setChildColor("#bbb");
}
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc3.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
parent.parent.setChildColor = function (color) {
document.bgColor(color);
}
$(function () {
parent.parent.onIframeReady();
})
</script>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
If the innerframe has a name try
innerframeName.document.body.style.backgroundColor="#000000";
I had the innerframe bgcolor set by
< style type="text/css">
body{background:#cccccc;}
< /style >
and was able to change it.
I want to detect the height of the viewable area using Javascript. I have this DIV of height 550px which I want to display on the browser. However, this height might cause the vertical scrollbar to appear on some browsers (depending on how many toolbars the user has installed). In that case I want to detect that, and alert the user about it.
I tried using document.body.clientHeight but it doesnt seem to work... gives me the same height when I tried adding new toolbars and refreshed the page.
this should help you:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Extremely easy in jQuery (and works well across different platforms):
<html>
<head>
<title>Heyo</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height());
});
</script>
</body>
</html>
Documentation here
It's easy with YUI as well.
<html>
<head>
<title>Heya</title>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0b1/build/yui/yui-min.js"></script>
</head>
<body>
<script type="text/javascript">
YUI().use('node', function(Y) {
alert(Y.get(document).get('winHeight'));
});
</script>
</body>
</html>
Documentation here