JavaScript - Set Multiple Div Height By Container

Hey guys. I've been trying to figure this out now for the past 9 hours and I have no idea what I'm doing...lol

Ok, I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar.

Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe.

http://www.mediafire.com/?zqzym4iniyd

Thanks so much for your help!

Hi all

Ive basically 3 php scripts:

-one that writes an xml file from a directory of image files
-one that creates a thumbnail from a jpeg file resizes it and puts a little drop shadow on the thumbnail
-one that reads the xml file and outputs the html code

so all is good a little old school, but it works, I get a page of thumbnails in whatever form I want with links.
Ive attached a lightbox script I found to open the thumbnails and thats ok.

What I would like to do is target the images to a container inside a div tag using jquery, maybe even fade the image in something fancy. but Id be happy with the basics. Just click on the thumbnail show it in the adjacent container. (dont have a container yet thats what i need some help with with)

I'm doing my best going through various tutorials and the chm file learning as I go
here is the test page that outputs the thumbnails:
http://www.eagleview.ca/newsite/cont...om=0&pageto=12

any help is appreciated
william

Greetings,

I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious.

I would like the display an image within a 100 x 100 pixel container.

If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container.

I want to avoid pixelation of the images as much as possible.

All images are external and not on the local server so I only have an image URL.

I would like to hide all images until they are resized appropriately.

Does anybody know of a piece of javascript code that can do something similar to this?

Sincerely,
Travis Walters

Hola,

I have a problem where I have a number of random set of elements that have a fixed rule for class name. I want to move them to a container element according to this class name.

So for example the site generates
Code:

<p class="dog-1"></p>
<p class="dog-2"></p>
<p class="cat-1"></p>
<p class="dog-3"></p>

My output would be ideally
Code:

<div class="dog">
   <p class="dog-1"></p>
   <p class="dog-2"></p>
   <p class="dog-3"></p>
</div>

<div class="cat">
   <p class="cat-1"></p>
</div>

When searching for a solution, all I could find was simple ordering of elements according to class...
Thanks

I am doing a project and I have a problem. I have retrieved data from a json file using ajax and the xmlhttprequest, but I am not able to put the content I retrieve into the dojo content pane. The content pane is inside a border container.

I have tried the following, but it does not work. The HTMLPage4.html has the json data inside.
please help me really urgent to me!!!!!!!as soon as possible

Code:

function getInfoContent(graphic) 
{
function ajaxRequests() 
{
var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i = 0; i < activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i])
}
catch (e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
 
var mygetrequests = new ajaxRequests()
mygetrequests.onreadystatechange = function() {
if (mygetrequests.readyState == 4) {
if (mygetrequests.status == 200 || window.location.href.indexOf("http") == -1) {
var bookss = eval("(" + mygetrequests.responseText + ")") //retrieve result as an JavaScript object
var rssent = bookss.infos.info
for (var i = 0; i < rssent.length; i++) {
 
// alert(mygetrequests.responseText);
var placeImg = ""
var txt = ""
// placeImg += rssent[i].descImg
txt += rssent[i].desc
var shorttxt = ""
shorttxt += txt.substring(0, 30);
var bc = new dijit.layout.BorderContainer({ style: "font-size: 11pt; height: 574px; width:739px; border:0px;" });
var c1 = new dijit.layout.ContentPane({
 
region: "top",
style: "height: 11.5%; width: 100%; color: black; background-color: transparent; border:0px;",
content: "<table><div id = \"mydiv\">" + shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();'><u> More...</u></a></div></td></table>"
});
bc.addChild(c1);
}
 
}
else {
alert("An error has occured making the request")
}
}
return bc.domNode;
}
mygetrequests.open("GET", "HTMLPage4.htm", true)
mygetrequests.send(null)
}

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

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)

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?

I just placed this div named iframe_container in a table cell. There's an iframe and another div inside of it and when I went to fine tune the alignment I discovered I could change the width of the div but not the height
I can set it to 200 or 1000, it doesn't make the slightest difference. It seems to be clinging to the outside of the iframe. I can make it bigger by inserting breaks after the iframe but then the compass_rose div loses its absolute position for some reason

I searched the page for height tags that might be interfering with this but I've turned up squat. I took the height specs off the table but still no effect. Can anyone spot the problem?

<td style="width: 800px; height: 700px" valign="top" class="style3" align="left">
<div id="iframe_container" style="width:1000px; height=700; position: relative; overflow-x:auto; overflow-y:hidden">

<div id="compass_rose" style="top: 5px; left: 1200px; position: absolute; z-index: 2; visibility:visible;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div>

<iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe>

</div>

</td>
</tr>
</table>

I'm trying to make height of my leftNav div the same height as the mainContent div. currently I have
Code:

jQ(document).ready(function() {
	//even the left bar and the main Content
	jQ('#leftNav').height( jQ('#mainContent').innerHeight() );
});

This only works on some pages, and not on others. for example
it works here http://nminvestigates.townsendwebdd.com/index.php

but not here http://nminvestigates.townsendwebdd...._prepared2.php

Help please

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

Hello...

Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div.

I'm new to Javascript, but am learning it.

Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser.

Here's the code :
Code:

<script language="javascript">

var divh = document.getElementById('top').style.pixelHeight;

</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>

this gives me

undefined

in my browser

What am I doing wrong??

Thanks
Kevin

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