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
Related
I want to change the text of the status window when the mouse is over a link. My link's name is: Hipervinculo.
Then, when the mouse is out of the link it should appear a different text.
This is my html until now, but it doesn't work.
Can someone explain me how to do it?
Thank you so much!
<html>
<head>
<meta charset="UTF-8">
<title>Práctica 4</title>
<script type="text/javascript">
function info(txt){
window.status="txt";
}
function info2(txt){
window.status= "txt"
}
</script>
</head>
<body>
Hipervínculo
</body>
</html>
window.status has been disabled in most (if not all) browsers for security reasons (it was possible to fake a different location for links that way).
I have an extremely basic html document written as the following:
<html>
<head>
<title>A Basic Javascript Game</title>
</head>
<body>
<script language="JavaScript" src="mygame.js">
</script>
</body>
</html>
I've created an according Javascript file, have made sure that it's syntax is alright. The first line of the mygame.js file is:
var persontotalkto = prompt("You wake up one Saturday morning. The Holidays just started, and you can't wait to tell your family where you've decided for all of us to go on vacation! Who do you talk to: WIFE, SON, or DAUGHTER?").toUpperCase();
But when I open the html file, I'm not getting any prompt whatsoever. I have javascript enabled, so what is the problem?
Change the script tag to either the HTML4 version:
<script type="text/javascript" src="mygame.js"></script>
Or the HTML5
<script src="mygame.js"></script>
(Either will work on any browser released this millennium.)
Change
<script language="JavaScript" src="mygame.js">
</script>
to
<script type="text/javascript" src="mygame.js">
</script>
Ah the wretched noob I am, the following html document doesn't alert anyone of my cry for help. Anyone know why?
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
This works for me:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
Just fixed the src in the script tag.
Edit: Actually, the original syntax would work fine if you load the page in a non-local context. Leaving out the protocol implies that the 'current' protocol would be used depending on whether resources are loaded over http or https. Loading it locally implies that the script is loaded from file:///ajax.googleapis.com/...., which obviously won't resolve to anything. See here for more information. Thanks to #PetrolMan for pointing to the HTML 5 boiler plate site.
That same syntax is used in the HTML5 Boilerplate:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.2.min.js'>\x3C/script>")</script>
It's
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
not
//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
You are missing an http: in front of the url in the src attribute of the <script> tag:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
The source is jacked up. Use
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
Possible values for the Src Attribute are
•An absolute URL - points to another web site (like src="http://www.example.com/example.js")
•A relative URL - points to a file within a web site (like src="/scripts/example.js")
So you should have your URL as http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
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>
How to use jquery cookies in showing/hiding elements in a page ? I got the plugin from here
Tried some method but i am not successful. I used slideUp() and slideDown() functions to show/hide elements.
When a element is slided up a cookie should be set. when the page is refreshed, the element should be in slided up position
How to apply cookie when slided up and how to get the cookie when page is refreshed ?
I need help !
I think the following is what you're looking for. Let me know if I am mistaken. Good luck!
http://jsfiddle.net/8VCJY/8/
- EDIT -
Sorry! My cookies were getting set backwards. It does work now (new link). Again, all apologies.
- EDIT -
Actually, I don't even know if it does work. It looked like it did, but then reviewing my code, I can't see how that could be right. All in all, I'm pretty sure that the setting of the cookie at the appropriate time and whatnot will at least get you on the right path. I think my usage of the plugin is wrong, to be honest (I've never used it before), but I gave it what I could. I hope it was at least somewhat useful to you.
Would this do the trick?
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#outer {height:500px;width:500px;background-color:black;position:relative;}
#slide-me {height:50px;width:50px;background-color:white;position:absolute;top:250px;left:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<div id="outer">
<div id="slide-me"></div>
</div>
<button type="button" id="myBtn">Slide it!</button>
<script type="text/javascript">
$slideObj = $('#slide-me');
var topOffset = $.cookie('myCookie');
if(topOffset)
$slideObj.offset({top: topOffset - $slideObj.height(), left:$slideObj.offset().left});
$('#myBtn').click(function() {
$slideObj.slideUp();
$.cookie('myCookie', $slideObj.offset().top);
});
</script>
</body>
</html>
P.S I'm using the Cookie plugin.