JavaScript - Document.body Background Image Fading?

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?

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,

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!

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!

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

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);
}

Alrighty so here's what I have.
Live example:
http://www.thestrikeforum.com/ex/

It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript).

There are 5 images in the folder rotateimage which also has the php script getimages.php in it.

Currently only the first image fades in however I want all the images to fade in as the first one does.

Codes:

Php script that gets all the images for the array:
PHP Code:
<?

//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");



//This function gets the file names of all images in the current directory

//and ouputs them as a JavaScript array

function returnimages($dirname=".") {

$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions

$files = array();

$curimage=0;

if($handle = opendir($dirname)) {

while(false !== ($file = readdir($handle))){

if(eregi($pattern, $file)){ //if this file is a valid image

//Output it as a JavaScript array element

echo 'galleryarray['.$curimage.']="'.$file .'";';

$curimage++;

}

}



closedir($handle);

}

return($files);

}



echo 'var galleryarray=new Array();'; //Define array in JavaScript

returnimages() //Output the array elements containing the image file names

?>



Main html page with the javascript:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}



function initImage() {

  imageId = 'slideshow';

  image = document.getElementById(imageId);

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(imageId,0);

}



function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function fadeIn(objId,opacity) {

  if (document.getElementById) {

    obj = document.getElementById(objId);

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

    }

  }

}



window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code:




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}






window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.

Code:

 $(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});
</script>

I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.

Code:

.fadein { 
	  position:relative;
	  width:100%;
	  height:300px;
	  background-color:#000; 
	  overflow:hidden
}

.fadein img { 
	  position:relative;
	  left:300px;
	  width:auto;
	  text-align:center;
	  top:0px;
}

jonathaneiger.com

Hi,

is it possible to have a different background image on IE to firefox, I am doing my background image as shown below:

Code:

<body style="background-image: url(unbranded_bg.png);">

however I want script that says if IE, show unbranded_bg2.png and if firefox show unbranded_bg.png.

Many Thanks,
Simon

Hi Guys, I have a little question...

I know that adding
Code:

onclick="document.body.style.backgroundColor='#F3B90C';

to a div will change the body background colour to the above colour..

But what I was wondering was this..

Is it possible, instead of adding the code to the actaul div itself to pass the function like this...
Code:

<script type="text/javascript"> 
    $("Object").click(function(){ 
    document.body.style.backgroundColor = "#000000"; 
}); 
</script>

Any help/info is appreciated


Kind regards,
paffley

Hi,

I'm using window.print() to print a document.

This is the coding :

<th colspan="2" align="right"><a href="JavaScript:window.print();" onclick="return verify()"><img src="image/image.gif" width="25" height="20" /></a></th>

How can i print the document without printing together the image?

Or is there any other way that you guys know?

Thanks

Filename: front.htm
Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js,
styles.css
-->
<title>The Ridgewood Herald Tribune</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script src="random.js" type="text/javascript"></script>

<script src="ads.js" type="text/javascript"></script>
</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section">Main</p>
<p class="linksub">
<a href="#">Home</a><br />
<a href="#">Subscriptions</a><br />
<a href="#">Contact Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section">News</p>
<p class="linksub">
<a href="#">Local</a><br />
<a href="#">National</a><br />
<a href="#">International</a><br />
</p>

<p class="section">Sports</p>
<p class="linksub">
<a href="#">Baseball</a><br />
<a href="#">Basketball</a><br />
<a href="#">Football</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey</a><br />
<a href="#">Miscellaneous</a><br />
</p>

<p class="section">Opinion</p>
<p class="linksub">
<a href="#">Editorials</a><br />
<a href="#">Columnists</a><br />
<a href="#">Letters</a><br />
</p>

<p class="section">Classifieds</p>
<p class="linksub">
<a href="#">Employment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Personals</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted</a><br />
</p>

<p class="section">Other</p>
<p class="linksub">
<a href="#">Business</a><br />
<a href="#">Weather</a><br />
<a href="#">Entertainment</a>
</p>
</div>

<div id="main">
<div id="ads">
<script type="text/javascript">
/*
generate a random integer from 1 to 5
*/
var rNumber = randInt(5);

/*
description of the random ad
*/
var rAd = adDescription(rNumber);

/*
URL of the random ad
*/
var rLink = adLink(rNumber);

document.write('<a href="'+rLink+'">');
document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />);
document.write(adLink);
document.write("</a>");
</script>

</div>

<div id="request"><a href="#">Contact us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in New Jersey, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b> &nbsp;°&nbsp; 10010 Atwood Ave.
&nbsp;°&nbsp; Ridgewood, NJ &nbsp; &nbsp; 07451<br />
Phone: (201)555-1101 &nbsp;°&nbsp; Fax: (201)555-1102
</address>
</div>

</body>
</html>