|
JavaScript - Problem With Document.body.scrollheight
I wanted to resize the modal dialog based on the content of the modal dialog for that i used the following lines of code,
window.dialogWidth = document.body.scrollWidth+ "px"; window.dialogHeight = document.body.scrollHeight+ "px"; The 'document.body.scrollHeight' is not giving the exact height of the modal dialog bcos the button on the modal dialog are not completely visible to click for the user. Please can any one tell how to get the exact height of the modal dialog to resize it? Similar TutorialsHi, thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out! In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport. I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle. Imho pageheight = (document.body.scrollHeight+viewportheight); should give me the correct height of the page, but does not, why? It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which... Here the page: http://buchenbergschule.de/ruh/depre...ode/test7.html Here the JS Code: Code: <script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
var pageheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
pageheight = (document.body.scrollHeight+viewportheight);
document.write('<style type=text/css> div#linksaussen');
document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
document.write ('div#rechtsaussen1');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
document.write ('div#rechtsaussen');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')
//-->
</script>
Again please forgive my noobishness, my bad english and thanks again for any hint! Hello, I was wondering why my code is perfectly working in Firefox, but does not work in Internet Explorer at all: Code: <script language="javascript">
<!--
document.body.onload=document.body.appendChild(document.getElementById('testdiv'));
-->
</script>
I don't get any error messages, the div is just not showing how it is supposed to show with body as parent. Any suggestions? Thanks Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">
alert (document.body);
</script>
</head>
<body>
</body>
</html>
EDIT: moved script to after body, and now it works. Not the way it should be done I think ? I'm trying to implement saving the document.body.scrollTop value and then restoring it but the restore does not work. The SetScrollLocation() alert line is empty. The save alert() lines displays a value so its saving the scrollTop but it seems to loose the value on the SetScrollLocation() call. I'm saving on an OnClick event and then restoring when the form reloads from a refresh. PHP Code: function SaveScrollLocation () { document.forms[0].frm_body_hidden.value = document.body.scrollTop; alert(document.forms[0].frm_body_hidden.value); } function SetScrollLocation () { alert(document.forms[0].frm_body_hidden.value); document.body.scrolltop = document.forms[0].frm_body_hidden.value; } This code not work, Code: if( document.body.scrollTop() > 200 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
I want it to work without jQuery, because half my site die's when i use jQuery, jsut want a simple scrollTop script for when im 200px from top it locks navigation fixed top the top, it works with jQuery but not without and been trying for hours to get it to work, any help would be kindly recieve thanks. I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?
I'm not a JS programmer, I stumble around. I have a web page that uses: d = document.createElement("script"); d.type = "text/javascript"; d.src = "/var/www/html/UpDist.php"; return (document.body.appendChild(d)); <-- what I want to do UpDist.php returns a value that I need to continue and I can't get the above code to work - UpDist runs, the return value doesn't. Thanks Chuck Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array. Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help. ORIGINSlide.js Code: /*******************************************
* *
* ORIGIN Background Image SlideShow *
* Build 1.090.350.09 *
* *
* @Author: CMBSystems (Chris Bearcroft) *
* @Copyright: CMBSystems *
* @Created: 11/6/2010,1:24 AM (GMT) *
* *
*******************************************/
(function($){
$.ORIGIN = { // Starting The ORIGIN Class
Background: { // Starting The Background Sub-Class
Default: 0, // Default Array Key ID
Element: [], // Creating The Object For The Background Element
Slide: function() { // Starting The Slide Function
// Setting-Up The Element For Use In Update
$.ORIGIN.Background.Element = arguments[0];
// Updating The Document Body Background Image
setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
},
Preload: function(img) { // Starting The Preload Function
// Preload The Given Image Ready For Displaying
var loadIMG=new Image();
// Setting The Source For The Given Image
loadIMG.src=img;
},
Update: function() { // Starting The Update Function
if($.ORIGIN.Background.Element.Images !== undefined) {
if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
// Set Default Value As 0
$.ORIGIN.Background.Default = 0;
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
} else {
// Set Default Value As Current Array Key ID
$.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
// Preload Next Image
$.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
}
// Set Document Body Background As The New Image
document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
}
}
}
};
})(window);
Hoe to use:- Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
"Timer":5000,
"Images": [
"images/1.jpg", // !IMPORTANT - Same image as the default background image.
"images/2.jpg",
"images/3.jpg"
]
});
</script>
</head>
<body>
</body>
</html>
If anyone can help me please do, Thank You DJCMBear ♫♫ Ok, so I'm working on a What-You-See-Is-What-You-Get editor, and it works flawlessly - with standards. I'm trying to work out bugs it has with IE, this one is particularly tricky: When the page loads, the editor should be inialized, and the inner HTML of the body of the iframe should set to specified text. This seems to work fine in standards-compliant browsers - Webkit, Firefox. But nothing is written to the body when when the page loads in IE, here's the gist of the code for reference: Code: function loadText(){
document.getElementById("edit").contentWindow.document.body.innerHTML = "predefined text";
}
window.onload = loadText;
The oddest part, is if I come from a new page to the editor in IE, the text doesn't appear. But when I refresh in IE, the text appears for a split second and disappears. Any help on this matter is greatly appreciated! Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? 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 runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>
<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>
</div>
</form>
</body>
</html>
Hey everyone, I'd like to know how to separate my body from the footer. Here is my code: [CODE] /* BODY */ html { background: url(http://website.com/wp-content/themes/portfolio/images/background.png) scroll; } body { text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 100%; background: url(http://website.com/wp-content/themes/portfolio/images/mainBG.png) repeat-y; margin-right: 137.2px; margin-left: 137.2px; margin-bottom: -500px; } a { text-decoration: none; } a:hover { text-decoration: none; } a:selected { font-weight: bold; color:#0066FF; } p { color: #000000; line-height: 20px; } h1 { float: left; } h2 { color: #bab8b8; font-size: 25px; } #container { width: 973px; margin: auto; text-align: left; } /* END BODY */ /* NAVIGATION */ #nav { background: url(http://website.com/wp-content/themes/portfolio/images/nav_bg.png) repeat-x; overflow: hidden; height: 93px; margin-right: 18.2px; margin-left: 1px; padding: 0 0 0 31px; } #nav li { float: right; line-height: 93px; padding-left: 20px; padding-right: 50px; } #nav li a { padding: 0 1em; color: #565354; text-transform: uppercase; font-size: 18px; list-style-type: none; } #nav li a.first { padding-left: 0; } ul, li { list-style-type: none; } /* END NAVIGATION */ /* SIDEBAR */ #sidebar { margin-right: 312px; padding-bottom: 100px; color: #231f20; } #sidebar h3 { color: #bab8b8; font-size: 25px; margin-right: 312px; padding-right: 20px; padding-left: 30px; position: relative; } #searchform { margin-right: 630px; padding-left: 45px; margin-top: -1300px; } #sidebar links_with_style { margin-right: 312px; } #sidebar wp_list_categories { margin-right: 300px; } #sidebar wp_get_archives { margin-right: 312px; padding-bottom: 100px; } /* END SIDEBAR */ /* MAIN CONTENT*/ #content { margin-left: 380px; margin-right: 150.2px; } /* END MAIN CONTENT*/ /* FOOTER*/ #credits { margin-top: 5px; padding-top: 650px; margin-right: 100px; margin-left: 312px; } /* END FOOTER*/ [CODE] When I try to move the footer down so its separate from the body it doesn't work. I know I set the image on the body tag instead of #main. #main doesn't seem to work for loading the mainBG.png. Any know how to fix this? hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>
and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Hello everyone. As lame as this may sound, I can't for the life of me get the document by the id. All looks fine to me, but I get the following error that just simply doesn't make sense. Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 15 Jan 2010 01:37:06 UTC Message: Object required Line: 7 Char: 4 Code: 0 Here's the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
function doSomething() {
var elem = document.getElementById('doFade');
alert(elem.src);
}
window.onload = doSomething();
</script>
</head>
<body>
<img src="/images/aero.jpg" id="doFade" width="300" height="200" />
</body>
</html>
Hey I'm having a problem with this line: Code: var val1 = document.sform.sel1.value; sform is the name of a form that the data is being put onto. Problem is I want to change that name to verifypage.php When I replace sform with the verifypage.php I believe (I have no clues on JS) that the . if the extension of verifypage.php is screwing the code up. It's a dynamic drop down list that I want to display the results on another page. Thanks! Hi all, I'm working on an internal site for my company and I have a snippet of code that works 100% fine indepentantly but when I try to use it inside a document.write I can't get it to work. I'm pretty sure it's down to the structure of it but I'm inexperienced with JS so I'm not sure how do correctly structure it. Here is the code I want inside of a document.write(): Code: <a href='javascript: void(0);' style="text-decoration:none; font-size:14px;" onclick="
document.getElementById('my_hidden_div_id_1').innerHTML = '<iframe src=\'{file:link}\' width=\'880\' height=\'500\'></iframe>'
$('#my_hidden_div_id_1').koverlay({title: '{file:filename}'});
$('.css_koverlay').css({'background-color':'#9c183a'});
;
">
Pop-Up</a>
Could anyone help me correctly insert it inside document.write() so that it outputs without errors? Thanks! Code: onload=function() {progress1();}
var repeat=0;
function progress1() {
document.getElementById('clib').style.display="inline";
if (repeat<9) {
repeat=repeat+1;
setTimeout('progress1()',1000);
old = document.getElementById('cliba').innerHML;
document.getElementById('cliba').innerHML=old+'.';
}
else {
progress2();
}
}
var repeata=0;
function progress2() {
document.getElementById('wlib').style.display="inline";
if (repeata<23) {
repeata=repeata+1;
setTimeout('progress2()',1000);
old = document.getElementById('wliba').innerHML;
document.getElementById('wliba').innerHML=old+'.';
}
else {
progress3();
}
}
var repeatb=0;
function progress3() {
document.getElementById('dlib').style.display="inline";
if (repeatb<17) {
repeatb=repeatb+1;
setTimeout('progress3()',1000);
old = document.getElementById('dliba').innerHML;
document.getElementById('dliba').innerHML=old+'.';
}
else {
progress4();
}
}
var repeatc=0;
function progress4() {
document.getElementById('slib').style.display="inline";
if (repeatc<4) {
repeatc=repeatc+1;
setTimeout('progress4()',1000);
old = document.getElementById('sliba').innerHML;
document.getElementById('sliba').innerHML=old+'.';
}
else {
progress5();
}
}
var repeatd=0;
function progress5() {
document.getElementById('vlib').style.display="inline";
if (repeatd<17) {
repeatd=repeatd+1;
setTimeout('progress5()',1000);
old = document.getElementById('vliba').innerHML;
document.getElementById('vliba').innerHML=old+'.';
}
else {
progress6();
}
}
var repeate=0;
function progress6() {
document.getElementById('xlib').style.display="inline";
if (repeate<33) {
repeate=repeate+1;
setTimeout('progress6()',1000);
old = document.getElementById('xliba').innerHML;
document.getElementById('xliba').innerHML=old+'.';
}
else {
pyws();
}
}
var repeatf=0;
function pyws() {
document.getElementById('pyws').style.display="inline";
if (repeatf<7) {
repeatf=repeat+1;
setTimeout('pyws()',1000);
old = document.getElementById('pywsa').innerHML;
document.getElementById('pywsa').innerHML=old+'.';
}
}
HI.....idk why it is not working......when I load site, it will start counting, but dots after that .lib files.....look: http://ikoos.tk/load_os/ ......if you don't know what I mean....try to send me a PM. Thank you. document.write("<table><tr><td><a href='#' onMouseOver='MM_swapImage('changeMe','','images/calNum/calNum4g.jpg',1);'><img id='changeMe' name='changeMe' src='images/calNum/calNum1.jpg' border='0'/></a></td></tr></table>"); basically the one thing I am know is a problem or at least where the problem starts is when the ","(comma) is added in the parathesis for the params of MM_swapImage. Whats the correct way to write those commas? |
|||||||