JavaScript - Div Height Problem

hi guys.. i have a problem..
first i have a about_us.php page.. which inside the about_us page i include right banner page.. using php include..

and this right banner page height must be the same height as the about_us page..
so i need using js to get the actually about_us page height and send to right_banner page so i can process it..

my logic are get the div height from about_us page.. send it to right_banner page.. and using php to process it,so the right banner height can be similar to about_us page when about_us page open by user..

about_us.php i using div input all the stuff
Code:

<div class="mainarticel">text goes here
</div>

and mainarticle css i put in outside css.. called style.css
nb:mainarticle height i using auto;

and in right_banner page i using
Code:

function getHeight (id) {
var gh = document.getElementById(id).offsetHeight;
alert (gh);}

but this cannot get the div from another file.. so how can i get the div height from another file?

This works:


Code:

<div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>

<a href="#" onclick="getHght('exp');">Expand</a> 
<a href="#" onclick="getHght('con');">Contract</a> 

<script type="text/javascript"> 
<!--

function getHght(act){ 
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height  = 300 ;
} else if (act == "con"){ 
doc.style.height  = 100 ;
}
}

//-->
</script>

This is exhibits the desired functionality, but it doesn't work:


Code:

<div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>

<a href="#" onclick="getHght('exp');">Expand</a> 
<a href="#" onclick="getHght('con');">Contract</a> 

<script type="text/javascript"> 
<!--

function getHght(act){ 
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height  += 30 ;
} else if (act == "con"){ 
doc.style.height  -= 30 ;
}
}

//-->
</script>

IE give an "invalid argument" error. No error in FF.

I had the same [failed] result using .getAttribute(), and .setAttribute(). How should I approach this?



-james

Can DIV located in the MasterPage be resized depending on the screen resolution?

<tr style="vertical-align: top;"><td>
<div id="mainArea">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />
</div></td></tr>

I've tried unsuccessfully -
var height = screen.height;
var area1 = document.getElementById('ctl00_mainArea');
if (height == 1024) {
area1.setAttribute("height", "700px");
}
else if (height == 864) {
area1.setAttribute("height", "540px");
}

Also tried area1.style.height = 700 + "px"; (no luck as well)

Hey guys, so i have a comment section.
And what i want to do is if the height of the comment box is larger then lets say 100px.
I want to set the height of the comment box to 50px and then display a "read more" button.

And this read more button would toggle and allow the height to be "auto" and not set to 50px.

so my html would look like this

Code:

<div class="comment-section">
<div class="comment"><p>This is where text would go. </p></div>
<div class="read-more">Read More</div>
</div>

I have the class "read-more" set to "display:none"

How would i do this?

This is what i have / was trying and have been unsuccessful

Code:

<script type="text/javascript">
  $(function(if ($".comment".style.height > 100px;){
     {
      $".comment".style.height = 50px;
	  $".read-more".style.display = block; 

    }
  });
</script>

It appears Lightbox has a bug in IE when the screen height exceeds 65,505 pixels.

I have created two test pages for you to see. One that shows the bug and another that shows it working. The problem seems to be ONLY with Internet Explorer (of any version).

In the following test htm pages click the "Click Here" link at the top left corner. You will see a lightbox pop up on screen. The issue is related to the opacity level. When the screen height is <= 65,505 pixels the opacity works fine for IE. But if the height >=65,506 it fails. It is not an IE bug because i tried using filter: alpha(opacity) and it works fine. It seems to be a lightbox bug.

Test 1: Opacity Works because Height of Screen is 65,505 pixels: http://fatcatdaily.com/test-works.htm
Test 2: Opacity Fails because Height of Screen is 65,506 pixels: http://fatcatdaily.com/test-fail.htm

NOTE: You MUST be using Internet Explorer to see the BUG

Hello guys !

I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document :

Code:

<script type="text/javascript">

aImg = new Image();

aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;

document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>

While the image is displayed, the value written for the height and width is "0".
This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7.

Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on

Any help would be greatly apreciated, thanks !

I am struggling to find a solution that enables me to have a div that is a certain percentage height of the window and then when the user is using a different resolution, it remains at that percentage of the screen height - not going off of the bottom as I have a fixed percentage no scroll full background image.

I have sorted it for width but can't get it to work for height. any ideas? lol

Bee
x

Hi Folks,

Hope someone can help. I want to do this with js and not with any html/css tables, image fills or whatever other trick, but I don't know how...

Say I have multiple DIV containers below each other, which contain multiple DIV boxes floating next to each other. None of the DIV elements have a fixed height:

Code:

<div id="container1">

 <div id="box1">some text</div>
 <div id="box2">some double more text</div>
 <div id="box3">some other text</div>

</div>

<div id="container2">

 <div id="box4">some double more text</div>
 <div id="box5">some more text</div>
 <div id="box6">some other text</div>

</div>

I want for each container (separately) to have the contained box divs to fit the biggest one in height.

For example, in container1, if box2 contains more text than the others, I want box1 and box3 height to fit box2. And in container2, if box4 has more text than the others, I want box5 and box6 height to fit box4, etc.

In my dreamworld, the solution would be flexible and fully automated, which means, it would look for all container divs of class x or Id x and apply the same rule to all child divs.

Hope it's clear enough ;o)

I have heard of jquery "equalheights" plugin but I don't think it can do that ? or then I misunderstood something. Could I be using some "get element by class" function and then apply a style.height to the divs?

TIA for any suggestion

i want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically.
thank you!

Hi

My html document contain many images which has the attribute src of img tag as the flowing :

PHP Code:
http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&amp;y=83&amp;q=85&amp;sig=Tua1ukyUEVKTPSsz7xGPsg-- 


All those images has the common source folder http://images.mysite.com/a/p
This is an example :




PHP Code:
<img
src = "http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&amp;y=83&amp;q=85&amp;sig=Tua1ukyUEVKTPSsz7xGPsg--"
width = "105"
height = "73"

> 


I tried during many days to find the solution using RegExp but I didn't arrives. What I want to do is


I - change for all image from the seem folder the src attribute to match the exact url of the image without special characters, for this example :

PHP Code:
http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&amp;y=83&amp;q=85&amp;sig=Tua1ukyUEVKTPSsz7xGPsg-- 


Became :

PHP Code:
http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg 


II - Control the width and height of the image by changing its height and width attributes resp. from two javascript variables :

PHP Code:
var v_width = 320 // Just for example

var v_height = 250 // Just for example 



This is an example of try didn't work for me, for the first issue :

PHP Code:
var element = document.getElementsByTagName("img");
    for(var i=0;i<element.length;) {
    
    var myString = new String();
    
    var myRegExp = new RegExp("http:\/\/d\.images\.mysite\.com\/a\/p[^\?]*(jpg|png|gif)","i");
    var myRegExp0 = new RegExp("\?.*","i");
    myString = element[i].getAttribute("src");
    
    if(myRegExp.test(myString))
        {
            var newString = myString.replace(myRegExp0,"");    
            element[i].setAttribute("src",newString);
            }
    
    } 


Help me please

Think you

Hi there,

I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window.



The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height.

(1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript.

If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space.

The code i have currently to set the iframe height is:

Code:

	<script type="text/javascript">
	
	function setIframeHeight(iframeName) {
	  var iframeWin = window.frames[iframeName];
	  var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
	  if ( iframeEl && iframeWin ) {
	  iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
	  //var docHt = getDocHeight(iframeWin.document);
	  // need to add to height to be sure it will all show
	  iframeEl.style.height = 100 + "%";
	  alert(document.height);
	  }
	}	
	</script>
	
</head>

<body onload="setIframeHeight('ifrm');">

So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely.

Is this possible? Any help or advice will be greatly appreciated!

Thanks in advance

Hi,

I'm trying to make a "sticky footer" that will stay at the bottom of the page and be about 2/3 of the page height. Then, when a button is clicked, the footer will slide down and be only about 1/3 the page height, collapsing the paragraphs on the footer and revealing the content the footer was covering.

My first try at this is to make 3 divs within the sticky footer, and make the middle div the collapsable/expandable div.

VERY hasty example, it will be a brown paper bag with art supplies inside.


Issue A: What is the best way to create the smooth collapse/expand effect on the middle div using javaScript or jQuery?

Issue B: All of the CSS based sticky footer fixes that I've found require the main div to have a bottom padding or margin of the footer's height. How can I fix this for the footer's two heights (with and without the middle section)? Is there a javaScript or jQuery way to do an expandable sticky footer?

Issue C: The sticky footer fix makes it so that the bottom footer doesn't cover the content above it, but I WANT it to cover the content in this case, is there a better way to do this? Absolute positioning the footer?

Html
Code:

<body>
<div id="whole">
<div id="push"></div>
</div>
<div id="top"></div>
<div id="hide"></div>
<div id="bottom"></div>
</body>

Css
Code:

*{margin:0}
html, body {height: 100%;}

#whole {
	background-color: #09F;
	min-height: 100%;
	height: auto;
	height: 100%;
	margin: 0 auto -150px;}
	
#push {min-height:150px; height:auto;}

#top {
  height: 50px;
  clear:both;
  background-color:yellow;}

#hide {
  min-height: 50px;
  height:200px;
  clear:both;
  background-color:green;}

#bottom {
  height: 50px;
  clear:both;
  background-color:red;}

Hi

I have embeded a video like this:
Code:

<div class="videoDiv" id="showDis">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1">  
	<param name="url" value="http://mysite/myvideo.wmv"">  
	<param name="src" value="http://mysite/myvideo.wmv"">  
	<param name="showcontrols" value="true">  
	<param name="autostart" value="true">  <!--[if !IE]>-->  
	<object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv"">    
		<param name="src" value="http://mysite/myvideo.wmv"">    
		<param name="autostart" value="true">    
		<param name="controller" value="true">  
	</object>  <!--<![endif]-->
</object>
</div>

I would like to retrieve the video's width and height (resolution), for example: 640x480

how can I do that via JavaScript?

this is what I tried:
Code:

var objPlayer = document.MediaPlayer1;

alert(objPlayer.offsetWidth);
alert(objPlayer.width);


alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);

nothing gives me the real value.

even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant

Hi,
well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me.
BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working.
I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution.

Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. Thank you ^_^

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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Pre-roll Example page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script>
    <style>
		.gamecontent				{width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;}
		.gamecontent .gamewrapper	{margin:0px auto 0px auto;}
		.gamecontent .game			{float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px}
		.gamecontent .ad			{display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px}
		.gamecontent .ad #progress	{width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;}
		.gamecontent .ad #pbar		{width:0px;height:10px;background-color:#CCC;}
		.gamecontent .ad #pskip		{text-align:center;}	
		.medrectangle				{width:300px;height:250px;border:none}
	</style>
</head>

<body>
<div class="gamecontent">
    <div class="gamewrapper" style="height:640px;width:640px;">
      <div class="game" id="gameframe"></div>
        <div id="adframe" class="ad">
            <div>Advertisement</div>
            <div id="plad"></div>
            <div id="progress"></div>
        </div>
        <noscript>	
            <div>
                 <!--Game embed code should be placed here here-->
            </div>
        </noscript>
 	</div>
</div>

<script type="text/javascript" language="javascript">
var af = 'adframe';
var gf = 'gameframe';
var gid = 'gameswf';
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>';

function skipad() {
	$('#plad').html('<div></div>');
	$('#'+af).hide();
	$('#'+gf).css('width','640px');
	$('#'+gf).css('height','640px');
}
$('#gameframe').preloadad(
	{  // calls the init method
	  swf	 	: 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
	  width  	: 640,
	  height 	: 640,
	  gameid	: gid,
	  gameframe : gf,
	  adframe 	: af,
	  adcode	: adinvoke,
	  pltime 	: 10000,
	  gametype	: 'swf',
	  base		:'http://games.balloontowerdefense.net/b/',
	  skiptxt	: 'Click here to show the game',
	  showad	:'1'
	});
</script>

</body>
</html>

in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. I don't know what did i miss or where did i go wrong?

I have embeded a video like this:
Code:

<div class="videoDiv" id="showDis">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1">  
	<param name="url" value="http://mysite/myvideo.wmv"">  
	<param name="src" value="http://mysite/myvideo.wmv"">  
	<param name="showcontrols" value="true">  
	<param name="autostart" value="true">  <!--[if !IE]>-->  
	<object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv"">    
		<param name="src" value="http://mysite/myvideo.wmv"">    
		<param name="autostart" value="true">    
		<param name="controller" value="true">  
	</object>  <!--<![endif]-->
</object>
</div>

I would like to retrieve the video's width and height (resolution), for example: 640x480

how can I do that via JavaScript?

this is what I tried:
Code:

var objPlayer = document.MediaPlayer1;

alert(objPlayer.offsetWidth);
alert(objPlayer.width);


alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);

nothing gives me the real value.

even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant